/* =====================================================================
   Site additions on top of the GetLayers "Evolve" hero.
   Everything here is painted with the Evolve tokens declared in
   index.html (:root) — no new colours, no new typefaces.
   Layout skeletons: negantropy-entropy / negantropy-refusal (chapters),
   marcus-vane-contact-footer (links).
   ===================================================================== */

html { scroll-behavior: smooth; }
/* computers get Lenis (js/smooth.js): it owns the easing, so native smooth scrolling steps aside */
html.has-lenis, html.lenis { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; }

/* ---------- hero: pinned, then dissolved into the film beneath it ---------- */
.hero-pin { position: relative; z-index: 2; height: 170svh; pointer-events: none; }
.hero-pin > .hero {
  position: sticky; top: 0; pointer-events: auto;
  will-change: opacity;                       /* js/site.js writes the opacity as the hero dissolves */
  /* the hero is 100dvh, the stage beneath it 100lvh: while a phone's toolbar
     collapses this keeps the gap the hero's own colour, never a strip of film */
  box-shadow: 0 25lvh 0 var(--background);
}
.hero-pin > .hero.is-leaving { pointer-events: none; }
.hero-pin > .hero.is-gone { pointer-events: none; visibility: hidden; }
/* moved out of view (size unchanged) so the template's own observer pauses the 3D head */
.hero-pin > .hero.is-gone .visual { transform: translateY(-300lvh); }

/* the animated ground behind the head, and the dust that hangs in the light of the film */
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1600ms cubic-bezier(0.16, 1, 0.3, 1); }
.backdrop.is-live { opacity: 1; }
.journey-dust { width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
.journey-dust.is-live { opacity: 0.9; }

/* ---------- dock ---------- */
.dock {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 2.5rem;
  font-family: var(--font-mono); font-size: var(--text-nav); line-height: 1.3;
  text-transform: uppercase; white-space: nowrap;
  mix-blend-mode: difference;
  opacity: 0; transform: translateY(-0.75rem); pointer-events: none;   /* the bar itself never takes taps */
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dock.is-on { opacity: 1; transform: none; }
.dock.is-on a { pointer-events: auto; }
.dock a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 0.5rem; margin: 0 -0.5rem;
  transition: opacity var(--duration-fast) cubic-bezier(0.2, 0, 0, 1);
}
@media (hover: hover) { .dock a:hover { opacity: 0.7; } }
.dock a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- journey stage ---------- */
.journey { position: relative; z-index: 1; margin-top: -170svh; background: var(--background); color: var(--foreground); }
.journey-stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.journey-stage > * { position: absolute; inset: 0; }
.journey-ambient { background-image: var(--menu-glow); }
.journey-film {
  width: 100%; height: 100%; opacity: 0;
  transform-origin: 50% 44%;                   /* the doorway: the award act flies the camera through it */
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.journey-film.is-live { opacity: 1; }
@media (orientation: landscape) { .journey-film { transform-origin: 50% 42%; } }

/* the award act: a wash of light, then the room with the trophy */
.award-flash { pointer-events: none; opacity: 0; background: #ffffff; background: color-mix(in srgb, var(--accent-start) 55%, #ffffff); }
.award-room { opacity: 0; background: var(--background); }
.award-room > * { position: absolute; inset: 0; }
.award-glow {
  background-image: radial-gradient(58% 40% at 50% 38%, rgb(255 228 154 / 0.12), transparent 72%);
  background-image: radial-gradient(58% 40% at 50% 38%, color-mix(in srgb, var(--accent-middle) 14%, transparent), transparent 72%);
}
.award-glow { pointer-events: none; animation: award-breathe 5200ms ease-in-out infinite alternate; }
@keyframes award-breathe { from { opacity: 0.7; transform: scale(1); } to { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .award-glow { animation: none; } }
.award-reel { width: 100%; height: 100%; }

/* type lives in the lower band, so that band is always dark enough to read on */
.journey-scrim {
  pointer-events: none;
  background-image: linear-gradient(to bottom,
    rgb(0 0 0 / 0.6) 0%, transparent 26%, transparent 46%,
    rgb(0 0 0 / 0.62) 66%, rgb(0 0 0 / 0.86) 100%);
}
.journey-grid { pointer-events: none; }
.journey-grid .rule-v { position: absolute; top: 0; bottom: 0; width: var(--hairline); background: var(--rule); }
.journey-track {
  inset: auto 0 0 0; height: var(--hairline); background: var(--rule);
}
.journey-fill {
  display: block; width: 100%; height: 100%;
  transform-origin: left; transform: scaleX(0);
  background-image: var(--gradient-accent);
}
.journey-flow { position: relative; margin-top: -100lvh; }

/* ---------- chapters: each text block rides in, HOLDS in the lower band while the
   film plays above it, then leaves (12-col: 7 | 4, heading low-left, index + body right) ---------- */
.chapter {
  position: relative; min-height: 130lvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-inline: 2.5rem;
}
.chapter--first { padding-top: 170svh; min-height: calc(170svh + 120lvh); }
.chapter--award { padding-top: 100lvh; min-height: 290lvh; }
/* a zero-height landing mark at the top of each chapter: menu links arrive mid-hold */
.chapter-anchor { display: block; height: 0; margin-bottom: auto; scroll-margin-top: 36lvh; }
.chapter--award .chapter-anchor { position: absolute; top: 58%; }
.chapter-inner {
  position: sticky; bottom: 11lvh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem; align-items: end;
}
.chapter-main { grid-column: 1 / span 7; grid-row: 1; }
.chapter-side {
  grid-column: 9 / span 4; grid-row: 1;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1.25rem;
}
.chapter--flip .chapter-main { grid-column: 6 / span 7; display: flex; flex-direction: column; align-items: flex-end; }
.chapter--flip .chapter-side { grid-column: 1 / span 4; align-items: flex-start; text-align: left; }

.chapter-title, .contact-title {
  font-family: var(--font-sans); font-size: var(--text-display);
  line-height: 1; font-weight: 400;
}
.ch-line { white-space: nowrap; text-box: trim-both cap alphabetic; padding-bottom: 0.14em; }
.ch-line + .ch-line { margin-top: 0.06em; }
.chapter--flip .ch-line { justify-content: flex-end; }

.chapter-index {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.025em;
}
.idx-rule { display: block; width: 2.5rem; height: var(--hairline); background: var(--rule-strong); }
.chapter-body {
  max-width: 21rem;
  font-family: var(--font-mono); font-size: var(--text-lead);
  line-height: 1.25; letter-spacing: -0.03em;
}
.chapter-side .te { justify-content: flex-end; }
.chapter--flip .chapter-side .te { justify-content: flex-start; }

.chapter-metrics { margin-top: 2rem; width: min(100%, 26rem); }
.chapter-metrics li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 0.75rem 0; border-top: var(--hairline) solid var(--rule-strong);
  font-family: var(--font-mono);
}
.chapter-metrics li:last-child { border-bottom: var(--hairline) solid var(--rule-strong); }
.metric-val { font-size: var(--text-lead); letter-spacing: -0.03em; white-space: nowrap; }
.metric-label { font-size: var(--text-meta); text-transform: uppercase; text-align: right; }

/* small labels: white at 70% (about 10:1 on the ground) — the template's 40% is too faint at this size */
.idx-meta, .metric-label, .social-handle, .sig-role, .base-meta, .award-photo figcaption { color: rgb(255 255 255 / 0.7); }

/* the award chapter: copy plus the real photo from the night */
.award-row { display: flex; flex-direction: column; align-items: inherit; gap: 1.25rem; }
.award-photo { width: 10.5rem; padding: 0.375rem; border: var(--hairline) solid var(--rule-strong); }
.award-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 28%; }
.award-photo figcaption {
  margin-top: 0.5rem; text-align: left;
  font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.2; text-transform: uppercase;
}

/* ---------- links (oversized invitation over a ruled base band) ---------- */
.contact {
  position: relative; min-height: 100lvh;
  display: flex; flex-direction: column;
  padding: 24lvh 2.5rem 2.5rem;
  background-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.8) 18%, rgb(0 0 0 / 0.9) 100%);
}
.eyebrow {
  display: flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.025em; color: rgb(255 255 255 / 0.7);
}
.eyebrow-dot { width: 0.4375rem; height: 0.4375rem; border: var(--hairline) solid currentColor; border-radius: 50%; }
.contact-title { margin-top: 1.5rem; }
.contact-lead {
  margin-top: 1.75rem; max-width: 26rem;
  font-family: var(--font-mono); font-size: var(--text-lead);
  line-height: 1.25; letter-spacing: -0.03em;
}

.social-list { margin-top: 3.5rem; }
.social-list li { border-top: var(--hairline) solid var(--rule-strong); }
.social-list li:last-child { border-bottom: var(--hairline) solid var(--rule-strong); }
.social {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem;   /* a long handle shortens, the name never does */
  min-height: 4.5rem; padding: 1rem 0.25rem 1rem 0;
}
.social::before {            /* the CTA's fill wipe, same ramp, same 420ms curve */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--gradient-accent); opacity: 0.18;
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.social-name {
  font-family: var(--font-sans); font-size: clamp(28px, 3.3vw, 46px); line-height: 1; font-weight: 400;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.social-handle {
  font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.2;
  text-transform: uppercase; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.social-arrow { width: 1rem; height: 1rem; transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) {
  .social:hover::before { transform: scaleX(1); }
  .social:hover .social-name { transform: translateX(0.75rem); }
  .social:hover .social-arrow { transform: translate(0.1875rem, -0.1875rem); }
}
.social:focus-visible { outline: 2px solid var(--accent-middle); outline-offset: 2px; }
.social:focus-visible::before, .social:active::before { transform: scaleX(1); }
/* a row that takes keyboard focus before it has been revealed must be visible */
[data-fade]:focus-within { opacity: 1 !important; transform: none !important; }

.base-band {
  margin-top: auto; padding-top: 2rem;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start;
}
.contact .social-list + .base-band { margin-top: 5rem; }
.base-band::before {
  content: ""; grid-column: 1 / -1; height: var(--hairline); margin-bottom: 2rem; background: var(--rule-strong);
}
.sig { grid-column: 1 / span 6; }
.sig-name { font-family: var(--font-sans); font-size: 2rem; line-height: 1; }
.sig-role, .base-nav, .base-meta {
  font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.3; text-transform: uppercase;
}
.sig-role { margin-top: 0.75rem; }
.base-nav { grid-column: 7 / span 3; display: flex; flex-direction: column; gap: 0.125rem; }
.base-nav a { display: inline-block; padding: 0.375rem 0; transition: opacity var(--duration-fast) cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) { .base-nav a:hover { opacity: 0.7; } }
.base-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.base-meta { grid-column: 10 / span 3; text-align: right; }

/* ---------- below 1280: the template's fluid type ---------- */
@media (max-width: 79.98rem) {
  .dock { font-size: var(--text-nav-fluid); }
  .chapter-title, .contact-title { font-size: var(--text-display-fluid); }
  .chapter-index, .metric-label, .eyebrow, .social-handle, .sig-role, .base-nav, .base-meta, .award-photo figcaption { font-size: var(--text-meta-fluid); }
  .chapter-body, .contact-lead, .metric-val { font-size: var(--text-lead-fluid); }
  .journey-grid { opacity: 0.5; }
}

/* ---------- below 768: one column, everything on the left margin ---------- */
@media (max-width: 47.98rem) {
  .dock { padding: 0.25rem 1rem; }
  .journey-grid { display: none; }
  .chapter { padding-inline: 1rem; }
  .chapter-inner { bottom: 7lvh; display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; }
  .chapter-main, .chapter-side,
  .chapter--flip .chapter-main, .chapter--flip .chapter-side { display: contents; }
  .chapter-index { order: 1; }
  .chapter-title { order: 2; }
  .chapter-body { order: 3; max-width: 19rem; text-align: left; }
  .chapter-metrics { order: 4; margin-top: 0.25rem; width: 100%; }
  .chapter--flip .ch-line, .chapter-side .te { justify-content: flex-start; }
  .award-row { order: 3; flex-direction: row; align-items: flex-start; gap: 1rem; width: 100%; }
  .award-row .chapter-body { flex: 1 1 0; }
  .award-photo { flex: none; width: 5.5rem; padding: 0.25rem; }
  .award-photo figcaption { display: none; }
  .chapter--award .chapter-metrics { display: none; }      /* keeps the block low, clear of the trophy */
  .contact { padding: 20lvh 1rem max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem)); }
  .social-list { margin-top: 2.5rem; }
  .social { min-height: 4.25rem; column-gap: 0.875rem; }
  .contact .social-list + .base-band { margin-top: 3.5rem; }
  .base-band { display: flex; flex-direction: column; gap: 1.5rem; }
  .base-band::before { width: 100%; margin-bottom: 0.5rem; }
  .base-nav { flex-direction: row; flex-wrap: wrap; gap: 0 1.25rem; }
  .base-nav a { padding: 0.875rem 0; }
  .base-meta { text-align: left; }
}

/* ---------- browsers without svh / lvh / dvh (older Android webviews, iOS before 15.4) ---------- */
@supports not (height: 100svh) {
  .hero, .menu-panel, .visual, .journey-stage { height: 100vh; }
  .hero-pin { height: 170vh; }
  .hero-pin > .hero { box-shadow: 0 25vh 0 var(--background); }
  .hero-pin > .hero.is-gone .visual { transform: translateY(-300vh); }
  .journey { margin-top: -170vh; }
  .journey-flow { margin-top: -100vh; }
  .chapter { min-height: 130vh; }
  .chapter--first { padding-top: 170vh; min-height: 290vh; }
  .chapter--award { padding-top: 100vh; min-height: 290vh; }
  .chapter-anchor { scroll-margin-top: 36vh; }
  .chapter-inner { bottom: 11vh; }
  .contact { min-height: 100vh; padding: 24vh 2.5rem 2.5rem; }
  @media (max-width: 47.98rem) {
    .chapter-inner { bottom: 7vh; }
    .contact { padding: 20vh 1rem 1.5rem; }
  }
}

/* what the scroll script rewrites every frame gets its own layer, so each write is a cheap move and not a repaint */
.journey-film, .journey-fill { will-change: transform; }
.chapter-inner, .award-flash, .award-room { will-change: opacity; }