/* ==========================================================================
   SiteYourStory — core
   Design tokens, typography, layout primitives, chrome.
   Brand source of truth: siteyourstory.com (accent #c0392b, Inter, #fafafa/#111).
   ========================================================================== */

/* --- Font: self-hosted Inter variable (latin) ---------------------------- */
@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Environment palette registration ------------------------------------
   Registering the palette as typed custom properties lets the whole
   environment crossfade between light and dark instead of snapping, which is
   what keeps the scroll reading as one continuous space. Browsers without
   @property simply cut between palettes — still correct, just less cinematic.
   ------------------------------------------------------------------------ */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #fafafa; }
@property --paper-2 { syntax: '<color>'; inherits: true; initial-value: #f2f2f1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #111111; }
@property --ink-2 { syntax: '<color>'; inherits: true; initial-value: #555555; }
@property --ink-3 { syntax: '<color>'; inherits: true; initial-value: #767676; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, 0.09); }
@property --line-2 { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, 0.05); }
@property --glass { syntax: '<color>'; inherits: true; initial-value: rgba(250, 250, 250, 0.72); }
@property --accent-text { syntax: '<color>'; inherits: true; initial-value: #c0392b; }

/* --- Tokens -------------------------------------------------------------- */
:root {
  transition: --paper 1.1s var(--ease-io), --paper-2 1.1s var(--ease-io),
    --ink 1.1s var(--ease-io), --ink-2 1.1s var(--ease-io),
    --ink-3 1.1s var(--ease-io), --line 1.1s var(--ease-io),
    --line-2 1.1s var(--ease-io), --glass 1.1s var(--ease-io),
    --accent-text 1.1s var(--ease-io);
}

:root {
  /* Brand constants */
  --accent: #c0392b;
  --accent-deep: #a93226;
  --accent-lift: #e8695a; /* AA-safe accent for text on dark */

  /* Environment palette — interpolated by scroll (see env.js) */
  --paper: #fafafa;
  --paper-2: #f2f2f1;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #767676;
  --line: rgba(0, 0, 0, 0.09);
  --line-2: rgba(0, 0, 0, 0.05);
  --glass: rgba(250, 250, 250, 0.72);
  --accent-text: var(--accent);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.7s;

  /* Rhythm */
  --gutter: clamp(20px, 4.4vw, 64px);
  --measure: 1560px;
  --scene-pad: clamp(88px, 14vh, 190px);

  /* Type scale — editorial, fluid, restrained */
  --t-display: clamp(2.55rem, 7.3vw, 8.2rem);
  --t-head: clamp(2rem, 4.9vw, 4.6rem);
  --t-sub: clamp(1.45rem, 2.7vw, 2.35rem);
  --t-body-l: clamp(1.05rem, 1.35vw, 1.3rem);
  --t-body: clamp(0.98rem, 1.05vw, 1.1rem);
  --t-meta: 0.78rem;
  --t-label: 0.7rem;
}

/* Dark environment override (applied via data-env for no-JS / discrete jumps) */
[data-env='dark'] {
  --paper: #0d0d0e;
  --paper-2: #17171a;
  --ink: #f4f4f2;
  --ink-2: #a3a3a0;
  --ink-3: #86868a;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.06);
  --glass: rgba(16, 16, 18, 0.66);
  --accent-text: var(--accent-lift);
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  font-family: 'InterVar', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: clip;
  transition: background-color 1.1s var(--ease-io), color 1.1s var(--ease-io);
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* --- Accessibility ------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip:focus-visible {
  transform: translateY(0);
}

/* --- The world (persistent WebGL canvas) --------------------------------- */
#world {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* Kept short on purpose: the canvas covers the viewport, so it is the
     largest-contentful-paint candidate, and a long fade here reports as a slow
     page even though the words were readable immediately. */
  transition: opacity 0.85s var(--ease-io);
}
#world.ready {
  opacity: 1;
}

/* Procedural atmosphere behind everything — never an empty flat void */
.atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 78% 8%,
      color-mix(in oklab, var(--accent) 7%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      90% 70% at 12% 92%,
      color-mix(in oklab, var(--ink) 9%, transparent) 0%,
      transparent 62%
    );
  opacity: 0.85;
  transition: opacity 1.1s var(--ease-io);
}

/* Brand grain — carried over from the live site (feTurbulence, 0.015) */
.grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.016;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* --- Layout primitives --------------------------------------------------- */
.shell {
  position: relative;
  z-index: 2;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Scenes are transparent anchors in one continuous space — not slides.
   No backgrounds, no borders, no card framing. */
.scene {
  position: relative;
  padding-block: var(--scene-pad);
}
.scene--tall {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.scene--open {
  min-height: 100svh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}

/* --- Typography ---------------------------------------------------------- */
.display {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.head {
  font-size: var(--t-head);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.sub {
  font-size: var(--t-sub);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
}

.lede {
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}

.body {
  color: var(--ink-2);
  max-width: 46ch;
}

.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.accent {
  color: var(--accent-text);
}

/* A restrained rule that reads as architecture, not decoration */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* --- Navigation ---------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
    padding 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav[data-lifted='true'] {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
  padding-block: 14px;
}

/* Logo: exact live-site construction — wordmark + accent dot */
.logo {
  display: inline-flex;
  align-items: center;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  flex-shrink: 0;
}
.logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 3px;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease);
}
.logo:hover .logo-dot {
  transform: scale(1.55);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}
.nav-link {
  position: relative;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink);
  opacity: 0.66;
  transition: opacity 0.25s var(--ease);
  padding-block: 4px;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav-link:hover,
.nav-link[aria-current='page'] {
  opacity: 1;
}
.nav-link:hover::after,
.nav-link[aria-current='page']::after {
  transform: scaleX(1);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn:hover {
  background: var(--accent-deep);
}
.btn:active {
  transform: scale(0.985);
}
.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.45s var(--ease);
}
.btn:hover svg {
  transform: translateX(4px);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line);
  padding-inline: 22px;
}
.btn--ghost:hover {
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}
.btn--lg {
  padding: 17px 34px;
  font-size: 0.92rem;
}

/* --- Mobile menu --------------------------------------------------------- */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) {
  top: 17px;
}
.burger span:nth-child(2) {
  bottom: 17px;
}
.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--ease);
  pointer-events: none;
}
.sheet[data-open='true'] {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}
.sheet a {
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.16;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
    color 0.3s var(--ease);
}
.sheet[data-open='true'] a {
  opacity: 1;
  transform: none;
}
.sheet a:nth-child(1) { transition-delay: 0.16s; }
.sheet a:nth-child(2) { transition-delay: 0.22s; }
.sheet a:nth-child(3) { transition-delay: 0.28s; }
.sheet a:nth-child(4) { transition-delay: 0.34s; }
.sheet a:nth-child(5) { transition-delay: 0.40s; }
.sheet a:hover {
  color: var(--accent-text);
}
.sheet-foot {
  margin-top: 44px;
  font-size: var(--t-meta);
  color: var(--ink-3);
}

/* --- Reveal primitives (driven by app.js / ScrollTrigger) ---------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
[data-reveal='mask'] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 102% 0);
}
.is-in[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 -10% 0);
  transition: opacity 1s var(--ease), transform 1.05s var(--ease),
    clip-path 1.1s var(--ease);
}

/* Revealed at load rather than on scroll: same move, shorter. Keeps the
   headline's first paint fast without dropping the motion entirely. */
[data-reveal].is-instant,
[data-reveal].is-instant .line > span {
  transition-duration: 0.5s;
}

/* Line-by-line display reveal — restrained, no per-letter animation.
   The mask is opt-in: only lines inside a [data-reveal] start hidden, so a
   heading that is never observed (inside a scroll track, say) still renders. */
.lines {
  display: block;
}
.line {
  display: block;
  overflow: hidden;
}
.line > span {
  display: block;
}
[data-reveal] .line > span {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.15s var(--ease);
}
[data-reveal].is-in .line > span,
.is-in [data-reveal] .line > span {
  transform: none;
}
[data-reveal] .line:nth-child(2) > span { transition-delay: 0.09s; }
[data-reveal] .line:nth-child(3) > span { transition-delay: 0.18s; }
[data-reveal] .line:nth-child(4) > span { transition-delay: 0.27s; }

/* --- Footer -------------------------------------------------------------- */
.foot {
  position: relative;
  z-index: 2;
  padding: 64px var(--gutter) 40px;
  border-top: 1px solid var(--line);
}
.foot-in {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.foot-nav a {
  font-size: var(--t-meta);
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.foot-nav a:hover {
  color: var(--accent-text);
}
.foot-love {
  font-size: var(--t-meta);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.heart {
  color: var(--accent);
  display: inline-block;
  animation: beat 3.4s var(--ease-io) infinite;
}
@keyframes beat {
  0%, 82%, 100% { transform: scale(1); }
  88% { transform: scale(1.22); }
  94% { transform: scale(1.06); }
}

/* --- Page transition veil ----------------------------------------------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--ink);
  transform-origin: bottom;
  transform: scaleY(0);
  pointer-events: none;
}
.veil[data-state='out'] {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.62s var(--ease-io);
}
.veil[data-state='in'] {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.72s var(--ease-io);
}

/* --- Cursor --------------------------------------------------------------
   A quiet companion, not a toy: a small dot that eases after the pointer and
   opens into a labelled ring over things that respond. Fine pointers only;
   the system cursor is never hidden, so nothing is ever lost.
   ------------------------------------------------------------------------ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 950;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
[data-cursor-on] .cursor {
  opacity: 1;
}
.cursor-dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}
.cursor-ring {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  display: grid;
  place-items: center;
  transform: scale(0.25);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.cursor-label {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.cursor[data-mode='hover'] .cursor-ring {
  transform: scale(1);
  opacity: 1;
}
.cursor[data-mode='hover'] .cursor-dot {
  transform: scale(0.5);
}
.cursor[data-mode='label'] .cursor-ring {
  transform: scale(1.6);
  opacity: 1;
  background: var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cursor[data-mode='label'] .cursor-dot {
  transform: scale(0);
}
.cursor[data-mode='label'] .cursor-label {
  opacity: 1;
  transform: none;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor {
    display: none;
  }
}

/* --- Band ----------------------------------------------------------------
   A slow editorial ticker between scenes: structure, not decoration. The
   words are the site's four working claims, kept moving so the corridor
   never falls silent. Duplicated content is aria-hidden; reduced motion
   holds it still.
   ------------------------------------------------------------------------ */
.band {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.band-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: band-run 46s linear infinite;
}
.band:hover .band-track {
  animation-play-state: paused;
}
.band-set {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}
.band-set span {
  font-size: clamp(0.9rem, 1.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-inline: 1.6em;
  position: relative;
}
.band-set span::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  opacity: 0.65;
}
@keyframes band-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .band-track {
    animation: none;
  }
}

/* --- Scroll cue ---------------------------------------------------------- */
.cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cue-rail {
  position: relative;
  width: 46px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.cue-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  animation: cue 2.9s var(--ease-io) infinite;
}
@keyframes cue {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .burger {
    display: block;
  }
  .nav .btn {
    display: none;
  }
  :root {
    --scene-pad: clamp(72px, 11vh, 120px);
  }
}

@media (max-width: 640px) {
  :root {
    --t-display: clamp(2.3rem, 11.5vw, 3.4rem);
    --t-head: clamp(1.85rem, 8.6vw, 2.7rem);
  }
  .lede,
  .body {
    max-width: 100%;
  }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.18s !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  [data-reveal] .line > span {
    transform: none !important;
  }
  .cue-rail::after {
    animation: none;
    transform: none;
  }
  .heart {
    animation: none;
  }
}