/* Separate artwork, logo and lettering planes use the battle's single pausable clock. */
.opening-villain{--intro-caption-clearance:27%;--intro-atmosphere-x:0px;--intro-atmosphere-y:0px;--intro-world-x:0px;--intro-world-y:0px;--intro-actor-x:0px;--intro-actor-y:0px;--intro-world-angle:0deg;--intro-actor-angle:0deg;--intro-energy:0}
.intro-depth-stage{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.intro-depth-art{display:block;width:100%;height:100%;object-fit:cover}
.intro-atmosphere{position:absolute;inset:0;z-index:0;opacity:0;transform:translate3d(calc(var(--intro-atmosphere-x) - var(--team-x)*7px),calc(var(--intro-atmosphere-y) - var(--team-y)*4px),-80px) scale(1.16);filter:brightness(.38) saturate(.65)}
.intro-world-plane{position:absolute;inset:-3%;z-index:1;opacity:0;transform:translate3d(calc(var(--intro-world-x) - var(--team-x)*12px),calc(var(--intro-world-y) - var(--team-y)*7px),-35px) rotateZ(var(--intro-world-angle)) scale(1.05)}
.intro-world-plane:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0d081a1a,#16081f33 58%,#12061cce)}
.intro-corruption-plane{position:absolute;inset:3% 2% 2%;z-index:5;opacity:0;transform:translate3d(calc(var(--intro-actor-x) + var(--team-x)*13px),calc(var(--intro-actor-y) + var(--team-y)*8px),32px) rotateZ(var(--intro-actor-angle));transform-origin:38% 72%}
.intro-corruption-plane .intro-depth-art{object-fit:contain}
.opening-villain.intro-depth-ready .opening-art{opacity:0}
.opening-villain.intro-depth-ready .intro-atmosphere{opacity:.75}
.opening-villain.intro-depth-ready .intro-world-plane,.opening-villain.intro-depth-ready .intro-corruption-plane{opacity:1}
.intro-logo-depth{position:absolute;left:4%;right:4%;top:4%;bottom:var(--intro-caption-clearance);transform-style:preserve-3d}
.intro-logo-far{z-index:2}.intro-logo-middle{z-index:4}.intro-logo-near{z-index:8}
.opening-villain .opening-world{--world-x:0px;--world-y:0px;--world-depth:0px;--world-angle:0deg;--world-scale:1;position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--world-size,44px);aspect-ratio:1;padding:7px;border-radius:9px;border:1px solid color-mix(in srgb,var(--member-color) 70%,#fff);background:linear-gradient(145deg,#242339f2,#0c0b1ee8);box-shadow:inset 0 1px 0 #fff5,0 3px 0 #070712,0 5px 0 color-mix(in srgb,var(--member-color) 35%,#151022),4px 13px 16px #02051599;opacity:var(--world-reveal,0);transform:translate3d(calc(var(--world-x) + var(--team-x)*var(--world-parallax,0px)),calc(var(--world-y) + var(--team-y)*var(--world-parallax,0px)*.6),var(--world-depth)) rotateZ(var(--world-angle)) rotateY(var(--world-pitch,0deg)) scale(var(--world-scale));transform-origin:50% 50%}
.opening-villain .opening-world .team-brand-icon{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
.opening-villain .opening-world .team-brand-icon[hidden]{display:none}
.opening-villain .opening-world[data-logo-distance=far]{border-radius:6px;padding:6px;background:linear-gradient(145deg,#29243dd9,#0d101bbf);box-shadow:inset 0 1px 0 #ffffff30,0 3px 0 #080a19,1px 8px 12px #04051980}
.opening-villain .opening-world[data-logo-distance=near]{border-width:2px;box-shadow:inset 0 2px 0 #fff5,0 4px 0 #0b0c1c,0 7px 0 color-mix(in srgb,var(--member-color) 30%,#20182c),6px 19px 18px #040416a6}
.intro-energy-veil{position:absolute;inset:0;z-index:7;opacity:calc(.12 + var(--intro-energy)*.2);background:radial-gradient(ellipse at 35% 36%,#ff286c40,transparent 36%),linear-gradient(125deg,transparent 67%,#b267fa17 79%,transparent);transform:translate3d(calc(var(--intro-actor-x)*-.6),calc(var(--intro-actor-y)*-.5),18px)}
.intro-fragments{position:absolute;inset:4% 4% var(--intro-caption-clearance);z-index:9;transform-style:preserve-3d}
.intro-frame-fragment{position:absolute;left:0;top:0;display:block;width:var(--shard-size,18px);height:7px;border:1px solid #ff658b9c;border-top:2px solid #ff91b5b8;background:linear-gradient(120deg,#74213f,#251132);box-shadow:2px 5px 0 #08081b70;opacity:var(--shard-reveal,0);transform:translate3d(var(--shard-x,0px),var(--shard-y,0px),var(--shard-depth,38px)) rotateZ(var(--shard-angle,0deg));transform-origin:center}
.opening-villain .opening-shade{z-index:10;background:linear-gradient(0deg,#10071cee,transparent 35%,#12081918)}
.opening-villain .opening-dialogue.lifted-speech{z-index:12;left:8%;right:8%;bottom:6%;transform:translate3d(calc(var(--team-x)*6px),calc(var(--opening-lift,0px)),38px) rotateX(-2deg)}
.opening-villain .opening-dialogue.lifted-speech p{padding:15px 22px 19px;transform:translateZ(18px)}
.opening-villain .opening-dialogue strong{font-size:clamp(25px,3.15cqw,39px)}
@media(max-width:760px){
 .opening-villain .intro-world-plane{inset:0 0 22%;transform:translate3d(calc(var(--intro-world-x) - var(--team-x)*4px),var(--intro-world-y),-20px) rotateZ(var(--intro-world-angle)) scale(1.08)}
 .opening-villain .intro-world-plane .intro-depth-art{object-position:60% center}
 .opening-villain .intro-corruption-plane{left:-9%;right:-49%;top:0;bottom:var(--intro-caption-clearance);transform:translate3d(var(--intro-actor-x),var(--intro-actor-y),12px) rotateZ(var(--intro-actor-angle));transform-origin:37% 55%}
 .opening-villain .intro-corruption-plane .intro-depth-art{object-fit:contain}
 .intro-logo-depth,.intro-fragments{left:5%;right:5%;top:4%}
 .opening-villain .opening-world{padding:5px;border-radius:6px}
 .opening-villain .opening-world[data-logo-distance=far]{padding:4px}
 .opening-villain .opening-world[data-logo-distance=near]{border-width:1px;box-shadow:inset 0 1px 0 #fff5,0 3px 0 #0b0c1c,0 5px 0 #352342,3px 11px 13px #040416a6}
 .opening-villain .opening-dialogue.lifted-speech{left:8%;right:8%;bottom:6%;transform:translate3d(0,var(--opening-lift,0px),8px)}
 .opening-villain .opening-dialogue.lifted-speech p{padding:14px 14px 18px;transform:translateZ(8px)}
 .opening-villain .opening-dialogue strong{font-size:clamp(23px,6.6cqw,28px)}
}
@media(prefers-reduced-motion:reduce){
 .intro-depth-stage,.intro-logo-depth,.intro-fragments{transform-style:flat}
 .opening-villain .intro-atmosphere,.opening-villain .intro-world-plane,.opening-villain .intro-corruption-plane,.opening-villain .intro-energy-veil{transform:none}
 .opening-villain .opening-world{transform:translate(var(--world-x),var(--world-y))}
 .intro-frame-fragment{display:none}
 .opening-villain .opening-dialogue.lifted-speech,.opening-villain .opening-dialogue.lifted-speech p{transform:none}
}