/* =====================================================================
SAALVAN · TIER 3 v2 — one continuous film
Layers: film canvas (0) → shade (1) → atmosphere (2) → panes (5) → header/HUD (40+)
Only transform and opacity are animated on DOM elements (canvas work is exempt).
===================================================================== */
:root { --pane-pad: clamp(4.5rem, 13vh, 8rem); --spring: cubic-bezier(.34,1.56,.64,1); --glide: cubic-bezier(.2,.8,.2,1); }
body { background: var(--ink); color: var(--bone); }
/* ---------- Film stage ---------- */
.film-canvas, .film-shade { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.film-canvas { z-index: 0; display: none; transition: opacity .7s var(--glide); }
.film-shade { z-index: 1; display: none; background: linear-gradient(180deg, rgba(14,18,15,.5) 0%, rgba(14,18,15,0) 22%, rgba(14,18,15,0) 50%, rgba(14,18,15,.78) 100%); transition: opacity .7s var(--glide); }
.js.motion .film-canvas, .js.motion .film-shade { display: block; }
.three-layer { z-index: 2; }
.film { position: relative; z-index: 5; }
/* Segments: in motion mode a segment is an empty scroll spacer; its pane is fixed and the
compositor shows it while the segment is on stage. */
.seg { position: relative; }
.js.motion .seg { height: calc(var(--len, 200) * 1svh); }
.js.motion .seg-flow { height: auto; }
.pane { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--pane-pad); color: var(--bone); }
.js.motion .pane { position: fixed; inset: 0; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s var(--glide), visibility 0s linear .5s; }
.js.motion .pane.is-on { opacity: 1; visibility: visible; transition: opacity .5s var(--glide); }
.js.motion .pane.is-on a, .js.motion .pane.is-on button, .js.motion .pane.is-on [data-interactive] { pointer-events: auto; }
.pane-center { justify-content: center; align-items: center; text-align: center; padding-bottom: 0; }
.pane .display, .pane .h2, .pane .lede, .pane .eyebrow, .title-card { text-shadow: 0 2px 30px rgba(14,18,15,.5); }
.motion [data-in], .motion [data-split] { opacity: 0; }
/* Still fallback for reduced motion / no JS: each segment becomes a full-bleed still with its copy */
.pane-still { display: none; }
.reduced .pane-still, .no-js .pane-still { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reduced .seg, .no-js .seg { min-height: 0; }
.reduced .seg > .pane-still + .pane::before, .no-js .seg > .pane-still + .pane::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,18,15,.4), rgba(14,18,15,.1) 40%, rgba(14,18,15,.85)); }
.reduced .pane > *, .no-js .pane > * { position: relative; }
.reduced .seg[aria-hidden="true"], .no-js .seg[aria-hidden="true"] { display: none; }
/* Title cards: chapter numeral + name */
.title-card { display: flex; align-items: center; gap: .9rem; font: 600 .74rem/1 Manrope, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--bone); }
.title-card span { font-family: Fraunces, serif; font-style: italic; font-weight: 300; letter-spacing: .02em; text-transform: none; font-size: 1.35rem; color: var(--ochre); }
.title-card span::after { content: ""; display: inline-block; width: 2.2rem; height: 1px; margin-left: .9rem; vertical-align: middle; background: var(--laterite); }
/* ---------- Cold open: the title is a window into the film ---------- */
.pane-mask { justify-content: center; padding-bottom: 0; }
.mask-layer { position: absolute; inset: 0; transform-origin: 50% 54%; will-change: transform, opacity; }
.mask-svg { width: 100%; height: 100%; display: block; }
.reduced .mask-layer, .no-js .mask-layer { display: none; }
.cold-copy { position: absolute; left: 0; right: 0; bottom: var(--pane-pad); }
.reduced .cold-copy, .no-js .cold-copy { position: relative; bottom: auto; margin-top: auto; padding-bottom: var(--pane-pad); }
.cue { position: absolute; left: 50%; bottom: max(2rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .7rem; font: 600 .7rem/1 Manrope, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,238,227,.8); }
.cue i { width: 1px; height: 3rem; background: rgba(244,238,227,.25); position: relative; overflow: hidden; }
.cue i::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform: translateY(-100%); animation: cue 2.4s var(--glide) infinite; }
.reduced .cue, .no-js .cue { display: none; }
/* ---------- Gate: hold to open ---------- */
.gate-ui { display: flex; flex-direction: column; align-items: center; gap: .9rem; transition: opacity .6s var(--glide), transform .6s var(--glide); }
.gate-ui.is-done { opacity: 0; transform: scale(.9); pointer-events: none !important; }
.gate-ui.is-done .hold { pointer-events: none !important; }
.gate-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.reduced .gate-copy, .no-js .gate-copy { position: relative; transform: none; top: auto; }
.reduced .gate-ui, .no-js .gate-ui { display: none; }
.hold { position: relative; width: 7.5rem; height: 7.5rem; border-radius: 999px; color: var(--bone); background: radial-gradient(circle, rgba(14,18,15,.55), rgba(14,18,15,.3)); box-shadow: 0 0 0 1px rgba(244,238,227,.2), 0 20px 60px -20px rgba(185,98,47,.6); transition: transform .45s var(--spring); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hold:hover { transform: scale(1.05); } .hold:active, .hold.is-holding { transform: scale(.94); }
.hold-fill { position: absolute; inset: 6px; border-radius: inherit; background: radial-gradient(circle, rgba(224,183,122,.85), rgba(185,98,47,.75)); transform: scale(0); will-change: transform; }
.hold-label { position: relative; font: 600 .72rem/1.35 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.hold::before { content: ""; position: absolute; inset: -10px; border-radius: inherit; border: 1px solid rgba(224,183,122,.4); animation: hold-pulse 2.4s var(--glide) infinite; }
@keyframes hold-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.hold-hint { font: 500 .72rem/1 Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,238,227,.6); }
/* ---------- Doorway hub ---------- */
.pane-hub { justify-content: flex-end; }
.hub-head { margin-bottom: 1.4rem; }
.hub-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.door { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; row-gap: .35rem; align-items: baseline; padding: 1.3rem 1.4rem; border-radius: 6px; color: var(--bone); background: rgba(14,18,15,.42); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(244,238,227,.16), 0 24px 60px -30px rgba(14,18,15,.9); transition: transform .5s var(--spring), background-color .3s; }
.door:hover, .door:focus-visible { transform: translateY(-4px); background: rgba(159,83,39,.55); }
.door:active { transform: translateY(0) scale(.98); }
.door-n { grid-row: span 2; font-family: Fraunces, serif; font-style: italic; color: var(--ochre); font-size: 1.1rem; }
.door-name { font-family: Fraunces, serif; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.01em; line-height: 1.1; }
.door-meta { font-size: .78rem; letter-spacing: .08em; color: rgba(244,238,227,.72); }
.hub-note { margin-top: 1.2rem; font-size: .8rem; color: rgba(244,238,227,.6); }
.villa-cards { position: absolute; inset: 0; pointer-events: none; }
.villa { position: absolute; left: var(--gutter); bottom: var(--pane-pad); width: min(30rem, calc(100vw - 2 * var(--gutter))); padding: 1.8rem; border-radius: 8px; background: rgba(14,18,15,.62); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(244,238,227,.14), 0 40px 80px -30px rgba(14,18,15,.9), 0 20px 40px -20px rgba(122,78,45,.35); opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .6s var(--glide), transform .6s var(--glide), visibility 0s linear .6s; }
@media (min-width: 1024px) { .villa { left: max(var(--gutter), calc((100vw - 80rem) / 2 + var(--gutter))); } }
.villa.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .6s var(--glide) .2s, transform .7s var(--glide) .2s; }
.villa-still { display: none; }
.villa-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: .7rem; }
.villa-copy { margin-top: .7rem; color: rgba(244,238,227,.85); }
.villa-meta { display: flex; gap: 2rem; margin-top: 1.1rem; font-size: .85rem; }
.villa-meta dt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); }
.villa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.4rem; }
.villa-back { min-height: 44px; font-size: .85rem; font-weight: 600; color: var(--ochre); transition: opacity .2s; }
.villa-back:hover { opacity: .75; } .villa-back:active { opacity: .55; }
.pane-hub.is-inside .hub-ui { opacity: 0; transform: translateY(16px); }
.pane-hub.is-inside .hub-ui * { pointer-events: none !important; }
.hub-ui { transition: opacity .5s var(--glide), transform .5s var(--glide); }
.reduced .villa-cards, .no-js .villa-cards { position: relative; display: grid; gap: 1.5rem; padding: 2rem var(--gutter) 0; }
.reduced .villa, .no-js .villa { position: relative; left: auto; bottom: auto; opacity: 1; visibility: visible; transform: none; width: auto; pointer-events: auto; }
.reduced .villa-still, .no-js .villa-still { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; margin-bottom: 1.2rem; }
.reduced .villa-back, .no-js .villa-back { display: none; }
@media (max-width: 767px) {
.hub-doors { grid-template-columns: 1fr; gap: .6rem; }
.door { padding: 1rem 1.1rem; }
.villa { bottom: calc(var(--pane-pad) - 1.5rem); padding: 1.4rem; }
}
/* ---------- Sun dial ---------- */
.dial { position: fixed; right: var(--gutter); top: 50%; z-index: 30; width: 220px; height: 150px; margin-top: -75px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .6s var(--glide), transform .6s var(--glide), visibility 0s linear .6s; display: none; }
.js.motion .dial { display: block; }
.dial.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--glide), transform .6s var(--glide); }
.dial svg { width: 100%; height: 120px; overflow: visible; }
.dial-arc { fill: none; stroke: rgba(244,238,227,.35); stroke-width: 1; stroke-dasharray: 2 5; }
.dial-horizon { stroke: rgba(244,238,227,.5); stroke-width: 1; }
.dial-sun { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px; touch-action: none; cursor: grab; transition: opacity .2s; }
.dial-sun::before { content: ""; position: absolute; inset: 9px; border-radius: inherit; background: radial-gradient(circle at 40% 40%, #F4DDB0, var(--ochre) 55%, var(--laterite)); box-shadow: 0 0 24px 6px rgba(224,183,122,.55); transition: transform .4s var(--spring); }
.dial-sun:hover::before { transform: scale(1.15); } .dial-sun:active { cursor: grabbing; } .dial-sun:active::before { transform: scale(.95); }
.dial-time { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 600 .74rem/1 Manrope, sans-serif; letter-spacing: .22em; color: var(--ochre); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .dial { top: auto; bottom: calc(5.2rem + env(safe-area-inset-bottom)); right: 50%; margin: 0 -110px 0 0; transform-origin: 50% 100%; scale: .8; } }
/* ---------- Night walk: torch ---------- */
.pane-torch { background: #05070A; justify-content: flex-start; padding-bottom: 0; }
.torch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.torch-still { display: none; }
.reduced .torch-still, .no-js .torch-still { display: block; width: 100%; height: auto; margin-top: 2rem; }
.reduced .torch-canvas, .no-js .torch-canvas { display: none; }
.torch-head { position: relative; padding-top: calc(var(--header-h) + 2rem); pointer-events: none; }
.torch-hint { margin-top: 1rem; font-size: .9rem; color: rgba(244,238,227,.75); }
.torch-hint b { color: var(--ochre); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: .4rem; }
.hint-touch { display: none; }
@media (hover: none) { .hint-touch { display: inline; } .hint-fine { display: none; } }
.species { position: absolute; inset: 0; pointer-events: none; }
.species li { position: absolute; left: 0; top: 0; width: 15rem; padding: .9rem 1rem; border-radius: 6px; background: rgba(5,7,10,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(224,183,122,.3), 0 20px 50px -20px rgba(0,0,0,.9); opacity: 0; transition: opacity .6s var(--glide), transform .6s var(--spring); will-change: transform; }
.species li.is-found { opacity: 1; }
.sp-name { display: block; font-family: Fraunces, serif; font-size: 1.15rem; color: var(--ochre); }
.sp-copy { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.5; color: rgba(244,238,227,.82); }
.torch-coda { position: absolute; left: 0; right: 0; bottom: var(--pane-pad); text-align: center; font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--bone); opacity: 0; transform: translateY(16px); transition: opacity .8s var(--glide), transform .8s var(--glide); pointer-events: none; }
.torch-coda.is-on { opacity: 1; transform: none; }
.reduced .species, .no-js .species { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; padding: 1.5rem var(--gutter) 0; }
.reduced .species li, .no-js .species li { position: relative; opacity: 1; width: auto; }
.reduced .torch-coda, .no-js .torch-coda { position: relative; opacity: 1; transform: none; bottom: auto; padding: 2rem 0 var(--pane-pad); }
@media (max-width: 767px) { .species li { width: 12.5rem; } }
/* ---------- The table: dish cards ---------- */
.pane-dishes { justify-content: space-between; padding-top: calc(var(--header-h) + 1.5rem); }
.dish-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-inline: var(--gutter); max-width: 80rem; margin-inline: auto; width: 100%; }
.dish { padding: 1.1rem 1.2rem 1.3rem; border-radius: 6px; background: rgba(14,18,15,.5); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(224,183,122,.22), 0 30px 60px -30px rgba(14,18,15,.9), 0 14px 30px -18px rgba(185,98,47,.35); }
.motion .dish { opacity: 0; }
.dish-n { font-family: Fraunces, serif; font-style: italic; color: var(--ochre); }
.dish-name { display: block; margin-top: .3rem; font-family: Fraunces, serif; font-size: 1.25rem; line-height: 1.2; }
.dish-copy { display: block; margin-top: .35rem; font-size: .82rem; color: rgba(244,238,227,.75); line-height: 1.5; }
@media (max-width: 1023px) { .dish-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .dish { padding: .85rem .9rem 1rem; } .dish-name { font-size: 1.05rem; } .dish-copy { display: none; } }
/* Dawn */
.dawn-word { font: 600 .9rem/1 Manrope, sans-serif; letter-spacing: .6em; padding-left: .6em; text-transform: uppercase; color: var(--ochre); }
/* ---------- A day at Saalvan ---------- */
.pane-day { justify-content: center; padding-bottom: 0; background: var(--ink); }
.day-media { position: absolute; inset: 0; overflow: hidden; }
.day-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--glide); }
.day-shot.is-on { opacity: 1; }
.day-shot img, .day-shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.day-shot img { transform: scale(1.08); transition: transform 7s linear; }
.day-shot.is-on img { transform: scale(1); }
.day-shot video { opacity: 0; transition: opacity .8s var(--glide); }
.day-shot video.is-playing { opacity: 1; }
.day-shot::after { content: ""; position: absolute; inset: 0; background: var(--teak); mix-blend-mode: multiply; opacity: .14; }
.day-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,18,15,.82) 0%, rgba(14,18,15,.45) 42%, rgba(14,18,15,.05) 75%), linear-gradient(0deg, rgba(14,18,15,.6), transparent 40%); }
.day-ui { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.clock { position: relative; width: clamp(9rem, 18vw, 15rem); aspect-ratio: 1; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock-face { fill: rgba(14,18,15,.35); stroke: rgba(244,238,227,.22); stroke-width: 1; }
.clock-ticks line { stroke: rgba(244,238,227,.4); stroke-width: 1; }
.clock-ticks line.major { stroke: var(--ochre); stroke-width: 1.6; }
.clock-hand { position: absolute; left: 50%; top: 50%; width: 2px; height: 42%; margin-left: -1px; transform-origin: 50% 0; }
.clock-hand i { position: absolute; left: 0; bottom: 0; width: 2px; height: 100%; background: linear-gradient(to top, var(--ochre), transparent); }
.clock-hand::after { content: ""; position: absolute; left: -5px; bottom: -6px; width: 12px; height: 12px; border-radius: 999px; background: var(--ochre); box-shadow: 0 0 18px 4px rgba(224,183,122,.6); }
.clock-time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Fraunces, serif; font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.day-list { position: relative; margin-top: 1.4rem; min-height: 12rem; }
.js.motion .day-list li { position: absolute; left: 0; top: 0; right: 0; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--glide), transform .7s var(--glide); }
.js.motion .day-list li.is-on { opacity: 1; transform: none; }
.dl-time { display: block; font: 600 .76rem/1 Manrope, sans-serif; letter-spacing: .22em; color: var(--ochre); }
.dl-name { display: block; margin-top: .8rem; font-family: Fraunces, serif; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; }
.dl-copy { display: block; margin-top: 1rem; max-width: 32ch; color: rgba(244,238,227,.85); }
.reduced .day-media, .no-js .day-media, .reduced .clock, .no-js .clock { display: none; }
.reduced .day-ui, .no-js .day-ui { grid-template-columns: 1fr; padding-block: var(--pane-pad); }
.reduced .day-list li, .no-js .day-list li { margin-top: 2rem; }
@media (max-width: 767px) {
.day-ui { grid-template-columns: 1fr; gap: 1.2rem; align-content: end; padding-bottom: var(--pane-pad); height: 100%; }
.pane-day { justify-content: flex-end; }
.clock { width: 7.5rem; }
.day-shade { background: linear-gradient(0deg, rgba(14,18,15,.92) 0%, rgba(14,18,15,.5) 45%, rgba(14,18,15,.1) 75%); }
.day-list { min-height: 11rem; }
}
/* ---------- Light on the land ---------- */
.ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 2.4rem; border-top: 1px solid rgba(244,238,227,.25); }
.ledger li { padding: 1.1rem 1.2rem 0 0; }
.ledger b { display: block; font-family: Fraunces, serif; font-weight: 350; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--ochre); font-variant-numeric: tabular-nums; }
.ledger span { display: block; margin-top: .5rem; font-size: .85rem; line-height: 1.45; color: rgba(244,238,227,.85); }
.motion .ledger li { opacity: 0; }
@media (max-width: 1023px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ledger li:last-child { display: none; } }
/* ---------- Getting here: terrain ---------- */
.pane-journey { background: var(--ink); justify-content: space-between; padding-top: calc(var(--header-h) + 1.5rem); }
.terrain, .terrain-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js.motion .terrain-still { opacity: 0; }
.journey-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,18,15,.7) 0%, rgba(14,18,15,0) 30%, rgba(14,18,15,0) 60%, rgba(14,18,15,.8) 100%); pointer-events: none; }
.journey-head { position: relative; }
.stops { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.stops li { padding-top: 1rem; border-top: 1px solid rgba(244,238,227,.25); transition: opacity .6s var(--glide), transform .6s var(--glide); }
.js.motion .stops li { opacity: .35; }
.js.motion .stops li.is-on { opacity: 1; }
.stops li.is-on { border-top-color: var(--ochre); }
.stop-k { display: block; font: 600 .72rem/1 Manrope, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ochre); }
.stops b { display: block; margin-top: .7rem; font-family: Fraunces, serif; font-weight: 400; font-size: 1.4rem; }
.stops li > span:last-child { display: block; margin-top: .3rem; font-size: .88rem; color: rgba(244,238,227,.82); }
.terrain-label { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; gap: .55rem; font: 600 .7rem/1 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); text-shadow: 0 1px 10px rgba(0,0,0,.8); opacity: 0; transition: opacity .5s var(--glide); will-change: transform; }
.terrain-label::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--laterite); box-shadow: 0 0 0 5px rgba(185,98,47,.25); }
.terrain-label.is-on { opacity: 1; }
@media (max-width: 767px) { .stops { grid-template-columns: 1fr; gap: .4rem; } .stops li > span:last-child { display: none; } .stops b { font-size: 1.1rem; margin-top: .4rem; } .stops li { padding-top: .6rem; } }
/* ---------- Come stay: the letter ---------- */
.seg-flow { padding: calc(var(--header-h) + 18vh) 0 10vh; }
.letter { display: flex; justify-content: center; }
.letter-card { position: relative; width: min(46rem, 100%); padding: clamp(1.8rem, 5vw, 3.6rem); border-radius: 3px; color: var(--forest-900); background-color: #F1E8D8;
background-image: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.55), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(185,98,47,.10), transparent 70%), url("data:image/svg+xml;utf8,");
box-shadow: 0 2px 3px rgba(14,18,15,.2), 0 30px 60px -20px rgba(14,18,15,.8), 0 60px 120px -40px rgba(224,183,122,.35); transform: rotate(-.6deg); }
.motion .letter-card { opacity: 0; transform: translateY(80px) rotate(-3deg); }
.letter-title { font-family: Fraunces, serif; font-style: italic; font-weight: 350; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.02em; line-height: 1.1; margin-top: .8rem; color: var(--ink); }
.letter-lede { margin-top: .8rem; font-family: Fraunces, serif; font-size: 1.15rem; color: var(--forest-700); }
.letter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.6rem; margin-top: 2rem; }
.span-2 { grid-column: span 2; }
.ink-field label { display: block; font: 600 .68rem/1 Manrope, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--teak); }
.ink-field input, .ink-field select, .ink-field textarea { width: 100%; min-height: 2.9rem; margin-top: .35rem; padding: .4rem 0; background: transparent; border: 0; border-bottom: 1px solid rgba(122,78,45,.45); font-family: Fraunces, serif; font-size: 1.15rem; color: var(--ink); border-radius: 0; transition: opacity .2s; }
.ink-field textarea { resize: vertical; }
.ink-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .2rem center; }
.ink-field input:hover, .ink-field select:hover, .ink-field textarea:hover { opacity: .85; }
.ink-field input:focus-visible, .ink-field select:focus-visible, .ink-field textarea:focus-visible { outline: 2px solid var(--laterite); outline-offset: 4px; }
.ink-field .err { display: none; margin-top: .35rem; font-size: .8rem; color: var(--laterite-deep); font-weight: 600; }
.ink-field.invalid input, .ink-field.invalid select { border-bottom-color: var(--laterite); }
.ink-field.invalid .err { display: block; }
.letter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; }
.letter-sign { font-family: Fraunces, serif; font-style: italic; color: var(--teak); }
.letter-contact { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(122,78,45,.25); color: var(--teak); }
.letter-success { padding-top: 1rem; }
.letter-success:focus { outline: none; }
@media (max-width: 639px) { .letter-form { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }
/* Postcard */
.postcard-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: clamp(4rem, 10vh, 7rem); text-align: center; }
.pc-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pc-choices button { min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--bone); box-shadow: inset 0 0 0 1px rgba(244,238,227,.35); background: rgba(14,18,15,.4); transition: opacity .2s, transform .35s var(--spring); }
.pc-choices button:hover { opacity: .8; } .pc-choices button:active { transform: scale(.96); }
.pc-choices button[aria-checked="true"] { background: var(--laterite-deep); box-shadow: none; }
.postcard { width: min(46rem, 100%); height: auto; aspect-ratio: 3 / 2; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 40px 80px -30px rgba(0,0,0,.9), 0 30px 60px -30px rgba(185,98,47,.35); transform: rotate(1.2deg); background: var(--forest-700); }
.pc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
/* ---------- Credits roll ---------- */
.credits { position: relative; z-index: 6; background: var(--ink); color: var(--bone); padding-top: clamp(5rem, 14vh, 9rem); text-align: center; overflow: hidden; }
.cr-k { font-family: Fraunces, serif; letter-spacing: .5em; padding-left: .5em; font-size: 1.2rem; }
.cr-v { margin-top: .5rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.cr-list { margin-top: 3.5rem; display: grid; gap: 1.6rem; }
.cr-list dt { font: 600 .68rem/1 Manrope, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--ochre); }
.cr-list dd { margin-top: .5rem; font-family: Fraunces, serif; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.cr-list .text-link { color: var(--bone); }
.cr-fine { margin-top: 4rem; font-size: .75rem; color: rgba(169,179,154,.8); }
.motion .cr-list > div, .motion .cr-k, .motion .cr-v { opacity: 0; transform: translateY(30px); }
/* ---------- HUD (single: chapter + time) ---------- */
.hud { position: fixed; right: var(--gutter); bottom: max(1.1rem, env(safe-area-inset-bottom)); z-index: 42; display: none; }
.js.motion .hud { display: block; }
.hud-btn { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 .4rem; font: 600 .68rem/1 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,238,227,.85); font-variant-numeric: tabular-nums; text-shadow: 0 1px 12px rgba(14,18,15,.7); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--glide), transform .6s var(--glide); }
.hud.is-on .hud-btn { opacity: 1; transform: none; }
.hud-btn:hover { opacity: .75; } .hud-btn:active { transform: scale(.97); }
.hud-sep { width: 1.6rem; height: 1px; background: var(--laterite); }
.hud-time { color: var(--ochre); }
.hud-list { position: absolute; right: 0; bottom: calc(100% + .5rem); min-width: 15rem; padding: .5rem; border-radius: 8px; background: rgba(14,18,15,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(244,238,227,.12), 0 30px 60px -20px rgba(0,0,0,.8); }
.hud-list a { display: flex; align-items: center; min-height: 40px; padding: 0 .8rem; border-radius: 4px; font-size: .85rem; color: var(--bone); transition: background-color .2s; }
.hud-list a:hover, .hud-list a:focus-visible { background: rgba(159,83,39,.5); }
.hud-list a:active { opacity: .7; }
.hud-list a[aria-current="true"] { color: var(--ochre); }
@media (max-width: 767px) { .hud { right: auto; left: var(--gutter); } .hud-list { right: auto; left: 0; } }
/* ---------- Mobile thumb pill ---------- */
.thumb-pill { position: fixed; right: var(--gutter); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 42; display: none; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.3rem; border-radius: 999px; background: var(--laterite-deep); color: var(--bone); font-weight: 600; font-size: .9rem; box-shadow: 0 18px 40px -12px rgba(185,98,47,.6), 0 4px 10px rgba(14,18,15,.4); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--glide), transform .5s var(--spring); }
@media (max-width: 1023px) { .js.motion .thumb-pill { display: inline-flex; } }
.thumb-pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
.thumb-pill:active { transform: scale(.96); }
/* Demo switcher: only before the film starts and in the credits */
.js.motion .demo { opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .5s var(--glide), transform .5s var(--glide); }
.js.motion .demo.is-on { opacity: 1; pointer-events: auto; transform: none; }
/* Header over the film never turns solid */
.site-header.is-scrolled { color: var(--bone); }
.site-header.is-scrolled::before { opacity: 0; }
.site-header::after { content: ""; position: absolute; inset: 0 0 -2rem 0; z-index: -1; background: linear-gradient(180deg, rgba(14,18,15,.45), transparent); pointer-events: none; }
/* Mobile: tighter type in panes */
@media (max-width: 767px) {
:root { --pane-pad: calc(5.5rem + env(safe-area-inset-bottom)); }
.title-card { font-size: .66rem; } .title-card span { font-size: 1.15rem; }
}
/* Cut to black for long jumps */
.curtain { position: fixed; inset: 0; z-index: 44; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .4s var(--glide); }
.curtain.is-on { opacity: 1; }
/* The film canvas gets its own compositing layer from the start */
.film-canvas { will-change: transform; transform: translateZ(0); }
/* The preloader is 99% opaque on purpose: browsers skip compositing what a fully opaque layer hides,
and the WebGL surfaces need to draw (and pay their first-frame cost) behind it */
.preloader { background-color: rgba(14,18,15,.99); }
.js.motion .pane.is-warm { visibility: visible; opacity: .02; }
/* The terrain pane never fully leaves the compositor (re-creating a WebGL layer stalls); it idles at near-zero opacity */
.js.motion .pane-journey:not(.is-on) { visibility: visible; opacity: .02; }
/* ---------- v2.1: beats, hold, torch game, reserve scene ---------- */
.hold-fill { transition: transform .12s ease-out; }
.hold.is-holding .hold-fill { transform: scale(1); transition: transform .65s linear; }
.torch-skip { margin-top: 1rem; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--bone); background: rgba(5,7,10,.5); box-shadow: inset 0 0 0 1px rgba(224,183,122,.4); pointer-events: auto; transition: opacity .2s, transform .35s var(--spring), background-color .3s; }
.torch-skip:hover { background: rgba(159,83,39,.55); } .torch-skip:active { transform: scale(.96); }
.torch-hint.is-done b { color: var(--bone); }
.is-nudge { animation: nudge .5s var(--spring); }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
/* Reserve: a held scene, the letter on the right */
.pane-reserve { justify-content: center; padding: 0; background: var(--ink); }
.reserve-media { position: absolute; inset: 0; overflow: hidden; }
.reserve-img, .reserve-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reserve-img { transform: scale(1.06); transition: transform 14s linear; }
.pane-reserve.is-on .reserve-img { transform: scale(1); }
.reserve-video { opacity: 0; transition: opacity 1.2s var(--glide); }
.reserve-video.is-playing { opacity: 1; }
.reserve-media::after { content: ""; position: absolute; inset: 0; background: var(--teak); mix-blend-mode: multiply; opacity: .12; }
.reserve-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,18,15,.55) 0%, rgba(14,18,15,.05) 35%, rgba(14,18,15,.15) 58%, rgba(14,18,15,.72) 100%), linear-gradient(0deg, rgba(14,18,15,.6), transparent 35%); }
.reserve-intro { position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 8vh, 5rem); pointer-events: none; }
.reserve-line { margin-top: .9rem; font-size: clamp(1.8rem, 3.6vw, 3.2rem); max-width: 14ch; }
.pane-reserve .letter-card { position: absolute; right: max(var(--gutter), calc((100vw - 80rem) / 2 + var(--gutter))); top: 50%; width: min(31rem, 40vw); max-height: calc(100svh - var(--header-h) - 3rem); margin-top: calc(var(--header-h) / 2); transform: translateY(-50%) rotate(-.4deg); overflow: auto; overscroll-behavior: contain; padding: 0; opacity: 1; }
.js.motion .pane-reserve .letter-card { opacity: 0; }
.letter-inner { padding: clamp(1.5rem, 2.6vw, 2.4rem); }
.pane-reserve .letter-title { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.pane-reserve .letter-form { gap: .9rem 1.3rem; margin-top: 1.2rem; }
.pane-reserve .ink-field input, .pane-reserve .ink-field select, .pane-reserve .ink-field textarea { min-height: 2.5rem; font-size: 1.05rem; }
.pane-reserve .letter-contact { margin-top: 1.2rem; }
.pane-reserve .postcard { width: 100%; margin-top: 1rem; transform: rotate(.8deg); }
.pane-reserve .pc-choices { justify-content: flex-start; margin-top: 1rem; }
.pane-reserve .pc-choices button { color: var(--forest-900); box-shadow: inset 0 0 0 1px rgba(122,78,45,.4); background: transparent; }
.pane-reserve .pc-choices button[aria-checked="true"] { color: var(--bone); background: var(--laterite-deep); }
.pane-reserve .pc-actions { justify-content: flex-start; margin-top: 1rem; }
.pc-dl { color: var(--teak); box-shadow: inset 0 0 0 1px rgba(122,78,45,.45); background: transparent; backdrop-filter: none; }
@media (max-width: 1023px) {
.pane-reserve .letter-card { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: none; margin: 0; max-height: 62svh; }
.reserve-intro { top: calc(var(--header-h) + 1rem); bottom: auto; }
.reserve-shade { background: linear-gradient(0deg, rgba(14,18,15,.75), transparent 60%), linear-gradient(180deg, rgba(14,18,15,.6), transparent 35%); }
}
.reduced .pane-reserve .letter-card, .no-js .pane-reserve .letter-card { position: relative; right: auto; top: auto; transform: none; width: auto; max-width: 40rem; margin: calc(var(--header-h) + 2rem) var(--gutter) 2rem auto; max-height: none; opacity: 1; }
.reduced .reserve-intro, .no-js .reserve-intro { position: relative; bottom: auto; padding-bottom: 3rem; }