
.intro-screen{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#142534 0,#09121d 53%,#03060b 100%);opacity:1;transition:opacity .82s ease;isolation:isolate}
.intro-screen[hidden]{display:none}.intro-screen.fade-away{opacity:0;pointer-events:none}
.intro-halo{position:absolute;width:min(78vw,72vh);aspect-ratio:1;border:1px solid #91eee51c;border-radius:50%;box-shadow:0 0 75px #70ded30b,inset 0 0 60px #7be5d508;animation:halo-breathe 5s ease-in-out infinite alternate;z-index:-1}
.halo-two{width:min(58vw,53vh);border-color:#f0cf801c;animation-delay:-2s;animation-direction:alternate-reverse}
.intro-grain{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 10%,#02050a9e 100%)}
.intro-stage{position:relative;z-index:1;width:min(90%,680px);padding:28px;text-align:center;opacity:0;transform:translateY(13px);transition:opacity .58s ease,transform .58s ease}
.intro-stage.arrive{opacity:1;transform:translateY(0)}.intro-stage.depart{opacity:0;transform:translateY(-10px)}
.intro-kicker{font:600 clamp(9px,1.4vw,12px)/1.6 system-ui,sans-serif;letter-spacing:.42em;color:#a1eee3;text-transform:uppercase}
.intro-stage h2{margin:20px 0 8px;font:400 clamp(29px,5.4vw,53px)/1.05 Georgia,serif;letter-spacing:.08em;color:#f1f5f1;text-shadow:0 0 26px #76e8dc41}
.intro-role{margin:0;color:#dec68c;font:600 11px/1.7 system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.intro-title{font-size:clamp(34px,7vw,72px)!important;line-height:1.08!important;letter-spacing:.16em!important}
.intro-rule{width:min(260px,54%);height:1px;margin:22px auto;background:linear-gradient(90deg,transparent,#9cf1dfb3,transparent)}
.intro-small{margin:0;color:#9eafbc;font:12px/1.7 system-ui,sans-serif;letter-spacing:.14em}
.studio-lockup{display:flex;justify-content:center;align-items:center;gap:clamp(16px,4vw,44px);margin:30px auto 20px}
.studio-name{min-width:150px;color:#edf3f0;font:400 clamp(19px,3.2vw,31px)/1.12 Georgia,serif;letter-spacing:.035em;text-shadow:0 0 20px #80eade28}
.studio-name em{font-style:normal;color:#a3c4c4;font-size:.72em;letter-spacing:.25em;text-transform:uppercase}
.studio-mark{display:block;margin-bottom:9px;color:#94eee0;font-size:23px;text-shadow:0 0 18px #7cf4df88}
.studio-x{color:#d7c58f;font:26px Georgia,serif}
.skip-intro{position:absolute;z-index:2;right:clamp(12px,2.4vw,24px);bottom:clamp(12px,2.4vw,24px);padding:10px 13px;border:1px solid #b1eade40;border-radius:6px;color:#a9bac6;background:#08121b9c;font:600 10px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.18s}
.skip-intro:hover,.skip-intro:focus-visible{outline:none;border-color:#a3f4e8;color:#f1fff9;background:#15303a}
.skip-intro kbd{margin-left:4px;padding:3px 5px;border:1px solid #a5eadd55;border-radius:3px;color:#d6f6ee;background:#12212a;font:inherit}
@keyframes halo-breathe{from{transform:scale(.94);opacity:.55}to{transform:scale(1.04);opacity:1}}
@media(max-width:600px){.intro-stage{padding:15px}.studio-name{min-width:120px}.intro-small{font-size:10px}.skip-intro{bottom:9px;right:9px;padding:9px}}
@media(prefers-reduced-motion:reduce){.intro-screen,.intro-stage{transition-duration:.18s}.intro-halo{animation:none}}

.chapter{min-height:150px}.chapter .chapter-desc{display:block;margin-top:5px;color:#92a8b9;font-size:10px;line-height:1.42;letter-spacing:0;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:700px){.chapter{min-height:0}}

.chapter-count{display:block;margin-top:5px;color:#a5e8dc;font:600 9px/1.4 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}

.mask-card{min-height:138px;border-color:#b7a6df38}.mask-card strong{display:flex;align-items:center;gap:9px}.mask-swatch{display:inline-grid;place-items:center;width:29px;height:29px;flex:0 0 29px;border:1px solid color-mix(in srgb,var(--mask) 85%,white 15%);border-radius:50% 50% 42% 42%;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--mask) 75%,white 25%),var(--mask) 48%,#141725 100%);color:#101520;font:16px Georgia,serif;text-shadow:0 1px 2px #fff8;box-shadow:0 0 14px color-mix(in srgb,var(--mask) 32%,transparent)}.mask-card .tag{color:#c9b7ed}.chapter-grid .mask-card p{min-height:36px}
