/* =========================================================================
   Jeeb Garden — couche d'animation fixée en bas de page
   Tout est confiné dans .jbg-root (position:fixed, pointer-events:none)
   afin de ne JAMAIS gêner le contenu ou les clics du site WordPress.
   ========================================================================= */

.jbg-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--jbg-root-h, 372px);
  z-index: var(--jbg-z, 99990);
  pointer-events: none;          /* le site reste cliquable */
  overflow: hidden;              /* on masque ce qui dépasse à gauche/droite */
  isolation: isolate;            /* confine le mélange du tramage à la couche */
  --jbg-soil-h: 0px;             /* SOL RETIRÉ : tout est collé au bas (bottom:0) */
  --jbg-char-h: 300px;
  --jbg-char-w: 350px;
  --jbg-sheet-left: none;        /* planche marche GAUCHE (5 images), posée par le JS */
  --jbg-sheet-right: none;       /* planche marche DROITE (5 images), posée par le JS */
  --jbg-frames: 5;
  --jbg-lum: 1;                   /* luminosité de la scène (1 = normal, 0 = noir) */
  font: 13px/1.4 ui-monospace, "Courier New", monospace;
}

/* ---- TRAMAGE / DITHERING (filtre rétro) --------------------------------
   Grille de points en multiply, confinée à la couche grâce à isolation.
   ▼ POUR ENLEVER le filtre rétro : supprimer ce bloc .jbg-root::after. ▼ */
.jbg-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,.9) 0.5px, transparent 0.7px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: .16;
  z-index: 50;
}

/* ---- BANDE DE SOL : SUPPRIMÉE --------------------------------------------
   Aucun sol n'est dessiné. Personnage, plantes et arbres reposent
   directement sur le bord inférieur de la page (bottom: 0). */

/* ---- PLANTES (images pixel-art) ----------------------------------------
   Structure : .jbg-plant (position) > .jbg-plant-flip (miroir) >
               .jbg-plant-grow (pousse/frémissement) > img
   Le miroir et la pousse sont sur deux éléments distincts : pas de conflit
   de transform. */
.jbg-plants { position: absolute; inset: 0; z-index: 8; }

/* la luminosité réglée par le fader assombrit la scène (perso + plantes + eau)
   jusqu'au noir, sans toucher au fader lui-même. */
.jbg-plants,
.jbg-char,
.jbg-drops {
  filter: brightness(var(--jbg-lum, 1));
}
.jbg-plant {
  position: absolute;
  bottom: 0;                 /* base de la plante / de l'arbre collée au bas */
  transform: translateX(-50%);
}
.jbg-plant-flip { display: block; }
.jbg-plant-flip.jbg-flip { transform: scaleX(-1); }
.jbg-plant-grow {
  display: block;
  transform-origin: 50% 100%;
}
.jbg-plant-img {
  display: block;
  width: 100%; height: 100%;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.10));
}
/* animation de pousse : jaillit du sol */
.jbg-plant.jbg-anim .jbg-plant-grow {
  animation: jbg-grow 1.25s cubic-bezier(.22,1.35,.34,1) both;
}
@keyframes jbg-grow {
  0%   { transform: translateY(6px) scaleY(0.02) scaleX(0.42); }
  55%  { transform: translateY(0)   scaleY(1.05) scaleX(0.97); }
  72%  { transform: scaleY(0.97) scaleX(1.02); }
  100% { transform: scaleY(1) scaleX(1); }
}
/* léger frémissement quand on (r)arrose */
.jbg-plant.jbg-watered .jbg-plant-grow { animation: jbg-wiggle .7s ease-in-out; }
@keyframes jbg-wiggle {
  0%,100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 60% { transform: rotate(1.6deg); }
}

/* ---- PERSONNAGE (deux planches de sprites : gauche & droite) ------------
   Le personnage étant asymétrique (arrosoir + sac à dos d'un seul côté), on
   n'utilise PAS de miroir : on change carrément de planche selon le sens. */
.jbg-char {
  position: absolute;
  /* les sprites ont ~1.1% de vide transparent sous les pieds : on le compense
     pour que le personnage soit vraiment collé au bas de la page. */
  bottom: calc(var(--jbg-char-h) * -0.0114);
  left: 0;
  z-index: 20;
  width: var(--jbg-char-w);
  height: var(--jbg-char-h);
  will-change: transform;
}
.jbg-char__face { width: 100%; height: 100%; }
.jbg-char__sprite {
  width: 100%; height: 100%;
  background-image: var(--jbg-sheet-left);          /* base = vers la gauche */
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--jbg-char-w) * var(--jbg-frames)) var(--jbg-char-h);
  image-rendering: -webkit-optimize-contrast;
}
.jbg-char.face-right .jbg-char__sprite { background-image: var(--jbg-sheet-right); }

/* marche : défilement image par image (vrai sprite, 5 images) */
.jbg-char.is-walking .jbg-char__sprite {
  animation: jbg-steps var(--jbg-walk-dur, .66s) steps(5) infinite;
}
@keyframes jbg-steps {
  from { background-position-x: 0; }
  to   { background-position-x: calc(var(--jbg-char-w) * -5); }
}
/* arrosage : image fixe (3e image, bras tendu), aucun mouvement de corps */
.jbg-char.is-watering .jbg-char__sprite {
  animation: none;
  background-position-x: calc(var(--jbg-char-w) * -2);
}
/* au repos (pas de scroll) : 1re image figée, immobile */
.jbg-char__bobwrap { width:100%; height:100%; }

/* ---- GOUTTES D'EAU ------------------------------------------------------ */
.jbg-drops { position: absolute; inset: 0; z-index: 15; }
.jbg-drop {
  position: absolute;
  width: 3px; height: 9px;
  background: #1c2a33;
  border-radius: 60% 60% 50% 50%;
  opacity: .8;
  animation: jbg-drop var(--d, .7s) linear forwards;
}
@keyframes jbg-drop {
  0%   { transform: translateY(0) scaleY(.6); opacity: 0; }
  15%  { opacity: .8; }
  100% { transform: translateY(var(--fall, 90px)) scaleY(1.2); opacity: 0; }
}
.jbg-splash {
  position: absolute;
  width: 14px; height: 5px;
  border: 2px solid #1c2a33;
  border-top: none;
  border-radius: 0 0 60% 60%;
  opacity: 0;
  animation: jbg-splash .5s ease-out forwards;
}
@keyframes jbg-splash {
  0%   { transform: scale(.2); opacity: .8; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* ---- POUSSIÈRE de marche ------------------------------------------------ */
.jbg-dust {
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid #161616;
  border-radius: 50%;
  opacity: 0;
  z-index: 14;
  animation: jbg-dust .55s ease-out forwards;
}
@keyframes jbg-dust {
  0%   { transform: scale(.2) translateY(0); opacity: .5; }
  100% { transform: scale(1.3) translateY(-6px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .jbg-char.is-walking .jbg-char__sprite { animation: none; }
  .jbg-plant.jbg-anim .jbg-plant-grow { animation-duration: .01s; }
}

/* ---- FADER de luminosité (à gauche de l'animation) -----------------------
   Curseur vertical : haut = pleine lumière (état actuel), bas = noir. */
.jbg-fader {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 14px;
  height: clamp(36px, calc(50% - 12px), 95px);
  z-index: 60;                   /* au-dessus du tramage : non assombri */
  pointer-events: auto;          /* seul élément interactif de la couche */
  display: flex;
  touch-action: none;
}
.jbg-fader__track {
  position: relative;
  flex: 1;
  cursor: ns-resize;
  background: transparent;
}
/* la tige : trait vertical fin et blanc, centré */
.jbg-fader__track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: #ffffff;
}
/* pas de portion colorée : forme épurée trait + bloc */
.jbg-fader__fill { display: none; }
/* curseur : bloc rectangulaire blanc plein */
.jbg-fader__thumb {
  position: absolute;
  left: 50%;
  top: 0;
  width: 13px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  cursor: ns-resize;
}