/* ============================================================ motion.css — LGR Web Studio site motion + layout system. Built from the template-factory starter, tuned for restraint (lighter reveals) and dual light/dark theming. Page-specific styles (form, work list, footer, pixel toggle) stay inline in index.html. This file owns ALL design tokens. ============================================================ */ /* ---------- SELF-HOSTED FONTS (woff2, latin subset) ---------- Replaces the render-blocking third-party Google Fonts request. The two above-the-fold faces are preloaded in . font-display:swap shows the fallback immediately, then swaps in — no invisible text. Variable woff2: one file each covers the Cormorant 400–500 and Inter 300–500 ranges. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/cormorant-garamond.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/cormorant-garamond-italic.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); } :root { /* Brand */ --ink: #2A2218; --gold: #B89968; /* decorative fills only (bars, button bg) */ --gold-text: #7E6234; /* darker gold for TEXT/UI state — passes WCAG AA on limestone */ --serif: 'Cormorant Garamond', serif; --sans: 'Inter', -apple-system, sans-serif; /* Semantic (theme-aware) */ --bg: #EDE7D9; --surface: #ffffff; --text: #2A2218; --muted: #5A4F3E; --line: #E5DDD0; --field-border: #8E8472; /* form-control boundary — passes WCAG 1.4.11 (3:1) */ /* Back-compat aliases (older inline rules / pixel overlays) */ --limestone: #EDE7D9; --slate: #5A4F3E; --maxw: 920px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="dark"] { --bg: #211B12; --surface: #2C2417; --text: #EDE7D9; --muted: #B7A98E; --line: #3A3022; --field-border: #6E6452; /* form-control boundary on dark surface (3:1) */ --limestone: #EDE7D9; /* stays light: used where we want light-on-dark */ --slate: #B7A98E; --gold-text: #B89968; /* gold already passes AA on dark ink */ } /* Offset native anchor jumps + scroll-into-view below the sticky nav. (Lenis ignores this and uses the JS offset instead; this covers the reduced-motion / no-Lenis path.) */ html { scroll-padding-top: 64px; } /* ---------- LENIS recommended stylesheet ---------- The official CSS (darkroomengineering/lenis). Lenis adds .lenis / .lenis-smooth / .lenis-stopped / .lenis-scrolling / .lenis-locked to at runtime; these rules make it behave correctly (proper height, scroll-lock clipping, nested scroll containment via [data-lenis-prevent], iframe pointer safety). */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* guard vs native smooth */ .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------- Selected Work — compact index (2026-07-17 redesign) ---------- Rows, not tall cards: every project leads with the outcome instead of a Problem/Approach/Result breakdown. Ratified direction, see ~/lgr-business/mockups/showcase-explore-v1.html — structure matched, rendered in the site's own serif + spaced-caps tokens (not the mockup's Georgia approximation). */ .index-title { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; text-align: center; } .index-title em { font-style: italic; color: var(--gold-text); } .index-dek { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.8vw, 17px); color: var(--muted); text-align: center; max-width: 46ch; margin: 10px auto 0; } .index { border-top: 1px solid var(--line); margin-top: 30px; } .row { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: background-color 0.25s var(--ease); } .row:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); } .row-media { flex: none; display: block; width: 76px; height: 50px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--gold) 8%, var(--bg)); } .row-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .row-body { flex: 1; min-width: 0; } .row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .row-name { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 2.6vw, 24px); color: var(--text); text-decoration: none; } a.row-name:hover, a.row-name:focus-visible { color: var(--gold-text); outline: none; } .row-name em { font-style: italic; color: var(--gold-text); font-weight: 400; } .row-yr { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; margin-left: auto; } .row-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 6px; font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .row-outcome { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--text); margin-top: 8px; } .row-outcome b { font-style: normal; font-weight: 500; color: var(--gold-text); } /* Testimonial slot — fill with quote text (+ optional ) to publish it; :empty keeps it invisible (and out of the a11y tree) until then, so no markup elsewhere has to change when the quote lands. */ .case-quote { margin: 12px 0 0; padding-left: 14px; border-left: 2px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--text); } .case-quote:empty { display: none; } .case-quote cite { display: block; margin-top: 6px; font-family: var(--sans); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } @media (max-width: 560px) { .row-media { width: 56px; height: 40px; } } /* ---------- Services x proof (2026-07-17 addition) ---------- A deliberate dark band between the light Work index and the light booking band — the light/dark/light editorial rhythm the mockup uses. Locally overrides the same semantic custom properties the site's own [data-theme="dark"] block defines, so every token-driven rule below (section-label, index-title, .card, etc.) just works — no new theme system, no hardcoded colors sprinkled through child rules. */ #services { --bg: #211B12; --surface: #2C2417; --text: #EDE7D9; --muted: #B7A98E; --line: #3A3022; --gold-text: #B89968; background: var(--bg); color: var(--text); transition: background-color 0.5s var(--ease), color 0.5s var(--ease); } .offer-cards { margin-top: 30px; align-items: stretch; } .offer-card { display: flex; flex-direction: column; gap: 10px; } .card-for { font-family: var(--sans); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-text); } .offer-card h3 { margin-bottom: 0; } .offer-card ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; } .offer-card ul li { padding-left: 16px; position: relative; } .offer-card ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold-text); } .card-proof { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); } .card-cta { display: block; text-align: center; margin-top: 4px; background: var(--gold); color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 13px; border-radius: 4px; border: 1px solid var(--gold); transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .card-cta:hover, .card-cta:focus-visible { background: color-mix(in srgb, var(--gold) 80%, white); outline: none; } .card-cta-ghost { background: transparent; color: var(--gold-text); } .card-cta-ghost:hover, .card-cta-ghost:focus-visible { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold-text); } /* ---------- The door (closing band, 2026-07-17) ---------- */ .c-inner { display: grid; gap: 40px; align-items: start; } @media (min-width: 800px) { .c-inner { grid-template-columns: 1.2fr 1fr; align-items: center; } } /* Section A/B's index-title + index-dek are centered by default; this band sits copy-beside-form, so left-align just within it. */ .c-copy .index-title, .c-copy .index-dek { text-align: left; margin-left: 0; max-width: none; } .ways { display: grid; gap: 12px; margin-top: 24px; } .way { display: flex; align-items: baseline; gap: 14px; font-family: var(--sans); font-size: 14px; color: var(--text); } .way-k { flex: none; width: 84px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .way a { color: var(--gold-text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); } .way a:hover, .way a:focus-visible { border-color: var(--gold-text); outline: none; } .form-note { text-align: center; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); margin-top: 12px; } /* ---------- The human (2026-07-17 addition) ---------- Small and warm, not a resume — sized to content like #start, not a full viewport screen. (min-height:auto lives with .section's own rule below — this file's .section base rule loads AFTER this block, so an override here would silently lose the cascade; see that comment.) */ .human-inner { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } .human-photo { flex: none; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--gold) 8%, var(--bg)); font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--gold-text); } .human-copy { flex: 1; min-width: 260px; max-width: 56ch; } .human-copy .section-label, .human-copy .index-title { text-align: left; margin-left: 0; } .human-copy .section-label::after { margin: 12px 0 0; } .human-bio { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--text); } .human-link { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--gold-text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); } .human-link:hover, .human-link:focus-visible { border-color: var(--gold-text); outline: none; } @media (max-width: 560px) { .human-inner { flex-direction: column; text-align: center; } .human-copy .section-label, .human-copy .index-title { text-align: center; } .human-copy .section-label::after { margin: 12px auto 0; } } /* The prove-it slider's own pane/handle styles live in fx/prove-it.css (site-local clip-path version, 2026-07-17 v2 — replaced the engine-based .reveal-mount.prove-mount cut; see fx/prove-it.js for why). This caption row is still shared markup. */ .ba-caption { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* ---------- Living marquee + magnetic finale (2026-07-17, v2 "money" piece F) ---------- Full-bleed strip, not a .section/.band — matches the mockup's own DOM (a plain div sibling before the finale section, not a scroll-snap stop). */ .marquee { overflow: hidden; background: var(--gold); padding: 13px 0; } .marquee-track { display: inline-flex; white-space: nowrap; animation: marquee-slide 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); } @keyframes marquee-slide { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } .finale { --bg: #171310; --surface: #201a15; --text: #f4edda; --muted: #b5ab97; --line: #332b1f; --gold-text: #B89968; background: var(--bg); color: var(--text); text-align: center; padding-top: clamp(64px, 10vw, 110px); padding-bottom: clamp(64px, 10vw, 110px); } /* min-height:auto lives with .section's own rule below, not here — see that comment for why. */ .finale .index-title { text-align: center; font-size: clamp(2.2rem, 7vw, 4.5rem); } .finale .index-dek { color: var(--muted); margin: 18px auto 0; max-width: 40ch; } .mag { display: inline-block; margin-top: 34px; background: var(--gold); color: #1b1508; text-decoration: none; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 19px 42px; border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .mag:hover, .mag:focus-visible { box-shadow: 0 12px 40px rgba(176, 138, 79, .45); outline: none; } .finale-note { display: block; margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .mag { transition: none; } } /* ---------- NAV (glass, sticky) ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; transition: padding 0.3s var(--ease), background-color 0.3s var(--ease); } /* Condense once you leave the hero: tighter bar + firmer glass. */ .nav.glass.is-condensed { padding-top: 9px; padding-bottom: 9px; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 1px 0 var(--line); } .nav-mark { font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; color: var(--text); } .nav-links { display: flex; gap: 24px; margin-left: auto; margin-right: 6px; } .nav-links a { position: relative; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--gold-text); } /* gold underline slides in under the section you're currently viewing */ .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-links a[aria-current="true"] { color: var(--gold-text); } .nav-links a[aria-current="true"]::after { transform: scaleX(1); } .nav-links a:focus-visible, .nav-mark:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; border-radius: 2px; } .glass { background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--bg); } } @media (max-width: 560px) { .nav-links { display: none; } /* with the links gone, keep the controls grouped at the right edge */ .nav-pixel { margin-left: auto; } } /* ---------- THEME TOGGLE ---------- */ .theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { border-color: var(--gold-text); color: var(--gold-text); } .theme-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } .theme-toggle-icon { position: relative; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; /* sun disc (ring) */ transition: box-shadow 0.35s var(--ease); } /* Sun rays (light mode): spokes drawn with a conic gradient, masked to an outer ring so only the ray tips show around the disc. */ .theme-toggle-icon::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: repeating-conic-gradient(currentColor 0deg 5deg, transparent 5deg 45deg); -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 66%); mask: radial-gradient(closest-side, transparent 64%, #000 66%); opacity: 1; transition: opacity 0.3s var(--ease); } /* Dark mode: crescent moon, no rays. */ [data-theme="dark"] .theme-toggle-icon { box-shadow: inset -4px -4px 0 0 currentColor; } [data-theme="dark"] .theme-toggle-icon::before { opacity: 0; } @media (prefers-reduced-motion: reduce) { .theme-toggle-icon::before { transition: none; } } /* Mobile width: keep the serif wordmark on one line (a slow font-swap could wrap it). */ @media (max-width: 560px) { .nav-mark { font-size: 16px; white-space: nowrap; } } /* Touch devices: enlarge the round theme-toggle hit area to >=44px (icon unchanged). */ @media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } } /* ---------- SECTION SHELL ---------- */ /* Full-height sections so each "presents fully" when the proximity-snap settles on it. svh (small viewport height) avoids the mobile address-bar jump; the vh line is a fallback for old engines. Minus the ~64px sticky nav. These are min-heights, never fixed — a taller-than-screen section (e.g. a long form) grows and scrolls instead of clipping. */ .section { padding: 72px 24px; min-height: 100vh; min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; align-items: center; } .band { max-width: var(--maxw); margin: 0 auto; width: 100%; } /* Contact is the last screen: size it to its content so the footer sits with it (reachable + fully visible at the bottom snap) instead of being pushed a whole screen below. */ #start { min-height: auto; } /* Recent-work reel: a quick hero-adjacent glance, not another full screen. */ #recent-work { min-height: auto; padding-top: 48px; padding-bottom: 48px; } /* The human + the finale: both "small and warm" by design, not full-viewport screens. Belongs here, not next to their own rule blocks above — .section's min-height:100vh is declared in THIS file after those blocks, so an auto-height override placed earlier silently loses the cascade (equal specificity, source order decides). Confirmed the hard way: both sections were rendering at min-height:100vh with their content flex-centered inside it — not blatantly broken-looking, just quietly not what was asked for. */ #human, .finale { min-height: auto; } .section-label { font-family: var(--sans); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.32em; color: var(--gold-text); text-align: center; margin-bottom: 28px; } /* ---------- HERO ---------- */ .hero { min-height: 100vh; min-height: 100svh; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; } .hero-eyebrow { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.32em; color: var(--gold-text); margin-bottom: 22px; } .hero-title { font-family: var(--serif); font-weight: 500; line-height: 1.12; font-size: clamp(38px, 7vw, 64px); margin-bottom: 22px; } .hero-title em { color: var(--gold-text); font-style: italic; } .hero-sub { font-family: var(--serif); font-size: clamp(17px, 2.6vw, 22px); color: var(--muted); max-width: 34ch; line-height: 1.45; } /* Hero call-to-action: primary button + the scroll cue beneath it. */ .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 44px; } .btn-primary { font-family: var(--sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; text-decoration: none; padding: 15px 36px; background: var(--ink); color: #EDE7D9; border: 1px solid var(--ink); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .btn-primary:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); } .btn-primary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; } [data-theme="dark"] .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); } [data-theme="dark"] .btn-primary:hover { background: #EDE7D9; } .scroll-cue { width: 20px; height: 32px; flex: none; border: 1px solid var(--muted); border-radius: 12px; position: relative; opacity: 0.7; } .scroll-cue::after { content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 6px; background: var(--gold); border-radius: 2px; transform: translateX(-50%); animation: cue 1.8s var(--ease) infinite; } @keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 10px); } } /* ---------- APPROACH CARDS ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--line); padding: 28px 24px; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); } .card:hover { transform: translateY(-3px); border-color: var(--gold); } .card h3 { font-family: var(--serif); font-weight: 500; font-size: 23px; margin-bottom: 9px; } .card p { color: var(--muted); font-size: 15px; } @media (max-width: 680px) { .cards { grid-template-columns: 1fr; } } /* ---------- PROCESS STEPS ---------- */ .steps { list-style: none; max-width: 600px; margin: 0 auto; } .step { display: flex; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--line); align-items: center; } .step:first-child { border-top: 1px solid var(--line); } /* Numbered steps as hairline plates (atelier "drawn list" motif). */ .step-n { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold-text); transition: border-color 0.3s var(--ease); } .step:hover .step-n { border-color: var(--gold); } .step h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin-bottom: 4px; } .step p { color: var(--muted); font-size: 15px; } /* ---------- SECTION FRAMING (editorial "spec-sheet" treatment) ---------- Numbered plate + hairline rule turns each label into an editorial masthead (CSS counters — no HTML change). The barest sections (Process, Work) sit on a faint framed panel with corner registration ticks (a print/atelier motif) so the "cute statements" read as composed, not floating. Additive + fully reversible: delete this block to restore the bare sections. */ main { counter-reset: sec; } .section .section-label { counter-increment: sec; } .section .section-label::before { content: "0" counter(sec); display: block; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-text); letter-spacing: 0.04em; margin-bottom: 6px; } .section .section-label::after { content: ""; display: block; width: 44px; height: 1px; margin: 12px auto 0; background: var(--line); } #process .band, #work .band { position: relative; padding: clamp(28px, 4vw, 52px); background: color-mix(in srgb, var(--surface) 50%, transparent); border: 1px solid var(--line); transition: border-color 0.5s var(--ease); } @supports not (background: color-mix(in srgb, white 50%, transparent)) { #process .band, #work .band { background: var(--surface); } } #process .band::before, #work .band::before, #process .band::after, #work .band::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--gold); pointer-events: none; transition: width 0.5s var(--ease), height 0.5s var(--ease); } #process .band::before, #work .band::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } #process .band::after, #work .band::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } /* Ticks "ink in" (draw from the corner) as the panel reveals — like a plate being registered on a press. Static immediately if no JS / reduced motion. */ html.js-reveal #process .band:not(.is-visible)::before, html.js-reveal #process .band:not(.is-visible)::after, html.js-reveal #work .band:not(.is-visible)::before, html.js-reveal #work .band:not(.is-visible)::after { width: 0; height: 0; } /* Signature: a quiet gold wash on text selection (the one moment a visitor "touches" the page) — reads as considered, not a default blue template. */ ::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); } ::-moz-selection { background: color-mix(in srgb, var(--gold) 30%, transparent); } /* ============================================================ MOTION — lighter than the factory default. Content is only hidden once .js-reveal is added by motion.js. ============================================================ */ html.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } html.js-reveal .reveal.is-visible { opacity: 1; transform: none; } /* Registered Cascade: a section's children settle in sequence (not as one block), resolving with the corner-tick ink-in — reads as the panel being "set" on a press, not a generic stagger. Pure delays on the existing reveal; reduced-motion users get the instant reveal (no delays applied). */ @media (prefers-reduced-motion: no-preference) { html.js-reveal .cards .card:nth-child(2) { transition-delay: 90ms; } html.js-reveal .cards .card:nth-child(3) { transition-delay: 180ms; } html.js-reveal .steps .step:nth-child(2) { transition-delay: 70ms; } html.js-reveal .steps .step:nth-child(3) { transition-delay: 140ms; } html.js-reveal .steps .step:nth-child(4) { transition-delay: 210ms; } html.js-reveal .work-list li:nth-child(2) .work-item { transition-delay: 90ms; } } /* Letter-by-letter reveal: motion.js splits a few headings into .char spans (accessibly — aria-label on the element, aria-hidden chars). The element box shows immediately; the letters cascade in when the section is-visible. */ .split .char { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 26ms); } html.js-reveal .reveal.split { opacity: 1; transform: none; } /* box visible; chars do the reveal */ html.js-reveal .reveal.split.is-visible .char, html.js-reveal .is-visible .split .char { opacity: 1; transform: none; } /* SAFETY NET: motion.js adds .reveal-done ~1.1s after the cascade starts. Force any chars that stalled mid-transition (a real-Chrome freeze) to their final state so the headline can never stay invisible. !important beats the frozen inline transition value. */ html.js-reveal .split.reveal-done .char { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .split .char { opacity: 1; transform: none; transition: none; } } .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; opacity: 0.85; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); } } } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-reveal .reveal { opacity: 1; transform: none; transition: none; } .scroll-cue::after { animation: none; } .scroll-progress { display: none; } body, .card, .theme-toggle, .theme-toggle-icon { transition: none; } }