/* Each sequence starts after 5s, then repeats every 5s. All VFX share that
   clock and the character rig so breath remains attached during flight. */
.character-action{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;transform-origin:50% 86%;animation:var(--signature) 5s 5s infinite both}
.creature-rig{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;flex:none;line-height:0;--jet-width:clamp(150px,21vw,230px);--jet-height:calc(var(--jet-width)*.7)}
.character[data-form="egg"]{--signature:signature-egg}
.character[data-form="charmander"]{--signature:signature-charmander;--mouth-x:27%;--mouth-y:35%;--breath-angle:0deg;--smoke-one:smoke-first;--smoke-two:smoke-second;--spark-move:failed-ember}
.character[data-form="charmeleon"]{--signature:signature-charmeleon;--claw-move:claw-strike}
.character[data-form="charizard"]{--signature:signature-charizard;--mouth-x:22%;--mouth-y:56%;--breath-angle:0deg;--fire-move:charizard-fire}
.character[data-form="charizard-megax"]{--signature:signature-megax}
.character[data-form="charizard-megay"]{--signature:signature-megay;--mouth-x:42%;--mouth-y:39%;--breath-angle:48deg;--fire-move:megay-fire}
.character[data-form="charizard-megax"] .character-action{transform-origin:50% 52%}
.character[data-form="charizard-megay"] .creature-rig{scale:1.18;transform-origin:50% 70%}
.character[data-form="charizard-megay"] img{scale:1}
.character.action-grounded{animation:none!important;transform:none}
.scene.action-grounded .ground-shadow{animation:none;opacity:.7;transform:translateX(-50%)}

@keyframes signature-egg{
  0%,26%,100%{transform:translateY(0) rotate(0) scale(1)}
  3%{transform:rotate(-10deg) scale(1.03,.97)}6%{transform:rotate(12deg)}9%{transform:rotate(-13deg)}
  12%{transform:rotate(9deg) scale(1.06,.94)}16%{transform:translateY(-24px) rotate(-4deg) scale(.97,1.04)}
  20%{transform:translateY(2px) rotate(3deg) scale(1.07,.93)}23%{transform:rotate(-2deg)}
}
/* Inhale, attempt a tiny spark, cough twice, then droop in disappointment. */
@keyframes signature-charmander{
  0%,48%,100%{transform:translate(0,0) rotate(0) scale(1)}
  7%{transform:translate(7px,-3px) rotate(5deg) scale(1.07,1.04)}
  11%{transform:translate(-9px,0) rotate(-7deg) scale(.96,1.02)}
  14%{transform:translate(5px,3px) rotate(4deg) scale(1.04,.96)}
  18%{transform:translate(-12px,5px) rotate(-10deg) scale(1.03,.96)}
  22%{transform:translate(4px,0) rotate(3deg)}
  26%{transform:translate(-9px,6px) rotate(-8deg) scale(1.04,.96)}
  30%{transform:translate(2px,1px) rotate(1deg)}
  36%,41%{transform:translateY(5px) rotate(-5deg) scale(1,.96)}
}
/* Lunge with the arm forward; a three-claw slash sweeps across the target. */
@keyframes signature-charmeleon{
  0%,34%,100%{transform:translate(0,0) rotate(0) scale(1)}
  6%{transform:translate(12px,7px) rotate(9deg) scale(1.06,.91)}
  10%{transform:translate(-42px,-9px) rotate(-13deg) scale(1.05)}
  13%{transform:translate(-38px,-12px) rotate(-18deg) scale(1.04)}
  18%{transform:translate(-49px,7px) rotate(7deg) scale(1.04,.98)}
  22%{transform:translate(-31px,4px) rotate(3deg)}
  28%{transform:translate(-11px,-6px) rotate(-3deg)}
}
/* Descend, plant the feet, breathe horizontally, then lift back into hover. */
@keyframes signature-charizard{
  0%,58%,100%{transform:translate(0,0) rotate(0) scale(1)}
  8%{transform:translateY(15px) scale(1.02,.97)}
  12%{transform:translateY(25px) scale(1.05,.94)}
  16%{transform:translate(5px,23px) rotate(3deg) scale(1.04,1)}
  19%,25%,31%,37%{transform:translate(-6px,24px) rotate(-3deg) scale(1.02,1)}
  22%,28%,34%{transform:translate(-3px,25px) rotate(-2deg) scale(1.03,1)}
  41%{transform:translate(0,24px) rotate(0) scale(1)}
  46%{transform:translateY(28px) scale(1.04,.94)}
  52%{transform:translateY(-12px) scale(.98,1.02)}
}
/* Hold a hovering charge while the existing mouth and tail flames swell. */
@keyframes signature-megax{
  0%,62%,100%{transform:translateY(0) scale(1)}
  20%{transform:translateY(-3px) scale(1.01)}
  32%,41%,50%{transform:translateY(-8px) scale(1.025)}
  36%,45%{transform:translateY(-6px) scale(1.015)}
}
/* A sweeping lap of the habitat, then a sustained fire plume into the sky. */
@keyframes signature-megay{
  0%,73%,100%{transform:translate(0,0) rotate(0) scale(1)}
  7%{transform:translate(calc(var(--flight-span)*-1),-12px) rotate(-16deg) scale(.92)}
  15%{transform:translate(calc(var(--flight-span)*-.8),-47px) rotate(-11deg) scale(.8)}
  23%{transform:translate(calc(var(--flight-span)*.65),-40px) rotate(13deg) scale(.83)}
  31%{transform:translate(var(--flight-span),0) rotate(18deg) scale(.93)}
  37%{transform:translate(4px,3px) rotate(2deg) scale(1)}
  43%,49%,55%,61%{transform:translate(0,0) rotate(20deg) scale(.98)}
  46%,52%,58%{transform:translate(2px,2px) rotate(19deg) scale(.995)}
  66%{transform:translate(0,7px) rotate(5deg) scale(1)}
}
.scene{--flight-span:74px}
/* Give the larger Mega Y enough sky for its flight and upward fire plume. */
.scene[data-form="charizard-megay"]{height:470px}

/* Texture coordinates: orange / blue across the top; smoke / claws below.
   The emitter is at 95% x, 55% y inside each quadrant. */
.breath-anchor{position:absolute;left:var(--mouth-x,50%);top:var(--mouth-y,40%);width:0;height:0;transform:rotate(var(--breath-angle,0deg));z-index:4;pointer-events:none}
.attack-effect{display:block;position:absolute;background-image:url('/assets/attack-effects-atlas.png');background-size:200% 200%;background-repeat:no-repeat;pointer-events:none;opacity:0;transform-origin:95% 55%}
.fire-jet,.fire-core{width:var(--jet-width);height:var(--jet-height);left:calc(var(--jet-width)*-.95);top:calc(var(--jet-height)*-.55);background-position:0 0;animation:var(--fire-move,none) 5s 5s infinite both;filter:drop-shadow(0 0 8px #ff84324d)}
.fire-core{filter:brightness(1.5);scale:.8 .65;mix-blend-mode:screen}
/* Reuse the same GIF and isolate its bright cyan pixels. The filter follows
   both cheek flames and the tail in every frame, including wing movement. */
.effect-filters{position:absolute;pointer-events:none}
.mega-charge-flames{display:none;position:absolute;inset:0;pointer-events:none;opacity:0;background:url('/assets/charizard-megax-hd.gif') center/contain no-repeat;filter:url(#megax-flame-filter)}
.character[data-form="charizard-megax"] .mega-charge-flames{display:block;animation:megax-flame-charge 5s 5s infinite both}
.motion-paused .mega-charge-flames{background-image:url('/assets/charizard-megax-hd-still.png')}
@keyframes megax-flame-charge{
  0%,62%,100%{opacity:0;filter:url(#megax-flame-filter) brightness(1) drop-shadow(0 0 0 #37cfff00)}
  8%{opacity:.2;filter:url(#megax-flame-filter) brightness(1.05) drop-shadow(0 0 3px #28cfff55)}
  22%{opacity:.7;filter:url(#megax-flame-filter) brightness(1.2) drop-shadow(0 0 7px #28cfff99)}
  32%,41%,50%{opacity:.98;filter:url(#megax-flame-filter) brightness(1.45) drop-shadow(0 0 12px #3ad7ff) drop-shadow(0 0 22px #137dff99)}
  36%,45%{opacity:.85;filter:url(#megax-flame-filter) brightness(1.25) drop-shadow(0 0 9px #3ad7ff) drop-shadow(0 0 16px #137dff77)}
}
.smoke-puff{--smoke-size:155px;width:var(--smoke-size);height:var(--smoke-size);left:calc(var(--smoke-size)*-.95);top:calc(var(--smoke-size)*-.55);background-position:0 100%;filter:drop-shadow(0 0 2px #92929235)}
.puff-one{animation:var(--smoke-one,none) 5s 5s infinite both}
.puff-two{animation:var(--smoke-two,none) 5s 5s infinite both}
.failed-spark{position:absolute;right:0;top:-2px;width:4px;height:4px;background:#ffb759;border-radius:50%;opacity:0;box-shadow:0 0 7px #ff782c;animation:var(--spark-move,none) 5s 5s infinite both}
.claw-anchor{position:absolute;left:14%;top:61%;width:0;height:0;pointer-events:none;z-index:5}
.claw-swipe{width:145px;height:145px;left:-108px;top:-70px;transform-origin:85% 45%;background-position:100% 100%;filter:drop-shadow(0 0 5px #ff6d434d);animation:var(--claw-move,none) 5s 5s infinite both}

@keyframes charizard-fire{
  0%,17%,40%,100%{opacity:0;transform:scale(.05,.15)}
  19%{opacity:.95;transform:scale(.72,.7)}
  22%,28%,34%{opacity:1;transform:scale(1,.88) skewY(-3deg)}
  25%,31%,37%{opacity:.9;transform:scale(.92,1.02) skewY(3deg)}
  39%{opacity:.15;transform:scale(1.13,.38)}
}
@keyframes megay-fire{
  0%,42%,65%,100%{opacity:0;transform:scale(.05,.15)}
  44%{opacity:.95;transform:scale(.85,.7)}
  47%,53%,59%{opacity:1;transform:scale(1,.85) skewY(-3deg)}
  50%,56%,62%{opacity:.95;transform:scale(.93,1) skewY(3deg)}
  64%{opacity:.1;transform:scale(1.1,.35)}
}
@keyframes smoke-first{
  0%,13%,36%,100%{opacity:0;transform:translate(0,0) scale(.06)}
  16%{opacity:.95;transform:translate(-3px,0) scale(.4)}
  23%{opacity:.9;transform:translate(-17px,-15px) scale(.86) rotate(-5deg)}
  35%{opacity:0;transform:translate(-38px,-52px) scale(1.3) rotate(-12deg)}
}
@keyframes smoke-second{
  0%,24%,47%,100%{opacity:0;transform:translate(0,0) scale(.06)}
  27%{opacity:.98;transform:translate(-3px,0) scale(.45)}
  34%{opacity:.85;transform:translate(-19px,-15px) scale(.95) rotate(5deg)}
  46%{opacity:0;transform:translate(-42px,-58px) scale(1.4) rotate(12deg)}
}
@keyframes failed-ember{0%,9%,16%,100%{opacity:0;transform:translate(0,0) scale(.1)}11%{opacity:1;transform:translate(-5px,-1px) scale(1)}15%{opacity:0;transform:translate(-19px,8px) scale(.2)}}
@keyframes claw-strike{0%,11%,25%,100%{opacity:0;transform:translate(22px,-30px) rotate(-20deg) scale(.3)}13%{opacity:1;transform:translate(0,-17px) rotate(-10deg) scale(.85)}18%{opacity:.95;transform:translate(-18px,16px) rotate(5deg) scale(1.08)}24%{opacity:0;transform:translate(-30px,28px) rotate(10deg) scale(1.13)}}

.signature-effects{position:absolute;inset:0;pointer-events:none;z-index:-1}
.signature-ring{position:absolute;width:190px;height:42px;bottom:50px;left:50%;margin-left:-95px;border:1px solid var(--accent);border-radius:50%;opacity:0;box-shadow:0 0 14px rgba(var(--glow),.12);animation:var(--ring-signature,none) 5s 5s infinite both}
.signature-halo{position:absolute;width:270px;height:270px;bottom:62px;left:50%;margin-left:-135px;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(var(--glow),.19),rgba(var(--glow),.04) 45%,transparent 70%);animation:var(--halo-signature,none) 5s 5s infinite both}
.signature-spark{display:none}
.scene[data-form="egg"]{--ring-signature:egg-ripple}
.scene[data-form="charizard"]{--ring-signature:charizard-land;--halo-signature:orange-light}
.scene[data-form="charizard-megax"]{--halo-signature:blue-light}
.scene[data-form="charizard-megay"]{--halo-signature:solar-light}
@keyframes egg-ripple{0%,19%,30%,100%{opacity:0;transform:scale(.45)}21%{opacity:.6;transform:scale(.65)}29%{opacity:0;transform:scale(1.5)}}
@keyframes charizard-land{0%,10%,23%,100%{opacity:0;transform:scale(.4)}12%{opacity:.6;transform:scale(.7)}22%{opacity:0;transform:scale(1.7)}}
@keyframes orange-light{0%,17%,41%,100%{opacity:0}21%,36%{opacity:.65}}
@keyframes blue-light{0%,62%,100%{opacity:0}22%{opacity:.35}32%,41%,50%{opacity:.9}36%,45%{opacity:.65}}
@keyframes solar-light{0%,42%,66%,100%{opacity:0}47%,60%{opacity:.75}}
.motion-controls{position:absolute;right:0;bottom:8px;display:flex;align-items:center;gap:16px;z-index:6}
.motion-controls .motion-toggle{position:static;padding:8px 0}
.replay-move{display:flex;align-items:center;gap:6px;padding:8px 0;background:none;color:#a6aa99;font-size:11px}
.replay-move span{font-size:17px;line-height:1}
.motion-paused .character-action,.motion-paused .signature-effects *,.motion-paused .creature-rig *{animation-play-state:paused!important}
@media(max-width:760px){.scene{overflow-x:clip;--flight-span:35px}.signature-effects{overflow:hidden}.character-action{max-width:100%}.creature-rig{--jet-width:165px}.smoke-puff{--smoke-size:125px}.claw-swipe{width:125px;height:125px;left:-90px;top:-60px}}
@media(max-width:760px){.scene[data-form="charizard-megay"]{height:430px}}
@media(max-width:430px){.scene[data-form="charizard-megay"]{height:415px}}
@media(prefers-reduced-motion:reduce){.character-action,.signature-effects *,.creature-rig *{animation:none!important}}