/* Ordinary vertical reading is the baseline, including no-JS and reduced motion. */
main{position:relative}
.page-tools{position:absolute;top:18px;inset-inline-end:24px;padding:0;z-index:8;max-width:calc(100% - 48px)}
.page-tools>span{display:none}
.motion-control{padding:9px 13px;border:1px solid #325172;border-radius:30px;background:#07182cc9;font-size:12px;line-height:1.5;backdrop-filter:blur(10px)}
.opening{position:relative;background:radial-gradient(ellipse at 65% 45%,#0c2f5b5c,transparent 65%),#050e1e}
.opening-stage{position:relative;padding:90px clamp(24px,5vw,80px) 60px}
.opening-intro{max-width:800px;margin:0 auto 48px}
.opening-intro h1{font-size:clamp(38px,3.7vw,70px);max-inline-size:12em}
.opening-intro .lead{font-size:clamp(16px,1.15vw,19px);line-height:1.85;max-inline-size:92%}
.opening-intro .actions{gap:18px;margin-top:30px}
.opening-intro .button{font-size:16px}
.opening-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:center;max-width:1200px;margin:auto;direction:ltr}
.opening-scene{margin:0;position:relative;overflow:hidden;border-radius:22px;background:#0d2850;border:1px solid #72b4dc26;isolation:isolate}
.opening-scene img{width:100%;height:100%;aspect-ratio:720/1279;object-fit:cover;display:block}
.opening-scene.scene-2 img{object-position:31% center}
.opening-scene figcaption{position:absolute;bottom:18px;left:18px;color:#fff;font-size:clamp(22px,2.3vw,36px);font-weight:750;text-shadow:0 2px 12px #000}
.opening-messages{padding:0;list-style:none;max-width:800px;margin:60px auto 0}
.opening-messages li{padding-block:30px}
.opening-messages h2{font-size:clamp(30px,3.1vw,56px);line-height:1.36;max-inline-size:16em}
.opening-messages p{font-size:clamp(16px,1.2vw,19px);line-height:1.85}
.opening-messages .eyebrow{font-size:14px;line-height:1.7;letter-spacing:0;margin-bottom:18px}
.opening-shade,.opening-progress,.opening-skip{display:none}
.experience-intro{padding-top:80px}
.enhanced:not(.reduced):not(.opening-static) .opening{height:650svh;padding:0}
.enhanced:not(.reduced):not(.opening-static) .opening-stage{position:sticky;top:var(--opening-top,0px);height:calc(100svh - var(--opening-top,0px));padding:0;overflow:hidden;isolation:isolate}
.enhanced:not(.reduced):not(.opening-static) .opening-intro{position:absolute;left:clamp(28px,4vw,72px);top:50%;translate:0 -50%;width:42%;max-width:650px;margin:0;z-index:2;will-change:transform,opacity}
.enhanced:not(.reduced):not(.opening-static) .opening-gallery{display:block;position:absolute;inset:0;max-width:none;margin:0;pointer-events:none}
.enhanced:not(.reduced):not(.opening-static) .opening-scene{position:absolute;top:0;left:0;will-change:transform,width,height;box-shadow:0 25px 70px #0003}
.enhanced:not(.reduced):not(.opening-static) .opening-scene img{position:absolute;inset:0;aspect-ratio:auto}
.enhanced:not(.reduced):not(.opening-static) .scene-2{z-index:3}
.enhanced:not(.reduced):not(.opening-static) .scene-2 img{object-position:var(--focus-x,31%) center}
.enhanced:not(.reduced):not(.opening-static) .opening-shade{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent 30%,#020b1b30 46%,#020b1bc9 100%);opacity:var(--shade,0)}
.enhanced:not(.reduced):not(.opening-static) .opening-messages{position:absolute;top:50%;translate:0 -50%;inset-inline-start:52%;width:41%;max-width:650px;margin:0;z-index:5;pointer-events:none}
.enhanced:not(.reduced):not(.opening-static) .opening-messages li{position:absolute;inset:0 0 auto;translate:0 -50%;padding:0;opacity:0;text-shadow:0 3px 25px #0003;will-change:opacity,transform}
.enhanced:not(.reduced):not(.opening-static) .opening-messages li p:not(.eyebrow){color:#d9e7fc}
.enhanced:not(.reduced):not(.opening-static) .opening-progress{display:block;position:absolute;top:27%;bottom:27%;left:26px;width:2px;background:#ffffff38;border-radius:5px;z-index:6;opacity:var(--indicator,0);overflow:hidden}
.opening-progress span{display:block;background:#4fdfff;height:var(--milestone,0%);box-shadow:0 0 12px #32cfff}
.enhanced:not(.reduced):not(.opening-static) .opening-skip{position:absolute;bottom:24px;inset-inline-end:28px;display:inline-flex;padding:10px 18px;border:1px solid #7eb1dc60;border-radius:99px;background:#071a2cbf;z-index:7;font-size:13px;line-height:1.6;max-width:calc(100% - 56px)}
html[dir=rtl] .opening-intro{direction:rtl}
html[dir=rtl] .opening-messages{direction:rtl}
/* The artwork, physical card trajectory and original screenshots never mirror in RTL. */
html[dir=rtl].enhanced:not(.reduced):not(.opening-static) .opening-messages{inset-inline-start:auto;left:52%}
@media(max-width:1279px){
 .opening-intro h1{font-size:clamp(36px,4.1vw,56px)}
 .opening-intro .lead{font-size:16px;line-height:1.8}
 .opening-intro .eyebrow{font-size:12px;margin-bottom:18px}
 .opening-intro .actions{gap:15px;margin-top:24px}
 .opening-intro .actions .text-link{font-size:14px}
}
@media(max-width:1099px){
 .enhanced:not(.reduced):not(.opening-static) .opening-intro{top:72px;translate:none;left:7%;width:86%;max-width:700px}
 .opening-intro h1{font-size:clamp(32px,4.9vw,48px);max-inline-size:16em}
 .opening-intro .lead{max-width:44em;max-inline-size:100%;margin-top:18px}
 .opening-intro .actions{margin-top:22px}
 .opening-intro .actions .text-link{font-size:14px}
 .enhanced:not(.reduced):not(.opening-static) .opening-messages{left:8%;inset-inline-start:auto;top:auto;bottom:15%;translate:none;width:84%;max-width:700px;text-align:center}
 html[dir=rtl].enhanced:not(.reduced):not(.opening-static) .opening-messages{left:8%;inset-inline-start:auto}
 .enhanced:not(.reduced):not(.opening-static) .opening-messages li{position:absolute;inset:auto 0 0;translate:none}
 .opening-messages h2{font-size:clamp(28px,4.4vw,44px);margin-inline:auto}
 .opening-messages p{font-size:16px;max-width:35em;margin-inline:auto}
 .enhanced:not(.reduced):not(.opening-static) .opening-shade{background:linear-gradient(0deg,#020b1bdf,transparent 74%)}
 .opening-progress{left:16px!important}
}
@media(max-width:759px){
 .mobile-header{position:sticky;top:0}
 .page-tools{top:12px;inset-inline-end:16px}
 .motion-control{max-width:100%;font-size:11px;padding:7px 10px}
 .opening-stage{padding:70px 24px 40px}
 .opening-intro{margin-bottom:34px}
 .opening-intro h1{font-size:clamp(32px,8vw,42px);max-inline-size:12em}
 .opening-intro .eyebrow{font-size:11px;margin-bottom:14px}
 .opening-intro .lead{font-size:15px;line-height:1.75;margin-top:18px}
 .opening-intro .actions{gap:14px;margin-top:22px;align-items:start}
 .opening-intro .button{font-size:14px;padding:10px 19px;min-height:46px}
 .opening-intro .text-link{font-size:13px}
 .opening-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .opening-messages{margin-top:32px}
 .opening-messages .eyebrow{font-size:12px;margin-bottom:12px}
 .opening-messages h2{font-size:clamp(28px,7vw,36px);line-height:1.4}
 .opening-messages p{font-size:15px;line-height:1.8}
 .enhanced:not(.reduced):not(.opening-static) .opening{height:590svh}
 .enhanced:not(.reduced):not(.opening-static) .opening-intro{top:60px}
 .enhanced:not(.reduced):not(.opening-static) .opening-messages{bottom:15%;width:82%;left:9%}
 html[dir=rtl].enhanced:not(.reduced):not(.opening-static) .opening-messages{left:9%}
 .enhanced:not(.reduced):not(.opening-static) .opening-skip{bottom:18px;inset-inline-end:18px;font-size:11px;padding:8px 13px}
 .experience-intro{padding-top:60px}
}
@media(prefers-reduced-motion:reduce){.opening-scene,.opening-intro,.opening-messages li{will-change:auto!important}}