/* ══════════════════════════════════════════════════════════════════════
   La Senda Animada · scene + rig animation styles
   Phase 1: backdrop ambient motion + the three World mood overlays.
   Palette tokens mirror the illustrator brief :root.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bark:#3E2723; --gold:#C9A54E; --gold-bright:#E8C547; --cream:#FDF6E3;
  --forest:#2D5016; --forest-deep:#1A3A0A; --river:#1B4D6E; --night:#2C1654;
  --earth:#5C3317; --terracotta:#B7562A; --ochre:#C49A3C; --mountain:#5F7A8A;
  --turquoise:#1AA5A5; --indigo:#1A1A4E; --amber:#E8A824; --silver:#C0C0D0;
  --cosmic:#0D0D1A; --moss:#3ddc97;
}

/* ── stage frame ── */
.senda-stage{
  position:relative;
  width:100%;
  border:6px solid var(--bark);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(44,22,84,.35);
  background:#0b1f10;
}
.senda-stage svg{display:block; width:100%; height:auto;}

/* ── ambient backdrop motion (parallax + living detail) ── */
.senda-stage .layer-far{animation:senda-driftFar 26s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center;}
.senda-stage .layer-mid{animation:senda-driftMid 18s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center;}
@keyframes senda-driftFar{from{transform:translateX(0)}to{transform:translateX(-14px)}}
@keyframes senda-driftMid{from{transform:translateX(0)}to{transform:translateX(-26px)}}
.senda-stage .ray{animation:senda-rays 9s ease-in-out infinite alternate; transform-origin:top;}
.senda-stage .ray.r2{animation-delay:-4.5s;}
@keyframes senda-rays{from{opacity:.10}to{opacity:.32}}
.senda-stage .moss{animation:senda-moss 4s ease-in-out infinite alternate;}
@keyframes senda-moss{from{opacity:.25}to{opacity:.85}}
.senda-stage .shimmer{animation:senda-shimmer 7s linear infinite;}
@keyframes senda-shimmer{from{transform:translateX(-80px)}to{transform:translateX(900px)}}

/* respect reduced-motion: freeze ambient loops */
@media (prefers-reduced-motion:reduce){
  .senda-stage .layer-far,.senda-stage .layer-mid,.senda-stage .ray,
  .senda-stage .moss,.senda-stage .shimmer{animation:none;}
}

/* ══ THE THREE WORLD MOOD OVERLAYS ══
   Two levers per world so the SAME backdrop reads as a DIFFERENT world:
   (1) a CSS filter that recolours the backdrop art itself (hue/sat/bright),
   (2) a mood gradient laid on top. Bold on purpose — dial back if too much. */
.senda-stage > svg{transition:filter .6s ease;}
.senda-mood{
  position:absolute; inset:0; pointer-events:none; transition:opacity .6s ease;
}

/* ── Mundo de Abajo — lush green-gold jungle dawn, intimate, fireflies ── */
.senda-stage[data-mood="abajo"] > svg{ filter:saturate(1.2) brightness(1.03) contrast(1.03); }
.senda-stage[data-mood="abajo"] .senda-mood{
  mix-blend-mode:soft-light; opacity:.9;
  background:
    radial-gradient(ellipse at 65% 16%, rgba(232,197,71,.5) 0%, transparent 46%),
    radial-gradient(ellipse at 18% 92%, rgba(27,77,110,.5) 0%, transparent 55%),
    linear-gradient(180deg, rgba(44,22,84,.45) 0%, rgba(26,58,10,.15) 45%, rgba(11,31,16,.55) 100%);
}

/* ── Mundo del Medio — amber golden hour: warm, open, terracotta & ochre ── */
.senda-stage[data-mood="medio"] > svg{ filter:sepia(.55) saturate(1.7) hue-rotate(-24deg) brightness(1.14) contrast(1.04); }
.senda-stage[data-mood="medio"] .senda-mood{
  mix-blend-mode:overlay; opacity:.92;
  background:
    radial-gradient(ellipse at 74% 22%, rgba(232,168,36,.75) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 84%, rgba(183,86,42,.6) 0%, transparent 55%),
    linear-gradient(180deg, rgba(232,168,36,.4) 0%, rgba(196,154,60,.25) 45%, rgba(92,51,23,.55) 100%);
}

/* ── Mundo de Arriba — cosmic indigo twilight: dim night, luminous accents ── */
.senda-stage[data-mood="arriba"] > svg{ filter:saturate(.5) brightness(.46) contrast(1.18) hue-rotate(28deg); }
.senda-stage[data-mood="arriba"] .senda-mood{
  mix-blend-mode:normal; opacity:.9;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(232,168,36,.32) 0%, transparent 38%),
    radial-gradient(ellipse at 82% 66%, rgba(192,192,208,.3) 0%, transparent 44%),
    linear-gradient(180deg, rgba(26,26,78,.78) 0%, rgba(44,22,84,.6) 50%, rgba(13,13,26,.9) 100%);
}
/* Arriba adds a faint starfield via layered tiny dots */
.senda-stage[data-mood="arriba"] .senda-mood::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 14%, #E8C547 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 34%, #C0C0D0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 10%, #C0C0D0 50%, transparent 51%);
  animation:senda-twinkle 5s ease-in-out infinite alternate;
}
@keyframes senda-twinkle{from{opacity:.25}to{opacity:.7}}

/* ── DOM fireflies (over the svg; Mundo de Abajo signature) ── */
.senda-fly{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle,#fff8c9 0%, var(--gold-bright) 45%, transparent 70%);
  filter:drop-shadow(0 0 6px var(--gold-bright));
  animation:senda-flyMove linear infinite alternate, senda-flyGlow ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes senda-flyMove{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
@keyframes senda-flyGlow{from{opacity:.1}to{opacity:.95}}

/* ── dialogue box (word-by-word karaoke) — a BAND BELOW the scene, never over it ── */
.senda-subs{
  margin:12px auto 0; padding:16px 24px; min-height:64px;
  border:3px solid var(--bark); border-radius:14px;
  background:linear-gradient(#1c2612,#0b0f08);
  box-shadow:0 8px 24px rgba(44,22,84,.25), inset 0 0 0 2px rgba(201,165,78,.25);
  text-align:center; font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.15rem,3vw,1.6rem); color:var(--cream); letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.3em;
}
.senda-subs .w{opacity:.4; transition:opacity .12s;}
.senda-subs .w.said{opacity:1; color:var(--gold-bright);}

/* ── skip / replay controls ── */
.senda-skip{
  position:absolute; top:12px; right:12px; z-index:5;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.9rem;
  padding:8px 18px; border-radius:999px; cursor:pointer;
  border:2px solid var(--cream); background:rgba(11,15,8,.55); color:var(--cream);
  backdrop-filter:blur(3px); transition:.2s;
}
.senda-skip:hover{background:var(--gold); color:var(--bark); border-color:var(--gold);}

/* ── scene engine: actors, title card, tap-to-start, replay ── */
.senda-actor{position:absolute; bottom:3%; width:26%; transform:translateX(-50%); z-index:2; filter:brightness(1); transition:filter .3s ease;}
.senda-actor svg{width:100%; height:auto;}
.senda-actor.enter{animation:senda-enter .6s ease-out both;}
@keyframes senda-enter{from{transform:translateX(-50%) translateY(28px); opacity:0;} to{transform:translateX(-50%) translateY(0); opacity:1;}}
.senda-title{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(20,12,40,.35), rgba(11,15,8,.75)); opacity:0; transition:opacity .5s ease; text-align:center; padding:0 20px;}
.senda-title.show{opacity:1;}
.senda-title.fade{opacity:0;}
.senda-title .tc-num{font-family:'Cormorant Garamond',serif; color:var(--gold-bright); letter-spacing:.14em; text-transform:uppercase; font-size:.85rem;}
.senda-title .tc-name{font-family:'Cormorant Garamond',serif; color:var(--cream); font-size:clamp(1.3rem,4vw,2.1rem); line-height:1.15;}
.senda-tap{position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(11,15,8,.45); color:var(--cream); font-family:'Cormorant Garamond',serif; font-size:1.3rem; letter-spacing:.03em;}
.senda-replay{font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem; padding:9px 22px; border-radius:999px;
  border:2px solid var(--gold); background:var(--gold); color:var(--bark); cursor:pointer;}
.senda-replay:hover{background:var(--gold-bright);}

/* ══════════════════════════════════════════════════════════════════════
   RIG ANIMATION CONTRACT (class-based, shared by every character sprite)
   A sprite exposes these hooks so the engine can animate any cast member
   uniformly: .rig-breathe .rig-tail .rig-ear .rig-lids .rig-jaw .rig-eyes
   ══════════════════════════════════════════════════════════════════════ */
.rig-breathe{animation:rig-breathe 4.2s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center bottom;}
@keyframes rig-breathe{from{transform:scale(1)}to{transform:scale(1.015) translateY(-1.5px)}}
.rig-tail{animation:rig-tail 3.4s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:bottom left;}
@keyframes rig-tail{from{transform:rotate(-6deg)}to{transform:rotate(10deg)}}
.rig-ear{transform-box:fill-box; transform-origin:center bottom;}
.rig-ear.twitch{animation:rig-twitch .38s ease-in-out;}
@keyframes rig-twitch{50%{transform:rotate(-14deg)}}
/* blink: lids scale down to 0 (open) unless .closed */
.rig-lids rect,.rig-lids ellipse,.rig-lids path{transform-box:fill-box; transform-origin:center; transform:scaleY(0); transition:transform .09s;}
.rig-lids.closed rect,.rig-lids.closed ellipse,.rig-lids.closed path{transform:scaleY(1);}
/* pupil drift (idle life in the eyes) */
.rig-eyes{animation:rig-eyedrift 6s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
@keyframes rig-eyedrift{0%,100%{transform:translateX(0)}30%{transform:translateX(1.6px)}60%{transform:translateX(-1.4px)}}
/* THREE mouth states (upgrade from the demo's binary flap) driven by data-mouth */
.rig-jaw{transform-box:fill-box; transform-origin:top center; transition:transform .07s ease-out;}
.rig-jaw[data-mouth="closed"]{transform:scaleY(.15);}
.rig-jaw[data-mouth="half"]{transform:scaleY(.55);}
.rig-jaw[data-mouth="open"]{transform:scaleY(1);}
/* kinetic idle for young/bouncy rigs (e.g. Río) */
.rig-bounce{animation:rig-bounce 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom;}
@keyframes rig-bounce{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){
  .rig-breathe,.rig-tail,.rig-eyes,.rig-bounce{animation:none;}
}
/* glowing constellation mark (Yaguará's spirit sign) */
.rig-constellation{animation:rig-const 3.2s ease-in-out infinite alternate;}
@keyframes rig-const{
  from{opacity:.45; filter:drop-shadow(0 0 1px var(--gold-bright));}
  to{opacity:1; filter:drop-shadow(0 0 7px var(--gold-bright));}
}
/* ── emotional POSES (data-pose on the sprite root) — BOLDLY differentiated ── */
.rig-brow{opacity:0; transition:opacity .3s ease;}
.rig-smile{opacity:0; transition:opacity .3s ease;}
.rig-head{transition:transform .3s ease; transform-box:fill-box; transform-origin:center bottom;}
.rig-poseroot{transition:transform .3s ease; transform-box:fill-box; transform-origin:center bottom;}

/* FELIZ — ears up, eyes bright & wide, open smile, quick tail, bouncing lift */
svg[data-pose="happy"] .rig-poseroot{animation:rig-bounce 1.9s ease-in-out infinite;}
svg[data-pose="happy"] .rig-head{transform:rotate(-4deg) translateY(-2px);}
svg[data-pose="happy"] .rig-ear{transform:translateY(-6px) scale(1.12);}
svg[data-pose="happy"] .rig-eyes{filter:brightness(1.22) saturate(1.18);}
svg[data-pose="happy"] .rig-smile{opacity:.95;}
svg[data-pose="happy"] .rig-tail{animation-duration:1.5s;}

/* SERIA — squares up to the FRONT, ears pinned back, brow down, eyes narrowed, low */
.rig-pupils{transition:transform .3s ease; transform-box:fill-box;}
svg[data-pose="serious"] .rig-poseroot{transform:translateY(10px) scaleY(.965);}
svg[data-pose="serious"] .rig-head{transform:translateY(5px) translateX(-4px) rotate(0.5deg);}
svg[data-pose="serious"] .rig-pupils{transform:translate(-6px,2px);}   /* gaze to the viewer */
svg[data-pose="serious"] .rig-ear{transform:rotate(-30deg) translateY(5px) scaleY(.78);}
svg[data-pose="serious"] .rig-brow{opacity:.95;}
svg[data-pose="serious"] .rig-eyes{filter:brightness(.86) saturate(1.1);}
svg[data-pose="serious"] .rig-lids rect,
svg[data-pose="serious"] .rig-lids ellipse{transform:scaleY(.5);}
@media (prefers-reduced-motion:reduce){ svg[data-pose="happy"] .rig-poseroot{animation:none;} }