/* Approved metallic opening A. All display rules stay inside the overview. */
#overview{padding:0;margin:0;background:#101016;color:#faf8ff;z-index:2}
#overview>.stage-body{min-height:100svh;background:#101016;overflow:hidden}
.intro-artwork{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.intro-metal,.intro-reflection{position:absolute;width:62%;height:112%;right:-4%;top:-3%;object-fit:cover;object-position:center;mask-image:linear-gradient(90deg,transparent,#000 27%);animation:intro-metal-drift 16s ease-in-out infinite alternate;animation-play-state:paused}
.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,#101016 12%,rgba(16,16,22,.94) 30%,rgba(16,16,22,.86) 51%,transparent 76%),linear-gradient(0deg,#101016 0%,transparent 28%)}
.intro-light{position:absolute;inset:0 -8% 0 38%;background:radial-gradient(ellipse at 70% 45%,#9474ca23,transparent 63%);animation:intro-light-drift 13s ease-in-out infinite alternate;animation-play-state:paused}
.intro-visible .intro-metal,.intro-visible .intro-reflection,.intro-visible .intro-light,.intro-visible .metal-sweep{animation-play-state:running}
.intro-inner{position:relative;max-width:1440px;min-height:100svh;margin:auto;padding:160px 6.5% 190px;display:flex;align-items:center}
.intro-content{position:relative;width:66%;max-width:800px}
.intro-eyebrow{font-size:10px;letter-spacing:.14em;font-weight:500;color:#b9a3d8;margin-bottom:23px}
#overview h1{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:clamp(46px,4.35vw,64px);line-height:1.12;letter-spacing:-.045em;color:#faf8ff}
#overview .intro-accent{font-family:Lora,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(34px,3.15vw,46px);line-height:1.22;letter-spacing:-.03em;color:var(--palette-on-dark);margin-top:18px}
#overview .intro-support{font-size:17px;font-weight:400;line-height:1.8;color:#d8d6de;max-width:560px;margin-top:28px}
.intro-bottom{position:absolute;left:6.5%;right:6.5%;bottom:103px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-top:1px solid #ffffff1b;padding-top:24px}
.intro-steps{display:flex;gap:25px;align-items:center;color:#ded8e9;font-size:11px}
.intro-steps span{white-space:nowrap;display:flex;align-items:center;gap:8px}.intro-steps small{font-size:9px;color:#a88cce}
.intro-down{display:flex;align-items:center;gap:12px;color:#d1bbf2;font-size:11px;white-space:nowrap}.intro-down .icon{width:17px;height:17px;transform:rotate(90deg)}
.site-header,.navigation,#contents{transition:background-color .3s,border-color .3s,color .3s}
.site-header.on-dark{background:rgba(16,16,22,.94);border-bottom-color:#ffffff16;color:#eeeaf4}.site-header.on-dark .header-title{color:#b5afc1;border-color:#ffffff20}.site-header.on-dark .menu-lines i{background:#bda0e6}
.navigation.on-dark{background:#1c1923;border-color:#42384e;color:#f2eef7;box-shadow:0 6px 25px #0003}.navigation.on-dark #stage-count{color:#b7abc6}.navigation.on-dark .nav-separator{background:#ffffff20}.navigation.on-dark button:hover{background:#3a2e49;color:#eee4ff}.navigation.on-dark #next{background:#c3acee;color:#26173a}.navigation.on-dark #next:hover{background:#d5c6ef}.navigation.on-dark button:disabled{opacity:.35}
#contents.on-dark{background:#1c1923;border-color:#42384e;color:#eeeaf4}#contents.on-dark .contents-top{color:#bbb0c8}#contents.on-dark a span,#contents.on-dark a:hover,#contents.on-dark a[aria-current]{color:#c8a7f4}
.stage-rail a.on-dark i{background:#71637e}.stage-rail a.on-dark.active i{background:#c3a6ed}.stage-rail a.on-dark span,.stage-rail a.on-dark:hover span{background:#19151f;color:#d8c6ef}
@keyframes intro-metal-drift{from{transform:translate(0,0) scale(1.005)}to{transform:translate(-6px,5px) scale(1.02)}}
@keyframes intro-light-drift{from{opacity:.45;transform:translateX(0)}to{opacity:1;transform:translateX(-12px)}}
@media(min-width:761px) and (max-height:800px){.intro-inner{padding-top:132px;padding-bottom:168px}.intro-content{width:66%}#overview h1{font-size:clamp(44px,4vw,57px)}#overview .intro-accent{font-size:clamp(32px,2.9vw,41px);margin-top:15px}#overview .intro-support{margin-top:22px;font-size:16px}.intro-eyebrow{margin-bottom:20px}.intro-bottom{bottom:91px;padding-top:20px}}
@media(max-width:1000px){.intro-content{width:75%}.intro-steps{gap:15px}.intro-bottom{gap:18px}.intro-steps span{gap:5px}}
@media(max-width:760px){#overview>.stage-body,.intro-inner{min-height:max(850px,100svh)}.intro-inner{padding:128px 25px 250px;align-items:flex-start}.intro-content{width:100%;max-width:560px}.intro-eyebrow{font-size:8px;letter-spacing:.12em;margin-bottom:22px}#overview h1{font-size:clamp(36px,8.9vw,49px);line-height:1.12}#overview .intro-accent{font-size:clamp(29px,7.2vw,38px);line-height:1.25;margin-top:19px}#overview .intro-support{font-size:15px;line-height:1.85;margin-top:26px;max-width:390px}.intro-metal,.intro-reflection{right:-41%;width:130%;height:72%;top:34%;opacity:.7;mask-image:linear-gradient(180deg,transparent,#000 20%)}.intro-shade{background:linear-gradient(180deg,#101016 16%,rgba(16,16,22,.88) 43%,rgba(16,16,22,.3) 70%,#101016 99%),linear-gradient(90deg,#10101688,transparent)}.intro-light{inset:32% -20% 0 10%}.intro-bottom{left:25px;right:25px;bottom:105px;display:block;padding-top:19px}.intro-steps{display:flex;flex-wrap:wrap;gap:13px 19px;font-size:10px;max-width:380px}.intro-down{margin-top:23px;font-size:11px}.intro-steps small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.intro-metal,.intro-reflection,.intro-light,.metal-sweep{animation:none!important}.intro-reflection{display:none}.site-header,.navigation,#contents{transition:none}}

/* Cached artwork luminance provides the metal-only alpha mask. Image and overlay
   share the same crop/drift; only the narrow reflection band translates. */
.intro-reflection{mix-blend-mode:screen;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent 32%,#000 54%)}
.metal-sweep{animation:metal-reflection-pass 11s -2s linear infinite;animation-play-state:paused;transform-origin:0 0;will-change:transform}
@keyframes metal-reflection-pass{0%{transform:translate(380px,-100px);opacity:0}10%{opacity:.85}85%{opacity:.85}100%{transform:translate(1350px,260px);opacity:0}}
@media(max-width:760px){.intro-reflection{opacity:.55;mask-image:linear-gradient(180deg,transparent 28%,#000 55%)}}