/* ═══════════════════════════════════════════════════════════════════ CINEMATIC STYLES Loaded only on the cinematic single-page experience. ═══════════════════════════════════════════════════════════════════ */ :root { --c-ink: #f5f3ee; --c-ink-soft: rgba(245, 243, 238, 0.62); --c-ink-dim: rgba(245, 243, 238, 0.38); --c-bg: #050505; --c-violet: #8b5cf6; --c-blue: #3b82f6; --c-rose: #ec4899; --c-amber: #f59e0b; /* Unified motion language — used everywhere micro-interactions, reveals, and section handoffs run. Keeps the whole site feeling like one piece. */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --t-fast: 0.28s; --t-base: 0.55s; --t-slow: 0.9s; --t-deep: 1.4s; } html { background: #050505; } /* ── Per-chapter background tints (oryzo-style scroll-driven crossfade) ── Two registered custom properties so the colors animate smoothly when JS sets new values on as each chapter becomes active. */ @property --bg-1 { syntax: ""; inherits: true; initial-value: #050505; } @property --bg-2 { syntax: ""; inherits: true; initial-value: #0d0a18; } #chapter-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 110% 70% at 50% -10%, var(--bg-2), transparent 65%), radial-gradient( ellipse 90% 60% at 50% 110%, color-mix(in srgb, var(--bg-2) 50%, transparent), transparent 70% ), var(--bg-1); transition: --bg-1 1.6s cubic-bezier(0.22, 1, 0.36, 1), --bg-2 1.6s cubic-bezier(0.22, 1, 0.36, 1); } /* ── Body ──────────────────────────────────────────────────────────── */ body.cinematic-body { --bg-1: #050505; --bg-2: #0d0a18; margin: 0; background: transparent; color: var(--c-ink); transition: --bg-1 1.6s cubic-bezier(0.22, 1, 0.36, 1), --bg-2 1.6s cubic-bezier(0.22, 1, 0.36, 1); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-feature-settings: "ss01", "cv11"; letter-spacing: -0.01em; overflow-x: hidden; cursor: none; /* replaced by custom cursor light on desktop */ } @media (hover: none), (pointer: coarse) { body.cinematic-body { cursor: auto; } #cursor-light { display: none !important; } } .serif { font-family: "Instrument Serif", "Times New Roman", serif; font-feature-settings: normal; letter-spacing: 0; } /* ── Boot curtain (covers FOUC then fades away) ────────────────────── */ #boot-curtain { position: fixed; inset: 0; z-index: 99999; background: #050505; pointer-events: none; transition: opacity 0.9s cubic-bezier(0.7, 0, 0.3, 1); } #boot-curtain.gone { opacity: 0; } /* ── Cursor light (desktop only) ───────────────────────────────────── */ #cursor-light { position: fixed; pointer-events: none; z-index: 60; width: 460px; height: 460px; left: 0; top: 0; transform: translate(-50%, -50%); background: radial-gradient( circle at center, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 30%, transparent 65% ); filter: blur(28px); mix-blend-mode: screen; opacity: 0; transition: opacity 0.6s var(--ease-out-expo); will-change: transform; } #cursor-light.is-on { opacity: 1; } /* ── Grain overlay ─────────────────────────────────────────────────── */ .grain-overlay { position: fixed; inset: -50%; pointer-events: none; z-index: 55; opacity: 0.025; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; animation: grain-shift 7s steps(8) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 10% { transform: translate(-3%, -2%); } 20% { transform: translate(2%, 1%); } 30% { transform: translate(-1%, 3%); } 40% { transform: translate(1%, -2%); } 50% { transform: translate(-2%, 2%); } 60% { transform: translate(3%, -1%); } 70% { transform: translate(-1%, -3%); } 80% { transform: translate(2%, 2%); } 100% { transform: translate(0, 0); } } /* ── Aurora field (animated gradient blobs) ────────────────────────── */ .aurora-field { position: absolute; inset: -10%; pointer-events: none; z-index: 0; filter: blur(110px) saturate(120%); opacity: 0.32; } .aurora-blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; } .aurora-blob.b1 { width: 60vmax; height: 60vmax; left: -10vmax; top: -10vmax; background: radial-gradient( circle, rgba(139, 92, 246, 0.42), transparent 60% ); animation: drift1 38s ease-in-out infinite alternate; } .aurora-blob.b2 { width: 50vmax; height: 50vmax; right: -15vmax; top: 20vmax; background: radial-gradient( circle, rgba(59, 130, 246, 0.34), transparent 60% ); animation: drift2 46s ease-in-out infinite alternate; } .aurora-blob.b3 { width: 45vmax; height: 45vmax; left: 30vmax; bottom: -10vmax; background: radial-gradient( circle, rgba(236, 72, 153, 0.18), transparent 60% ); animation: drift3 54s ease-in-out infinite alternate; } @keyframes drift1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(8vmax, 6vmax) scale(1.15); } } @keyframes drift2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-10vmax, 4vmax) scale(0.92); } } @keyframes drift3 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(6vmax, -8vmax) scale(1.1); } } /* ── Glass surfaces ────────────────────────────────────────────────── */ .glass { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-radius: 20px; } .glass-strong { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-radius: 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 80px -30px rgba(0, 0, 0, 0.5); } .glass-dim { background: rgba(10, 10, 10, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); border-radius: 16px; } /* Mode switch styles live in input.css (shared with classic layout). */ /* ── Floating chapter marker (top-left, fades on enter/leave) ─────── */ #chapter-marker { position: fixed; top: 78px; left: 28px; z-index: 65; display: flex; align-items: center; gap: 14px; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo); font-family: "Inter", -apple-system, sans-serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(245, 243, 238, 0.55); mix-blend-mode: difference; } #chapter-marker.is-on { opacity: 1; transform: translateY(0); } #chapter-marker .cm-num { font-family: "Instrument Serif", serif; font-style: italic; font-size: 13px; letter-spacing: 0.04em; text-transform: none; color: var(--c-ink); } #chapter-marker .cm-bar { width: 22px; height: 1px; background: currentColor; opacity: 0.5; } #chapter-marker .cm-title { color: var(--c-ink); letter-spacing: 0.32em; font-size: 10.5px; font-weight: 500; } @media (max-width: 640px) { #chapter-marker { top: 64px; left: 16px; gap: 10px; } #chapter-marker .cm-bar { width: 14px; } } /* ── Chapter rail (right side, vertical) ───────────────────────────── */ #chapter-rail { position: fixed; top: 50%; right: 26px; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; opacity: 0; transition: opacity 0.8s ease 1.2s; } #chapter-rail.is-ready { opacity: 1; } .rail-track { position: relative; width: 1px; height: 80px; background: rgba(255, 255, 255, 0.1); border-radius: 1px; margin-right: 13px; } .rail-progress { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, #f5f3ee, #8b5cf6); } .rail-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; } .rail-chapters li { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-dim); cursor: pointer; display: flex; align-items: center; gap: 10px; transition: color 0.25s ease; } .rail-chapters li::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.4; transition: width 0.25s ease, opacity 0.25s ease; } .rail-chapters li:hover { color: var(--c-ink); } .rail-chapters li.is-active { color: var(--c-ink); } .rail-chapters li.is-active::after { width: 24px; opacity: 1; } @media (max-width: 900px) { #chapter-rail { display: none; } } /* ── Chapters: shared shell ────────────────────────────────────────── */ .chapter { position: relative; width: 100%; min-height: 100vh; overflow: hidden; /* Soft veil at the edges — JS scrub fades the top edge in as the previous chapter is exiting, and the bottom edge in as this chapter is exiting. Lets scenes "dissolve" into one another. */ --chapter-veil-top: 0; --chapter-veil-bot: 0; } .chapter::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(5, 5, 5, calc(var(--chapter-veil-top) * 0.95)) 0%, transparent 18%, transparent 82%, rgba(5, 5, 5, calc(var(--chapter-veil-bot) * 0.95)) 100% ); z-index: 8; } /* ─── Chapter 00: Cold Open ────────────────────────────────────────── */ /* Section is 170vh — the sticky inner holds the first viewport while GSAP scrubs the background blur + text exit over the remaining 70vh. Tightened from 220vh so the dead tail between Cold Open and Identity is gone; every vh of scroll past 100vh does animation work. */ #chapter-cold-open { position: relative; height: 300vh; overflow: visible; text-align: center; } /* ── Single sticky viewport ────────────────────────────────────────── */ /* Everything (bg + text) lives inside this sticky container so they all hold in place together. Overflow:hidden clips the over-zoomed bg image. */ .co-sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; } /* ── Pokhara Valley background (inside sticky) ─────────────────────── */ .co-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Add /public/images/pokhara-valley.jpg for the actual photo. The gradient provides a cinematic deep-blue fallback. */ .co-bg-img { position: absolute; inset: 0; background-image: url("/images/pokhara-valley.jpg"), radial-gradient( ellipse 130% 90% at 50% 62%, #1a2e52 0%, #0a1828 42%, #060a18 100% ); background-size: cover; background-position: center 55%; background-repeat: no-repeat; /* over-zoom prevents heavy blur from revealing edges */ transform: scale(1.14); transform-origin: center center; will-change: filter, opacity; transition: none; /* Starts heavily blurred and very dark; GSAP eases this open as text reveals */ opacity: 0; filter: blur(36px) brightness(0.18) saturate(0.6); } /* Heavy bottom fade — image dissolves to the site's bg-color so the Identity chapter rises up seamlessly from the darkness. */ .co-bg-fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 65%; background: linear-gradient( to bottom, transparent 0%, rgba(5, 5, 5, 0.35) 30%, rgba(5, 5, 5, 0.82) 65%, #050505 100% ); pointer-events: none; } /* ── Single light sweep (one-shot at intro) ────────────────────── */ .co-sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 110deg, transparent 0%, transparent 38%, rgba(196, 181, 253, 0.16) 49%, rgba(147, 197, 253, 0.12) 51%, transparent 62%, transparent 100% ); background-size: 240% 100%; background-position: 220% 0; mix-blend-mode: screen; opacity: 0; } /* ── Text overlay (inside .co-sticky) ────────────────────────────── */ .cold-open-inner { position: absolute; inset: 0; box-sizing: border-box; will-change: opacity, filter; pointer-events: none; z-index: 2; /* Soft radial vignette for text legibility over the photo */ background: radial-gradient( ellipse 72% 58% at 50% 54%, rgba(0, 0, 0, 0.18) 0%, transparent 82% ); } /* Centered text stack — opener line + name + meta */ .co-center-stack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8vh 6vw; box-sizing: border-box; text-align: center; pointer-events: none; z-index: 2; } /* Extra bottom dimming on the text layer — mirrors the image fade */ .cold-open-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 25%, rgba(0, 0, 0, 0.08) 55%, rgba(0, 0, 0, 0.48) 100% ); pointer-events: none; } #chapter-cold-open .opener-line { font-family: "Cinzel", serif; font-style: normal; font-weight: 400; font-size: clamp(14px, 2vw, 28px); color: rgba(245, 243, 238, 0.88); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 auto; line-height: 1.7; text-shadow: 0 2px 32px rgba(0, 0, 0, 0.72); position: relative; z-index: 1; } /* Line 1 — quiet scene-setter */ #chapter-cold-open .opener-line--intro { font-size: clamp(12px, 1.6vw, 22px); color: rgba(245, 243, 238, 0.6); letter-spacing: 0.28em; } /* Line 2 — the action, continues the thought */ #chapter-cold-open .opener-line--action { font-size: clamp(13px, 1.8vw, 25px); font-weight: 400; color: rgba(245, 243, 238, 0.85); letter-spacing: 0.2em; margin-top: 0.6em; } /* Line 3 — the punchline: large, heavy */ #chapter-cold-open .opener-line--close { font-weight: 700; font-size: clamp(32px, 6.5vw, 82px); letter-spacing: 0.06em; line-height: 1; color: rgba(245, 243, 238, 1); margin-top: 1.2em; text-shadow: 0 4px 48px rgba(0, 0, 0, 0.85); } #chapter-cold-open .opener-line .word { display: inline-block; opacity: 0; transform: translateY(8px); filter: blur(10px); } /* Scroll-cue: absolutely inside .co-sticky, pinned to the bottom */ #chapter-cold-open .scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245, 243, 238, 0.45); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; z-index: 3; pointer-events: none; width: max-content; } #chapter-cold-open .scroll-cue .line { width: 1px; height: 36px; background: linear-gradient(180deg, transparent, rgba(245, 243, 238, 0.45)); animation: cue-pulse 2.4s ease-in-out infinite; } @keyframes cue-pulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1); } } /* ── Cold Open meta — hidden, not needed ────────────────────────── */ .opener-meta { display: none; /* properties below preserved but element is hidden */ margin-top: clamp(22px, 3.6vh, 38px); display: inline-flex; align-items: center; gap: 18px; font-size: clamp(10px, 0.92vw, 12px); letter-spacing: 0.42em; text-transform: uppercase; color: rgba(245, 243, 238, 0.45); opacity: 0; /* JS fades in */ position: relative; z-index: 1; } .opener-meta-sep { display: inline-block; width: 38px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(245, 243, 238, 0.6), transparent ); } /* ── HUD overlays — cinematic frame metadata ────────────────────── */ .co-hud { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(20px, 4.2vw, 60px); font-family: "JetBrains Mono", "SF Mono", ui-monospace, "Inter", sans-serif; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(245, 243, 238, 0.55); z-index: 5; pointer-events: none; opacity: 0; /* JS fades in */ text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); } .co-hud-top { /* Offset so it sits below the fixed mode-switch chrome */ top: clamp(74px, 9.5vh, 96px); } .co-hud-bottom { bottom: clamp(86px, 11vh, 130px); } .co-hud-cell { display: flex; align-items: center; gap: 10px; flex: 1 1 0; } .co-hud-left { justify-content: flex-start; } .co-hud-center { justify-content: center; color: rgba(245, 243, 238, 0.42); } .co-hud-right { justify-content: flex-end; } .co-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.85); animation: co-rec-pulse 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes co-rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .co-rec-label { color: #ef4444; font-weight: 600; } .co-hud-sep { opacity: 0.4; } .co-tc { color: rgba(245, 243, 238, 0.78); font-variant-numeric: tabular-nums; font-weight: 500; } .co-coord, .co-spec { color: rgba(245, 243, 238, 0.62); font-variant-numeric: tabular-nums; } .co-spec { position: relative; padding-left: 18px; } .co-spec::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: currentColor; opacity: 0.6; transform: translateY(-50%); } /* ── Corner brackets — cinematic frame indicators ───────────────── */ .co-corner { position: absolute; width: 32px; height: 32px; border-color: rgba(245, 243, 238, 0.45); border-style: solid; border-width: 0; z-index: 6; /* above cold-open-inner so they animate independently */ pointer-events: none; opacity: 0; /* JS fades in */ } .co-corner.tl { top: clamp(118px, 15vh, 144px); left: clamp(20px, 4.2vw, 56px); border-top-width: 1px; border-left-width: 1px; } .co-corner.tr { top: clamp(118px, 15vh, 144px); right: clamp(20px, 4.2vw, 56px); border-top-width: 1px; border-right-width: 1px; } .co-corner.bl { bottom: clamp(118px, 14vh, 158px); left: clamp(20px, 4.2vw, 56px); border-bottom-width: 1px; border-left-width: 1px; } .co-corner.br { bottom: clamp(118px, 14vh, 158px); right: clamp(20px, 4.2vw, 56px); border-bottom-width: 1px; border-right-width: 1px; } /* Mobile tweaks: hide the center HUD slug, shrink corner brackets */ @media (max-width: 720px) { .co-hud { font-size: 9px; letter-spacing: 0.22em; padding: 0 5vw; } .co-hud-center { display: none; } .co-hud-top { top: clamp(60px, 8vh, 80px); } .co-corner { width: 22px; height: 22px; } .co-corner.tl, .co-corner.tr { top: clamp(108px, 14vh, 132px); } .co-corner.bl, .co-corner.br { bottom: clamp(86px, 12vh, 110px); } } /* ─── Chapter 01: Identity (4-act scroll reveal) ─────────────────── */ /* Section height is set by JS (480vh). The .id2-pin is pinned for the full scroll extent so GSAP can scrub all 4 acts against scroll. */ #chapter-identity { position: relative; } .id2-pin { position: relative; width: 100%; height: 100vh; overflow: hidden; } /* ── Subtle grid backdrop — adds depth without distraction ───────── */ .id2-grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient( ellipse 80% 60% at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 70% ), linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 100% 100%, 56px 56px, 56px 56px; mask-image: radial-gradient( ellipse 75% 70% at 50% 50%, #000 0%, transparent 80% ); -webkit-mask-image: radial-gradient( ellipse 75% 70% at 50% 50%, #000 0%, transparent 80% ); } /* ── Top-right chapter index — "01 / 11" cinematic counter ──────── */ .id2-index { position: absolute; /* Sits in the top-right chrome zone */ top: clamp(74px, 9vh, 96px); right: 7vw; display: flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", "SF Mono", ui-monospace, "Inter", sans-serif; font-size: 11px; letter-spacing: 0.18em; color: var(--c-ink-soft); z-index: 10; opacity: 0; /* JS fades in */ font-variant-numeric: tabular-nums; } .id2-index-num { font-size: 14px; font-weight: 600; color: var(--c-ink); } .id2-index-bar { width: 26px; height: 1px; background: rgba(245, 243, 238, 0.25); } .id2-index-total { color: var(--c-ink-dim); } /* ── Background portrait ───────────────────────────────────────────── Full-bleed layer behind the title (mirrors classic mode's hero photo). CSS default = the FINAL state (sharp, full brightness) so the no-JS fallback shows a clean photo; JS sets the very-blurred initial state and sharpens it on scroll (see cinematic.js §5, Act 2). */ .id2-bg-photo { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .id2-bg-photo-media { position: absolute; inset: 0; transform-origin: 72% 50%; will-change: transform, filter; } /* Portrait sits on the right, full-height, never cropped — same framing as the classic hero. The photo carries its own dark studio backdrop, so no edge mask is needed. */ .id2-bg-photo-media picture { position: absolute; inset: 0; display: block; } .id2-bg-photo-media img { position: absolute; top: 50%; /* Nudged in from the right edge toward (but not at) centre. */ right: 13vw; height: 96vh; width: auto; max-width: none; transform: translateY(-50%); object-fit: contain; -webkit-user-select: none; user-select: none; /* Bottom of the portrait fades to transparent at ALL times so it blends into the background instead of ending on a hard edge. */ -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 86%); mask-image: linear-gradient(to bottom, #000 46%, transparent 86%); } /* Text-side scrim → straight directional fade, darkens only the left so the headline + info stay legible over the photo. */ .id2-bg-photo-scrim { position: absolute; inset: 0; background: linear-gradient( to right, #070914 0%, rgba(7, 9, 20, 0.74) 18%, rgba(7, 9, 20, 0) 54% ); } /* Bottom fade → smooth scroll transition into the next chapter. */ .id2-bg-photo-fade { position: absolute; inset-inline: 0; bottom: 0; height: 42%; background: linear-gradient( to top, #070914 0%, rgba(7, 9, 20, 0.55) 28%, rgba(7, 9, 20, 0) 100% ); } /* ── Chapter eyebrow ──────────────────────────────────────────────── */ .id2-eyebrow { position: absolute; top: clamp(22px, 4vh, 42px); left: 7vw; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); display: flex; align-items: center; gap: 14px; z-index: 10; opacity: 0; /* JS fades in */ } .id2-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--c-ink-dim); } /* ── Big title ────────────────────────────────────────────────────── */ /* No CSS transform here — GSAP sets yPercent:-50 for centering so it can compose additional x/filter/opacity transforms cleanly. */ .id2-headline { position: absolute; left: 0; right: 0; top: 50%; text-align: center; padding: 0 7vw; z-index: 4; will-change: transform, filter, opacity; pointer-events: none; } .id2-name-label { font-size: clamp(14px, 1.4vw, 20px); letter-spacing: 0.22em; color: rgba(181, 222, 253, 0.65); margin: clamp(18px, 2.4vh, 32px) 0 0 0; padding: 0; } .id2-title { font-size: clamp(52px, 8.8vw, 136px); line-height: 0.92; font-weight: 800; letter-spacing: -0.046em; margin: 0; padding: 0; } .id2-line { display: block; overflow: hidden; } .id2-line > span { display: inline-block; transform: translateY(110%); } .id2-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #c4b5fd 0%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* (The Chapter 01 framed-photo styles were removed when the portrait became a blurred full-bleed background — see .id2-bg-photo above. live-pulse is kept: other chapters' .live-dot elements still use it.) */ @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* ── Info + Social links column ────────────────────────────────────── Sits on the LEFT, stacked OVER the portrait (z-index above .id2-bg-photo), so the text is free to stretch wider and overlap the photo when the copy is long — it always renders on top. Reveals alongside the photo. */ .id2-right-col { position: absolute; left: 16vw; right: auto; top: 50%; transform: translateY(-50%); width: min(46vw, 560px); display: flex; flex-direction: column; gap: 28px; z-index: 6; pointer-events: none; } /* ── Info block (Act 3) ───────────────────────────────────────────── */ .id2-info-wrap { position: static; opacity: 0; pointer-events: none; } .id2-para { font-size: clamp(15px, 1.18vw, 18px); line-height: 1.74; color: var(--c-ink-soft); margin: 0 0 34px; opacity: 0; transform: translateY(20px); } .id2-coords { display: flex; flex-direction: column; gap: 10px; font-size: 11px; color: var(--c-ink-dim); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; transform: translateY(14px); } .id2-coords strong { color: var(--c-ink); font-weight: 500; } /* ── Social links strip (Act 4) ───────────────────────────────────── */ .id2-socials { position: static; display: flex; flex-wrap: wrap; gap: 10px; z-index: 6; } .id2-soc-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-decoration: none; color: var(--c-ink-soft); font-size: 13px; letter-spacing: 0.04em; opacity: 0; transform: translateY(16px); transition: border-color 0.28s ease, background 0.28s ease, color 0.28s ease; cursor: pointer; } .id2-soc-item:hover { border-color: var(--soc-tint, #c4b5fd); background: color-mix(in srgb, var(--soc-tint, #c4b5fd) 10%, transparent); color: var(--c-ink); } .id2-soc-disc { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--soc-tint, #c4b5fd); } .id2-soc-disc svg { width: 18px; height: 18px; } .id2-soc-label { font-size: 12px; letter-spacing: 0.05em; } /* ── Mobile ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .id2-headline { left: 0; right: 0; padding: 0 5vw; } .id2-title { font-size: clamp(40px, 10vw, 70px); } .id2-bg-photo-media img { height: 66vh; right: -4vw; } /* Stronger left scrim on narrow screens so the full-width title stays readable over the portrait. */ .id2-bg-photo-scrim { background: linear-gradient( to right, #070914 0%, rgba(7, 9, 20, 0.82) 38%, rgba(7, 9, 20, 0.2) 100% ); } .id2-right-col { left: 5vw; right: 5vw; width: auto; } .id2-info-wrap { position: static; } .id2-socials { bottom: auto; left: auto; right: auto; } .id2-soc-item { padding: 8px 13px; font-size: 12px; } .id2-index { right: 5vw; font-size: 10px; } .id2-index-num { font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 02 — THE ROLES (pinned horizontal scroll) ═══════════════════════════════════════════════════════════════════ */ /* ── Card / frame dimensions ──────────────────────────────────────── - --roles-card-* sizes the SMALL background slides - --roles-frame-* sizes the centered magnification viewport (the dashed frame, the glass overlay, and the large-strip slides). It is intentionally larger than the small card so the magnification reads as a real "portal". */ :root { --roles-card-w: clamp(209px, 19vw, 285px); --roles-card-h: clamp(304px, 47.5vh, 437px); --roles-card-gap: 0px; /* gap between small-strip slides */ /* frame = card / CARD_SCALE (0.78) → true 1× zoom; adjacent cards start exactly at the glass edge with only ~8px content overlap */ --roles-frame-w: clamp(268px, 24.4vw, 366px); --roles-frame-h: clamp(390px, 60.9vh, 561px); } .chapter-roles { /* JS sets exact height; this is a safe fallback */ height: 700vh; } .roles-pin { position: relative; height: 100vh; overflow: hidden; } /* ① Title stage ───────────────────────────────────────────────── */ .roles-title-stage { position: absolute; left: 50%; top: 50%; /* No CSS transform — GSAP owns x/y/scale/transformOrigin */ text-align: center; z-index: 2; pointer-events: none; } .roles-eyebrow { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; } .roles-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--c-ink-dim); } .roles-title { font-size: clamp(40px, 6.4vw, 100px); line-height: 1.04; font-weight: 700; letter-spacing: -0.04em; margin: 0; white-space: nowrap; } .roles-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #c4b5fd, #93c5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ② Glass overlay: sits between title and card strip. backdrop-filter blurs the title text within the frame zone. ──── */ .roles-glass-overlay { position: absolute; left: 50%; top: 50%; /* No CSS transform — GSAP sets xPercent:-50 yPercent:-50 */ width: var(--roles-frame-w); height: var(--roles-frame-h); border-radius: 24px; background: rgba(8, 5, 20, 0.52); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); z-index: 3; opacity: 0; /* JS fades in */ pointer-events: none; } /* ③ Cards stage + strip ─────────────────────────────────────────── */ .roles-cards-stage { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: var(--roles-card-h); z-index: 4; overflow: visible; /* peeking side cards; roles-pin clips viewport edges */ } .roles-strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; gap: var(--roles-card-gap); will-change: transform; /* JS sets initial x so card 0 is centered */ } .roles-strip-slide { flex: 0 0 var(--roles-card-w); width: var(--roles-card-w); height: 100%; border-radius: 20px; position: relative; overflow: hidden; background: linear-gradient( 160deg, color-mix(in srgb, var(--role-tint) 28%, #06040f), #050408 90% ); border: 1px solid color-mix(in srgb, var(--role-tint) 28%, rgba(255, 255, 255, 0.06)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.6); will-change: transform, opacity; } /* ② Small card inner content (always visible, text scaled with card) ─── */ .role-card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 12px; height: 100%; box-sizing: border-box; } .roles-strip-slide .role-card-num { font-size: 11px; } .roles-strip-slide .role-card-emoji { font-size: 24px; } .roles-strip-slide .role-card-title { font-size: 12px; } .roles-strip-slide .role-card-tag { font-size: 8px; padding: 3px 7px; } .roles-strip-slide .role-card-blurb { font-size: 9px; } .roles-strip-slide .role-card-foot { font-size: 7px; } /* Large slide inner content: roomier padding/gap to match the bigger frame */ .roles-strip-large-slide .role-card-inner { padding: 32px 28px 26px; gap: 14px; } /* ④ Magnification viewport: a clipped frame-shaped window. The large strip lives inside, edge-to-edge (zero gap), so as you scroll one card slides out and the next slides in continuously. */ .roles-viewport-mask { position: absolute; left: 50%; top: 50%; /* GSAP sets xPercent:-50 yPercent:-50 to center */ width: var(--roles-frame-w); height: var(--roles-frame-h); border-radius: 24px; z-index: 5; overflow: hidden; /* contain:paint forces a containing block for descendants and ensures overflow:hidden actually clips transformed children (some browsers leak transformed flex children otherwise). */ contain: paint; isolation: isolate; pointer-events: none; opacity: 0; /* JS fades in once the frame has formed */ } .roles-strip-large { position: absolute; top: 0; left: 0; height: 100%; display: flex; gap: 0; /* edge-to-edge inside the viewport */ will-change: transform; } .roles-strip-large-slide { flex: 0 0 var(--roles-frame-w); width: var(--roles-frame-w); height: 100%; border-radius: 0px; position: relative; overflow: hidden; background: linear-gradient( 160deg, color-mix(in srgb, var(--role-tint) 28%, #06040f), #050408 90% ); border: 1px solid color-mix(in srgb, var(--role-tint) 28%, rgba(255, 255, 255, 0.06)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.6); } /* ⑤ Frame outline: dashed border, sized to the viewport. */ .roles-frame-outline { position: absolute; left: 50%; top: 50%; /* No CSS transform — GSAP sets xPercent:-50 yPercent:-50 + scale */ width: var(--roles-frame-w); height: var(--roles-frame-h); border: 1.5px dashed rgba(255, 255, 255, 0.7); border-radius: 24px; z-index: 6; opacity: 0; /* JS fades in */ pointer-events: none; } /* Dot in top-right corner (matching Oryzo) */ .roles-frame-outline::after { content: ""; position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } /* Shared card inner elements ─────────────────────────────────────── */ .role-card-glow { position: absolute; inset: -1px; background: radial-gradient( 110% 70% at 50% 0%, color-mix(in srgb, var(--role-tint) 32%, transparent), transparent 60% ); opacity: 0.6; pointer-events: none; border-radius: inherit; } .role-card-num { font-family: "Instrument Serif", serif; font-size: 20px; font-style: italic; color: var(--c-ink-dim); letter-spacing: 0.02em; } .role-card-emoji { font-size: 52px; line-height: 1; filter: drop-shadow( 0 6px 16px color-mix(in srgb, var(--role-tint) 55%, transparent) ); } .role-card-title { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.02em; margin: 0; } .role-card-tag { display: inline-flex; align-self: flex-start; padding: 5px 11px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; } .role-card-blurb { font-size: 13.5px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; flex: 1; } .role-card-foot { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-dim); } .role-card-foot-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--role-tint), transparent); opacity: 0.5; } /* Hidden progress (kept for JS refs but invisible) */ .roles-progress { display: none; } @media (max-width: 720px) { :root { --roles-card-w: 72vw; --roles-card-h: clamp(342px, 58.9vh, 494px); --roles-card-gap: 0px; } .roles-title { white-space: normal; text-align: center; font-size: clamp(32px, 9vw, 52px); } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 03 — THE CODE (pinned phone mockup) ═══════════════════════════════════════════════════════════════════ */ .chapter-code { height: 320vh; } .code-pin { position: relative; height: 100vh; display: flex; align-items: center; padding: 0 8vw; overflow: hidden; } .code-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 6vw; width: 100%; align-items: center; } @media (max-width: 900px) { .chapter-code { height: 360vh; } .code-pin { padding: 0 6vw; } .code-grid { grid-template-columns: 1fr; gap: 6vh; } } .code-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 26px; } .code-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 12px #8b5cf6; } .code-title { font-size: clamp(36px, 5.4vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 88px; } .code-title .line { display: block; overflow: hidden; } .code-title .line > span { display: inline-block; transform: translateY(110%); } .code-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #fbcfe8, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .code-beats { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; max-width: 540px; } .code-beat { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 18px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease; opacity: 0.45; } .code-beat.is-active { opacity: 1; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); transform: translateX(4px); } .code-beat-num { font-family: "Instrument Serif", serif; font-style: italic; font-size: 26px; color: var(--c-ink-dim); line-height: 1; } .code-beat.is-active .code-beat-num { color: #c4b5fd; } .code-beat-body h4 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--c-ink); } .code-beat-body p { font-size: 13.5px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; } .code-tech { display: flex; flex-wrap: wrap; gap: 8px; } .tech-tag { padding: 6px 12px; font-size: 11px; letter-spacing: 0.05em; color: var(--c-ink-soft); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; } /* ─── Phone mockup ─── */ .code-phone-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 70vh; } .code-phone-glow { position: absolute; width: 70%; aspect-ratio: 1; background: radial-gradient( circle, rgba(139, 92, 246, 0.45), transparent 65% ); filter: blur(60px); pointer-events: none; animation: phone-glow 7s ease-in-out infinite alternate; } @keyframes phone-glow { 0% { transform: translate(-4%, 0) scale(1); } 100% { transform: translate(4%, 4%) scale(1.1); } } .code-phone { position: relative; width: clamp(260px, 28vw, 340px); aspect-ratio: 9 / 19; background: linear-gradient(180deg, #1a1a1a, #0a0a0a); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 42px; padding: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.04), 0 50px 90px -30px rgba(0, 0, 0, 0.6), 0 0 80px -20px rgba(139, 92, 246, 0.25); z-index: 2; } .code-phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: #050505; border-radius: 0 0 14px 14px; z-index: 3; } .code-phone-side { position: absolute; top: 22%; right: -3px; width: 3px; height: 60px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; } .code-phone-screen { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg, #0d0a18, #1a1530 100%); border-radius: 32px; overflow: hidden; } .screen-frame { position: absolute; inset: 0; padding: 38px 18px 18px; opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; gap: 14px; color: #f5f3ee; } .screen-frame.is-active { opacity: 1; } .screen-status-bar { display: flex; justify-content: space-between; font-size: 10px; color: rgba(245, 243, 238, 0.7); letter-spacing: 0.05em; } /* Frame 1 — hero */ .screen-hero { padding: 18px 14px 16px; border-radius: 18px; background: linear-gradient( 135deg, rgba(245, 158, 11, 0.18), rgba(139, 92, 246, 0.18) ); border: 1px solid rgba(255, 255, 255, 0.08); } .screen-hero-eyebrow { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245, 243, 238, 0.6); margin-bottom: 6px; } .screen-hero-title { font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; } .screen-hero-cta { display: inline-block; padding: 6px 12px; background: rgba(255, 255, 255, 0.92); color: #0a0a0a; font-size: 10px; font-weight: 600; border-radius: 999px; } .screen-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .screen-card { padding: 12px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 8px; } .screen-card::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--c, #8b5cf6); } .screen-card-emoji { font-size: 22px; } .screen-card-label { font-size: 10px; letter-spacing: 0.06em; color: rgba(245, 243, 238, 0.85); font-weight: 600; } /* Frame 2 — course */ .screen-course { padding: 16px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; } .screen-course-title { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245, 243, 238, 0.55); } .screen-course-sub { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; } .screen-progress-bar { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; } .screen-progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #c4b5fd, #93c5fd); } .screen-progress-text { font-size: 10px; color: rgba(245, 243, 238, 0.6); margin-top: 4px; } .screen-lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: rgba(245, 243, 238, 0.55); } .screen-lessons li { padding: 6px 8px; border-radius: 6px; } .screen-lessons li.done { color: rgba(34, 197, 94, 0.85); } .screen-lessons li.active { color: #f5f3ee; background: rgba(139, 92, 246, 0.18); border: 1px solid rgba(139, 92, 246, 0.3); } /* Frame 3 — certificate */ .screen-cert { flex: 1; padding: 18px 14px; background: linear-gradient( 180deg, rgba(245, 158, 11, 0.1), rgba(139, 92, 246, 0.1) ); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .screen-cert-seal { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ec4899); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35); margin-top: 6px; } .screen-cert-eyebrow { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245, 243, 238, 0.6); } .screen-cert-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .screen-cert-meta { display: flex; gap: 6px; font-size: 11px; color: rgba(245, 243, 238, 0.7); } .screen-cert-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; color: rgba(245, 243, 238, 0.4); } .screen-cert-cta { margin-top: auto; display: inline-block; padding: 8px 14px; background: rgba(255, 255, 255, 0.92); color: #0a0a0a; font-size: 11px; font-weight: 600; border-radius: 999px; } /* Floating code chip */ .code-chip { position: absolute; left: -6%; bottom: 8%; width: clamp(180px, 18vw, 240px); padding: 10px 12px 12px; z-index: 3; font-family: ui-monospace, "SF Mono", Menlo, monospace; transform: rotate(-3deg); opacity: 0; } .code-chip.is-in { opacity: 1; } .code-chip-head { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .code-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .code-chip-name { margin-left: auto; font-size: 10px; letter-spacing: 0.04em; color: var(--c-ink-dim); } .code-chip-body { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--c-ink-soft); white-space: pre; overflow: hidden; } .code-chip-body .kw { color: #c4b5fd; } .code-chip-body .cls { color: #93c5fd; } @media (max-width: 900px) { .code-chip { left: 4%; bottom: -4%; transform: rotate(-2deg); } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 04 — THE CANVAS (pinned · centered title · images fly past) The section is taller than the viewport. JS pins `.cfly-pin` for the section's duration; scroll drives image flight (right → left) at per-tile speeds while the centered title gently blurs and recedes. ═══════════════════════════════════════════════════════════════════ */ .chapter-canvas { /* Trimmed from 420vh — flight phase (HOLD..RELEASE) now spans 0.06..0.96 so almost the entire 340vh budget is doing visible work. */ height: 340vh; padding: 0; display: block; overflow: visible; position: relative; } .cfly-pin { position: relative; height: 100vh; width: 100%; overflow: hidden; /* Track body's --bg-1 / --bg-2 with the same gradient #chapter-bg uses (see global #chapter-bg rule). cinematic.js §5d sets these to chapter 5 colors at p=HOLD (the moment the flight begins), so by the time the PPT slide reveals what's behind the shell, this surface is already chapter-5 colored — no warm-to-dark flash at the seam. */ background: radial-gradient(ellipse 110% 70% at 50% -10%, var(--bg-2), transparent 65%), radial-gradient( ellipse 90% 60% at 50% 110%, color-mix(in srgb, var(--bg-2) 50%, transparent), transparent 70% ), var(--bg-1); transition: --bg-1 1.6s cubic-bezier(0.22, 1, 0.36, 1), --bg-2 1.6s cubic-bezier(0.22, 1, 0.36, 1); isolation: isolate; } /* Slide shell — wraps every visible layer inside cfly-pin so JS can translate the whole chapter-4 frame horizontally during the chapter 4 → 5 PPT-style transition without colliding with GSAP's pin transform. */ .cfly-shell { position: absolute; inset: 0; will-change: transform; } /* Chapter-5 tint veil. Sits above cfly-bg's warm radials but below the tiles, title, and HUD, so during the flight we can fade chapter 4's warm palette into chapter 5's deep-blue gradient (#060e1c / #0a2247) — the same gradient #chapter-bg shows once chapter 5 is active. Opacity is driven by scroll progress in cinematic.js §5d. */ .cfly-tint-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 110% 70% at 50% -10%, #0a2247, transparent 65%), radial-gradient( ellipse 90% 60% at 50% 110%, rgba(10, 34, 71, 0.5), transparent 70% ), #060e1c; will-change: opacity; } /* ── Layer 0: Aurora backdrop (blurred, drifting) ─────────────── */ .cfly-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(ellipse at 20% 25%, #0a1d3a 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, #0a1530 0%, transparent 60%), linear-gradient(160deg, #04101a 0%, #0a1c34 100%); } .cfly-aurora { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: 0.55; will-change: transform; } .cfly-aurora.a1 { width: 48vw; height: 48vw; left: -12vw; top: -10vh; background: radial-gradient(circle, #3b82f6 0%, transparent 70%); animation: cfly-drift-1 22s ease-in-out infinite alternate; } .cfly-aurora.a2 { width: 58vw; height: 58vw; right: -18vw; bottom: -20vh; background: radial-gradient(circle, #6366f1 0%, transparent 70%); animation: cfly-drift-2 28s ease-in-out infinite alternate; } .cfly-aurora.a3 { width: 36vw; height: 36vw; left: 35%; top: 30%; background: radial-gradient(circle, #22d3ee 0%, transparent 75%); opacity: 0.32; animation: cfly-drift-3 24s ease-in-out infinite alternate; } @keyframes cfly-drift-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 4vh, 0) scale(1.1); } } @keyframes cfly-drift-2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-5vw, -3vh, 0) scale(1.08); } } @keyframes cfly-drift-3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4vw, 5vh, 0) scale(1.15); } } .cfly-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(245, 243, 238, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 243, 238, 0.04) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient( ellipse at center, #000 30%, transparent 75% ); pointer-events: none; } .cfly-vignette { position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 28%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.88) 100% ); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out-expo); } /* ── Layer 1: Centered title stage ────────────────────────────── */ .cfly-stage { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6vw; pointer-events: none; will-change: filter, transform, opacity; } .cfly-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 32px; } .cfly-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 14px rgba(59, 130, 246, 0.75); animation: cfly-pulse 1.8s ease-in-out infinite; } @keyframes cfly-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.35); } } .cfly-title { margin: 0; /* Match chapter 03's title — Inter, heavy weight, tight tracking (was Instrument Serif). The em stays serif, as in .code-title. */ font-weight: 700; font-size: clamp(42px, 6.2vw, 96px); line-height: 0.94; letter-spacing: -0.04em; color: var(--c-ink); } .cfly-title .line { display: block; overflow: hidden; padding: 0.04em 0; } .cfly-title .line > span { display: inline-block; transform: translateY(110%); will-change: transform; } .cfly-title em { font-family: "Instrument Serif", serif; font-weight: 400; font-style: italic; background: linear-gradient( 120deg, #fbcfe8 0%, #f9a8d4 35%, #c4b5fd 70%, #93c5fd 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; } .cfly-subtitle { margin: 36px auto 0; max-width: 620px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; letter-spacing: 0.005em; color: var(--c-ink-soft); opacity: 0; transform: translateY(18px); } .cfly-cue { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(14px); } .cfly-cue-label { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--c-ink-dim); } .cfly-cue-bar { position: relative; width: 140px; height: 2px; background: rgba(245, 243, 238, 0.08); border-radius: 2px; overflow: hidden; } .cfly-cue-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, #fbcfe8, #c4b5fd, #93c5fd); border-radius: 2px; box-shadow: 0 0 12px rgba(196, 181, 253, 0.6); } /* ── Layer 2: BACK plate — blurred parallax pass ───────────────── */ /* Mirror-order copies of the same images, large + heavily blurred + dimmed. Multiple are on-screen at once at varied speeds and lanes, creating the "rushing past" film-reel ambience behind the front queue. */ .cfly-back { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; } .cfly-back-tile { position: absolute; top: var(--cfly-lane, 50%); left: 0; /* JS drives the transform; this is the parked off-right state. */ transform: translate3d(110vw, -50%, 0); opacity: 0.7; filter: blur(20px) saturate(1.15) brightness(0.5); will-change: transform; } .cfly-back-size-xl { width: 70vw; height: 64vh; } .cfly-back-size-xxl { width: 96vw; height: 80vh; } .cfly-back-frame { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: linear-gradient( 160deg, color-mix(in srgb, var(--p-tint, #8b5cf6) 45%, #0a0a0a), #050507 ); } .cfly-back-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cfly-back-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient( ellipse at 50% 40%, color-mix(in srgb, var(--p-tint, #8b5cf6) 60%, transparent), transparent 70% ); } .cfly-back-emoji { font-size: clamp(120px, 14vw, 240px); line-height: 1; filter: drop-shadow( 0 20px 50px color-mix(in srgb, var(--p-tint, #8b5cf6) 80%, transparent) ); } /* ── Layer 3: FRONT queue — sharp, smaller, one at a time ──────── */ .cfly-front { position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 1600px; } .cfly-front-tile { position: absolute; top: var(--cfly-lane, 50%); left: 0; /* JS drives the transform; parked off-right. Tilt is gentle (±2°). */ transform: translate3d(120vw, -50%, 0) rotate(var(--cfly-tilt, 0deg)); transform-origin: center center; will-change: transform; } /* Shape variants — preserve each piece's editorial intent. Front tiles are smaller than before so a single hero reads cleanly without taking the whole screen. */ .cfly-shape-small { width: clamp(240px, 26vw, 420px); height: clamp(320px, 52vh, 560px); } .cfly-shape-tall { width: clamp(240px, 26vw, 420px); height: clamp(360px, 58vh, 600px); } .cfly-shape-wide { width: clamp(360px, 40vw, 620px); height: clamp(240px, 38vh, 420px); } .cfly-shape-large { width: clamp(320px, 34vw, 540px); height: clamp(300px, 48vh, 500px); } .cfly-frame { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: linear-gradient( 160deg, color-mix(in srgb, var(--p-tint, #8b5cf6) 28%, #0a0a0a), #050507 ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 50px 110px -30px rgba(0, 0, 0, 0.85), 0 0 90px -20px color-mix(in srgb, var(--p-tint, #8b5cf6) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.06); } .cfly-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cfly-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient( ellipse at 50% 35%, color-mix(in srgb, var(--p-tint, #8b5cf6) 48%, transparent), transparent 70% ); } .cfly-emoji { font-size: clamp(72px, 9vw, 160px); line-height: 1; z-index: 2; filter: drop-shadow( 0 18px 42px color-mix(in srgb, var(--p-tint, #8b5cf6) 72%, transparent) ); } .cfly-glow { position: absolute; inset: 22% 16%; background: radial-gradient( circle, color-mix(in srgb, var(--p-tint, #8b5cf6) 45%, transparent), transparent 70% ); filter: blur(55px); } .cfly-meta { position: absolute; left: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: rgba(8, 8, 12, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; max-width: 70%; } .cfly-kind { font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-ink-dim); } .cfly-name { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfly-index { position: absolute; top: 14px; right: 14px; font-family: "Instrument Serif", serif; font-size: 14px; letter-spacing: 0.06em; color: rgba(245, 243, 238, 0.88); background: rgba(8, 8, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ── Layer 3: HUD chrome (top ticker, spec chip, live counter) ── */ .cfly-ticker { position: absolute; top: 28px; right: 36px; z-index: 5; display: flex; align-items: center; gap: 12px; font-family: "Instrument Serif", serif; font-size: 14px; color: var(--c-ink-dim); pointer-events: none; } .cfly-ticker-num { font-size: 20px; color: var(--c-ink); } .cfly-ticker-bar { width: 36px; height: 1px; background: rgba(245, 243, 238, 0.3); } .cfly-ticker-total { letter-spacing: 0.06em; } .cfly-chip { position: absolute; bottom: 28px; left: 36px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-soft); pointer-events: none; } .cfly-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 12px rgba(244, 63, 94, 0.65); animation: cfly-pulse 1.8s ease-in-out infinite; } .cfly-count { position: absolute; bottom: 28px; right: 36px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; } .cfly-count-label { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); } .cfly-count-num { display: inline-flex; align-items: baseline; gap: 6px; font-family: "Instrument Serif", serif; font-size: 22px; line-height: 1; color: var(--c-ink); } .cfly-count-sep { color: var(--c-ink-dim); font-size: 16px; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 900px) { .chapter-canvas { height: 300vh; } .cfly-back-size-xl { width: 110vw; height: 60vh; } .cfly-back-size-xxl { width: 130vw; height: 72vh; } .cfly-back-tile { filter: blur(20px) saturate(1.1) brightness(0.92); opacity: 0.5; } .cfly-shape-small, .cfly-shape-tall { width: clamp(220px, 64vw, 360px); height: clamp(280px, 50vh, 460px); } .cfly-shape-wide { width: clamp(280px, 80vw, 480px); height: clamp(220px, 36vh, 340px); } .cfly-shape-large { width: clamp(260px, 74vw, 440px); height: clamp(260px, 44vh, 400px); } .cfly-ticker { top: 18px; right: 18px; } .cfly-chip { bottom: 18px; left: 18px; padding: 7px 12px; font-size: 9px; } .cfly-count { bottom: 18px; right: 18px; } .cfly-count-num { font-size: 18px; } .cfly-meta { padding: 8px 12px; left: 12px; bottom: 12px; } .cfly-name { font-size: 12px; } } @media (max-width: 600px) { .cfly-title { font-size: clamp(44px, 12vw, 80px); } .cfly-subtitle { font-size: 14px; margin-top: 24px; } .cfly-cue { margin-top: 36px; } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 05 — THE GAME (pinned, deck → fan) ═══════════════════════════════════════════════════════════════════ */ .chapter-game { /* Was 420vh with the fan ending at "bottom 70%" — that left ~126vh of dead scroll at the bottom. Trimmed to 280vh and the fan now scrubs all the way to the section's bottom (see cinematic.js §5e). */ height: 280vh; } .game-pin { position: relative; height: 100vh; padding: 6vh 8vw 4vh; overflow: hidden; display: flex; flex-direction: column; /* Explicit chapter-5 gradient so this panel is always chapter-5 colored the moment it becomes visible — even if the body's #chapter-bg is still mid-1.6s-transition. Mirrors the same #060e1c / #0a2247 tints used by .cfly-tint-veil and #chapter-bg when chapter 5 is active, so the chapter 4 → 5 seam reads as one continuous frame. */ background: radial-gradient(ellipse 110% 70% at 50% -10%, #0a2247, transparent 65%), radial-gradient( ellipse 90% 60% at 50% 110%, rgba(10, 34, 71, 0.5), transparent 70% ), #060e1c; } /* Inner wrapper — chapter 04's tail (HANDOFF, see cinematic.js §5d) slides this in from the right as a position:fixed overlay while chapter 04 is still pinned, so the transition reads as pure right-to-left motion with no vertical drift. The default transform is identity so reduced-motion users (and users who land directly on chapter 5) see it in place. */ .game-pin-inner { position: relative; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; transform: translate3d(0, 0, 0); will-change: transform; } .game-header { max-width: 720px; margin-bottom: 2vh; } .game-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 16px; } .game-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; } .game-eyebrow .dot-blue { background: #3b82f6; box-shadow: 0 0 12px #3b82f6; } .game-title { font-size: clamp(34px, 5vw, 70px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 0 14px; } .game-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #93c5fd, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .game-lede { max-width: 540px; font-size: 14px; line-height: 1.65; color: var(--c-ink-soft); margin: 0; } .game-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; } .game-stage-glow { position: absolute; width: 60%; aspect-ratio: 1; background: radial-gradient( circle, rgba(59, 130, 246, 0.35), transparent 65% ); filter: blur(70px); pointer-events: none; } .game-card { position: absolute; width: clamp(240px, 24vw, 340px); height: clamp(360px, 56vh, 480px); border-radius: 22px; overflow: hidden; background: rgba(10, 10, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 90px -30px rgba(0, 0, 0, 0.7), 0 0 60px -10px color-mix(in srgb, var(--g-from) 40%, transparent); transform-origin: 50% 90%; display: flex; flex-direction: column; } .game-card-cover { position: relative; height: 55%; background: linear-gradient(160deg, var(--g-from), var(--g-to)); display: flex; align-items: center; justify-content: center; overflow: hidden; } .game-card-glow { position: absolute; inset: 0; background: radial-gradient( 120% 80% at 50% 100%, rgba(255, 255, 255, 0.18), transparent 70% ); pointer-events: none; } .game-card-emoji { font-size: clamp(80px, 9vw, 130px); line-height: 1; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45)); } .game-card-num { position: absolute; top: 14px; left: 16px; font-family: "Instrument Serif", serif; font-style: italic; font-size: 16px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.04em; } .game-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .game-card-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .game-card-blurb { font-size: 13px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; flex: 1; } .game-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .game-card-tag { padding: 4px 10px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-soft); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; } /* Initial stacked deck (GSAP fans them out as the user scrolls) */ .game-card[data-i="0"] { transform: translate(0, 14px) rotate(-3deg) scale(0.95); z-index: 1; } .game-card[data-i="1"] { transform: translate(0, 6px) rotate(0deg) scale(0.98); z-index: 2; } .game-card[data-i="2"] { transform: translate(0, 0) rotate(3deg) scale(1); z-index: 3; } .game-progress { position: absolute; bottom: 4vh; left: 8vw; font-family: "Instrument Serif", serif; font-style: italic; font-size: 14px; color: var(--c-ink-dim); pointer-events: none; } .game-progress #game-progress-current { color: var(--c-ink); } .game-progress .sep { margin: 0 4px; } @media (max-width: 720px) { .chapter-game { height: 260vh; } .game-card { width: 70vw; height: 50vh; } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 06 — THE BEAN (pinned, timeline + live cup + stats) ═══════════════════════════════════════════════════════════════════ */ .chapter-bean { height: 320vh; } .bean-pin { position: relative; height: 100vh; padding: 0 8vw; overflow: hidden; display: flex; align-items: center; } .bean-warm-glow { position: absolute; inset: -10%; background: radial-gradient( 60% 50% at 30% 40%, rgba(245, 158, 11, 0.18), transparent 70% ), radial-gradient( 45% 40% at 75% 60%, rgba(236, 72, 153, 0.16), transparent 70% ); filter: blur(50px); pointer-events: none; z-index: 0; } .bean-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 6vw; width: 100%; align-items: center; } @media (max-width: 900px) { .chapter-bean { height: 380vh; } .bean-pin { padding: 0 6vw; } .bean-grid { grid-template-columns: 1fr; gap: 6vh; } } .bean-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 22px; } .bean-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; } .bean-eyebrow .dot-amber { background: #f59e0b; box-shadow: 0 0 12px #f59e0b; } .bean-title { font-size: clamp(34px, 5.2vw, 70px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 0 18px; } .bean-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #fcd34d, #fda4af); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bean-lede { max-width: 460px; font-size: 14.5px; line-height: 1.65; color: var(--c-ink-soft); margin: 0 0 28px; } /* Timeline */ .bean-timeline { list-style: none; margin: 0 0 28px; padding: 0 0 0 24px; position: relative; max-width: 520px; } .bean-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 8px; width: 1px; background: linear-gradient( 180deg, rgba(245, 158, 11, 0.6), rgba(236, 72, 153, 0.4), rgba(255, 255, 255, 0.05) ); } .bean-event { position: relative; padding: 0 0 18px; display: grid; grid-template-columns: 1fr; gap: 4px; opacity: 0.55; transition: opacity 0.5s ease; } .bean-event.is-active { opacity: 1; } .bean-event-marker { position: absolute; left: -24px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: rgba(10, 10, 10, 0.9); border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; } .bean-event-marker > span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background 0.4s ease, box-shadow 0.4s ease; } .bean-event.is-active .bean-event-marker > span { background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 0 10px #f59e0b; } .bean-event.is-current .bean-event-marker { border-color: rgba(245, 158, 11, 0.6); } .bean-event-year { font-family: "Instrument Serif", serif; font-style: italic; font-size: 13px; color: var(--c-ink-dim); letter-spacing: 0.02em; } .bean-event h4 { font-size: 15px; font-weight: 600; margin: 2px 0 4px; color: var(--c-ink); } .bean-event p { font-size: 13px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; } /* Stats — pinned to the bottom of the cup stage (where the gauge was) */ .bean-stats { position: absolute; left: 0; right: 0; bottom: 4%; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 14px 48px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .bean-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; } .bean-stat-num { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(135deg, #fcd34d, #fda4af); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .bean-stat-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ink-dim); } /* Cup stage */ .bean-stage { position: relative; height: 70vh; min-height: 480px; display: flex; align-items: center; justify-content: center; } .bean-stage-ring { position: absolute; width: 50%; aspect-ratio: 1; border: 1px dashed rgba(245, 158, 11, 0.18); border-radius: 50%; pointer-events: none; animation: ring-spin 60s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } .bean-cup { position: relative; width: clamp(300px, 32vw, 460px); display: flex; flex-direction: column; align-items: center; } /* Steam */ .bean-steam { position: absolute; bottom: 78%; left: 50%; transform: translateX(-50%); width: 80%; height: 130px; pointer-events: none; opacity: 0; /* raised by JS as the cup fills — empty cup starts steamless */ transition: opacity 0.4s ease; } .bean-steam .steam { position: absolute; bottom: 0; width: 18px; height: 80px; border-radius: 50%; background: radial-gradient( ellipse, rgba(255, 255, 255, 0.5), transparent 70% ); filter: blur(10px); opacity: 0; animation: steam-rise 4s linear infinite; } .bean-steam .s1 { left: 22%; animation-delay: 0s; } .bean-steam .s2 { left: 48%; animation-delay: 1.2s; } .bean-steam .s3 { left: 70%; animation-delay: 2.4s; } @keyframes steam-rise { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 20% { opacity: 0.7; } 60% { transform: translate(-12px, -90px) scale(1.6); opacity: 0.4; } 100% { transform: translate(8px, -160px) scale(2.2); opacity: 0; } } /* Cup body — two stacked photos. The empty cup is the base; the filled cup is layered on top and clipped to nothing, then revealed from the bottom up on scroll (clip-path driven in cinematic.js) to simulate the pour. Both PNGs are 500×450 with identical cup alignment, so they overlay seamlessly. */ .bean-cup-photo { position: relative; width: 100%; aspect-ratio: 500 / 450; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.45)); } .bean-cup-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .bean-cup-img-empty { z-index: 1; } .bean-cup-img-filled { z-index: 2; /* Resting state matches the scroll start (see cinematic.js): only the coffee-free base/saucer of the filled cup shows, so the cup reads empty. */ clip-path: inset(76% 0 0 0); will-change: clip-path; } /* Floating chip */ .bean-chip { position: absolute; right: 0; top: 8%; padding: 8px 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); border-radius: 999px; z-index: 4; } .bean-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px #f59e0b; } /* Gauge */ .bean-gauge { position: absolute; left: 0; right: 0; bottom: 4%; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-dim); } .bean-gauge-bar { height: 1px; background: rgba(255, 255, 255, 0.08); border-radius: 1px; overflow: hidden; } .bean-gauge-bar > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #f59e0b, #ec4899); } .bean-gauge-meta { font-family: "Instrument Serif", serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--c-ink); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; } @media (max-width: 900px) { .bean-stage { height: 60vh; } .bean-chip { right: 4%; top: 0; } .bean-gauge { bottom: 1%; } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 07 — THE CLASSROOM (pinned, code editor + chalkboard) ═══════════════════════════════════════════════════════════════════ */ .chapter-classroom { height: 320vh; } .classroom-pin { position: relative; height: 100vh; padding: 0 8vw; display: flex; align-items: center; overflow: hidden; } .classroom-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 6vw; width: 100%; align-items: center; } @media (max-width: 900px) { .chapter-classroom { height: 380vh; } .classroom-pin { padding: 0 6vw; } .classroom-grid { grid-template-columns: 1fr; gap: 6vh; } } /* Editor */ .classroom-editor-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60vh; } .classroom-editor-glow { position: absolute; width: 80%; aspect-ratio: 1; background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 65%); filter: blur(70px); pointer-events: none; } .classroom-editor { position: relative; width: 100%; max-width: 580px; font-family: ui-monospace, "SF Mono", Menlo, monospace; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 50px 100px -40px rgba(0, 0, 0, 0.7); } .editor-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .editor-dot { width: 11px; height: 11px; border-radius: 50%; } .editor-dot.dot-r { background: #ef4444; } .editor-dot.dot-y { background: #eab308; } .editor-dot.dot-g { background: #22c55e; } .editor-name { margin-left: 12px; font-size: 11px; color: var(--c-ink-soft); letter-spacing: 0.04em; } .editor-tab { margin-left: auto; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(34, 197, 94, 0.85); padding: 3px 8px; border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 999px; } .editor-body { position: relative; padding: 18px 18px 24px; background: linear-gradient(180deg, rgba(34, 211, 238, 0.04), transparent), rgba(5, 5, 5, 0.5); min-height: 280px; } .editor-code { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--c-ink-soft); white-space: pre; min-height: 240px; } .editor-code .kw { color: #c4b5fd; } .editor-code .cls { color: #93c5fd; } .editor-code .str { color: #fbcfe8; } .editor-code .num { color: #fcd34d; } .editor-code .com { color: rgba(245, 243, 238, 0.35); font-style: italic; } .editor-code .fn { color: #5eead4; } .editor-code .pun { color: rgba(245, 243, 238, 0.5); } .editor-caret { display: inline-block; width: 7px; height: 14px; background: #c4b5fd; vertical-align: text-bottom; margin-left: 1px; animation: caret-blink 1.05s steps(2) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } .editor-foot { display: flex; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); } .editor-foot .sep { opacity: 0.4; } /* Floating "live" chip on the editor */ .classroom-chip { position: absolute; right: -2%; top: 6%; padding: 8px 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); border-radius: 999px; z-index: 4; } .classroom-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: live-pulse 1.6s ease-in-out infinite; } /* Chalkboard column */ .classroom-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 22px; } .classroom-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; } .classroom-eyebrow .dot-cyan { background: #22d3ee; box-shadow: 0 0 12px #22d3ee; } .classroom-title { font-size: clamp(34px, 5.2vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 0 16px; } .classroom-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #67e8f9, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .classroom-lede { max-width: 460px; font-size: 14.5px; line-height: 1.65; color: var(--c-ink-soft); margin: 0 0 18px; } .classroom-squiggle { display: block; width: 200px; height: 50px; margin-bottom: 18px; } #classroom-squiggle-path { stroke-dasharray: 720; stroke-dashoffset: 720; } .classroom-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 520px; } .classroom-points li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; align-items: start; opacity: 0; transform: translateY(10px); } .classroom-points li.is-in { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; } .classroom-points .cp-num { font-family: "Instrument Serif", serif; font-style: italic; font-size: 22px; color: #67e8f9; line-height: 1; } .classroom-points h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--c-ink); } .classroom-points p { font-size: 13px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 08 — THE COMMUNITY ("Calm Card Grid") Not pinned — a quiet, flowing breather between the pinned chapters. Each organization is a glass card in a responsive grid (2-up on desktop, 1-up on mobile). Cards fade + lift in with a stagger. Fully data-driven: any number of orgs just adds more cards to the grid. ═══════════════════════════════════════════════════════════════════ */ .chapter-community { position: relative; height: 220vh; /* fallback — JS sets the exact height per org count */ } /* The pinned stage: one screen tall, held while the rail scrubs across. The extra section height above provides the scroll-travel. */ .community-inner { position: relative; z-index: 1; height: 100vh; padding: 13vh 8vw 9vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(30px, 5vh, 56px); overflow: hidden; } /* Backdrop */ .community-bg { position: absolute; inset: -10%; pointer-events: none; z-index: 0; } .community-bg-glow { position: absolute; inset: 0; background: radial-gradient( 46% 38% at 22% 28%, rgba(16, 185, 129, 0.16), transparent 70% ), radial-gradient( 42% 34% at 82% 78%, rgba(59, 130, 246, 0.13), transparent 70% ); filter: blur(80px); } .community-bg-grid { position: absolute; inset: 0; /* Whisper-faint — almost imperceptible, just enough to break flat black. */ background-image: linear-gradient(rgba(255, 255, 255, 0.006) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.006) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient( ellipse 72% 72% at 50% 45%, #000 20%, transparent 92% ); -webkit-mask-image: radial-gradient( ellipse 72% 72% at 50% 45%, #000 20%, transparent 92% ); } /* Index ribbon (top-right) */ .community-index { position: absolute; top: 6vh; right: 8vw; z-index: 2; display: inline-flex; align-items: center; gap: 10px; font-family: "Instrument Serif", serif; font-style: italic; font-size: 13px; color: var(--c-ink-dim); } .community-index-num { color: #6ee7b7; font-size: 18px; } .community-index-bar { width: 28px; height: 1px; background: rgba(255, 255, 255, 0.18); } /* Header */ .community-header { position: relative; z-index: 1; max-width: 680px; } .community-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 16px; } .community-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; } .community-eyebrow .dot-emerald { background: #10b981; box-shadow: 0 0 12px #10b981; } .community-title { font-size: clamp(30px, 4.4vw, 58px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; margin: 0; } .community-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #6ee7b7, #93c5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .community-lede { margin: 18px 0 0; max-width: 46ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: var(--c-ink-soft); } /* ── Horizontal card rail ───────────────────────────────────────── The viewport frames ~2 cards plus a peek of the next; `overflow` clips the rest and the mask feathers both edges so cards melt in and out instead of hard-cutting. The track is the full-width flex row that JS translates; per-card opacity (also JS) does the focus fade. */ .community-viewport { position: relative; z-index: 1; --cc-w: clamp(300px, 27vw, 400px); /* one card (a touch wider) */ --cc-gap: clamp(16px, 1.6vw, 26px); /* gap between cards */ --cc-lead: clamp( 26px, 3vw, 56px ); /* left lead-in — card 1 sits clear of the edge fade */ --cc-peek: clamp(72px, 9vw, 150px); /* visible sliver of the next card */ --cc-rightfade: clamp(24px, 2.5vw, 48px); /* only the rightmost edge fades */ align-self: flex-start; /* left-aligned under the header, not stretched */ width: 100%; /* Lead-in + two cards in the crisp band + a peek of the third. */ max-width: calc( var(--cc-lead) + 2 * var(--cc-w) + 2 * var(--cc-gap) + var(--cc-peek) ); overflow: hidden; /* Solid from where card 1 begins (--cc-lead) right up to a thin sliver at the far edge — so the emerging card reads crisply and only melts out at the very rim, and card 1 is never caught in the left feather. */ -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 var(--cc-lead), #000 calc(100% - var(--cc-rightfade)), transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0, #000 var(--cc-lead), #000 calc(100% - var(--cc-rightfade)), transparent 100% ); } .community-track { display: flex; align-items: stretch; gap: var(--cc-gap); padding-left: var( --cc-lead ); /* card 1 starts past the left fade → crisp from the start */ will-change: transform; } .community-card { position: relative; flex: 0 0 var(--cc-w); width: var(--cc-w); display: flex; flex-direction: column; min-height: clamp(250px, 30vh, 326px); padding: clamp(26px, 2.4vw, 38px) clamp(24px, 2.2vw, 34px); border-radius: 18px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 62% ), rgba(9, 11, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -36px rgba(0, 0, 0, 0.85); overflow: hidden; transition: border-color 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo); } .community-card:hover { border-color: color-mix(in srgb, var(--o-tint) 42%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 40px 80px -36px rgba(0, 0, 0, 0.9), 0 0 60px -22px color-mix(in srgb, var(--o-tint) 55%, transparent); } /* Eyebrow: ROLE + YEAR on one tracked line */ .community-card-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: clamp(16px, 2vw, 24px); } .community-card-role { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--o-tint) 70%, white); } .community-card-year { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; /* Shares the role's hue, a touch more muted — reads as secondary. */ color: color-mix(in srgb, var(--o-tint) 56%, #94a3b8); } /* Name — clean sans, the card's anchor (professional over decorative) */ .community-card-name { margin: 0; font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -0.022em; color: var(--c-ink); } /* Short tint rule under the name */ .community-card-rule { margin-top: clamp(15px, 1.8vw, 20px); width: 34px; height: 2px; border-radius: 2px; background: linear-gradient( 90deg, var(--o-tint), color-mix(in srgb, var(--o-tint) 8%, transparent) ); } .community-card-blurb { position: relative; z-index: 1; margin: clamp(15px, 1.8vw, 20px) 0 0; max-width: 34ch; font-size: 13px; line-height: 1.62; color: var(--c-ink-soft); } /* Big faint serif numeral, lower-right */ .community-card-index { position: absolute; right: clamp(18px, 2vw, 26px); bottom: clamp(6px, 1vw, 12px); font-family: "Instrument Serif", serif; font-style: normal; font-size: clamp(46px, 5vw, 72px); line-height: 1; color: rgba(255, 255, 255, 0.05); pointer-events: none; user-select: none; font-variant-numeric: tabular-nums; } /* Foot signature + scroll hint */ .community-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; width: 100%; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-soft); } .community-foot-pulse { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 10px #6ee7b7; animation: live-pulse 1.6s ease-in-out infinite; } .community-foot-text { margin-right: auto; } .community-foot-hint { display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: 0.24em; color: var(--c-ink-dim); } .community-foot-hint-track { position: relative; width: 34px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .community-foot-hint-dot { position: absolute; top: 0; left: -14px; width: 14px; height: 2px; border-radius: 2px; background: #6ee7b7; animation: community-hint 1.9s ease-in-out infinite; } @keyframes community-hint { 0% { left: -14px; } 55%, 100% { left: 34px; } } /* Responsive — on phones the rail becomes a native swipe carousel (no pin, no JS transform); JS (5h) un-dims the cards on this breakpoint. */ @media (max-width: 760px) { .chapter-community { height: auto !important; /* cancel the JS-set pin height */ } .community-inner { height: auto; min-height: 100vh; padding: 12vh 6vw 10vh; overflow: visible; } .community-index { top: 4vh; } .community-viewport { max-width: none; margin-inline: -6vw; padding-inline: 6vw; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; } .community-viewport::-webkit-scrollbar { display: none; } .community-track { transform: none !important; padding-right: 6vw; } .community-card { flex-basis: 80vw; width: 80vw; opacity: 1 !important; scroll-snap-align: start; } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 09 — THE ARSENAL ("Bar Graph") Pinned (Bean-style). As the user scrolls through the section, the bars grow from 0 to each skill's percent in a cascade and the numbers count up in lockstep — the chart draws itself. Tint = category. The section height is set inline from EJS so it scales with the skill count. ═══════════════════════════════════════════════════════════════════ */ .chapter-arsenal { position: relative; height: 260vh; /* fallback — EJS sets an exact height inline per count */ } .arsenal-pin { position: relative; z-index: 1; height: 100vh; padding: 12vh 8vw 8vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(26px, 4vh, 48px); } /* Backdrop */ .arsenal-bg { position: absolute; inset: -10%; pointer-events: none; z-index: 0; } .arsenal-glow { position: absolute; border-radius: 50%; filter: blur(90px); } .arsenal-glow.g1 { width: 48%; aspect-ratio: 1; left: 6%; top: 8%; background: radial-gradient( circle, rgba(139, 92, 246, 0.26), transparent 65% ); } .arsenal-glow.g2 { width: 44%; aspect-ratio: 1; right: 6%; bottom: 4%; background: radial-gradient(circle, rgba(236, 72, 153, 0.2), transparent 65%); } /* Index */ .arsenal-index { position: absolute; top: 6vh; right: 8vw; z-index: 2; display: inline-flex; align-items: center; gap: 10px; font-family: "Instrument Serif", serif; font-style: italic; font-size: 13px; color: var(--c-ink-dim); } .arsenal-index-num { color: #c4b5fd; font-size: 18px; } .arsenal-index-bar { width: 28px; height: 1px; background: rgba(255, 255, 255, 0.18); } /* Two-column stage: text block (left) + bar chart (right) */ .arsenal-stage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(40px, 6vw, 110px); } /* Header */ .arsenal-header { position: relative; z-index: 1; max-width: 560px; } .arsenal-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 16px; } .arsenal-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; } .arsenal-eyebrow .dot-violet { background: #8b5cf6; box-shadow: 0 0 12px #8b5cf6; } .arsenal-title { font-size: clamp(40px, 5.2vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; margin: 0; } .arsenal-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #c4b5fd, #fbcfe8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .arsenal-lede { margin: 18px 0 0; max-width: 48ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: var(--c-ink-soft); } /* ── The chart ───────────────────────────────────────────────── */ .arsenal-chart { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.1vh, 14px); width: 100%; } .arsenal-bar { display: grid; grid-template-columns: minmax(130px, 32%) 1fr; align-items: center; gap: clamp(14px, 1.6vw, 26px); opacity: 0.4; /* JS brightens each row as its bar fills */ } .arsenal-bar-head { display: flex; flex-direction: column; min-width: 0; } .arsenal-bar-name { font-size: clamp(14px, 1.4vw, 17px); font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arsenal-bar-track { position: relative; height: clamp(10px, 1.5vh, 14px); border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; } .arsenal-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0%; /* driven by JS scrub */ border-radius: 999px; background: linear-gradient( 90deg, color-mix(in srgb, var(--s-tint) 55%, transparent), var(--s-tint) ); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--s-tint) 70%, transparent); } .arsenal-bar-fill::after { /* bright leading edge that travels with the fill */ content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: #fff; opacity: 0.55; } /* Foot: legend + tally */ .arsenal-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .arsenal-legend { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 18px; } .arsenal-legend .lg-item { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); } .arsenal-legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d); box-shadow: 0 0 10px var(--d); } .arsenal-foot-text { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-soft); } /* Responsive */ @media (max-width: 1024px) { /* Stack the text block above the chart. */ .arsenal-stage { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 48px); } .arsenal-header { max-width: 680px; } } @media (max-width: 760px) { .arsenal-pin { padding: 12vh 6vw 8vh; } .arsenal-index { top: 4vh; } .arsenal-bar { grid-template-columns: 1fr; grid-template-areas: "head" "track"; row-gap: 5px; } .arsenal-bar-head { grid-area: head; } .arsenal-bar-track { grid-area: track; } } /* Chapter 10 (Catalog) was folded into Chapter 03 — its CSS was removed. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ CHAPTER 11 — THE INVITATION (closing chapter, contact + Fin) ═══════════════════════════════════════════════════════════════════ */ .chapter-invitation { min-height: 100vh; padding: 14vh 8vw 10vh; position: relative; display: flex; align-items: center; overflow: hidden; } .invitation-bg { position: absolute; inset: -10%; pointer-events: none; z-index: 0; } .invitation-glow { position: absolute; inset: 0; background: radial-gradient( 50% 40% at 30% 40%, rgba(139, 92, 246, 0.3), transparent 70% ), radial-gradient( 45% 35% at 70% 70%, rgba(236, 72, 153, 0.2), transparent 70% ); filter: blur(80px); } .invitation-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient( ellipse 70% 70% at 50% 50%, #000 0%, transparent 80% ); -webkit-mask-image: radial-gradient( ellipse 70% 70% at 50% 50%, #000 0%, transparent 80% ); } .invitation-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; } .invitation-inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; } .invitation-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 18px; } .invitation-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; } .invitation-eyebrow .dot-violet-2 { background: #c4b5fd; box-shadow: 0 0 12px #c4b5fd; } .invitation-title { font-size: clamp(36px, 5.6vw, 80px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; margin: 0 0 6vh; max-width: 22ch; } .invitation-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #c4b5fd, #fbcfe8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .invitation-grid-card { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4vw; align-items: stretch; } @media (max-width: 900px) { .invitation-grid-card { grid-template-columns: 1fr; gap: 4vh; } } /* Aside */ .invitation-aside { display: flex; flex-direction: column; gap: 22px; } .invitation-aside-block { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); } .invitation-aside-block:last-child { border-bottom: none; } .ia-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-ink-dim); } .ia-link { font-size: 16px; color: var(--c-ink); text-decoration: none; word-break: break-word; transition: color 0.25s ease, transform 0.25s ease; } .ia-link:hover { color: #c4b5fd; transform: translateX(2px); } .ia-text { font-size: 14px; color: var(--c-ink-soft); display: flex; align-items: center; gap: 8px; line-height: 1.55; } .ia-coords { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--c-ink-dim); margin-top: 2px; } /* Form */ .invitation-form { position: relative; padding: 28px 28px 24px; display: flex; flex-direction: column; overflow: hidden; } .invitation-form-head { margin-bottom: 22px; } .invitation-form-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 10px; } .invitation-form-title { font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(20px, 2.4vw, 28px); font-weight: 400; margin: 0; color: var(--c-ink); } .invitation-form-rows { display: flex; flex-direction: column; gap: 14px; } .invitation-row { display: flex; flex-direction: column; gap: 6px; } .invitation-row-label { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ink-dim); } .invitation-row-hint { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--c-ink-dim); } .invitation-row-input { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--c-ink); background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; outline: none; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; resize: none; } .invitation-row-input::placeholder { color: var(--c-ink-dim); } .invitation-row-input:focus { border-color: rgba(196, 181, 253, 0.5); background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12); } .invitation-row-textarea { min-height: 110px; line-height: 1.55; } .invitation-form-foot { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; } .invitation-submit { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #0a0a0a; background: linear-gradient(135deg, #f5f3ee, #d4d4d4); border: none; border-radius: 999px; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; } .invitation-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(245, 243, 238, 0.4); } .invitation-submit:disabled { opacity: 0.55; cursor: progress; } .invitation-submit-arrow { display: inline-block; transition: transform 0.25s ease; } .invitation-submit:hover .invitation-submit-arrow { transform: translateX(3px); } .invitation-form-note { font-size: 11px; line-height: 1.5; color: var(--c-ink-dim); max-width: 280px; margin: 0; } .invitation-success { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(14px); z-index: 5; padding: 30px; opacity: 0; transition: opacity 0.5s ease; } .invitation-success[hidden] { display: none; } .invitation-success.is-on { opacity: 1; } .invitation-success-seal { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #c4b5fd, #fbcfe8); color: #0a0a0a; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; box-shadow: 0 12px 32px -10px rgba(196, 181, 253, 0.5); } .invitation-success h4 { font-family: "Instrument Serif", serif; font-style: italic; font-size: 28px; font-weight: 400; margin: 0 0 8px; } .invitation-success p { margin: 0; font-size: 14px; color: var(--c-ink-soft); max-width: 340px; } .invitation-errors { margin-top: 14px; padding: 12px 14px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 10px; color: #fecaca; font-size: 12.5px; line-height: 1.55; } .invitation-errors[hidden] { display: none; } .invitation-errors ul { margin: 0; padding-left: 16px; } .invitation-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; } /* Fin / restart */ .invitation-fin { margin-top: 12vh; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; } .invitation-fin-line { width: 80px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); } .invitation-fin-word { font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(48px, 7vw, 96px); background: linear-gradient(180deg, #f5f3ee, rgba(245, 243, 238, 0.2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.01em; } .invitation-restart { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; cursor: pointer; transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .invitation-restart:hover { color: var(--c-ink); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); } .invitation-restart-arrow { display: inline-block; font-size: 14px; letter-spacing: 0; } @media (max-width: 720px) { .chapter-invitation { padding: 12vh 6vw 10vh; } .invitation-form { padding: 22px 18px 20px; } .invitation-fin { margin-top: 8vh; } } /* ═══════════════════════════════════════════════════════════════════ PHASE 17 — REDESIGNED CHAPTERS These rules supersede the older styles for Chapter 01 (orbiting socials), Chapter 03 (stacked project deck + phone shot), Chapter 04 (chaotic masonry), Chapter 08 (CSS-orbit), Chapter 09 (CSS-orbit). ═══════════════════════════════════════════════════════════════════ */ /* ── Chapter 01: orbiting socials around the photo ─────────────── */ /* Square container needed so orbit icons are evenly distributed in a perfect circle. The photo inner (78%) sits portrait inside the square. */ #chapter-identity .identity-frame { position: relative; width: 100%; max-width: 600px; margin-left: auto; aspect-ratio: 1; } .identity-frame-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78%; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; isolation: isolate; z-index: 2; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px -20px rgba(0, 0, 0, 0.6); } .identity-socials { position: absolute; inset: 0; z-index: 3; pointer-events: none; /* nodes themselves opt-in */ --orbit-angle: 0deg; --soc-radius: 46%; } .identity-social { --i: 0; --n: 1; position: absolute; left: 50%; top: 62%; width: 48px; height: 48px; margin: -24px 0 0 -24px; text-decoration: none; pointer-events: auto; transform: rotate(calc(var(--orbit-angle) + (360deg / var(--n)) * var(--i))) translateX(var(--soc-radius)) rotate(calc((var(--orbit-angle) + (360deg / var(--n)) * var(--i)) * -1)); transition: transform 0.5s ease-out; will-change: transform; } .identity-social-disc { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: rgba(10, 10, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); color: var(--c-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 22px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 24px -6px color-mix(in srgb, var(--soc-tint, #c4b5fd) 50%, transparent); transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo), opacity 0.6s var(--ease-out-expo), color 0.6s var(--ease-out-expo); } .identity-social-disc svg { width: 22px; height: 22px; } .identity-social:hover .identity-social-disc { color: var(--soc-tint, #f5f3ee); transform: scale(1.18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 14px 28px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 50px -4px color-mix(in srgb, var(--soc-tint, #c4b5fd) 80%, transparent); } .identity-social-label { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); background: rgba(10, 10, 10, 0.85); padding: 3px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo), color 0.55s var(--ease-out-expo); pointer-events: none; } .identity-social:hover .identity-social-label, .identity-social.is-soc-active .identity-social-label { opacity: 1; transform: translate(-50%, 10px); color: var(--soc-tint, #c4b5fd); } /* ── Social sequential-highlight state classes ────────────────────── */ /* Applied to .identity-social; animate only .identity-social-disc so the orbit CSS transform on the wrapper is never overridden by GSAP. */ .identity-social.is-soc-upcoming .identity-social-disc { opacity: 0.22; transform: scale(0.8); } .identity-social.is-soc-active .identity-social-disc { opacity: 1; transform: scale(1.28); color: var(--soc-tint, #c4b5fd); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 32px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 60px -4px color-mix(in srgb, var(--soc-tint, #c4b5fd) 85%, transparent); } .identity-social.is-soc-past .identity-social-disc { opacity: 0.45; transform: scale(0.9); } /* Pulse ring — radiates outward from the active social disc */ @keyframes soc-pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } } .identity-social.is-soc-active .identity-social-disc::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--soc-tint, #c4b5fd) 70%, transparent); animation: soc-pulse-ring 1.4s var(--ease-out-expo) infinite; pointer-events: none; } /* Social spotlight callout — floats on the text column when a social is active. The callout is driven by JS: adding is-soc-spotlight to the identity-text element, with a data-soc-name data attribute, reveals a dynamic nameplate. */ .identity-soc-callout { display: flex; align-items: center; gap: 10px; margin-top: 28px; opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo); pointer-events: none; } .identity-soc-callout.is-on { opacity: 1; transform: translateY(0); } .identity-soc-callout-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--soc-tint-active, #c4b5fd); box-shadow: 0 0 12px 2px var(--soc-tint-active, #c4b5fd); flex-shrink: 0; transition: background 0.4s, box-shadow 0.4s; } .identity-soc-callout-name { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--soc-tint-active, #c4b5fd); transition: color 0.4s; white-space: nowrap; } .identity-soc-callout-sep { font-size: 12px; color: var(--c-ink-dim); margin: 0 2px; } .identity-soc-callout-count { font-size: 11px; letter-spacing: 0.14em; color: var(--c-ink-dim); text-transform: uppercase; } /* Scroll-hint strip that shows inside the identity section while socials are being cycled — tells the user they're gated here intentionally. */ .identity-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-ink-dim); opacity: 0; transition: opacity 0.6s var(--ease-out-expo); white-space: nowrap; pointer-events: none; } .identity-scroll-hint.is-on { opacity: 1; } .identity-scroll-hint-line { width: 1px; height: 24px; background: linear-gradient(180deg, transparent, var(--c-ink-dim)); } @media (max-width: 720px) { .identity-socials { --soc-radius: 50%; } .identity-social { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .identity-social-disc svg { width: 18px; height: 18px; } } /* ── Chapter 03: stacked project deck + phone shot swap ─────────── */ .code-deck { position: relative; height: clamp(240px, 30vh, 300px); /* Cards now stack right+down, so no left indent needed — overflow: visible handles clipping */ margin: 20px 0 80px 0; max-width: 540px; perspective: 1200px; overflow: visible; } .code-deck-card { position: absolute; left: 0; right: 0; top: 0; padding: 18px 20px; /* Glass base */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(10, 10, 10, 0.4) 100% ); border: 1px solid rgba(255, 255, 255, 0.13); border-top-color: rgba(255, 255, 255, 0.22); border-left-color: rgba(255, 255, 255, 0.18); border-radius: 16px; backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, /* top glass highlight */ 0 -1px 0 rgba(255, 255, 255, 0.04) inset, /* bottom edge */ 0 20px 40px -16px rgba(0, 0, 0, 0.55), 0 0 16px -10px color-mix(in srgb, var(--p-tint, #8b5cf6) 14%, transparent); display: flex; flex-direction: column; gap: 10px; transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease; transform-origin: 50% 100%; /* Default hidden state — enters from bottom-right */ transform: translate3d(32px, 32px, 0) scale(0.95); opacity: 0; filter: blur(0px); pointer-events: none; } .code-deck-card.is-active { /* JS drives transform (i*STEP_X, i*STEP_Y), opacity, z-index, filter — CSS is a fallback only. Card 0 (first) lands at translate3d(0,0,0) because 0*STEP = 0. */ opacity: 1; filter: none; pointer-events: auto; z-index: 5; } .code-deck-card.is-prev, .code-deck-card.is-prev-2 { /* JS freezes each revealed card at its own (i*STEP_X, i*STEP_Y) position and applies progressive blur. These rules are CSS-only fallbacks. */ opacity: 0.5; pointer-events: none; z-index: 3; } .code-deck-card.is-next { /* Future cards: hidden, waiting to enter. JS clears inline styles on reveal. */ opacity: 0; transform: translate3d(0px, 0px, 0) scale(0.95); filter: none; z-index: 2; pointer-events: none; } .code-deck-card-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-dim); } .code-deck-card-num { font-family: "Instrument Serif", serif; font-style: italic; font-size: 14px; color: var(--c-ink); letter-spacing: 0.02em; text-transform: none; } .code-deck-card-cat { padding: 3px 9px; background: color-mix(in srgb, var(--p-tint, #8b5cf6) 18%, transparent); color: var(--c-ink); border-radius: 999px; font-size: 10px; } .code-deck-card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 0; } .code-deck-card-desc { font-size: 13px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; } .code-deck-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .code-deck-card-link { align-self: flex-start; padding: 6px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--c-ink); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; text-decoration: none; transition: color 0.25s ease, background 0.25s ease; } .code-deck-card-link:hover { color: color-mix(in srgb, var(--p-tint, #8b5cf6) 80%, white); background: rgba(255, 255, 255, 0.08); } .code-deck-progress { font-family: "Instrument Serif", serif; font-style: italic; font-size: 14px; color: var(--c-ink-dim); } .code-deck-progress #code-deck-current { color: var(--c-ink); } .code-deck-progress .sep { margin: 0 4px; } /* Phone screen — single-image slots that fade between projects */ .phone-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; background: linear-gradient( 160deg, color-mix(in srgb, var(--p-tint, #8b5cf6) 35%, #0a0a0a), #050505 ); display: flex; align-items: center; justify-content: center; } .phone-shot.is-active { opacity: 1; } .phone-shot-img { width: 100%; height: 100%; object-fit: cover; } .phone-shot-placeholder { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px; } .phone-shot-emoji { font-size: 64px; line-height: 1; filter: drop-shadow( 0 8px 18px color-mix(in srgb, var(--p-tint, #8b5cf6) 60%, transparent) ); } .phone-shot-name { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--c-ink); max-width: 18ch; line-height: 1.3; } /* (Chapter 04 styles were moved up to the main Chapter 04 block — the previous editorial gallery design was replaced with the pinned-flight cinematic experience. See `.cfly-pin` above.) */ /* Chapter 08 and 09 orbit positioning was removed when those chapters were redesigned — see the Service Wall (Chapter 08) and Discipline Matrix (Chapter 09) blocks earlier in this file. */ /* ═══════════════════════════════════════════════════════════════════ CHAPTER 01 ACT 0/1 — SCROLL CUE + DECORATIVE ELEMENTS ═══════════════════════════════════════════════════════════════════ */ /* ── Chapter 01 scroll-down cue (bottom center, Act 0/1) ─────────── */ .id2-scroll-cue { position: absolute; bottom: clamp(24px, 4vh, 44px); left: 50%; transform: translateX(-50%); z-index: 10; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(245, 243, 238, 0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; opacity: 0; /* JS fades in */ transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; animation: id2-cue-bob 2.2s ease-in-out infinite; will-change: transform; } .id2-scroll-cue:hover { border-color: rgba(139, 92, 246, 0.6); color: rgba(245, 243, 238, 0.95); background: rgba(139, 92, 246, 0.1); } @keyframes id2-cue-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } } /* ── Geometric line art SVG background ───────────────────────────── */ .id2-geo-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.65; } /* ── Right chapter rail — horizontal + vertical layout ───────────── */ /* Switch to row layout: chapter numbers left, vertical track right */ #chapter-rail { flex-direction: row; align-items: center; gap: 10px; } .rail-track { order: 2; height: 220px; /* taller track spanning the full list */ width: 1px; margin-right: 0; margin-left: 0; } .rail-chapters { order: 1; gap: 8px; } .rail-chapters li { font-size: 9.5px; letter-spacing: 0.15em; gap: 8px; } .rail-chapters li::after { width: 10px; } .rail-chapters li.is-active::after { width: 20px; } /* ═══════════════════════════════════════════════════════════════════ REDUCED MOTION Respect the OS "reduce motion" preference. Every CSS animation in this file is a decorative infinite loop (auroras, grain, spins, pulses, steam, carets) — content is revealed by GSAP (inline styles), never by a CSS keyframe — so neutralizing CSS animation here calms the ambient motion and turns off the cursor-light without ever hiding content. ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { body.cinematic-body { cursor: auto; } body.cinematic-body #cursor-light, body.cinematic-body .grain-overlay { display: none !important; } body.cinematic-body *, body.cinematic-body *::before, body.cinematic-body *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }