/* ═══════════════════════════════════════════════════════════════
   wilferd.com — “Under a Paper Moon”
   Palette drawn from the hero film: twilight violet, magenta
   horizon, black pines, moonlight.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('../fonts/AvenirNextLTPro-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink:        #05030c;
  --dusk-1:     #241448;
  --dusk-2:     #482a7c;
  --dusk-3:     #7b3fa4;
  --horizon:    #d76bb2;
  --moon:       #f2ecff;
  --glow:       #cdb4ff;
  --ember:      #ffd9a0;
  --text:       #ece7f6;
  --muted:      #a99dc9;
  --hairline:   rgba(205,180,255,.16);
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Avenir Next LT Pro', 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif;
  --ease-out:   cubic-bezier(.22,.9,.3,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; background: #05030c; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Lenis inertial scroll */
html.has-lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(123,63,164,.55); color: #fff; }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.04; }
h1 em, h2 em { font-style: italic; color: var(--glow); }
a { color: inherit; }

/* ── atmosphere chrome ─────────────────────────────────────── */

.veil {
  position: fixed; inset: 0; z-index: 200; background: var(--ink);
  pointer-events: none; transition: opacity 1.1s ease .15s;
}
.veil.is-lifted { opacity: 0; }

.grain {
  position: fixed; inset: -20px; z-index: 120; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 110; width: 340px; height: 340px;
  margin: -170px 0 0 -170px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(205,180,255,.10) 0%, rgba(205,180,255,.04) 38%, transparent 70%);
  mix-blend-mode: screen;
}
@media (hover: none), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

.guide-moon {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0;
  will-change: transform;
}
.guide-moon span {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff, var(--moon) 55%, #cbb7f2);
  box-shadow: 0 0 22px 8px rgba(226,209,255,.55), 0 0 90px 40px rgba(160,120,255,.28);
  animation: moonPulse 4.5s ease-in-out infinite;
}
@keyframes moonPulse {
  0%,100% { box-shadow: 0 0 22px 8px rgba(226,209,255,.55), 0 0 90px 40px rgba(160,120,255,.28); }
  50%     { box-shadow: 0 0 28px 11px rgba(226,209,255,.7), 0 0 110px 48px rgba(160,120,255,.34); }
}
@media (max-width: 720px) {
  .guide-moon span {
    width: 14px; height: 14px;
    box-shadow: 0 0 16px 5px rgba(226,209,255,.5), 0 0 46px 20px rgba(160,120,255,.2);
  }
}
@media (prefers-reduced-motion: reduce) { .guide-moon { display: none; } }

/* ── moon-phase scroll progress (waxes new → full down the page) ── */
.moon-progress {
  position: fixed; right: clamp(14px, 2.2vw, 30px); top: 50%; z-index: 95;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none; opacity: 0; transition: opacity .8s ease;
}
.moon-progress.is-on { opacity: 1; }
.mp-outline { fill: none; stroke: rgba(205,180,255,.28); stroke-width: 1; }
.mp-lit { fill: rgba(242,236,255,.92); filter: drop-shadow(0 0 6px rgba(205,180,255,.7)); }
.mp-track { display: block; width: 1px; height: 74px; background: rgba(205,180,255,.16); position: relative; overflow: hidden; }
.mp-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, var(--glow), var(--horizon));
  transform: scaleY(0); transform-origin: top;
}
@media (max-width: 720px) {
  .moon-progress { right: 10px; }
  .moon-progress svg { width: 20px; height: 20px; }
  .mp-track { height: 48px; }
}

/* ── type helpers ──────────────────────────────────────────── */

.eyebrow {
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--glow); margin-bottom: 1.4rem;
}
.lede { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 34em; }

/* ── nav ───────────────────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(22px, env(safe-area-inset-top))
           max(clamp(20px, 4.5vw, 56px), env(safe-area-inset-right))
           22px
           max(clamp(20px, 4.5vw, 56px), env(safe-area-inset-left));
  transition: background .5s ease, backdrop-filter .5s ease, padding .5s ease;
}
.nav.is-scrolled {
  padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px;
  background: rgba(6,3,14,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav__brand {
  font-family: var(--serif); font-weight: 400; font-size: 1.55rem;
  letter-spacing: .02em; text-decoration: none;
}
.nav__dot { color: var(--glow); }
.nav__links { display: flex; gap: clamp(16px, 2.6vw, 34px); align-items: center; }
.nav__links a {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--muted); position: relative;
  transition: color .3s ease; padding: 6px 0;
  text-shadow: 0 1px 12px rgba(5,3,12,.9);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--glow); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--text); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 18px !important; color: var(--text) !important;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.nav__cta::after { display: none; }
.nav__cta:hover, .nav__cta:focus-visible {
  border-color: rgba(205,180,255,.6);
  box-shadow: 0 0 24px rgba(160,120,255,.25);
}
@media (max-width: 560px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ── hero ──────────────────────────────────────────────────── */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  will-change: transform;
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,3,12,.55) 0%, transparent 32%),
    linear-gradient(to top, var(--dusk-1) 0%, rgba(36,20,72,.55) 12%, transparent 44%);
}
/* slow blink that hides the film's loop cut when it wraps on screen —
   in the twilight of the forest below so the dip reads as sky, not a
   black flash (its bottom edge matches the forest's dusk exactly) */
.hero__blink {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #140b2e 0%, var(--dusk-1) 100%);
  opacity: 0; pointer-events: none; transition: opacity .9s ease;
}
.hero__blink.is-on { opacity: 1; transition: opacity .5s ease; }
.hero__inner {
  position: relative; z-index: 2;
  padding: 0 clamp(20px, 5vw, 72px) clamp(120px, 17vh, 190px);
  max-width: 980px;
}
.hero__eyebrow {
  display: flex; flex-wrap: wrap; column-gap: 1.6em; row-gap: 4px;
  max-width: 34em; font-size: 12px; color: rgba(242,236,255,.9);
  text-shadow: 0 1px 6px rgba(5,3,12,.9), 0 0 24px rgba(5,3,12,.7);
}
@media (max-width: 560px) { .hero__eyebrow-roles { display: none; } }
.hero__title {
  font-size: clamp(3rem, 9.2vw, 7.4rem);
  letter-spacing: .005em;
  text-shadow: 0 2px 40px rgba(5,3,12,.55);
  margin: 0 0 1.4rem;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; }
.hero__sub {
  max-width: 30em; color: #cfc6e6;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  text-shadow: 0 1px 18px rgba(5,3,12,.85);
}
.hero__scrollcue {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 64px);
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 14px));
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-decoration: none; color: var(--muted);
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  writing-mode: vertical-rl;
  text-shadow: 0 1px 12px rgba(5,3,12,.9);
}
.hero__scrollcue .cue-line {
  width: 1px; height: 72px; background: linear-gradient(var(--glow), transparent);
  position: relative; overflow: hidden;
}
.hero__scrollcue .cue-line::after {
  content: ''; position: absolute; left: 0; top: -40%;
  width: 1px; height: 40%; background: #fff;
  animation: cueDrop 2.2s var(--ease-out) infinite;
}
@keyframes cueDrop { 0% { top: -40%; } 70%, 100% { top: 110%; } }
@media (prefers-reduced-motion: reduce) { .hero__scrollcue .cue-line::after { animation: none; } }

/* ── forest / the descent ──────────────────────────────────── */

.forest { position: relative; background: var(--ink); }
.forest__bg { position: absolute; inset: 0; pointer-events: none; }
.forest__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
.fnight {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #0b0722 0%, #070417 55%, var(--ink) 100%);
}
.fsky {
  position: absolute; inset: 0; will-change: opacity;
  background: linear-gradient(to bottom,
    var(--dusk-1) 0%, var(--dusk-2) 34%, var(--dusk-3) 58%,
    var(--horizon) 82%, #f0a9c8 100%);
}
.fstars {
  position: absolute; inset: 0; opacity: .8;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1px 1px at 31% 9%,  rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1.7px 1.7px at 47% 30%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1px 1px at 63% 14%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 25%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 89% 8%,  rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 22% 44%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 55% 48%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1.3px 1.3px at 71% 41%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 5% 60%,  rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1.2px 1.2px at 40% 66%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1px 1px at 93% 55%, rgba(255,255,255,.55), transparent 55%);
}
/* twinkle lives on the pseudo-element so GSAP owns .fstars opacity */
.fstars::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.8px 1.8px at 26% 18%, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(1.5px 1.5px at 58% 8%,  rgba(230,220,255,.9), transparent 55%),
    radial-gradient(2px 2px at 83% 30%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1.4px 1.4px at 9% 38%,  rgba(230,220,255,.85), transparent 55%),
    radial-gradient(1.6px 1.6px at 46% 52%, rgba(255,255,255,.8), transparent 55%);
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .15; } to { opacity: .9; } }

/* All four ridges are cut from one spruce panorama (masked, so each
   depth keeps its own atmospheric color and samples a different slice).
   The front ridge is zoomed past the panorama's solid base, leaving
   giant foreground pines over a thin ground strip. */
.treeline {
  position: absolute; left: -4%; right: -4%; bottom: -2%;
  -webkit-mask: url('../img/treeline-pines.svg') repeat-x 0% bottom / auto 100%;
          mask: url('../img/treeline-pines.svg') repeat-x 0% bottom / auto 100%;
  will-change: transform;
}
.tl--far   { height: 46svh;  background-color: #171233; }
.tl--mid   { height: 62svh;  background-color: #100b26; -webkit-mask-position: 42% bottom; mask-position: 42% bottom; }
.tl--near  { height: 80svh;  background-color: #0a0619; -webkit-mask-position: 71% bottom; mask-position: 71% bottom; }
.tl--front {
  height: 100svh; background-color: #040210;
  -webkit-mask-size: auto 220%; mask-size: auto 220%;
  -webkit-mask-position: 23% top; mask-position: 23% top;
}

.mist {
  position: absolute; left: -10%; right: -10%; height: 26svh; bottom: 6%;
  background: radial-gradient(ellipse 60% 100% at 50% 60%, rgba(160,120,220,.14), transparent 78%);
  will-change: transform, opacity;
}
.mist--2 { bottom: 0; height: 20svh; opacity: .8; }

/* her ripple, crossing the seam into the forest — a WebGL water
   shader when available (canvas injected by ripple.js), the SVG ring
   train below as its fallback */
.ripple-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
/* canvas twin of the treelines while the wave physically lifts them */
.warble-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: none; pointer-events: none;
}
/* the top fade lets the fallback arcs dissolve out of the film
   instead of butt-ending at the section seam */
.ripple {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
}
/* a silky wave-train: one luminous crest trailed by ever-finer rings,
   all stroked with a vertical gradient so each arc melts toward the
   seam instead of drawing a hard line */
.rp { fill: none; stroke: url(#rpGrad); opacity: 0; }
.rp-1  { stroke-width: 2;    stroke-opacity: .62; }
/* wide faint halo under the crest */
.rp-1g { stroke-width: 7;    stroke-opacity: .12; }
.rp-2  { stroke-width: 1.4;  stroke-opacity: .5; }
.rp-3  { stroke-width: 1.2;  stroke-opacity: .42; }
.rp-4  { stroke-width: 1;    stroke-opacity: .36; }
.rp-5  { stroke-width: .9;   stroke-opacity: .3; }
.rp-6  { stroke-width: .8;   stroke-opacity: .26; }

.fireflies { position: absolute; inset: 0; width: 100%; height: 100%; }

.fdark {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to bottom, rgba(3,1,9,.1) 0%, rgba(3,1,9,.38) 60%, rgba(5,3,12,1) 92%);
}

/* darkness pools at the forest floor as night falls — in the exact
   tree-silhouette color so the masks' bottom edges dissolve into it */
.fground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60svh; opacity: 0;
  background: linear-gradient(to top, #040210 0%, #040210 50%, rgba(4,2,16,0) 100%);
}

/* reduced-motion / no-JS: ascension renders as calm static space */
html.no-motion .ascension { height: auto; }
html.no-motion .ascension__stage { position: relative; height: auto; }
html.no-motion .ascension__canvas { display: none; }
html.no-motion .ascension__fallback { opacity: 1; }
html.no-motion .acopy { position: relative; inset: auto; opacity: 1; pointer-events: auto; padding: 16vh 24px; }

.forest__content { position: relative; z-index: 2; }

.panel {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(90px, 12vh, 140px) clamp(20px, 6vw, 88px);
  max-width: 1240px; margin: 0 auto;
}
.panel h2 { font-size: clamp(2.2rem, 5.4vw, 4.3rem); margin-bottom: 1.5rem; }
.panel__box { max-width: 620px; position: relative; }
.panel--intro .panel__box { margin-top: 12vh; }
.panel__head { margin-bottom: clamp(36px, 6vh, 64px); position: relative; }
/* soft local vignette keeps copy legible over the lit twilight */
.panel__box::before, .panel__head::before {
  content: ''; position: absolute; inset: -2.5rem -3rem; z-index: -1;
  background: radial-gradient(closest-side, rgba(5,3,12,.45), transparent 75%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .panel__box::before, .panel__head::before { inset: -2rem -1.25rem; }
}
.forest .lede { text-shadow: 0 1px 10px rgba(5,3,12,.6); }

.stats {
  display: flex; gap: clamp(24px, 4vw, 56px); list-style: none;
  margin-top: 2.6rem; flex-wrap: wrap;
}
.stats li { display: flex; flex-direction: column; gap: 2px; }
.stats strong {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 4.6vw, 3.8rem); color: var(--moon);
  text-shadow: 0 0 30px rgba(180,140,255,.35);
}
.stats strong [data-count] { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }
.stats span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }

.lede--follow { margin-top: 1.1rem; font-size: .98rem; }

/* press strip */
.press { margin-top: 3rem; display: flex; flex-direction: column; gap: .9rem; }
.press__label { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(169,157,201,.85); }
.press ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 6px; align-items: baseline; }
.press li {
  font-family: var(--serif); font-style: italic; font-size: 1.18rem;
  color: rgba(236,231,246,.72); white-space: nowrap;
}
.press li:not(:last-child)::after {
  content: '·'; margin-left: 8px; color: rgba(205,180,255,.4); font-style: normal;
}

/* craft cards */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
@media (min-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); max-width: 980px; } }
.card {
  position: relative; border-radius: 18px; padding: clamp(24px, 2.6vw, 38px);
  background: linear-gradient(160deg, rgba(32,18,64,.78), rgba(10,5,24,.82));
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .5s ease, box-shadow .5s ease;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(170,130,255,.14), transparent 65%);
  transition: opacity .5s ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); border-color: rgba(205,180,255,.42); box-shadow: 0 18px 60px -18px rgba(120,70,220,.4); }
  .card:hover::before { opacity: 1; }
}
.card__icon { width: 46px; height: 46px; color: var(--glow); margin-bottom: 1.5rem; filter: drop-shadow(0 0 12px rgba(170,130,255,.55)); }
.card__icon svg { width: 100%; height: 100%; }
.card h3 { font-size: 1.55rem; font-weight: 400; margin-bottom: .7rem; }
.card p { font-size: .95rem; color: var(--muted); }

/* selected work gallery */
.workfilters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: clamp(26px, 4vh, 44px);
}
/* ships hidden; work.js reveals it, so no-JS never sees dead buttons */
.workfilters[hidden] { display: none; }
.wf {
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 18px;
  transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.wf:hover, .wf:focus-visible { color: var(--text); border-color: rgba(205,180,255,.42); }
.wf.is-active {
  color: var(--moon); border-color: rgba(205,180,255,.6);
  box-shadow: 0 0 20px rgba(160,120,255,.22), inset 0 0 14px rgba(160,120,255,.12);
}

.work-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 980px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .work-grid { grid-template-columns: 1fr; } }

/* a work tile carries the craft-card glow, but leads with the image */
.work {
  position: relative; display: block; text-decoration: none;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(32,18,64,.78), rgba(10,5,24,.82));
  border: 1px solid var(--hairline);
  transition: transform .5s var(--ease-out), border-color .5s ease, box-shadow .5s ease;
}
.work::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(170,130,255,.14), transparent 65%);
  transition: opacity .5s ease; pointer-events: none;
}
.work__media {
  aspect-ratio: 548 / 410; overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.work__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* pieces sit dimmed in the dark and light up under attention */
  filter: brightness(.78) saturate(.88);
  transition: filter .6s ease, transform .8s var(--ease-out);
}
.work__meta { padding: 18px 20px 20px; }
.work__meta h3 { font-size: 1.32rem; font-weight: 400; color: var(--text); margin-bottom: .15rem; }
.work__meta p { font-size: .85rem; color: var(--muted); margin-bottom: .75rem; }
.work__tag {
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(205,180,255,.75);
}
@media (hover: hover) and (pointer: fine) {
  .work:hover { transform: translateY(-6px); border-color: rgba(205,180,255,.42); box-shadow: 0 18px 60px -18px rgba(120,70,220,.4); }
  .work:hover::before { opacity: 1; }
  .work:hover .work__media img { filter: brightness(1) saturate(1); transform: scale(1.035); }
}
.work:focus-visible {
  outline: none; transform: translateY(-6px);
  border-color: rgba(205,180,255,.6); box-shadow: 0 18px 60px -18px rgba(120,70,220,.55);
}
.work:focus-visible .work__media img { filter: brightness(1) saturate(1); }
.work[hidden] { display: none; }

/* ── lightbox ──────────────────────────────────────────────── */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb__backdrop {
  position: absolute; inset: 0; background: rgba(4,2,10,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lb__stage {
  position: relative; z-index: 1; max-width: min(92vw, 1200px);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 0 clamp(48px, 7vw, 96px);
}
.lb__frame { position: relative; }
.lb__img {
  display: block; max-width: 100%; max-height: 72svh;
  width: auto; height: auto; border-radius: 12px;
  border: 1px solid var(--hairline);
  box-shadow: 0 0 80px rgba(140,90,240,.28), 0 30px 90px -30px rgba(0,0,0,.9);
  opacity: 1; transition: opacity .35s ease;
}
.lb.is-loading .lb__img { opacity: .25; }
.lb__caption { text-align: center; max-width: 52em; }
.lb__title { font-size: 1.7rem; font-weight: 400; }
.lb__sub { font-size: .9rem; color: var(--muted); margin-top: .2rem; }
.lb__count {
  display: inline-block; margin-top: .7rem;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(205,180,255,.65);
}
.lb__btn {
  position: absolute; z-index: 2; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); background: rgba(10,5,24,.55); cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 50%;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn:hover, .lb__btn:focus-visible {
  border-color: rgba(205,180,255,.6);
  box-shadow: 0 0 24px rgba(160,120,255,.3);
  background: rgba(24,12,48,.75);
}
.lb__close { top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
.lb__prev { left: max(10px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.lb__next { right: max(10px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
.lb--single .lb__prev, .lb--single .lb__next { display: none; }
@media (max-width: 720px) {
  .lb__stage { padding: 0 10px; max-width: 100vw; }
  .lb__img { max-height: 64svh; }
  .lb__title { font-size: 1.35rem; }
  .lb__prev, .lb__next { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
  .lb__prev { left: 16px; } .lb__next { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb__img, .work, .work__media img, .wf { transition: none; }
}

/* journey timeline */
.timeline { list-style: none; position: relative; max-width: 760px; padding-left: 40px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--glow) 12%, var(--glow) 88%, transparent);
  opacity: .35;
}
.timeline li { position: relative; padding: 0 0 clamp(34px, 5vh, 52px); }
.timeline li::before {
  content: ''; position: absolute; left: -37px; top: 9px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--moon);
  box-shadow: 0 0 12px 3px rgba(205,180,255,.55);
}
.tl-when { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--glow); }
.timeline h3 { font-size: 1.6rem; font-weight: 400; margin: .45rem 0 .5rem; }
.timeline h3 span {
  display: block; font-family: var(--sans); font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}
.timeline p { color: var(--muted); font-size: .97rem; max-width: 56ch; }

/* ── ascension ─────────────────────────────────────────────── */

.ascension { position: relative; height: 460svh; background: var(--ink); }
.ascension__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* the render dissolves into ink before the section cut */
.ascension__stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16svh;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none; z-index: 2;
}
.ascension__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ascension__fallback {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 18% 24%, #fff, transparent 55%),
    radial-gradient(1px 1px at 66% 12%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1.8px 1.8px at 82% 44%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1px 1px at 34% 58%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1.4px 1.4px at 52% 82%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 110%, #2a1650 0%, transparent 65%),
    var(--ink);
}
.ascension--fallback .ascension__fallback { opacity: 1; }
.ascension--fallback .ascension__canvas { display: none; }
/* fallback collapses the pin and shows copy statically (mirrors no-motion) */
.ascension--fallback { height: auto !important; }
.ascension--fallback .ascension__stage { position: relative; height: auto; }
.ascension--fallback .acopy { position: relative; inset: auto; opacity: 1 !important; pointer-events: auto; padding: 16vh 24px; }

/* ── the clearing: the forest's own ridges part to the water ──
   The veil keeps the section seam black-on-black (no visible scroll
   handoff). Behind it stands the same four-ridge composition the
   descent ended on — in its end-of-night tones — split into halves
   that part in depth order: the nearest pines step aside first, the
   farthest last, revealing water, then stars. */
.clearing {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden; pointer-events: none;
}
/* matches the forest floor's pooled darkness exactly, so the section
   crossing is one featureless black */
.clearing__veil { position: absolute; inset: 0; background: #040210; }
/* each half spans the full stage (edges never on screen) and its
   trailing side feathers to nothing — the pines mask is intersected
   with a horizontal fade so a mid-slide half thins out instead of
   ending in a vertical cliff */
.clearing__ridge {
  position: absolute; bottom: -2%; left: -6%; width: 112%;
  --fade: linear-gradient(to right, #000 62%, transparent 96%);
  -webkit-mask-image: url('../img/treeline-pines.svg'), var(--fade);
  -webkit-mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: auto 100%, 100% 100%;
  -webkit-mask-position: 0% bottom, 0 0;
  -webkit-mask-composite: source-in;
          mask-image: url('../img/treeline-pines.svg'), var(--fade);
          mask-repeat: repeat-x, no-repeat;
          mask-size: auto 100%, 100% 100%;
          mask-position: 0% bottom, 0 0;
          mask-composite: intersect;
  will-change: transform;
}
.cr--r { --fade: linear-gradient(to left, #000 62%, transparent 96%); }
.cr--far   { height: 46svh;  background: #070417; }
.cr--far.cr--r   { -webkit-mask-position: 30% bottom, 0 0; mask-position: 30% bottom, 0 0; }
.cr--mid   { height: 62svh;  background: #050313; -webkit-mask-position: 42% bottom, 0 0; mask-position: 42% bottom, 0 0; }
.cr--mid.cr--r   { -webkit-mask-position: 70% bottom, 0 0; mask-position: 70% bottom, 0 0; }
.cr--near  { height: 80svh;  background: #04030e; -webkit-mask-position: 71% bottom, 0 0; mask-position: 71% bottom, 0 0; }
.cr--near.cr--r  { -webkit-mask-position: 12% bottom, 0 0; mask-position: 12% bottom, 0 0; }
.cr--front {
  height: 100svh; background: #030109;
  -webkit-mask-size: auto 220%, 100% 100%; mask-size: auto 220%, 100% 100%;
  -webkit-mask-position: 23% top, 0 0; mask-position: 23% top, 0 0;
}
.cr--front.cr--r { -webkit-mask-position: 64% top, 0 0; mask-position: 64% top, 0 0; }
.clearing__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46svh;
  background: linear-gradient(to top, #040210 0%, #040210 45%, rgba(4,2,16,0) 100%);
}
/* static / fallback experiences skip the theatrics */
html.no-motion .clearing, .ascension--fallback .clearing { display: none; }

.acopy {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 clamp(20px, 6vw, 80px);
  opacity: 0; pointer-events: none;
}
.acopy h2 { font-size: clamp(2.3rem, 6vw, 5rem); text-shadow: 0 2px 50px rgba(5,3,12,.9); }
.acopy .lede { margin-top: 1.3rem; }
.acopy .char { display: inline-block; will-change: transform, opacity; }

/* ── contact ───────────────────────────────────────────────── */

.contact {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 16vh 24px 0;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 78% 10%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1.3px 1.3px at 44% 6%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1px 1px at 62% 21%, rgba(230,220,255,.65), transparent 55%),
    radial-gradient(1.5px 1.5px at 92% 15%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1.6px 1.6px at 88% 62%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1px 1px at 30% 74%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1.2px 1.2px at 58% 38%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 115%, #1c0f3c 0%, transparent 62%),
    var(--ink);
}
.contact h2 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); margin-bottom: 1.4rem; }
.contact .lede { margin: 0 auto; }
.contact__actions {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 3rem;
}
.btn {
  display: inline-block; text-decoration: none;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--text);
  transition: transform .4s var(--ease-out), border-color .3s ease, box-shadow .4s ease, background .3s ease;
}
.btn:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(205,180,255,.55);
  box-shadow: 0 12px 44px -10px rgba(140,90,240,.45);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-3px);
    border-color: rgba(205,180,255,.55);
    box-shadow: 0 12px 44px -10px rgba(140,90,240,.45);
  }
}
.btn--primary {
  background: linear-gradient(120deg, rgba(120,70,220,.85), rgba(200,80,160,.85));
  border-color: transparent;
  box-shadow: 0 8px 34px -8px rgba(150,80,230,.55);
}

.footer { padding: 10vh 24px max(40px, calc(env(safe-area-inset-bottom) + 16px)); }
.footer p { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(169,157,201,.85); }

/* ── reveals: default-visible (JS opts in to animation) ────── */
html.has-motion [data-reveal] { opacity: 0; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero__inner { padding-bottom: 140px; }
  .hero__scrollcue { right: 18px; bottom: 24px; }
  .panel { padding-left: 22px; padding-right: 22px; }
  .stats { gap: 22px; }
  .stats li { flex-direction: column; gap: 2px; }
  .timeline { padding-left: 30px; }
  .timeline li::before { left: -27px; }
  .ascension { height: 320svh; }
}

@media (prefers-reduced-motion: reduce) {
  .fstars, .card, .btn { animation: none; transition: none; }
}