/* ===== mascot in the full hero =====
   Loaded only on pages whose hero has the mascot switch on. Two halves:
   the stage layout (copy left, art right on wide screens; copy, then art
   below on narrow ones) and the rig states the runtime toggles on the svg.
   The base hero rules of shared.css and games.css stay untouched; every
   selector here is scoped to .hero-stage.has-mascot or .torp-rig. */

/* ----- layout ----- */
.hero-stage.has-mascot{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto 1fr;grid-template-areas:". ." "copy art" ". .";column-gap:clamp(20px,4vw,56px)}
/* the middle row is as tall as the art, so the copy cell centers in it instead of stretching to its top */
.hero-stage.has-mascot .hl2{grid-area:copy;align-self:center;margin-inline:0;max-width:60ch;text-align:left}
.hero-stage.has-mascot .hero-title,.hero-stage.has-mascot .hero-lead{text-align:left;margin-left:0;margin-right:0}
.hero-stage.has-mascot .hero-cta{justify-content:flex-start}
.hero-stage.has-mascot .hero-art{grid-area:art;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;z-index:2}
/* the halo follows the art's own blue rather than the page accent: the rocket, the fire and the eyes are blue on every theme */
.hero-stage.has-mascot{--mascot-glow:60,120,255}
.hero-stage.has-mascot .mascot-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,560px);aspect-ratio:1;border-radius:50%;filter:blur(30px);background:radial-gradient(circle,rgba(var(--mascot-glow),.4),rgba(var(--mascot-glow),.12) 46%,transparent 68%);pointer-events:none}
.hero-stage.has-mascot .mascot-fig{position:relative;z-index:1;width:min(100%,640px);animation:mascotFloat 5.2s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(var(--mascot-glow),.45)) drop-shadow(0 28px 40px rgba(0,0,0,.55))}
.hero-stage.has-mascot .mascot-fig .torp-rig{display:block;width:100%;height:auto;overflow:visible;cursor:pointer;shape-rendering:geometricPrecision}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-.6deg)}}
.hero .hero-fx{position:absolute;inset:0;z-index:2;pointer-events:none}
@media (max-width:960px){
  .hero-stage.has-mascot{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"." "copy" "art" ".";column-gap:0}
  .hero-stage.has-mascot .hl2{align-self:auto;margin-inline:auto;text-align:center;max-width:100%}
  .hero-stage.has-mascot .hero-title,.hero-stage.has-mascot .hero-lead{text-align:center;margin-inline:auto}
  .hero-stage.has-mascot .hero-cta{justify-content:center}
  .hero-stage.has-mascot .hero-art{margin-top:clamp(18px,5vw,40px)}
  .hero-stage.has-mascot .mascot-fig{width:min(100%,460px)}
}

/* ----- rig states, toggled by MascotAssets on the svg -----
   blink and squint squash the clip of each eye (a copy of its outline), not
   the eye itself, so the gradient fill keeps its colors in every state */
.torp-rig .rig-eye{transform-box:fill-box;transform-origin:center;transition:transform .17s cubic-bezier(.34,1.5,.5,1),opacity .12s ease}
.torp-rig .rig-eye-clip{transform-box:view-box;transition:transform .17s cubic-bezier(.34,1.5,.5,1)}
.torp-rig .rig-eye-clip-near{transform-origin:525px 361px}
.torp-rig .rig-eye-clip-far{transform-origin:378px 382px}
.torp-rig.is-blink .rig-eye-clip{transform:scaleY(.06)}
.torp-rig.is-squint .rig-eye-clip{transform:scaleY(.3)}
.torp-rig.is-surprise .rig-eye-near{transform:scale(1.12)}
.torp-rig.is-surprise .rig-eye-far{transform:scale(.86)}
.torp-rig .expr-happy{opacity:0;transition:opacity .12s ease;filter:drop-shadow(0 0 6px rgba(0,251,253,.55))}
.torp-rig.is-happy .rig-eye{opacity:0}
.torp-rig.is-happy .expr-happy{opacity:1}
.torp-rig .rig-logo{animation:mascotLogo 3.2s ease-in-out infinite}
@keyframes mascotLogo{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(90,165,255,0))}50%{filter:brightness(1.55) drop-shadow(0 0 2.5px rgba(90,165,255,.65))}}
/* the rocket logo: the color sweep between #0068ff and #1cabff is a gradient animated inside the svg (smooth, no repaint of filters); css only adds a steady soft glow in the bright blue */
.torp-rig .rig-rocket-logo{filter:drop-shadow(0 0 4px rgba(28,171,255,.55))}
/* fire: every layer scales from the nozzle (svg units); the outer tongue and its dark outline share one phase so the flame stays inside its line */
.torp-rig .flame{transform-box:view-box;transform-origin:862px 600px;will-change:transform,opacity}
@keyframes mascotFlame{0%{transform:scale(1,1) rotate(0)}28%{transform:scale(1.07,.95) rotate(-1.1deg)}55%{transform:scale(.96,1.05) rotate(.9deg)}78%{transform:scale(1.04,.98) rotate(-.4deg)}100%{transform:scale(1,1) rotate(0)}}
@keyframes mascotFlick{0%,100%{opacity:1}35%{opacity:.86}70%{opacity:.94}}
.torp-rig .flame-l7,.torp-rig .flame-outline{animation:mascotFlame .92s ease-in-out infinite}
.torp-rig .flame-l6{animation:mascotFlame .74s ease-in-out -.22s infinite,mascotFlick 1.3s linear infinite}
.torp-rig .flame-l5{animation:mascotFlame .64s ease-in-out -.41s infinite,mascotFlick .9s linear -.3s infinite}
.torp-rig .flame-l2{animation:mascotFlame .52s ease-in-out -.13s infinite,mascotFlick .7s linear -.5s infinite}
.torp-rig .flame-l4{animation:mascotFlame .44s ease-in-out -.3s infinite,mascotFlick .6s linear infinite}
.torp-rig .flame-l1{animation:mascotFlame .38s ease-in-out infinite,mascotFlick .5s linear -.2s infinite}
.torp-rig .flame-l3{animation:mascotFlame .8s ease-in-out -.5s infinite}
@media (prefers-reduced-motion:reduce){
  .hero-stage.has-mascot .mascot-fig,.torp-rig .flame,.torp-rig .rig-logo{animation:none}
}