/* ═══════════════════════════════════════════════════════════════════ 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; } } @media (prefers-reduced-motion: reduce) { 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). */ /* ── Motion toggle (top-right, cinematic only) ─────────────────── */ .motion-toggle { position: fixed; top: 22px; right: 22px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgba(10, 10, 10, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); color: rgba(245, 243, 238, 0.65); font-family: "Inter", -apple-system, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: color 0.25s ease, background 0.25s ease; } .motion-toggle:hover { color: rgba(245, 243, 238, 0.95); } .motion-toggle-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #3b82f6); box-shadow: 0 0 8px #8b5cf6; transition: background 0.25s ease, box-shadow 0.25s ease; } .motion-toggle-state { font-family: "Instrument Serif", serif; font-style: italic; font-size: 13px; color: var(--c-ink); letter-spacing: 0; } body[data-motion-pref="reduce"] .motion-toggle-dot { background: rgba(255, 255, 255, 0.3); box-shadow: none; } @media (max-width: 480px) { .motion-toggle { top: 14px; right: 14px; padding: 6px 11px; font-size: 11px; } .motion-toggle-label { display: none; } } /* ── 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 220vh — the sticky inner holds the first viewport while GSAP scrubs the background blur + text exit over the extra scroll. */ #chapter-cold-open { position: relative; height: 220vh; 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: "Instrument Serif", serif; font-style: italic; font-size: clamp(18px, 3.2vw, 36px); color: rgba(245, 243, 238, 0.9); letter-spacing: 0.005em; white-space: nowrap; margin: 0 auto; line-height: 1.4; text-shadow: 0 2px 32px rgba(0, 0, 0, 0.72); position: relative; z-index: 1; } #chapter-cold-open .opener-line .word { display: inline-block; opacity: 0; transform: translateX(-18px); filter: blur(10px); } #chapter-cold-open .opener-name { margin-top: clamp(36px, 6vh, 64px); font-size: clamp(52px, 13vw, 192px); font-weight: 800; letter-spacing: -0.048em; line-height: 0.94; background: linear-gradient(180deg, #ffffff 0%, #d4d4d4 50%, #8b5cf6 128%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; text-shadow: none; position: relative; z-index: 1; } /* Subtle accent line under the name — drawn after the wipe */ #chapter-cold-open .opener-name::after { content: ""; position: absolute; left: 50%; bottom: -0.18em; width: 0; height: 2px; background: linear-gradient( 90deg, transparent, rgba(196, 181, 253, 0.85), rgba(147, 197, 253, 0.85), transparent ); transform: translateX(-50%); transition: width 1.6s var(--ease-out-expo) 0.2s; pointer-events: none; } #chapter-cold-open .opener-name.is-revealed::after { width: 64%; } /* 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 (left) and motion-toggle (right) */ 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 below the fixed motion toggle (top: 22px, ~38px tall) */ 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); } /* ── Photo corner brackets — overlay corners of the photo region ── */ .id2-frame-corners { position: absolute; right: calc(7vw - 16px); top: 50%; width: calc(clamp(200px, 30vw, 400px) + 32px); aspect-ratio: 4 / 5; pointer-events: none; z-index: 5; margin-top: -16px; opacity: 0; /* JS fades in */ will-change: transform; } .id2-frame-corner { position: absolute; width: 22px; height: 22px; border-color: rgba(196, 181, 253, 0.78); border-style: solid; border-width: 0; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4)); } .id2-frame-corner.tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; } .id2-frame-corner.tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; } .id2-frame-corner.bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; } .id2-frame-corner.br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; } /* ── 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: 7vw; top: 50%; z-index: 4; will-change: transform, filter, opacity; pointer-events: none; } .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; } /* ── Photo frame ──────────────────────────────────────────────────── */ /* Starts right: 7vw. GSAP translates it to the left side in Act 2. clip-path is animated by JS for the bottom-to-top wipe entrance. */ .id2-photo-wrap { position: absolute; right: 7vw; top: 50%; width: clamp(200px, 30vw, 400px); aspect-ratio: 4 / 5; z-index: 5; will-change: transform, clip-path; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } /* Dashed border — sibling of photo-wrap, not inside it (avoids clip-path clipping). GSAP will sync its x-translation with the photo-wrap during Act 2 shift. */ .id2-frame-dashed { position: absolute; right: calc(7vw - 12px); top: 50%; width: calc(clamp(200px, 30vw, 400px) + 24px); aspect-ratio: 4 / 5; border: 1.5px dashed rgba(255, 255, 255, 0.42); border-radius: 30px; pointer-events: none; z-index: 4; /* offset by -12px top to align with inset:-12px from photo edge */ margin-top: -12px; } .id2-frame-dashed::after { content: ""; position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .id2-photo { position: absolute; inset: 0; border-radius: 22px; background-size: cover; background-position: center 18%; filter: contrast(1.06) saturate(1.08); overflow: hidden; } /* Purple glow + bottom darkening overlay */ .id2-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 120% 60% at 50% 108%, rgba(139, 92, 246, 0.36), transparent 58% ), linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.28) 100%); border-radius: 22px; pointer-events: none; } .id2-photo-tag { position: absolute; left: 16px; bottom: 16px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(5, 5, 5, 0.56); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: none; white-space: nowrap; } .id2-photo-tag .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; animation: live-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* ── Info block (Act 3) ───────────────────────────────────────────── */ /* Positioned to the right of where the photo lands after its move. JS updates left offset on resize if needed. */ .id2-info-wrap { position: absolute; /* starts just after the shifted photo: 7vw left-pad + photo width + 4vw gap */ left: calc(7vw + clamp(200px, 30vw, 400px) + 4vw); top: 50%; transform: translateY(-50%); max-width: calc(100vw - (7vw + clamp(200px, 30vw, 400px) + 4vw) - 5vw); z-index: 6; 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: absolute; bottom: clamp(22px, 5.5vh, 56px); left: 7vw; right: 7vw; 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: 5vw; right: 5vw; } .id2-title { font-size: clamp(40px, 10vw, 70px); } .id2-photo-wrap { right: 4vw; width: clamp(130px, 38vw, 220px); } .id2-frame-corners { right: calc(4vw - 12px); width: calc(clamp(130px, 38vw, 220px) + 24px); margin-top: -12px; } .id2-frame-corner { width: 16px; height: 16px; } .id2-info-wrap { left: 5vw; right: 5vw; max-width: none; bottom: 22vh; top: auto; transform: none; z-index: 6; } .id2-socials { bottom: 4vh; left: 5vw; right: 5vw; gap: 8px; } .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(220px, 20vw, 300px); --roles-card-h: clamp(320px, 50vh, 460px); --roles-card-gap: 0px; /* gap between small-strip slides */ --roles-frame-w: clamp(270px, 28vw, 420px); --roles-frame-h: clamp(400px, 64vh, 580px); } .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: 76vw; --roles-card-h: clamp(360px, 62vh, 520px); --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, fanning collage) ═══════════════════════════════════════════════════════════════════ */ .chapter-canvas { height: 320vh; } .canvas-pin { position: relative; height: 100vh; display: flex; align-items: center; padding: 0 8vw; overflow: hidden; } .canvas-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 6vw; width: 100%; align-items: center; } @media (max-width: 900px) { .chapter-canvas { height: 360vh; } .canvas-pin { padding: 0 6vw; } .canvas-grid { grid-template-columns: 1fr; gap: 6vh; } } .canvas-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; } .canvas-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; } .canvas-eyebrow .dot-rose { background: #ec4899; box-shadow: 0 0 12px #ec4899; } .canvas-title { font-size: clamp(38px, 5.6vw, 78px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 28px; } .canvas-title .line { display: block; overflow: hidden; } .canvas-title .line > span { display: inline-block; transform: translateY(110%); } .canvas-title em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; background: linear-gradient(135deg, #fbcfe8, #fda4af); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .canvas-lede { max-width: 480px; font-size: 15px; line-height: 1.7; color: var(--c-ink-soft); margin: 0 0 36px; } .canvas-tools { display: flex; flex-direction: column; gap: 16px; max-width: 460px; } .tool-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 6px 14px; } .tool-name { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--c-ink); } .tool-meta { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-dim); } .tool-bar { grid-column: 1 / -1; height: 3px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; } .tool-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f5f3ee, #ec4899); border-radius: 2px; } /* Stage / collage */ .canvas-stage { position: relative; height: 70vh; min-height: 480px; display: flex; align-items: center; justify-content: center; } .canvas-stage-glow { position: absolute; width: 75%; aspect-ratio: 1; background: radial-gradient( circle, rgba(236, 72, 153, 0.35), transparent 65% ); filter: blur(70px); pointer-events: none; animation: phone-glow 9s ease-in-out infinite alternate; } .canvas-piece { position: absolute; width: clamp(220px, 22vw, 320px); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); transform-origin: 50% 100%; } .piece-art { position: absolute; inset: 0; background: linear-gradient(160deg, var(--p-from), var(--p-to)); display: flex; align-items: center; justify-content: center; overflow: hidden; } .piece-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 120% 80% at 50% 0%, color-mix(in srgb, var(--p-tint) 32%, transparent), transparent 70% ); pointer-events: none; } .piece-emoji { font-size: clamp(54px, 6vw, 88px); line-height: 1; filter: drop-shadow( 0 10px 22px color-mix(in srgb, var(--p-tint) 50%, transparent) ); z-index: 2; } .piece-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; mix-blend-mode: overlay; opacity: 0.5; } .piece-mask { position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62% ); transform: translateX(-110%); } .canvas-piece.is-revealed .piece-mask { animation: piece-sweep 1.2s ease-out forwards; } @keyframes piece-sweep { to { transform: translateX(110%); } } .piece-tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft); background: rgba(10, 10, 10, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; backdrop-filter: blur(12px); z-index: 3; } .piece-num { font-family: "Instrument Serif", serif; font-style: italic; font-size: 12px; color: var(--c-ink); } /* Initial stacked positions (overridden by GSAP onScroll) */ .canvas-piece[data-i="0"] { transform: translate(-12px, 16px) rotate(-6deg); z-index: 1; } .canvas-piece[data-i="1"] { transform: translate(-4px, 8px) rotate(-2deg); z-index: 2; } .canvas-piece[data-i="2"] { transform: translate(0, 0) rotate(0deg); z-index: 3; } .canvas-piece[data-i="3"] { transform: translate(4px, 8px) rotate(3deg); z-index: 2; } .canvas-piece[data-i="4"] { transform: translate(12px, 16px) rotate(7deg); z-index: 1; } .canvas-chip { position: absolute; right: -2%; top: 4%; 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: 5; } .canvas-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #ec4899; box-shadow: 0 0 8px #ec4899; } @media (max-width: 900px) { .canvas-chip { right: 4%; top: -6%; } .canvas-stage { height: 60vh; } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 05 — THE GAME (pinned, deck → fan) ═══════════════════════════════════════════════════════════════════ */ .chapter-game { height: 420vh; } .game-pin { position: relative; height: 100vh; padding: 6vh 8vw 4vh; overflow: hidden; display: flex; flex-direction: column; } .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: 360vh; } .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 */ .bean-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 520px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .bean-stat { display: flex; flex-direction: column; gap: 4px; } .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: 70%; 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(220px, 22vw, 300px); 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; } .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 */ .bean-cup-rim { width: 100%; height: 14px; border-radius: 50%; background: linear-gradient(180deg, #f5f3ee, #b3aea3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -8px 14px rgba(0, 0, 0, 0.4) inset; z-index: 3; } .bean-cup-body { position: relative; width: 88%; aspect-ratio: 1.15 / 1; margin-top: -8px; background: linear-gradient(180deg, #f5f3ee 0%, #d4d4d4 60%, #a3a3a3 100%); border-radius: 0 0 50% 50% / 0 0 60% 60%; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -20px 40px rgba(0, 0, 0, 0.18) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.5); } .bean-cup-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: radial-gradient(ellipse at 50% 0%, #5a2d0e 0%, #2a1206 90%); transition: none; } .bean-cup-foam { position: absolute; top: 0; left: 0; right: 0; height: 36px; background: linear-gradient(180deg, #e8cfa8 0%, #c9996a 55%, #a07a4a 100%); display: flex; align-items: center; justify-content: center; border-radius: 2px 2px 0 0; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 0 rgba(0, 0, 0, 0.15) inset; } .foam-art { font-size: 10px; color: rgba(245, 243, 238, 0.65); letter-spacing: 0.05em; transform: translateY(-2px); } .bean-cup-handle { position: absolute; right: -10%; top: 32%; width: 22%; aspect-ratio: 1; border: 8px solid #f5f3ee; border-left-color: transparent; border-radius: 50%; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } .bean-cup-saucer { width: 130%; height: 22px; margin-top: 4px; border-radius: 50%; background: linear-gradient(180deg, #d4d4d4, #888 60%, #2a2a2a); box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.6); } /* 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 (pinned, orbiting org constellation) ═══════════════════════════════════════════════════════════════════ */ .chapter-community { height: 360vh; } .community-pin { position: relative; height: 100vh; padding: 6vh 8vw 4vh; overflow: hidden; display: flex; flex-direction: column; } .community-bg { position: absolute; inset: -10%; pointer-events: none; z-index: 0; } .community-bg-glow { position: absolute; inset: 0; background: radial-gradient( 50% 40% at 50% 50%, rgba(16, 185, 129, 0.18), transparent 70% ), radial-gradient( 40% 30% at 30% 70%, rgba(59, 130, 246, 0.15), transparent 70% ); filter: blur(60px); } .community-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient( ellipse 60% 60% at 50% 50%, #000 0%, transparent 80% ); -webkit-mask-image: radial-gradient( ellipse 60% 60% at 50% 50%, #000 0%, transparent 80% ); } .community-globe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.7; mask-image: radial-gradient( ellipse 60% 60% at 50% 50%, #000 30%, transparent 80% ); -webkit-mask-image: radial-gradient( ellipse 60% 60% at 50% 50%, #000 30%, transparent 80% ); } .community-header { position: relative; z-index: 2; max-width: 720px; margin-bottom: 1vh; } .community-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: 14px; } .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(34px, 5vw, 70px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 0 12px; } .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 { max-width: 540px; font-size: 14px; line-height: 1.65; color: var(--c-ink-soft); margin: 0; } /* Stage */ .community-stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; } .community-core { position: relative; z-index: 3; width: clamp(180px, 18vw, 240px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .community-core-ring { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; } .community-core-ring.r1 { inset: -8%; animation: ring-spin 70s linear infinite; } .community-core-ring.r2 { inset: -22%; border-style: dashed; animation: ring-spin 110s linear infinite reverse; } .community-core-ring.r3 { inset: -40%; opacity: 0.6; } .community-core-inner { position: relative; width: 86%; height: 86%; border-radius: 50% !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; } .community-core-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 6px; } .community-core-name { font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); background: linear-gradient(135deg, #6ee7b7, #93c5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; } .community-core-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); } /* Orbit container — sits absolute over the core */ .community-orbit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .community-node { position: absolute; width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px); display: flex; align-items: center; justify-content: center; transform-origin: center; } .community-node-disc { 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); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 30px -8px rgba(0, 0, 0, 0.5), 0 0 30px -8px color-mix(in srgb, var(--o-tint) 50%, transparent); position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease; } .community-node.is-spotlight .community-node-disc { transform: scale(1.18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 18px 40px -8px rgba(0, 0, 0, 0.6), 0 0 60px -4px color-mix(in srgb, var(--o-tint) 80%, transparent); } .community-node-emoji { font-size: clamp(26px, 2.8vw, 34px); line-height: 1; filter: drop-shadow( 0 4px 10px color-mix(in srgb, var(--o-tint) 60%, transparent) ); } .community-node-num { position: absolute; top: 4px; left: 8px; font-family: "Instrument Serif", serif; font-style: italic; font-size: 11px; color: var(--c-ink-dim); letter-spacing: 0.04em; } /* Spotlight panel */ .community-spotlight { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(260px, 26vw, 360px); padding: 22px 22px 24px; z-index: 4; overflow: hidden; } .spot-tint { position: absolute; inset: -1px; background: radial-gradient( 120% 80% at 0% 0%, var(--spot-tint, #10b981), transparent 60% ); opacity: 0.18; pointer-events: none; transition: background 0.6s ease; } .spot-eyebrow { position: relative; z-index: 2; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 10px; } .spot-eyebrow #spot-num { font-family: "Instrument Serif", serif; font-style: italic; color: var(--c-ink); margin-right: 6px; } .spot-name { position: relative; z-index: 2; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; } .spot-year { position: relative; z-index: 2; font-family: "Instrument Serif", serif; font-style: italic; font-size: 14px; color: var(--c-ink-dim); margin-bottom: 14px; } .spot-blurb { position: relative; z-index: 2; font-size: 13.5px; line-height: 1.6; color: var(--c-ink-soft); margin: 0; } @media (max-width: 900px) { .community-spotlight { position: relative; inset: auto; transform: none; width: 100%; max-width: 100%; margin-top: 16px; } .community-stage { flex-direction: column; gap: 18px; } } /* Stats */ .community-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .community-stat { display: flex; flex-direction: column; gap: 4px; } .community-stat-num { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(135deg, #6ee7b7, #93c5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .community-stat-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ink-dim); } @media (max-width: 720px) { .community-stats { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════════════════════════════ CHAPTER 09 — THE ARSENAL (pinned, orbital skill chips) ═══════════════════════════════════════════════════════════════════ */ .chapter-arsenal { height: 320vh; } .arsenal-pin { position: relative; height: 100vh; padding: 5vh 8vw 4vh; overflow: hidden; display: flex; flex-direction: column; } .arsenal-bg { position: absolute; inset: -10%; pointer-events: none; z-index: 0; } .arsenal-glow { position: absolute; border-radius: 50%; filter: blur(70px); } .arsenal-glow.g1 { width: 50%; aspect-ratio: 1; left: 10%; top: 20%; background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 65%); } .arsenal-glow.g2 { width: 45%; aspect-ratio: 1; right: 5%; bottom: 5%; background: radial-gradient( circle, rgba(236, 72, 153, 0.25), transparent 65% ); } .arsenal-header { position: relative; z-index: 2; max-width: 640px; margin-bottom: 1vh; } .arsenal-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: 14px; } .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(32px, 4.8vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; 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; } /* Stage */ .arsenal-stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; } .arsenal-core { position: relative; width: clamp(180px, 18vw, 240px); aspect-ratio: 1; border-radius: 50% !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; z-index: 3; } .arsenal-core-eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: 4px; } .arsenal-core-name { font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); background: linear-gradient(135deg, #c4b5fd, #fbcfe8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; } .arsenal-core-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); } .arsenal-core-pulse { width: 6px; height: 6px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 10px #c4b5fd; animation: live-pulse 1.6s ease-in-out infinite; } /* Orbital rings (decorative) */ .arsenal-ring { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; z-index: 1; } .arsenal-ring-inner { width: clamp(360px, 40vw, 540px); aspect-ratio: 1; animation: ring-spin 90s linear infinite; } .arsenal-ring-outer { width: clamp(580px, 64vw, 860px); aspect-ratio: 1; animation: ring-spin 140s linear infinite reverse; opacity: 0.6; } /* Skill chips */ .arsenal-chip { position: absolute; width: clamp(120px, 13vw, 160px); z-index: 2; transform-origin: center; pointer-events: auto; } .arsenal-chip-disc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px !important; cursor: default; transition: transform 0.7s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo); } .arsenal-chip-disc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 120% 80% at 50% 0%, color-mix(in srgb, var(--s-tint) 30%, transparent), transparent 70% ); opacity: 0.6; pointer-events: none; } .arsenal-chip-disc:hover { transform: translateY(-6px) scale(1.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 18px 38px -10px rgba(0, 0, 0, 0.6), 0 0 70px -6px color-mix(in srgb, var(--s-tint) 80%, transparent); } .arsenal-chip-cat { position: relative; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-dim); } .arsenal-chip-name { position: relative; font-size: 14px; font-weight: 700; letter-spacing: -0.015em; color: var(--c-ink); } .arsenal-chip-level { position: relative; font-family: "Instrument Serif", serif; font-style: italic; font-size: 12px; color: var(--c-ink-soft); } .arsenal-chip-bar { position: relative; height: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 1px; overflow: hidden; margin-top: 4px; opacity: 0; transform: translateY(2px); transition: opacity 0.3s ease, transform 0.3s ease; } .arsenal-chip-disc:hover .arsenal-chip-bar { opacity: 1; transform: translateY(0); } .arsenal-chip-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--s-tint), #f5f3ee); border-radius: 1px; } /* Legend */ .arsenal-legend { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); } .legend-item { display: inline-flex; align-items: center; gap: 8px; } .lg-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; } @media (max-width: 720px) { .chapter-arsenal { height: 280vh; } .arsenal-chip { width: 110px; } .arsenal-chip-disc { padding: 10px 12px; } .arsenal-chip-name { font-size: 13px; } } /* 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; } } /* ── Reduced motion support ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .aurora-blob, #cursor-light, .grain-overlay { animation: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ═══════════════════════════════════════════════════════════════════ 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-frame-inner .photo, .identity-frame-inner .photo-fallback, .identity-frame-inner .frame-glass, .identity-frame-inner .frame-tag, .identity-frame-inner .orbit { /* re-use existing rules on inner */ } .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: editorial gallery (oryzo-style) ────────────────── */ #chapter-canvas { /* Chapter 04 is no longer pinned — it's a tall, scrollable gallery. */ height: auto; min-height: 100vh; padding: 18vh 6vw 16vh; display: block; overflow: visible; } .canvas-header { max-width: 1280px; margin: 0 auto 8vh; } .canvas-header-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8vw; align-items: end; } .canvas-header-left { min-width: 0; } .canvas-header-right { min-width: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; } .canvas-header .canvas-title { margin: 18px 0 0; } .canvas-header .canvas-lede { margin: 0; max-width: 460px; } .canvas-count-row { display: flex; align-items: baseline; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); width: 100%; } .canvas-count-label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-ink-dim); } .canvas-count-num { margin-left: auto; font-family: "Instrument Serif", serif; font-size: 36px; line-height: 1; background: linear-gradient(135deg, #fbcfe8, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; } .canvas-gallery { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 2.4vw, 36px) clamp(18px, 2vw, 28px); } .gallery-tile { position: relative; display: flex; flex-direction: column; gap: 14px; /* Subtle scroll-driven y-shift set by JS via --t-shift */ transform: translate3d(0, var(--t-shift, 0px), 0); will-change: transform; } /* Editorial size variants — span across a 12-column grid */ .gallery-tile.size-small { grid-column: span 4; } .gallery-tile.size-wide { grid-column: span 8; } .gallery-tile.size-tall { grid-column: span 4; } .gallery-tile.size-large { grid-column: span 8; } .gallery-tile-frame { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: linear-gradient( 160deg, color-mix(in srgb, var(--p-tint, #8b5cf6) 22%, #0a0a0a), #060608 ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 28px 60px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04); transition: transform 0.9s var(--ease-out-expo), box-shadow 0.9s var(--ease-out-expo), filter 0.9s var(--ease-out-expo); } .gallery-tile.size-small .gallery-tile-frame { aspect-ratio: 4 / 5; } .gallery-tile.size-wide .gallery-tile-frame { aspect-ratio: 16 / 9; } .gallery-tile.size-tall .gallery-tile-frame { aspect-ratio: 3 / 4; } .gallery-tile.size-large .gallery-tile-frame { aspect-ratio: 16 / 10; } .gallery-tile:hover .gallery-tile-frame { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 36px 80px -25px rgba(0, 0, 0, 0.7), 0 0 60px -15px color-mix(in srgb, var(--p-tint, #8b5cf6) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.1); filter: brightness(1.04); } .gallery-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out-expo); } .gallery-tile:hover .gallery-tile-img { transform: scale(1.04); } .gallery-tile-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient( ellipse at 50% 30%, color-mix(in srgb, var(--p-tint, #8b5cf6) 35%, transparent), transparent 65% ); } .gallery-tile-emoji { font-size: clamp(56px, 6vw, 96px); line-height: 1; filter: drop-shadow( 0 12px 28px color-mix(in srgb, var(--p-tint, #8b5cf6) 60%, transparent) ); transition: transform 1.2s var(--ease-out-expo); } .gallery-tile:hover .gallery-tile-emoji { transform: scale(1.08); } .gallery-tile-glow { position: absolute; inset: 30% 20%; background: radial-gradient( circle, color-mix(in srgb, var(--p-tint, #8b5cf6) 28%, transparent), transparent 70% ); filter: blur(40px); pointer-events: none; } .gallery-tile-index { position: absolute; top: 14px; left: 16px; font-family: "Instrument Serif", serif; font-size: 14px; letter-spacing: 0.06em; color: rgba(245, 243, 238, 0.7); background: rgba(10, 10, 10, 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); } /* Always-visible editorial caption */ .gallery-tile-caption { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; } .gallery-tile-kind { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-dim); } .gallery-tile-title { margin: 0; font-size: clamp(14px, 1.05vw, 18px); font-weight: 500; letter-spacing: -0.01em; color: var(--c-ink); line-height: 1.3; transition: color 0.4s var(--ease-out-expo); } .gallery-tile:hover .gallery-tile-title { color: color-mix(in srgb, var(--p-tint, #c4b5fd) 80%, var(--c-ink)); } @media (max-width: 1100px) { .canvas-header-row { grid-template-columns: 1fr; gap: 4vh; align-items: start; } .canvas-gallery { grid-template-columns: repeat(8, 1fr); } .gallery-tile.size-small { grid-column: span 4; } .gallery-tile.size-wide { grid-column: span 8; } .gallery-tile.size-tall { grid-column: span 4; } .gallery-tile.size-large { grid-column: span 8; } } @media (max-width: 640px) { #chapter-canvas { padding: 14vh 5vw 12vh; } .canvas-gallery { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } .gallery-tile.size-small, .gallery-tile.size-tall { grid-column: span 1; } .gallery-tile.size-wide, .gallery-tile.size-large { grid-column: span 2; } .gallery-tile.size-small .gallery-tile-frame, .gallery-tile.size-tall .gallery-tile-frame { aspect-ratio: 4 / 5; } .canvas-count-num { font-size: 28px; } } /* ── Chapter 08: CSS-driven org orbit ──────────────────────────── */ #community-orbit { position: absolute; inset: 0; pointer-events: none; --orbit-angle: 0deg; --orbit-radius: 32%; display: block; } #community-orbit .community-node { position: absolute; left: 50%; top: 50%; margin: calc(clamp(64px, 7vw, 92px) / -2) 0 0 calc(clamp(64px, 7vw, 92px) / -2); pointer-events: auto; /* Each node sits at angle = base angle + (i / n) * 360° */ transform: rotate( calc(var(--orbit-angle) + (360deg / var(--o-n)) * var(--o-i)) ) translateX(var(--orbit-radius)) rotate(calc((var(--orbit-angle) + (360deg / var(--o-n)) * var(--o-i)) * -1)); transition: transform 0.4s ease-out; will-change: transform; } .community-node-logo { width: 60%; height: 60%; object-fit: contain; } @media (max-width: 720px) { #community-orbit { --orbit-radius: 38%; } } /* ── Chapter 09: CSS-driven skill orbit (two rings) ─────────────── */ .arsenal-orbit { position: absolute; inset: 0; pointer-events: none; --orbit-angle: 0deg; } .arsenal-orbit-inner { --orbit-radius: clamp(185px, 20vw, 275px); } .arsenal-orbit-outer { --orbit-radius: clamp(300px, 33vw, 440px); } .arsenal-orbit .arsenal-chip { position: absolute; left: 50%; top: 50%; width: clamp(120px, 13vw, 160px); margin: -36px 0 0 calc(clamp(120px, 13vw, 160px) / -2); pointer-events: auto; /* Sit on the ring at angle = base + (i/n) * 360° */ transform: rotate( calc(var(--orbit-angle) + (360deg / var(--o-n)) * var(--o-i)) ) translateX(var(--orbit-radius)) rotate(calc((var(--orbit-angle) + (360deg / var(--o-n)) * var(--o-i)) * -1)); transition: transform 0.4s ease-out; will-change: transform; } @media (max-width: 720px) { .arsenal-orbit-inner { --orbit-radius: clamp(150px, 28vw, 210px); } .arsenal-orbit-outer { --orbit-radius: clamp(245px, 46vw, 330px); } } /* ── Reduced-motion fallbacks for the new orbits ──────────────── */ @media (prefers-reduced-motion: reduce) { .identity-socials, #community-orbit, .arsenal-orbit { /* Stop the smooth transition; let JS just set the angle. */ } .identity-social, #community-orbit .community-node, .arsenal-orbit .arsenal-chip { transition: none !important; } .code-deck-card { /* Static deck under reduced motion — show all cards stacked statically */ transition: none !important; } /* Drop the pulsing REC dot under reduced motion */ .co-rec-dot { animation: none !important; } }