/* Story ambience stays behind the separate portrait and dialogue grid. */
.story-scene{--scene-glow:#9bb6d9}.story-scene[data-stage="s0"]{--scene-glow:#89bfd8}.story-scene[data-stage="s1"]{--scene-glow:#c1afff}.story-scene[data-stage="s2"]{--scene-glow:#efca90}.story-scene[data-stage="s3"]{--scene-glow:#ef8da9}.story-scene[data-stage="s4"]{--scene-glow:#8cddec}.story-scene[data-stage="s5"]{--scene-glow:#f3d693}
.story-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;contain:paint}.scene-header,.scene-stage,.scene-dialogue{position:relative;z-index:1}.story-atmosphere:before{content:"";position:absolute;inset:-15%;background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--scene-glow) 18%,transparent),transparent 65%);animation:story-light 14s ease-in-out infinite alternate}.story-atmosphere i{position:absolute;left:var(--left);top:-8%;width:3px;height:3px;background:var(--scene-glow);border-radius:50%;opacity:0;animation:story-fall var(--duration) var(--delay) linear infinite}.story-scene[data-stage="s0"] .story-atmosphere i{width:1px;height:38px;border-radius:0;background:linear-gradient(transparent,#a8d4e088);transform:rotate(13deg)}.story-scene[data-stage="s1"] .story-atmosphere i,.story-scene[data-stage="s5"] .story-atmosphere i{box-shadow:0 0 8px var(--scene-glow);top:var(--left);animation:story-twinkle var(--duration) var(--delay) ease-in-out infinite}.story-scene[data-stage="s2"] .story-atmosphere i{width:13px;height:19px;border-radius:2px;background:#f4d8a01c;border:1px solid #e8c58c55;animation-name:story-page}.story-scene[data-stage="s3"] .story-atmosphere i{top:100%;width:3px;height:9px;box-shadow:0 0 12px #e49c94;animation-name:story-rise}.story-scene[data-stage="s4"] .story-atmosphere i{top:100%;width:var(--size);height:var(--size);background:transparent;border:1px solid #9dd8e877;animation-name:story-rise}.story-scene[data-stage="s5"] .scene-backdrop{filter:saturate(.8)}
.story-scene .scene-portrait{animation:story-arrive .65s ease-out,story-breathe 7s .7s ease-in-out infinite alternate;transform-origin:bottom center}.story-scene .scene-dialogue{animation:story-dialogue .4s ease-out}.story-scene .scene-dialogue>p{animation:story-words .65s ease-out}.scene-motion-note{font-size:10px;letter-spacing:2px;color:#a6bbc7;display:block;margin-top:10px}
@keyframes story-arrive{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}@keyframes story-breathe{from{transform:translateY(0) scale(1)}to{transform:translateY(-3px) scale(1.007)}}@keyframes story-dialogue{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes story-words{from{opacity:.2}to{opacity:1}}@keyframes story-light{from{transform:translate(-2%,0);opacity:.55}to{transform:translate(3%,3%);opacity:.9}}@keyframes story-fall{0%{opacity:0;translate:0 -10%}15%{opacity:.5}85%{opacity:.4}100%{opacity:0;translate:-30px 900px}}@keyframes story-rise{0%{opacity:0;translate:0 0}15%{opacity:.55}85%{opacity:.4}100%{opacity:0;translate:36px -900px}}@keyframes story-twinkle{0%,100%{opacity:.08;scale:.6}50%{opacity:.65;scale:1.3}}@keyframes story-page{0%{opacity:0;transform:translate(0,0) rotate(-12deg)}20%{opacity:.5}90%{opacity:.4}100%{opacity:0;transform:translate(80px,850px) rotate(55deg)}}
/* Skill cut-ins: separate per-leader choreography, shared bounded lifecycle. */
.leader-cinematic{--skill-accent:#9adfc4;position:fixed;inset:0;z-index:44;display:grid;place-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 65% 45%,color-mix(in srgb,var(--skill-accent) 14%,#0b1324),#080e1aef 80%);pointer-events:none;animation:skill-curtain 2.2s both}.leader-cinematic:before{content:"";position:absolute;inset:-40%;z-index:-1;background:repeating-conic-gradient(from 0deg,transparent 0deg 17deg,color-mix(in srgb,var(--skill-accent) 9%,transparent) 18deg 19deg,transparent 20deg 36deg);animation:skill-rays 9s linear infinite}.leader-cinematic-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:38px;width:min(940px,88vw)}.skill-copy{position:relative;z-index:2}.skill-kicker{color:var(--skill-accent);font-size:11px;letter-spacing:4px}.skill-copy h2{font-size:clamp(32px,5.5vw,64px);color:#fff4df;letter-spacing:6px;margin:24px 0;text-shadow:0 0 32px var(--skill-accent);animation:skill-title .6s ease-out both}.skill-copy p{font-size:17px;color:#cdd5e1;line-height:1.8}.skill-copy small{display:block;margin-top:28px;color:var(--skill-accent);letter-spacing:3px}.skill-portrait{position:relative;z-index:1;width:100%;height:430px;border:1px solid color-mix(in srgb,var(--skill-accent) 70%,transparent);border-radius:150px 150px 24px 24px;background-image:var(--hero-image);background-size:var(--hero-size);background-position:var(--hero-x) top;box-shadow:0 0 80px color-mix(in srgb,var(--skill-accent) 25%,transparent);animation:skill-portrait .7s ease-out both}.skill-motif{position:absolute;left:-60px;top:-85px;width:500px;height:500px;opacity:.55;z-index:0}.skill-motif svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--skill-accent);stroke-width:2}.skill-orbit{position:absolute;inset:25px;border:1px solid var(--skill-accent);border-radius:50%;animation:skill-orbit 4s linear infinite}.skill-orbit:after{content:"";position:absolute;left:calc(50% - 7px);top:-7px;width:14px;height:14px;background:var(--skill-accent);border-radius:50%;box-shadow:0 0 28px var(--skill-accent)}.skill-orbit.second{inset:80px;animation-direction:reverse;animation-duration:3s}.skill-glyph{position:absolute;left:var(--x);top:var(--y);font-size:28px;color:var(--skill-accent);text-shadow:0 0 24px var(--skill-accent);animation:skill-glyph 2.2s var(--delay) both}.skill-skip{position:absolute;right:26px;bottom:26px;pointer-events:auto;font-size:12px;background:#111e32d9;border-color:#71839980;color:#e4dfd5}.leader-cinematic.skill-cla .skill-orbit{border-radius:5px;inset:105px 95px;transform:perspective(500px) rotateY(-20deg);animation:skill-book 2.2s both}.leader-cinematic.skill-cla .skill-orbit.second{inset:120px 100px;animation-delay:.15s}.leader-cinematic.skill-cla .skill-orbit:after{display:none}.leader-cinematic.skill-gro .skill-orbit{border-width:12px;background:#a8223c12;inset:55px;border-color:#ee8d9e88;box-shadow:0 0 80px #de3c6544}.leader-cinematic.skill-gro .skill-orbit.second{inset:110px;border:1px solid #ffad9c}.leader-cinematic.skill-gro .skill-motif svg{stroke-width:4;animation:skill-slash .75s ease-out both}.leader-cinematic.skill-dep .skill-orbit{animation:skill-ripple 2.2s ease-out infinite}.leader-cinematic.skill-dep .skill-orbit.second{animation-delay:.4s}.leader-cinematic.skill-dep .skill-motif svg{animation:skill-whale 2.2s ease-out both}.leader-cinematic.skill-gpt .skill-motif svg{stroke-dasharray:650;stroke-dashoffset:650;animation:skill-thread 1.2s ease-out forwards}.leader-cinematic.skill-gem .skill-orbit{transform:rotateX(55deg);border-color:#cfb3ff;animation:skill-twin 3s linear infinite}.leader-cinematic.skill-gem .skill-orbit.second{border-color:#ffe3ad;animation-direction:reverse}
@keyframes skill-curtain{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}@keyframes skill-rays{to{transform:rotate(360deg)}}@keyframes skill-title{from{opacity:0;translate:-35px 0;letter-spacing:16px}to{opacity:1;translate:0 0;letter-spacing:6px}}@keyframes skill-portrait{from{opacity:0;translate:45px 0;filter:brightness(1.25)}to{opacity:1;translate:0 0;filter:brightness(1)}}@keyframes skill-orbit{to{rotate:360deg}}@keyframes skill-twin{to{transform:rotateX(55deg) rotate(360deg)}}@keyframes skill-glyph{0%{opacity:0;translate:0 22px}30%,75%{opacity:.9}100%{opacity:0;translate:0 -32px}}@keyframes skill-book{0%{opacity:0;transform:perspective(500px) rotateY(-75deg) rotate(-8deg)}35%,85%{opacity:1;transform:perspective(500px) rotateY(0deg) rotate(3deg)}100%{opacity:0;transform:translateY(-28px) rotate(8deg)}}@keyframes skill-slash{from{opacity:0;translate:80px -30px}to{opacity:1;translate:0 0}}@keyframes skill-ripple{from{scale:.55;opacity:.75}to{scale:1.3;opacity:0}}@keyframes skill-whale{from{opacity:0;translate:-20px 35px}40%,85%{opacity:1}to{opacity:0;translate:30px -10px}}@keyframes skill-thread{to{stroke-dashoffset:0}}
.leader-cinematic.skill-still{animation:none}.skill-still *{animation:none!important}.skill-still .skill-glyph{opacity:.6}.motion-off .story-atmosphere,.motion-off .scene-motion-note{display:none}.motion-off .story-scene *,.motion-off .story-scene:before{animation:none!important;transition:none!important;transform:none!important}
@media(max-width:650px){.leader-cinematic-inner{width:90vw;gap:10px;grid-template-columns:1fr .8fr}.skill-portrait{height:300px;border-radius:90px 90px 14px 14px}.skill-copy h2{font-size:30px;letter-spacing:3px;overflow-wrap:anywhere}.skill-copy p{font-size:13px}.skill-kicker{letter-spacing:2px;font-size:9px}.skill-copy small{font-size:10px;letter-spacing:1px}.skill-motif{width:330px;height:330px;left:-60px;top:-15px}.skill-skip{right:16px;bottom:16px}.skill-glyph{font-size:21px}}
@media(prefers-reduced-motion:reduce){.story-atmosphere,.scene-motion-note{display:none}.story-scene *,.leader-cinematic,.leader-cinematic *{animation:none!important;transition:none!important;transform:none!important}.skill-glyph{opacity:.6}}
.skill-still.skill-gpt .skill-motif svg{stroke-dashoffset:0}@media(prefers-reduced-motion:reduce){.skill-gpt .skill-motif svg{stroke-dashoffset:0}}
/* Portrait-led entry/outcome: five motif signatures, three distinct motions. */
.leader-phase{--skill-accent:#a8e4ce;position:fixed;inset:0;z-index:48;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 30% 45%,color-mix(in srgb,var(--skill-accent) 20%,#101a2a),#080f1afc 75%);animation:phase-curtain .35s ease-out both}.phase-layout{display:grid;grid-template-columns: minmax(200px,340px) minmax(280px,500px);gap:70px;align-items:center;width:min(940px,88vw);position:relative;z-index:1}.phase-art{height:min(65vh,570px);border-radius:170px 170px 20px 20px;background-image:var(--hero-image);background-size:var(--hero-size);background-position:var(--hero-x) top;border:1px solid var(--skill-accent);box-shadow:0 0 70px color-mix(in srgb,var(--skill-accent) 25%,transparent);animation:phase-entry 1s ease-out both;position:relative}.phase-seal{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:25px;letter-spacing:12px;color:#fff4d4;text-shadow:0 0 12px var(--skill-accent);background:#111c2aa8;padding:16px 0}.phase-copy{animation:phase-copy .6s .15s ease-out both}.phase-kicker{color:var(--skill-accent);letter-spacing:5px;font-size:11px}.phase-copy h2{font-size:clamp(30px,4.5vw,56px);color:#fff2dc;margin:24px 0;line-height:1.4}.phase-copy p{font-size:18px;line-height:1.9;color:#dce3ec}.phase-copy strong{font-size:14px;letter-spacing:3px;color:var(--skill-accent);display:block;margin:24px 0}.phase-copy small{display:block;color:#a5b4c6;font-size:12px;margin:18px 0}.phase-copy button{margin-top:24px}.phase-opponent{font-size:14px;letter-spacing:2px;color:#d6c49d;border-top:1px solid #ffffff22;padding-top:18px}.phase-horizon{position:absolute;width:min(85vw,900px);aspect-ratio:1;border:1px solid var(--skill-accent);border-radius:50%;opacity:.25;left:-10%;animation:phase-ring 9s linear infinite}.phase-horizon:before,.phase-horizon:after{content:'';position:absolute;inset:7%;border:1px dashed var(--skill-accent);border-radius:inherit}.phase-horizon:after{inset:20%;border-style:solid}.skill-gpt .phase-horizon{border-radius:35%;border-style:dashed}.skill-gem .phase-horizon:after{border-width:5px;border-color:#efd9a0}.skill-cla .phase-horizon{border-radius:12%;transform:rotate(20deg)}.skill-gro .phase-horizon{border-width:14px;border-right-color:transparent;box-shadow:0 0 80px #e6637d44}.skill-dep .phase-horizon{animation:phase-tide 3s ease-in-out infinite}.phase-victory .phase-art{animation:phase-triumph 2.8s both}.phase-victory .phase-horizon{box-shadow:0 0 100px color-mix(in srgb,var(--skill-accent) 30%,transparent)}.phase-defeat .phase-art{animation:phase-rest 2.8s both}.phase-defeat .phase-horizon{opacity:.1;animation-direction:reverse}.phase-defeat{background:radial-gradient(ellipse at 30% 45%,#263042,#080f1a 75%)}.phase-draw .phase-art{animation:phase-copy 1s both}
@keyframes phase-curtain{from{opacity:.85}to{opacity:1}}@keyframes phase-entry{from{opacity:1;transform:translateX(-70px) scale(.94)}to{opacity:1;transform:none}}@keyframes phase-copy{from{opacity:1;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes phase-triumph{0%{opacity:1;transform:scale(.94);filter:brightness(.8)}35%{opacity:1;filter:brightness(1.18)}100%{opacity:1;transform:scale(1.025);filter:brightness(1)}}@keyframes phase-rest{0%{opacity:1;transform:translateY(-16px)}30%{opacity:1}100%{opacity:.7;filter:saturate(.45);transform:translateY(10px)}}@keyframes phase-ring{to{rotate:360deg}}@keyframes phase-tide{50%{scale:1.12;opacity:.4}}
@media(max-width:650px){.phase-layout{grid-template-columns:1fr;gap:12px;width:86vw;text-align:center}.phase-art{width:min(210px,45vw);height:34vh;min-height:160px;max-height:280px;margin:auto}.phase-seal{font-size:18px;padding:8px 0;bottom:8px}.phase-copy h2{font-size:28px;margin:12px 0}.phase-copy p{font-size:14px;margin:8px 0}.phase-copy strong{margin:12px 0;font-size:12px}.phase-copy button{margin-top:8px}.phase-copy small{margin:8px 0}.phase-opponent{padding-top:8px;font-size:12px}.phase-horizon{width:130vw;left:-35%}}
.phase-still,.phase-still *{animation:none!important}.phase-still .phase-art{opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){.leader-phase,.leader-phase *{animation:none!important}.phase-art{opacity:1!important;filter:none!important}}