:root{--gold:#f1da8a;--paper:#eee0ba}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#15140f;color:var(--paper);font-family:"Songti SC","STSong","Noto Serif SC",serif}.experience{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#464235,#171710 72%)}.stage{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);overflow:hidden;isolation:isolate;background:#373326;box-shadow:0 0 80px #000}.frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}.frame-one{z-index:1}.frame-two,.frame-three,.frame-four,.frame-five,.frame-six{opacity:0}.frame-two{z-index:2;transition:opacity .75s ease}.frame-three{z-index:3;transition:opacity 5s cubic-bezier(.23,.73,.29,1)}.frame-four{z-index:4;transition:opacity 5s cubic-bezier(.23,.73,.29,1)}.frame-five{z-index:5;transition:opacity 4s cubic-bezier(.23,.73,.29,1)}.frame-six{z-index:6;transition:opacity 4s cubic-bezier(.23,.73,.29,1)}.frame-seven{z-index:7;opacity:1;clip-path:inset(0 100% 0 0);transition:clip-path 5.5s cubic-bezier(.25,.7,.18,1)}.vignette{position:absolute;z-index:8;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(25,17,12,.18) 74%,rgba(16,9,7,.5)),linear-gradient(180deg,rgba(18,12,8,.2),transparent 23%,transparent 75%,rgba(20,13,8,.24))}.stage:not([data-step="0"]) .frame-two{opacity:1}.stage[data-step="2"] .frame-three,.stage[data-step="3"] .frame-three,.stage[data-step="4"] .frame-three,.stage[data-step="5"] .frame-three,.stage[data-step="6"] .frame-three,.stage[data-step="7"] .frame-three{opacity:1}.stage[data-step="3"] .frame-four,.stage[data-step="4"] .frame-four,.stage[data-step="5"] .frame-four,.stage[data-step="6"] .frame-four,.stage[data-step="7"] .frame-four{opacity:1}.stage[data-step="4"] .frame-five,.stage[data-step="5"] .frame-five,.stage[data-step="6"] .frame-five,.stage[data-step="7"] .frame-five{opacity:1}.stage[data-step="5"] .frame-six,.stage[data-step="6"] .frame-six,.stage[data-step="7"] .frame-six{opacity:1}.stage[data-step="7"] .frame-seven{clip-path:inset(0 0 0 0)}.title{position:absolute;z-index:12;top:5%;left:4.2%;text-shadow:0 2px 18px #171008;transition:opacity .8s}.title span{font-size:clamp(9px,.7vw,14px);letter-spacing:.45em;color:#e3ca83}.title h1{margin:.4em 0 0;font-size:clamp(21px,2.15vw,42px);font-weight:400;letter-spacing:.3em}.stage[data-step="4"] .title,.stage[data-step="5"] .title,.stage[data-step="6"] .title,.stage[data-step="7"] .title{opacity:0}.hotspot{position:absolute;z-index:20;border:0;background:transparent;color:var(--paper);cursor:pointer;display:none}.hotspot i{position:absolute;left:50%;top:50%;width:clamp(20px,1.9vw,38px);height:clamp(20px,1.9vw,38px);border:1px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);animation:pulse 1.9s ease-out infinite}.hotspot i:after{content:"";position:absolute;inset:33%;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}.hotspot span{position:absolute;left:50%;top:calc(50% + clamp(22px,2.2vw,44px));transform:translateX(-50%);white-space:nowrap;padding:.55em 1em;border:1px solid rgba(241,218,138,.45);border-radius:999px;background:rgba(26,22,16,.72);backdrop-filter:blur(8px);font-size:clamp(9px,.72vw,14px);letter-spacing:.18em;text-shadow:0 2px 8px #000}.veil-hit{display:block;left:32.5%;top:31%;width:20%;height:30%}.lock-hit{left:36.5%;top:51%;width:9%;height:14%}.groom-hit{left:48%;top:27%;width:24%;height:58%}.jade-hit{left:73%;top:65%;width:15%;height:23%}.stage[data-step="2"] .lock-hit,.stage[data-step="3"] .groom-hit,.stage[data-step="6"] .jade-hit{display:block}.stage:not([data-step="0"]) .veil-hit{display:none}.narration{position:absolute;z-index:12;left:50%;top:13%;width:46%;transform:translateX(-50%) translateY(12px);text-align:center;text-shadow:0 2px 16px #181109;opacity:0;transition:opacity 1.2s,transform 1.2s}.narration small{color:var(--gold);font-size:clamp(9px,.65vw,13px);letter-spacing:.5em}.narration p{margin:.8em 0 0;font-size:clamp(13px,1.15vw,22px);line-height:1.75;letter-spacing:.14em}.stage[data-step="2"] .family-copy{opacity:1;transform:translateX(-50%)}.ending-copy{top:74%}.stage[data-step="3"] .ending-copy{opacity:1;transform:translateX(-50%)}.original-verse{position:absolute;z-index:13;left:50%;top:46%;display:flex;flex-direction:row-reverse;gap:1.2em;transform:translate(-50%,-50%);opacity:0;transition:opacity 1.8s 5s;text-shadow:0 2px 14px #1b130c;color:#f4e7c6}.original-verse p{margin:0;writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(20px,2vw,40px);letter-spacing:.14em;line-height:1.15}.original-verse p:first-child{transform:translateY(-1.2em)}.original-verse p:last-child{transform:translateY(1.2em)}.stage[data-step="7"] .original-verse{opacity:1}.guide{position:absolute;z-index:14;left:4.2%;bottom:5.2%;display:flex;align-items:center;gap:1em;padding:.8em 1.15em;border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(27,22,15,.7),transparent);text-shadow:0 2px 10px #000;transition:opacity 1s}.guide-number{font-size:clamp(24px,2.5vw,48px);font-weight:400;color:var(--gold)}.guide-label{font-size:clamp(8px,.56vw,11px);letter-spacing:.4em;color:#e2c979}.guide p{margin:.35em 0 0;font-size:clamp(10px,.78vw,15px);letter-spacing:.15em}.progress{position:absolute;z-index:14;right:4.2%;bottom:6.5%;display:flex;gap:.65em}.progress i{width:clamp(22px,2.3vw,46px);height:2px;background:rgba(241,218,138,.25);transition:background .6s}.progress i.active{background:var(--gold);box-shadow:0 0 8px rgba(241,218,138,.5)}.restart{position:absolute;z-index:30;right:4.2%;top:5%;padding:.6em 1em;border:1px solid rgba(241,218,138,.4);border-radius:999px;background:rgba(26,22,16,.55);backdrop-filter:blur(8px);color:var(--paper);font-size:clamp(9px,.65vw,13px);letter-spacing:.15em;cursor:pointer;opacity:.65;transition:.25s}.restart:hover{opacity:1;border-color:var(--gold)}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(241,218,138,.45)}70%{box-shadow:0 0 0 clamp(15px,1.5vw,30px) rgba(241,218,138,0)}100%{box-shadow:0 0 0 0 rgba(241,218,138,0)}}@media(prefers-reduced-motion:reduce){.frame,.narration,.original-verse{transition-duration:.01ms;transition-delay:0s}.hotspot i{animation:none}}