/* ========================================================================== THE JOURNEY — one continuous pinned cinematic walk. Progressive enhancement: everything below defaults to a plain, readable, stacked document (no positioning tricks, no hidden overlays) — the state you get with JS disabled, or nothing has run yet. `main.js` adds `cinematic` to only once GSAP/ScrollTrigger/Lenis have initialized AND the user hasn't asked for reduced motion; only then do the pinned / absolute / decorative rules below (all scoped under `body.cinematic`) apply. Kinetic-type and chapter-reveal starting states (translateY, opacity) are likewise set by journey.js at runtime, never in CSS — so a no-JS visitor never sees hidden text. ========================================================================== */ /* ---------- Decorative overlays: cinematic-only, absent otherwise ---------- */ .scrub-vignette, .grain, .grade, .scrub-progress, .route, .cursor { display: none; } #scrub-canvas { display: none; } /* ---------- Default (stacked, readable) chapter layout ---------- */ .chapters { display: flex; flex-direction: column; } .chapter { padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); max-width: 46rem; margin: 0 auto; } .chapter-menu, .chapter-story, .chapter-visit { max-width: 74rem; } .chapter[data-station="arrival"] { background: var(--ink); color: var(--cream); max-width: none; } .chapter[data-station="arrival"] .beat-title-hero { font-size: var(--fs-hero); } .chapter-menu { background: var(--ink); color: var(--cream); max-width: none; } .chapter-visit { background: var(--terracotta); color: var(--cream); max-width: none; } .chapter-story { background: var(--cream); color: var(--ink); max-width: none; } .chapter-story .eyebrow { color: var(--terracotta); } .chapter-menu-head, .chapter-visit-head { max-width: 74rem; margin: 0 auto 2.5rem; } .chapter-menu .menu-grid, .chapter-visit .visit-facts, .chapter-visit .visit-ctas { max-width: 74rem; margin-left: auto; margin-right: auto; } .kinetic .ln { display: block; overflow: hidden; } .kinetic .ln-inner { display: block; } /* ========================================================================== CINEMATIC MODE ========================================================================== */ body.cinematic .scrub-vignette, body.cinematic .grain, body.cinematic .grade, body.cinematic .scrub-progress, body.cinematic .route, body.cinematic .cursor, body.cinematic #scrub-canvas { display: block; } body.cinematic .route { display: flex; } body.cinematic { cursor: none; } body.cinematic a, body.cinematic button { cursor: none; } @media (pointer: coarse) { body.cinematic { cursor: auto; } body.cinematic a, body.cinematic button { cursor: pointer; } } /* Position is deliberately plain (not sticky): GSAP's ScrollTrigger `pin` option takes full ownership of fixing this element in place and manages its own spacer element to reserve scroll room — mixing that with CSS position:sticky here would fight GSAP's own inline positioning. */ body.cinematic .journey-stage { position: relative; height: 100svh; width: 100%; overflow: hidden; background: var(--ink); } #scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } body.cinematic .scrub-vignette { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 13, 10, 0.85) 0%, rgba(15, 13, 10, 0.2) 40%, rgba(15, 13, 10, 0) 62%), linear-gradient(to bottom, rgba(15, 13, 10, 0.55) 0%, rgba(15, 13, 10, 0) 22%); pointer-events: none; z-index: 2; } /* film grain: tiled noise texture, subtly stepped for a flicker of life */ body.cinematic .grain { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: 0.05; pointer-events: none; z-index: 3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-shift 1s steps(4) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0, 0); } } /* warm color grade tying footage + UI into one film */ body.cinematic .grade { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(181, 80, 46, 0.12), rgba(33, 30, 26, 0.28)); mix-blend-mode: overlay; pointer-events: none; z-index: 3; } body.cinematic .scrub-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(243, 235, 220, 0.15); z-index: 10; } .scrub-progress-fill { height: 100%; width: 0%; background: var(--brass); } /* route indicator — jumpable station nav */ body.cinematic .route { position: absolute; right: clamp(1.25rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); flex-direction: column; gap: 0.85rem; z-index: 20; } .route-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(243, 235, 220, 0.32); position: relative; transition: background 0.25s ease, transform 0.25s ease; } .route-dot.is-active { background: var(--brass); transform: scale(1.5); } .route-dot span { position: absolute; right: 150%; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--font-marker); font-size: 0.9rem; color: var(--cream); opacity: 0; transition: opacity 0.2s ease; } .route-dot:hover span, .route-dot.is-active span { opacity: 0.9; } @media (max-width: 860px) { body.cinematic .route { display: none; } } /* chapters as full-bleed overlays on the stage */ body.cinematic .chapters { position: absolute; inset: 0; display: block; } body.cinematic .chapter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) clamp(3rem, 9vh, 6rem); color: var(--cream); opacity: 0; pointer-events: none; max-width: 46rem; z-index: 5; will-change: transform, opacity; background: none; } body.cinematic .chapter[data-station="arrival"] { justify-content: center; max-width: 56rem; opacity: 1; } body.cinematic .chapter.is-active { pointer-events: auto; } body.cinematic .chapter-menu, body.cinematic .chapter-story, body.cinematic .chapter-visit { max-width: 68rem; justify-content: center; } /* frosted panel so text reads over busy footage in content-heavy chapters */ body.cinematic .chapter-menu-head, body.cinematic .chapter-visit-head { margin-bottom: 1.75rem; background: rgba(15, 13, 10, 0.55); backdrop-filter: blur(10px); display: inline-block; padding: 1.25rem 1.5rem; border-radius: 4px; } body.cinematic .chapter-menu .menu-card, body.cinematic .chapter-visit { background: rgba(15, 13, 10, 0.58); backdrop-filter: blur(12px); } body.cinematic .chapter-visit { padding: clamp(2rem, 4vw, 3rem); border-radius: 4px; } body.cinematic .chapter-story { background: rgba(243, 235, 220, 0.88); backdrop-filter: blur(6px); color: var(--ink); padding: clamp(2rem, 4vw, 3rem); border-radius: 4px; max-width: 42rem; margin: 0 var(--gutter) clamp(3rem, 9vh, 6rem) auto; justify-content: center; } body.cinematic .chapter-story .eyebrow { color: var(--terracotta); } body.cinematic .chapter-menu .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0; } body.cinematic .chapter-menu .menu-card { padding: 1.5rem 1.5rem 1.75rem; border-radius: 4px; } .beat-title { font-size: var(--fs-h1); margin-bottom: 0.5rem; } .beat-title-hero { font-size: var(--fs-hero); } .beat-copy { font-size: var(--fs-body); max-width: 34rem; color: var(--cream-dim); margin-bottom: 0.25rem; } .chapter-story .body-lg { color: var(--concrete); } .scroll-cue { font-family: var(--font-marker); font-size: 1.1rem; color: var(--brass); margin-top: 2rem; } body.cinematic .scroll-cue { animation: bob 2.2s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* custom cursor */ .cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 9999; } .cursor-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid var(--brass); transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), margin 0.25s var(--ease-out), background 0.25s ease; } .cursor.is-active .cursor-dot { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: rgba(199, 154, 86, 0.16); } .cursor-label { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); font-family: var(--font-marker); font-size: 0.95rem; color: var(--cream); opacity: 0; transition: opacity 0.2s ease; white-space: nowrap; } .cursor.is-active .cursor-label { opacity: 1; } /* ---------- Responsive ---------- */ @media (max-width: 640px) { body.cinematic .chapter { max-width: none; padding: 0 var(--gutter) 3.5rem; } body.cinematic .chapter-story { margin: 0 var(--gutter) 3.5rem; max-width: none; } body.cinematic .chapter-menu .menu-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } } @media (max-width: 420px) { body.cinematic .chapter-menu .menu-grid { grid-template-columns: 1fr; } } /* ---------- Reduced motion belt-and-suspenders (body.cinematic never applies, but just in case) ---------- */ @media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } .grain { animation: none; } }