/* v045 screenplay overlays. Compositing, not procedural character animation. */
.scene-cyber-grid{position:absolute;z-index:6;inset:5% 4% 30%;opacity:0;transform:perspective(500px) rotateX(54deg) scale(.4);background:repeating-linear-gradient(90deg,transparent 0 29px,#65e9ffb8 30px 32px),repeating-linear-gradient(0deg,transparent 0 29px,#83ebffd0 30px 32px);border:3px solid #67eeff;box-shadow:0 0 34px #55dfff,inset 0 0 42px #5ee7ff;pointer-events:none}
.scene-cyber-grid i{position:absolute;inset:-8%;border:2px solid #87ffff77;transform:skew(14deg);box-shadow:0 0 20px #56dfff}
.scene-cinematic.commanding .scene-cyber-grid{opacity:.9;animation:cyberGridTrap 1.25s ease-out both}
.scene-cinematic.commanding .scene-ailuros{animation:ailurosStrain .23s ease-in-out infinite alternate}
.scene-cinematic[data-speaker="ailuros"] .scene-ailuros{animation:ailurosVoice .54s ease-in-out infinite alternate;filter:drop-shadow(0 0 29px #dd87ff)}
.scene-shards{position:absolute;inset:13% 19% 30%;z-index:7;opacity:0;pointer-events:none;overflow:visible}.scene-shards i{position:absolute;width:18%;height:35%;border:1px solid #e2ffff;background:linear-gradient(110deg,#a6f2ff85,transparent);clip-path:polygon(3% 0,100% 44%,26% 100%);filter:drop-shadow(0 0 9px white)}.scene-shards i:nth-child(2n){top:34%;left:23%;rotate:56deg}.scene-shards i:nth-child(3n){top:7%;left:60%;rotate:-38deg}.scene-shards i:nth-child(4n){top:56%;left:80%;rotate:134deg}
.scene-cinematic[data-kind="shatter"] .scene-shards{opacity:1;animation:shardScatter .9s ease-out both}
.scene-cinematic[data-kind="strain"] .scene-glass{filter:drop-shadow(0 0 19px cyan)}
.scene-cinematic[data-kind="ready"] .formation-ribbon{display:flex}.formation-ribbon{display:none;position:absolute;z-index:9;left:4%;right:4%;top:16%;justify-content:center;align-items:flex-end;gap:clamp(3px,2vw,18px);pointer-events:none}.formation-ribbon.visible{display:flex}.formation-ribbon img{width:16%;height:clamp(53px,13dvh,150px);min-width:0;border-bottom:2px solid #8ef7ff;object-fit:cover;object-position:center 25%;filter:drop-shadow(0 0 9px #68d3ff);animation:formationEnter .36s cubic-bezier(.15,.68,.3,1.15) both}.formation-ribbon img:nth-child(2){animation-delay:.08s}.formation-ribbon img:nth-child(3){animation-delay:.16s}.formation-ribbon img:nth-child(4){animation-delay:.24s}.formation-ribbon img:nth-child(5){animation-delay:.32s}
.scene-cinematic[data-kind="ready"] .scene-hero{opacity:0}
/* Speaking portraits are cropped character illustrations, not trading-card borders. */
.scene-face{border:0;background:none;overflow:visible}.scene-face img{object-fit:cover;object-position:center 19%;mask-image:linear-gradient(180deg,#000 67%,transparent 100%);filter:drop-shadow(0 2px 8px var(--who))}
.boss-entity.attacking{animation:ailurosAttacks .24s ease-in-out 3;filter:brightness(1.65) drop-shadow(0 0 40px #dc5aff)!important}
.basic-impact{position:absolute;z-index:8;left:50%;top:30%;width:19%;height:17%;pointer-events:none;filter:drop-shadow(0 0 12px var(--fx-color,#a9e8ff))}.basic-impact i{display:block;position:absolute;width:86%;height:4px;background:linear-gradient(90deg,transparent,var(--fx-color,#fff) 36%,#fff 55%,transparent);transform:rotate(-36deg)}.basic-impact i:nth-child(2){top:28%;left:7%;transform:rotate(26deg)}.basic-impact i:nth-child(3){top:60%;left:-9%;transform:rotate(-19deg)}.basic-impact.firing{animation:basicImpactBurst .35s ease-out both}
@keyframes cyberGridTrap{0%{opacity:0;transform:perspective(400px) rotateX(76deg) scale(.2)}55%{opacity:1;transform:perspective(450px) rotateX(52deg) scale(1.3)}100%{opacity:.95;transform:perspective(500px) rotateX(54deg) scale(.96)}}
@keyframes ailurosStrain{to{transform:translate(4px,-2px) scale(1.04)}}
@keyframes ailurosVoice{to{transform:translate(-3px,3px) scale(1.08);filter:brightness(1.45)}}
@keyframes shardScatter{from{opacity:0;transform:scale(.6)}25%{opacity:1}to{opacity:0;transform:scale(1.9) rotate(8deg)}}
@keyframes formationEnter{from{opacity:0;transform:translateY(70px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ailurosAttacks{to{transform:translate(-50%,-50%) translateY(-8px) scale(1.06)}}
@keyframes basicImpactBurst{from{opacity:0;transform:scale(.45)}40%{opacity:1}to{opacity:0;transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.formation-ribbon img,.scene-shards,.scene-cyber-grid,.scene-ailuros,.boss-entity.attacking,.basic-impact{animation:none!important}.scene-cinematic.commanding .scene-cyber-grid{opacity:.85;transform:perspective(500px) rotateX(54deg) scale(1)}.scene-cinematic[data-speaker=ailuros] .scene-ailuros{filter:drop-shadow(0 0 25px #d76aff)}}

/* Gatekeeper's protective effect lives independently of the character sprite. */
.gate-shield{position:absolute;left:26%;right:24%;bottom:6%;height:60%;z-index:7;pointer-events:none;border:3px solid #c7beff;border-radius:55% 55% 10% 10%;background:repeating-linear-gradient(130deg,transparent 0 24px,#c5aaff19 26px 28px,transparent 32px 40px);box-shadow:inset 0 0 26px #bca5ff77,0 0 31px #ad8eff;transform-origin:center bottom}.gate-shield i{position:absolute;inset:4%;border:1px dashed #b9f8ff;border-radius:inherit;filter:drop-shadow(0 0 7px #bafaff)}.gate-shield i:nth-child(2){inset:13%;border-color:#d4a4ff}.gate-shield.rising{animation:gateShieldLift .8s ease-out both}@keyframes gateShieldLift{0%{opacity:0;transform:scale(.2,.12)}38%{opacity:1;transform:scale(1.05,1.06)}80%{opacity:.95}100%{opacity:0;transform:scale(1.1,1.08)}}@media(prefers-reduced-motion:reduce){.gate-shield.rising{animation:none!important;opacity:1;transform:none}}