:root{--ink:#f3eddf;--gold:#CEBD74;--night:#090908;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}html,body{margin:0;background:var(--night);color:var(--ink);font-family:"Noto Serif TC","Songti TC",serif}body{overflow:hidden}
button{font:inherit}.hosanna{position:relative;width:100vw;height:100svh;overflow:hidden;background:#080807;isolation:isolate}
.stage,.master,.master-fallback,.montage,.grain,.vignette{position:absolute;inset:0}
.master{transform:scale(1.08) translate3d(-1.4%,1%,0);animation:approach 24s var(--ease) infinite alternate;will-change:transform}
.master-fallback{background:
radial-gradient(circle at 62% 46%,rgba(206,189,116,.22),transparent 13%),
linear-gradient(118deg,transparent 0 46%,rgba(218,203,149,.08) 47% 49%,transparent 50%),
linear-gradient(180deg,#17140f 0%,#0b0a08 56%,#050504 100%)}
.master.has-image .master-fallback{background-position:center;background-size:cover}
.montage{overflow:hidden}.shot-video{width:106%;height:106%;object-fit:cover;object-position:center;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);filter:grayscale(.08) contrast(1.05) sepia(.06)}.shot-video.is-playing{opacity:var(--peak-opacity,.96)}.shot{position:absolute;opacity:0;background-position:center;background-size:cover;will-change:transform,opacity;animation:stillFade var(--dur,2.2s) var(--ease) forwards}.shot-video.shot{animation:none}.film-frame{inset:-5%;filter:grayscale(.28) contrast(1.12) sepia(.13)}.film-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(224,197,119,.09),transparent 24%,transparent 76%,rgba(224,197,119,.07));mix-blend-mode:screen;pointer-events:none}.double-exposure{--peak-opacity:.66;--hold-opacity:.54;inset:-7%;mix-blend-mode:normal;filter:grayscale(.1) contrast(1.1) sepia(.1);background-position:center;background-size:cover}.double-exposure:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(220,191,103,.08),transparent 37%,rgba(15,12,8,.06));pointer-events:none}.double-exposure:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(8,8,7,.13));pointer-events:none}.art-card{--peak-opacity:.76;--hold-opacity:.68;inset:clamp(44px,8vh,108px) clamp(28px,10vw,176px);border:1px solid rgba(231,211,149,.45);box-shadow:0 24px 75px rgba(0,0,0,.68),0 0 0 12px rgba(10,9,7,.88),0 0 0 13px rgba(231,211,149,.16);filter:saturate(.78) contrast(1.12) sepia(.18)}.art-card:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(240,218,151,.18),transparent 18%,transparent 68%,rgba(0,0,0,.2)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);mix-blend-mode:soft-light;pointer-events:none}.art-card:after{content:attr(data-era) '  /  ENTRY';position:absolute;left:16px;bottom:13px;color:rgba(243,237,223,.8);font:10px/1 "Cormorant Garamond",serif;letter-spacing:.28em;text-shadow:0 1px 8px #000}.motion-push-in{animation-name:stillPushIn}.motion-branch-sweep{animation-name:stillBranchSweep}.motion-procession-pan{animation-name:stillProcessionPan}.motion-gate-rise{animation-name:stillGateRise}.motion-crowd-turn{animation-name:stillCrowdTurn}
.grain{opacity:.11;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.vignette{background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 28%,transparent 62%,rgba(0,0,0,.7)),radial-gradient(circle at 50% 44%,transparent 35%,rgba(0,0,0,.55) 100%)}
.issue-mark{position:absolute;z-index:5;top:max(24px,env(safe-area-inset-top));left:clamp(20px,3.2vw,52px);right:clamp(20px,3.2vw,52px);display:flex;justify-content:space-between;font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:.22em;opacity:.62}
.arrival{position:absolute;z-index:6;left:clamp(24px,7vw,120px);bottom:clamp(92px,13vh,170px);max-width:min(720px,80vw);pointer-events:none}
.arrival p,.arrival h1{margin:0;opacity:0;transform:translateY(12px);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease)}
.arrival p{font-size:clamp(16px,1.5vw,24px);letter-spacing:.18em;color:var(--gold);margin-bottom:18px}
.arrival h1{font-weight:500;font-size:clamp(38px,6.2vw,92px);line-height:1.06;letter-spacing:.02em}
[data-state="arrival"] .arrival p{opacity:1;transform:none}
[data-state="arrival"] .arrival h1{opacity:1;transform:none;transition-delay:.8s}
.enter{position:absolute;z-index:7;right:clamp(24px,5vw,84px);bottom:clamp(30px,5vh,68px);border:0;background:transparent;color:var(--ink);display:flex;align-items:center;gap:14px;opacity:.68;cursor:pointer;transition:opacity .3s}
.enter:hover{opacity:1}.enter i{display:block;width:48px;height:1px;background:var(--gold);position:relative}.enter i:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg)}
.sound-note{position:absolute;z-index:7;left:clamp(20px,3.2vw,52px);bottom:clamp(24px,4vh,48px);font-size:10px;letter-spacing:.15em;opacity:.4;margin:0}
@keyframes approach{to{transform:scale(1.19) translate3d(1.8%,-1.2%,0)}}@keyframes stillFade{0%{opacity:0;transform:translate3d(var(--from-x,0),var(--from-y,0),0) scale(var(--from-scale,1.05))}16%{opacity:var(--peak-opacity,.9)}78%{opacity:var(--hold-opacity,.86)}100%{opacity:0;transform:translate3d(var(--to-x,0),var(--to-y,0),0) scale(var(--to-scale,1.1))}}@keyframes stillPushIn{0%{opacity:0;transform:scale(1.02) translate3d(0,2%,0)}16%{opacity:var(--peak-opacity,.9)}78%{opacity:var(--hold-opacity,.86)}100%{opacity:0;transform:scale(1.13) translate3d(0,-1%,0)}}@keyframes stillBranchSweep{0%{opacity:0;transform:scale(1.14) translate3d(-3%,2%,0)}16%{opacity:var(--peak-opacity,.9)}78%{opacity:var(--hold-opacity,.86)}100%{opacity:0;transform:scale(1.04) translate3d(2%,-1%,0)}}@keyframes stillProcessionPan{0%{opacity:0;transform:scale(1.04) translate3d(3%,0,0)}16%{opacity:var(--peak-opacity,.9)}78%{opacity:var(--hold-opacity,.86)}100%{opacity:0;transform:scale(1.13) translate3d(-2%,0,0)}}@keyframes stillGateRise{0%{opacity:0;transform:scale(1.12) translate3d(0,3%,0)}16%{opacity:var(--peak-opacity,.9)}78%{opacity:var(--hold-opacity,.86)}100%{opacity:0;transform:scale(1.03) translate3d(0,-3%,0)}}@keyframes stillCrowdTurn{0%{opacity:0;transform:scale(1.09) translate3d(-2%,0,0)}16%{opacity:var(--peak-opacity,.9)}78%{opacity:var(--hold-opacity,.86)}100%{opacity:0;transform:scale(1.07) translate3d(2%,1%,0)}}
@media(max-width:720px){.issue-mark{font-size:9px}.arrival{left:24px;bottom:118px}.enter{right:24px}.master{animation-duration:18s}.film-frame,.double-exposure{inset:-8%}.art-card{inset:14vh 8vw}.art-card:after{left:11px;bottom:9px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.master{animation:none}.shot{animation:none!important}.montage{display:none}}

/* Enter City: A8 is a one-way editorial handoff, not a trailer restart. */
.city-entry{position:absolute;inset:0;z-index:12;pointer-events:none;visibility:hidden;background:#090908;overflow:hidden}
.gate-leaf{position:absolute;top:0;bottom:0;width:51%;background:linear-gradient(90deg,#080807,#17140f 72%,#211c12);box-shadow:inset 0 0 0 1px rgba(206,189,116,.08);transition:transform 2.4s cubic-bezier(.72,0,.18,1)}
.gate-leaf-left{left:0;transform-origin:left center}.gate-leaf-right{right:0;transform-origin:right center;background:linear-gradient(270deg,#080807,#17140f 72%,#211c12)}
.threshold-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent 8%,rgba(206,189,116,.8) 45%,transparent 92%);opacity:0}
.city-depth{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:8vw;background:radial-gradient(circle at 50% 36%,rgba(206,189,116,.12),transparent 20%),linear-gradient(#0e0c09,#070706);opacity:0;transform:scale(1.08);transition:opacity 1.8s 1.2s var(--ease),transform 5.5s .7s var(--ease)}
.city-name{font-family:"Cormorant Garamond",serif;letter-spacing:.48em;font-size:clamp(10px,1vw,14px);color:var(--gold);margin:0 0 8vh;opacity:.7}
.city-depth h2{font-weight:400;font-size:clamp(34px,5.2vw,78px);letter-spacing:.08em;margin:0;opacity:0;transform:translateY(18px);transition:opacity 1.8s 3.1s var(--ease),transform 1.8s 3.1s var(--ease)}
.depth-note{font-size:clamp(12px,1vw,16px);letter-spacing:.2em;margin:3vh 0 0;opacity:0;transition:opacity 1.8s 4.2s var(--ease)}
.strata{position:absolute;left:8vw;right:8vw;bottom:8vh;height:28vh;opacity:.42}.strata i{display:block;height:20%;border-top:1px solid rgba(206,189,116,.16);transform:scaleX(var(--w,1))}.strata i:nth-child(2){--w:.91}.strata i:nth-child(3){--w:.78}.strata i:nth-child(4){--w:.62}.strata i:nth-child(5){--w:.44}
html.entering .city-entry{visibility:visible}html.entering .threshold-line{animation:thresholdFlash 1.8s var(--ease) forwards}html.entering .gate-leaf-left{transform:perspective(1200px) rotateY(-72deg)}html.entering .gate-leaf-right{transform:perspective(1200px) rotateY(72deg)}html.entering .city-depth{opacity:1;transform:scale(1)}html.entering .city-depth h2,html.entering .depth-note{opacity:1;transform:none}html.entering .issue-mark,html.entering .arrival,html.entering .enter,html.entering .sound-note{opacity:0!important;transition:opacity .7s ease}
@keyframes thresholdFlash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gate-leaf{transition:none}.city-depth{transition:none;transform:none}html.entering .gate-leaf{display:none}html.entering .city-depth,html.entering .city-depth h2,html.entering .depth-note{opacity:1}}

html.cover-embed .issue-mark,html.cover-embed .arrival,html.cover-embed .enter,html.cover-embed .sound-note,html.cover-embed .city-entry{display:none}
html.cover-embed .vignette{opacity:.25}