/*
  GREYFIELD SNEAKERS — COLOR SYSTEM
  Brief: "soft matcha latte gradient — muted sage green fading into warm cream/tan"
  Theme: Light, tonal, quietly premium. Register of New Balance, not hype-brand.
  Ground: sage (#c9d2b8) at the top easing into warm cream/tan (#ded0b4) at the base.
  Text:   deep moss near-black (#232a1d) — never pure black on the cream.
  Accent: one moss green (#4c6b3c) with a lightened hover and a 12% muted wash.
*/

:root {
  /* Backgrounds */
  --color-bg:        #d5dcc4;
  --color-bg-top:    #c9d2b8;
  --color-bg-mid:    #e2e0ca;
  --color-bg-warm:   #e9dcc4;
  --color-bg-base:   #ded0b4;
  --color-surface:   rgba(255, 253, 245, 0.42);
  --color-surface-2: rgba(255, 253, 245, 0.66);
  --color-deep:      #2c3423;   /* footer ground */

  /* Borders — opacity based so they sit on any surface */
  --color-border:       rgba(44, 52, 35, 0.14);
  --color-border-hover: rgba(44, 52, 35, 0.28);

  /* Text */
  --color-text:   #232a1d;
  --color-text-2: #55604a;
  --color-text-3: #86907a;
  --color-text-inv:   #eef0e5;
  --color-text-inv-2: #a8b199;

  /* Accent */
  --color-accent:       #4c6b3c;
  --color-accent-hover: #5d8049;
  --color-accent-muted: rgba(76, 107, 60, 0.12);

  /* Type */
  --font-display: 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-display: clamp(2.75rem, 4.9vw, 4.75rem);
  --text-h1:      clamp(2.5rem, 6vw, 4.5rem);
  --text-h2:      clamp(2rem, 4.6vw, 3.5rem);
  --text-h3:      clamp(1.25rem, 2.4vw, 1.75rem);
  --text-body-lg: clamp(1.0625rem, 1.35vw, 1.25rem);
  --text-body:    1rem;
  --text-body-sm: 0.9375rem;
  --text-label:   0.75rem;

  --leading-tight:  1.02;
  --leading-snug:   1.18;
  --leading-normal: 1.62;

  --tracking-tight: -0.028em;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.16em;

  /* 8px spacing grid */
  --space-1: 8px;   --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
  --space-5: 40px;  --space-6: 48px;  --space-8: 64px;  --space-10: 80px;
  --space-12: 96px; --space-15: 120px; --space-20: 160px;

  --shadow-sm: 0 2px 14px rgba(44, 52, 35, 0.07);
  --shadow-md: 0 14px 44px rgba(44, 52, 35, 0.10);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  /* Lenis owns smooth scrolling on desktop; native smooth scroll must stay off. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The matcha latte ground: one fixed gradient behind the whole document.
   A fixed layer (rather than background-attachment) avoids the iOS repaint bug. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(115% 70% at 12% -5%, #cdd6bd 0%, rgba(205, 214, 189, 0) 62%),
    radial-gradient(90% 60% at 92% 18%, #e7e4d0 0%, rgba(231, 228, 208, 0) 58%),
    linear-gradient(178deg,
      var(--color-bg-top) 0%,
      #d3d9c1 18%,
      var(--color-bg-mid) 42%,
      var(--color-bg-warm) 72%,
      var(--color-bg-base) 100%);
}

img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }

::selection { background: var(--color-accent); color: #f4f6ee; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-deep);
  color: var(--color-text-inv);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* Film grain — a static, GPU-cheap overlay that keeps the gradient from banding. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- shared */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-3);
}

/* Scroll-reveal base state. A <noscript> override in the document head restores
   full visibility when JavaScript never runs. */
.reveal { opacity: 0; transform: translate3d(0, 26px, 0); will-change: transform, opacity; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) clamp(20px, 4vw, 56px);
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
}

/* Once the page has moved, the bar picks up a translucent ground so section
   headings never collide with the nav on their way past. */
.nav.is-scrolled {
  background: linear-gradient(180deg, rgba(232, 234, 216, 0.92) 0%, rgba(232, 234, 216, 0.72) 62%, rgba(232, 234, 216, 0) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.nav__links { display: flex; gap: var(--space-4); }

.nav__links a {
  font-size: var(--text-body-sm);
  color: var(--color-text-2);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.nav__links a:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }

.nav__meta {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-3);
}

.hamburger { display: none; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--space-20) var(--space-10);
  padding-inline: clamp(20px, 4vw, 56px);
}

.hero__grid {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 0.78fr) 1fr;
  align-items: center;
  gap: var(--space-6);
}

/* min-width:0 stops a long headline from forcing its column wider than 1fr,
   which would push the centre column (and the shoe) off axis. */
.hero__col { min-width: 0; }
.hero__col--headline { z-index: 3; }
.hero__col--product  { z-index: 3; justify-self: end; max-width: 320px; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-top: var(--space-3);
}
.hero__title .line { display: block; }
.hero__title .line:last-child { color: var(--color-accent); }

/* Centre column. On desktop this only reserves space — the WebGL stage is
   promoted to position:fixed and draws the shoe over the whole viewport. */
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.stage { position: absolute; inset: 0; }

/* pointer-events:none is load-bearing: the canvas must never intercept a
   touch drag, or page scrolling gets trapped on mobile. */
.stage,
.stage canvas {
  pointer-events: none;
  touch-action: auto;
}

.stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.stage.is-loaded canvas { opacity: 1; }

.stage__hint {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-3);
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
  white-space: nowrap;
}
.stage.is-loaded + .stage__hint { opacity: 1; }

.product__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
}
.product__colour {
  font-size: var(--text-body-lg);
  color: var(--color-accent);
  margin-top: 2px;
}
.product__blurb {
  margin-top: var(--space-3);
  color: var(--color-text-2);
  font-weight: 300;
  font-size: var(--text-body-lg);
  max-width: 30ch;
}

.spec { margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.spec__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
}
.spec dt { color: var(--color-text-3); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-label); align-self: center; }
.spec dd { color: var(--color-text-2); text-align: right; }

/* ---------------------------------------------------------- feature seq */
.feature {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-15);
  padding-inline: clamp(20px, 4vw, 56px);
  max-width: 1680px;
  margin-inline: auto;
}

.feature--left .feature__text { grid-column: 2; }
.feature--right .feature__text { grid-column: 1; }

.feature__text { max-width: 46ch; }
.feature--left .feature__text { justify-self: end; }

.feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-top: var(--space-3);
}

.feature__body {
  margin-top: var(--space-3);
  font-size: var(--text-body-lg);
  font-weight: 300;
  color: var(--color-text-2);
}

.feature__list { margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.feature__list li {
  padding-block: 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
  color: var(--color-text-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.feature__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}

/* Desktop: the 3D stage is the visual for every feature section, so the still
   images are mobile-only (mobile disables scroll-linked 3D). */
.feature__figure { display: none; }

/* ---------------------------------------------------------------- ground */
.ground {
  position: relative;
  z-index: 3;
  padding-block: var(--space-20);
  padding-inline: clamp(20px, 4vw, 56px);
  max-width: 1680px;
  margin-inline: auto;
}

.ground__intro { max-width: 62ch; }

.ground__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-top: var(--space-3);
}

.ground__body {
  margin-top: var(--space-3);
  font-size: var(--text-body-lg);
  font-weight: 300;
  color: var(--color-text-2);
  max-width: 56ch;
}

.ground__grid {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.ground__cell {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  aspect-ratio: 1 / 1;
}
.ground__cell--wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }

.ground__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.ground__cell:hover img { transform: scale(1.03); }

.ground__cell figcaption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
}

.ground__facts {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}
.ground__facts li {
  font-size: var(--text-body-sm);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.ground__facts span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------- footer */
.footer {
  position: relative;
  z-index: 3;
  margin-top: var(--space-8);
  background: var(--color-deep);
  color: var(--color-text-inv);
  padding: var(--space-12) clamp(20px, 4vw, 56px) var(--space-6);
}

.footer__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(238, 240, 229, 0.14);
}

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.footer__line {
  color: var(--color-text-inv-2);
  font-weight: 300;
  max-width: 34ch;
  font-size: var(--text-body-sm);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.footer__col h3 {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-inv-2);
  margin-bottom: var(--space-3);
}
.footer__col li {
  font-size: var(--text-body-sm);
  color: var(--color-text-inv);
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer__col a {
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.footer__col a:hover { color: #cfe0b8; border-bottom-color: #cfe0b8; }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(238, 240, 229, 0.14);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-inv-2);
}

/* ============================================================================
   DESKTOP — the stage is promoted out of the hero grid and spans the viewport,
   so one canvas can carry the shoe through the whole feature sequence.
   No ancestor of .stage may take a transform/filter/perspective, or the fixed
   positioning below would be trapped inside the hero.
   ========================================================================== */
@media (min-width: 769px) {
  .stage {
    position: fixed;
    inset: 0;
    z-index: 1;
  }
  .stage__hint { bottom: -32px; }
}

/* Tablet / small laptop — the three-column hero still holds, but the type and
   gutters have to come down or the headline wraps a word per line. */
@media (min-width: 769px) and (max-width: 1100px) {
  :root {
    --text-display: clamp(2.125rem, 4.3vw, 3.125rem);
    --text-h2: clamp(1.75rem, 3.6vw, 2.5rem);
  }
  .hero { padding-block: 128px 64px; }
  /* Tighten the eyebrow so the season line holds one line in a narrow column. */
  .hero__col--headline .eyebrow { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .hero__grid {
    grid-template-columns: 1fr minmax(190px, 0.8fr) 1fr;
    gap: var(--space-4);
  }
  .hero__col--product { max-width: 260px; }
  .spec__row { flex-direction: column; gap: 2px; }
  .spec dd { text-align: left; }

  .feature { gap: var(--space-5); padding-block: var(--space-12); }
  .feature__text { max-width: 40ch; }

  .ground { padding-block: var(--space-15); }
  .footer__cols { gap: var(--space-4); }
}

/* Static fallback shown if WebGL is unavailable or the model fails to load. */
.stage__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =============================================================
   MOBILE FIX — max-width: 768px
   Desktop styles untouched. Only additions below.
   ============================================================= */
@media (max-width: 768px) {

  /* Global */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, video, iframe, canvas { max-width: 100%; }

  .grain { opacity: 0.04; }

  /* Navigation — links collapse behind a hamburger */
  .nav { padding: var(--space-2) 16px; }
  .nav__meta { display: none; }
  .nav__brand { display: inline-flex; align-items: center; min-height: 44px; }

  .nav__links {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: var(--color-bg-mid);
    padding: 96px 24px 48px;
    gap: 0;
    z-index: 999;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    display: flex;
    align-items: center;
    min-height: 56px;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    z-index: 1000;
  }
  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
  }
  .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2) { opacity: 0; }
  .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero — stacks headline, then the 3D shoe, then the product name */
  .hero {
    min-height: auto;
    padding-block: 104px 56px;
    padding-inline: 16px;
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .hero__col--product { justify-self: stretch; max-width: none; }
  .hero__title { font-size: clamp(2.5rem, 12.5vw, 3.75rem); line-height: 1.02; }
  .hero__media { aspect-ratio: 1 / 1; max-height: 62vh; }
  .stage__hint { bottom: 4px; }

  .product__blurb { max-width: none; font-size: 1.0625rem; }

  /* Feature sections — single column, image below the copy */
  .feature {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-block: 64px;
    padding-inline: 16px;
  }
  .feature--left .feature__text,
  .feature--right .feature__text {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
  }
  .feature__title { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.12; }
  .feature__body { font-size: 1.0625rem; }

  .feature__figure {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .feature__figure img { width: 100%; height: auto; }

  /* Ground */
  .ground { padding-block: 72px; padding-inline: 16px; }
  .ground__title { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.12; }
  .ground__body { font-size: 1.0625rem; }
  .ground__grid { margin-top: var(--space-6); grid-template-columns: 1fr; gap: var(--space-2); }
  .ground__facts { margin-top: var(--space-8); grid-template-columns: 1fr; gap: var(--space-4); }
  .ground__cell figcaption { left: 12px; bottom: 12px; }

  /* Footer */
  .footer { margin-top: var(--space-10); padding: 64px 16px 32px; }
  .footer__top { padding-bottom: var(--space-5); }
  .footer__cols { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-6); }
  .footer__col li { margin-bottom: 12px; }
  .footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__base { gap: 8px; }

  /* Body copy never drops below 16px on mobile */
  p, li, a, dd, dt, figcaption, .footer__col li { font-size: max(1rem, var(--text-body-sm)); }
  .eyebrow, .nav__meta, .footer__base, .ground__facts li, .spec dt { font-size: 0.8125rem; }
}

/* Small phone */
@media (max-width: 375px) {
  .hero__title { font-size: 2.25rem; }
  .hero__media { aspect-ratio: 1 / 1; max-height: 52vh; }
  .footer__wordmark { font-size: 2.75rem; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .stage canvas { transition: none; }
  .ground__cell img { transition: none; }
  .ground__cell:hover img { transform: none; }
}