:root { color-scheme: dark; background: #100d0e; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.experience { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #100d0e; }
.experience::before, .experience::after { content: ""; position: absolute; inset: -25%; pointer-events: none; z-index: -1; will-change: transform,opacity; }
.experience::before { background: radial-gradient(ellipse at 40% 48%,#48232b 0%,#291a20 32%,transparent 66%); opacity: .64; animation: ambientWine 22s ease-in-out infinite alternate; }
.experience::after { background: radial-gradient(ellipse at 62% 60%,#443328 0%,transparent 58%); opacity: .3; animation: ambientWarmth 29s ease-in-out infinite alternate; }
@keyframes ambientWine { from { transform: translate(-7%,-3%) scale(.95); opacity: .48; } to { transform: translate(9%,5%) scale(1.13); opacity: .75; } }
@keyframes ambientWarmth { from { transform: translate(8%,5%) scale(1.1); opacity: .24; } to { transform: translate(-10%,-7%) scale(.93); opacity: .44; } }
html[data-page-hidden="true"] .experience::before, html[data-page-hidden="true"] .experience::after { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) { .experience::before, .experience::after { animation: none; will-change: auto; } }
.hero-canvas { position: absolute; inset: 0; }
.hero-canvas canvas { display: block; width: 100%; height: 100%; }
.fallback-nut { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 12vh; width: auto; max-width: 18vw; object-fit: contain; }
html[data-hero="ready"] .fallback-nut { display: none; }
html[data-hero="fallback"] .hero-canvas { display: none; }
.film-typography { position: absolute; inset: 0; pointer-events: none; }
.chapter-caption { position: absolute; top: 50%; translate: 0 -50%; left: 20px; right: 20px; margin: 0; text-align: center; color: #f5eee0; font-family: "Noto Serif TC", "PMingLiU", "Songti TC", serif; font-size: clamp(28px,3.2vw,54px); font-weight: 400; letter-spacing: .24em; text-indent: .24em; line-height: 1.5; text-shadow: 0 2px 7px #170108,0 2px 22px #170108; opacity: 0; will-change: opacity,transform; }
.brand-finale { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; isolation: isolate; }
.finale-title { position: relative; isolation: isolate; }
.brand-watermark { display: block; width: clamp(100px,11vw,160px); height: auto; max-width: 100%; margin: 0 auto 4px; object-fit: contain; filter: brightness(0) saturate(100%) invert(78%) sepia(32%) saturate(635%) hue-rotate(359deg) brightness(91%) contrast(87%); opacity: 1; }
.finale-lockup { text-align: center; }
.finale-lockup h1 { margin: 0; color: #f6f0df; font-family: "Noto Serif TC", "PMingLiU", "Songti TC", serif; font-size: clamp(48px,7.5vw,128px); font-weight: 400; letter-spacing: .17em; text-indent: .17em; line-height: 1.4; text-shadow: 0 6px 35px #18010766; }
.finale-lockup h1 span { background: linear-gradient(145deg,#fff3cb 5%,#e9ca85 40%,#b38a43 80%,#eed7a9); background-clip: text; -webkit-background-clip: text; color: transparent; }
.finale-rule { width: 48px; height: 1px; margin: 25px auto; background: linear-gradient(90deg,transparent,#ccb27d,transparent); }
.finale-lockup p { margin: 8px 0 0; color: #eadac0; font-family: "Noto Serif TC", "PMingLiU", serif; font-size: clamp(15px,1.3vw,21px); letter-spacing: .48em; text-indent: .48em; }
.mobile-break { display: none; }
.chapter-caption small { display: block; margin-top: 15px; font-size: .4em; letter-spacing: .2em; text-indent: .2em; color: #e4d3b6; }
.finale-lockup { position: relative; }
.replay-button { position: absolute; top: calc(100% + 30px); left: calc(50% - 24px); width: 48px; height: 48px; padding: 12px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #d7bd85; opacity: .38; cursor: pointer; pointer-events: auto; transition: opacity .2s, background-color .2s; }
.replay-button[hidden] { display: none; }
.replay-button svg { width: 23px; height: 23px; }
.replay-button:hover, .replay-button:focus-visible { opacity: 1; background: #e7c67d0d; }
.replay-button:focus-visible { outline: 1px solid #d7bd85; outline-offset: 3px; }
@media(prefers-reduced-motion:reduce) { .replay-button { transition: none; } }
@media(max-width:600px) { .chapter-caption { font-size: 28px; letter-spacing: .12em; text-indent: .12em; } .mobile-break { display: block; } .chapter-caption small { font-size: 14px; } .finale-rule { margin: 22px auto; } }
@media(max-height:450px) { .chapter-caption { font-size: 25px; } }