/* assets/css/mascot.css
 * Big Foot's rig. Original poses (idle/wave/happy/sleepy) carried over from
 * the approved demo, plus: fistpump, spin, nod, curious. Scene placement
 * and the speech bubble live here too. Pose = one class on #bf-mascot.
 * Fur palette vars: --fur, --fur-deep, --belly, --face, --blush (fallbacks
 * baked into the SVG attributes).
 */

/* ── Placement: standing on the scene panel's ground lip ── */
.mascot-slot{
  position:absolute;
  left:50%;               /* recentered. the scene no longer prints a greeting to clear */
  bottom: 6px;            /* raised from -24px so the mascot stands IN the scene, on the grass strip, not dangling below it */
  transform:translateX(-50%);
  /* responsively bigger on wider scenes, but height-capped so the bubble
     always has room above. SVG aspect ratio is 220/250 = 0.88, so a width
     cap of ~132px yields a height of ~150px = 60% of the 250px max scene. */
  /* v4 viewBox 600×734 (aspect ~0.817). Width-cap keeps total height under
     ~160px so the speech bubble retains sky room above. */
  width:clamp(116px, 15vw, 140px);
  z-index:4;
  pointer-events:none;
}
.mascot-slot.tappable{pointer-events:auto}
.bf{width:100%;height:auto;display:block}

/* ── Prop slots — three named positions around the mascot.
   sky    = floating above the bubble (balloon, snow, fireflies)
   beside = on the ground next to him (small companion, coffee mug)
   hand   = held in his right hand (footprint stamp, leaf) */
.bf-prop{
  position:absolute;
  display:none;
  pointer-events:none;
  width:24px; height:24px;
}
.bf-prop.has-content{display:block}
.bf-prop-sky    { top:-4px;  left:50%;  transform:translateX(-50%); }
.bf-prop-beside { bottom:8px;  right:-22px; }
.bf-prop-hand   { bottom:38%;  right:-6px;  transform:rotate(8deg); }
.bf-prop svg, .bf-prop img { width:100%; height:100%; display:block; }
@media (prefers-reduced-motion: reduce){
  .bf-prop { transition: none; }
}

/* ── Speech bubble: floats in the sky above him ──────── */
.bf-bubble{
  position:absolute;
  bottom:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) scale(.9);
  min-width:170px;
  /* Wide enough to read a full short sentence without wrapping to a sliver,
     but capped so it never runs off-screen or crowds the scene above. Long
     text scrolls inside; the rig never grows to push the q-panel down. */
  max-width:min(300px, 76vw);
  max-height:24vh;
  overflow:auto;
  width:max-content;
  /* Hardcoded colors — the bubble lives inside .panel-scene, which rewrites
     --ink to cream at phase-dusk/phase-night so the clock/weather reads on a
     dark sky. The bubble's cream card bg + cream --ink = invisible text.
     Lock dark-on-cream so phase/weather palette swaps can't kill contrast. */
  background:#fbf8ef;
  border:2px solid #2f281f;
  border-radius:18px 20px 17px 21px;
  padding:10px 14px;
  font-family:var(--note,'Kalam',cursive);
  font-size:16px;
  line-height:1.28;
  color:#2a241c;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  /* Sit above the clock row. z-index:5 matches the mascot slot. */
  z-index:5;
}
/* Speech-bubble tail: two stacked triangles — the outer (border colored)
   sits one pixel below the inner (card colored) so the seam reads as a
   single black outline that wraps cleanly around the carat. */
.bf-bubble::before,
.bf-bubble::after{
  content:'';
  position:absolute;
  left:50%;
  width:0;height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  pointer-events:none;
}
.bf-bubble::before{           /* outline */
  top:100%;
  transform:translateX(-50%);
  border-top:14px solid var(--line,#2f281f);
}
.bf-bubble::after{            /* fill, slightly smaller and pulled up 2px */
  top:100%;
  transform:translate(-50%,-3px);
  border-left-width:11px;
  border-right-width:11px;
  border-top:12px solid var(--card,#fbf8ef);
}
.bf-bubble.show{opacity:1;transform:translateX(-50%) scale(1)}

/* ── Per-word "cascade scale" reveal ──────────────────────────────────
   Mascot.js wraps each word of a say() call in <span class="bf-word">
   with a staggered animation-delay. Each word fades + pops in over 220ms
   with a tiny overshoot. Tim picked this (variant 6 of the mockup) over
   the per-character typewriter — calmer, less noisy, easier to read. */
.bf-word {
  display: inline-block;
  opacity: 0;
  transform: scale(0.85);
  animation: bf-word-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  /* will-change kept off intentionally — only ~10 words per line, no
     layer-promotion needed and the GPU isn't where the win is here. */
}
@keyframes bf-word-in {
  to { opacity: 1; transform: scale(1); }
}

/* ── Talking mouth: smile ↔ open while the bubble is shown ── */
/* v4 viewBox 600×734: mouth ~ (300, 270) */
.bf .bf-mascot-mouth{transform-origin:300px 270px}  /* view-box origin set in the rig block below */
.bf .bf-mouth-open{transform-origin:300px 270px;transform:scaleY(.2)}
.bf.talking .bf-mascot-mouth{animation:bf-mouth-pulse 0.45s ease-in-out infinite}
.bf.talking .bf-mouth-closed{animation:bf-mouth-close 0.45s ease-in-out infinite}
.bf.talking .bf-mouth-open{animation:bf-mouth-open 0.45s ease-in-out infinite}
@keyframes bf-mouth-pulse{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.55)}
}
@keyframes bf-mouth-close{
  0%,100%{opacity:1}
  35%,65%{opacity:0}
}
@keyframes bf-mouth-open{
  0%,100%{opacity:0;transform:scaleY(.2)}
  35%,65%{opacity:1;transform:scaleY(1)}
}

/* iOS WebKit defaults SVG transform-box to the element's own bbox, so px
   transform-origins (authored in viewBox space) pivot from the wrong point —
   the wave then flung the arm off and a mis-pivoted ghost showed over the
   scene. Force view-box so every rig origin resolves in 600×734 space. */
.bf .bf-all,.bf .bf-breathe,
.bf .bf-arm-r,.bf .bf-arm-l,
.bf .bf-mascot-arm-right,.bf .bf-mascot-arm-left,
.bf .bf-eyes,.bf .bf-mascot-eye-left,.bf .bf-mascot-eye-right,
.bf .bf-mascot-mouth{transform-box:view-box}

/* ── Always-on: breathe + blink ──────────────────────── */
/* v4 viewBox 600×734: ground y≈720, body center x=300 */
.bf .bf-breathe{transform-origin:300px 720px;animation:bf-breathe 4.2s ease-in-out infinite}
@keyframes bf-breathe{
  0%,100%{transform:scaleY(1) translateY(0)}
  50%{transform:scaleY(1.055) translateY(-5px)}
}
/* eye groups blink independently. Pivot at each eye's center y~190. */
.bf .bf-mascot-eye-left{transform-origin:245px 190px;animation:bf-blink 5.6s infinite}
.bf .bf-mascot-eye-right{transform-origin:355px 190px;animation:bf-blink 5.6s infinite}
/* legacy hook kept for compat — collective eye container */
.bf .bf-eyes{transform-origin:300px 190px;animation:bf-blink 5.6s infinite}
@keyframes bf-blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.07)}97%{transform:scaleY(1)}}

/* pose transitions blend because these never stop and transforms ease */
/* bf-mascot-arm-* are new aliases used by the redesigned SVG; bf-arm-* kept for compat */
.bf .bf-all,.bf .bf-arm-r,.bf .bf-arm-l,
.bf .bf-mascot-arm-right,.bf .bf-mascot-arm-left{transition:transform .3s ease}

/* ── wave ────────────────────────────────────────────── */
/* rigged SVG: right shoulder ~(449,335), left shoulder ~(150,335) */
.bf .bf-arm-r,.bf .bf-mascot-arm-right{transform-origin:449px 335px}
.bf .bf-arm-l,.bf .bf-mascot-arm-left{transform-origin:150px 335px}
.bf.wave .bf-arm-r,.bf.wave .bf-mascot-arm-right{animation:bf-wave 1.5s ease-in-out infinite}
@keyframes bf-wave{0%,100%{transform:rotate(-118deg)}50%{transform:rotate(-152deg)}}

/* Hand gets its own wave track. It must follow the arm's shoulder rotation
   (so it stays glued to the wrist) but ALSO mirror left↔right about its own
   centre — a raised palm reads as a wave, not an upside-down rotated hand —
   and sit a touch further out from the body. Built from explicit translates
   (origin 0 0) so the shoulder-rotate and the hand-centre flip each pivot
   correctly; transform-origin can only define one pivot, which isn't enough
   here. Placed after the arm rule so it wins the equal-specificity match on
   the element (#right-hand carries both arm + hand classes). Hand centre
   ≈ (515,560), right shoulder (449,335). */
.bf .bf-mascot-hand-right{transform-box:view-box}
.bf.wave .bf-mascot-hand-right{
  transform-origin:0 0;
  animation:bf-wave-hand 1.5s ease-in-out infinite;
}
@keyframes bf-wave-hand{
  0%,100%{transform:translate(18px,0)
    translate(449px,335px) rotate(-118deg) translate(-449px,-335px)
    translate(515px,560px) scaleX(-1) translate(-515px,-560px)}
  50%{transform:translate(18px,0)
    translate(449px,335px) rotate(-152deg) translate(-449px,-335px)
    translate(515px,560px) scaleX(-1) translate(-515px,-560px)}
}

/* ── happy: soft double bounce ───────────────────────── */
.bf.happy .bf-all{animation:bf-bounce 1.1s ease-in-out infinite;transform-origin:300px 720px}
@keyframes bf-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}55%{transform:translateY(0)}70%{transform:translateY(-3px)}}

/* ── sleepy: half-lids, slow sway ────────────────────── */
.bf.sleepy .bf-eyes,
.bf.sleepy .bf-mascot-eye-left,
.bf.sleepy .bf-mascot-eye-right{animation:none;transform:scaleY(.45)}
.bf.sleepy .bf-mascot-eye-left{transform-origin:245px 190px}
.bf.sleepy .bf-mascot-eye-right{transform-origin:355px 190px}
.bf.sleepy .bf-all{animation:bf-sway 5.5s ease-in-out infinite;transform-origin:300px 720px}
@keyframes bf-sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}

/* ── fistpump: jump + right arm punches the sky ──────── */
.bf.fistpump .bf-all{animation:bf-pumpjump .8s cubic-bezier(.3,1.4,.4,1) both;transform-origin:300px 720px}
@keyframes bf-pumpjump{
  0%{transform:translateY(0)}
  25%{transform:translateY(2px) scaleY(.97)}   /* crouch */
  55%{transform:translateY(-16px)}             /* air */
  80%{transform:translateY(0) scaleY(1.01)}
  100%{transform:translateY(0)}
}
.bf.fistpump .bf-arm-r,.bf.fistpump .bf-mascot-arm-right{animation:bf-pumparm .8s ease-out both}
@keyframes bf-pumparm{
  0%{transform:rotate(0deg)}
  35%{transform:rotate(-150deg)}
  55%{transform:rotate(-170deg)}               /* full punch at jump apex */
  75%{transform:rotate(-160deg)}
  100%{transform:rotate(-165deg)}              /* holds the pump till pose ends */
}

/* ── spin: hop + full turn (scaleX flip sells the rotation) ── */
.bf.spin .bf-all{animation:bf-spin 1s ease-in-out both;transform-origin:300px 720px}
@keyframes bf-spin{
  0%{transform:translateY(0) scaleX(1)}
  20%{transform:translateY(-12px) scaleX(.4)}
  40%{transform:translateY(-18px) scaleX(-1)}  /* facing away */
  60%{transform:translateY(-12px) scaleX(-.4)}
  80%{transform:translateY(-2px) scaleX(1)}
  90%{transform:translateY(2px) scaleX(1) scaleY(.97)}
  100%{transform:translateY(0) scaleX(1)}
}

/* ── nod: two quick agreeable dips ───────────────────── */
.bf.nod .bf-all{animation:bf-nod .85s ease-in-out both;transform-origin:300px 720px}
@keyframes bf-nod{
  0%,100%{transform:translateY(0) rotate(0)}
  22%{transform:translateY(3px) rotate(2deg)}
  45%{transform:translateY(0) rotate(0)}
  68%{transform:translateY(3px) rotate(2deg)}
}

/* ── curious: head-tilt lean while asking a question ─── */
.bf.curious .bf-all{animation:bf-curious 2.6s ease-in-out infinite;transform-origin:300px 720px}
@keyframes bf-curious{0%,100%{transform:rotate(0)}35%,70%{transform:rotate(5deg)}}
.bf.curious .bf-eyes,
.bf.curious .bf-mascot-eye-left,
.bf.curious .bf-mascot-eye-right{animation:bf-blink 5.6s infinite, bf-lookup 2.6s ease-in-out infinite}
@keyframes bf-lookup{0%,100%{translate:0 0}35%,70%{translate:2px -1.5px}}

/* ── Reduced motion: breathing only, no theatrics ────── */
@media (prefers-reduced-motion:reduce){
  .bf .bf-eyes,.bf.wave .bf-arm-r,.bf.wave .bf-mascot-arm-right,
  .bf.happy .bf-all,.bf.sleepy .bf-all,
  .bf.fistpump .bf-all,.bf.fistpump .bf-arm-r,.bf.fistpump .bf-mascot-arm-right,
  .bf.spin .bf-all,.bf.nod .bf-all,.bf.curious .bf-all,.bf.curious .bf-eyes{animation:none}
  .bf-bubble{transition:opacity .2s ease}
}
.reduced-motion .bf .bf-eyes,.reduced-motion .bf.wave .bf-arm-r,
.reduced-motion .bf.wave .bf-mascot-arm-right,
.reduced-motion .bf.happy .bf-all,.reduced-motion .bf.sleepy .bf-all,
.reduced-motion .bf.fistpump .bf-all,.reduced-motion .bf.fistpump .bf-arm-r,
.reduced-motion .bf.fistpump .bf-mascot-arm-right,
.reduced-motion .bf.spin .bf-all,.reduced-motion .bf.nod .bf-all,
.reduced-motion .bf.curious .bf-all,.reduced-motion .bf.curious .bf-eyes{animation:none}