/* =========================================================================
   LOOPER — atmospheric teaser site
   "Tuesday, 7pm. The light fading. A bucket of balls."
   ========================================================================= */

:root {
  /* Brand greens (kept) */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #0a2418;

  /* New: golden hour palette */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-900: #78350f;

  /* Inks */
  --ink-950: #0b1410;
  --ink-900: #14201a;
  --ink-700: #2c3a33;
  --ink-500: #5b6a63;
  --ink-400: #7e8b85;
  --ink-300: #a4afa9;
  --ink-200: #cbd1ce;
  --ink-100: #e6e9e7;

  --paper:   #faf8f3;          /* warm cream, not cold white */
  --paper-2: #f5f1e6;          /* slightly deeper */
  --night:   #0e1b14;          /* almost-black green */

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04),
                 0 8px 24px rgba(10, 30, 18, 0.08);
  --shadow-deep: 0 30px 80px rgba(10, 30, 18, 0.25),
                 inset 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* Typography */
  --serif: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
           "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* paper-2 (warmer cream) so the hero's top gradient stop blends seamlessly
     into any area outside the hero — fixes the white strip iOS Safari can
     show above the hero in the safe-area / notch region. */
  background: var(--paper-2);
  color: var(--ink-900);
  font-family: var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
}

::selection {
  background: var(--amber-200);
  color: var(--green-900);
}

/* Visually hidden but accessible to screen readers */
.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;
}


/* =========================================================================
   UNIFIED LIGHT-SECTION BACKGROUND
   Applied to the cream-themed sections. Single warm gradient plus subtle
   green and amber radial accents — models the appearance Oliver liked
   originally on .glimpse. (.glimpse itself is now dark — see below.)
   ========================================================================= */
.hero,
.name-reveal,
.promise {
  background:
    radial-gradient(
      circle at 18% 28%,
      rgba(74, 222, 128, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 84% 72%,
      rgba(251, 191, 36, 0.10) 0%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      var(--paper-2) 0%,
      var(--paper) 100%
    );
}


/* =========================================================================
   NAV — only visible AFTER the user scrolls past the hero.
   While the hero is in view, the nav is hidden so the cinematic sequence
   (with its own brand reveal at the end) is the only branding moment.
   The .nav-revealed class is toggled by the IntersectionObserver in the
   inline script at the bottom of index.html.
   ========================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 32px;
  background: rgba(245, 241, 230, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(20, 32, 26, 0.06);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 17px;
}

/* Brand mark — calligraphic "L" with loop and golf flag, used in nav and
   footer. Implemented as a CSS mask so the same asset can be tinted in
   any palette colour without producing additional image variants. */
.brand-mark {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--green-600);
  -webkit-mask-image: url("looper-logo.png");
  mask-image: url("looper-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease;
}

/* Footer mark is slightly smaller — same asset, smaller frame. */
.footer-brand .brand-mark {
  width: 26px;
  height: 26px;
}

/* Subtle hover hint on the nav brand — the mark goes a touch darker. */
.brand:hover .brand-mark {
  background-color: var(--green-700);
}
.brand-name { color: var(--ink-900); }

/* .nav-cta removed — the "Be on the list" button no longer lives here.
   The Close section at the bottom is the single CTA destination. */


/* =========================================================================
   HERO — Split editorial layout
   Left column: cinematic copy on warm cream.
   Right column: portrait hero photograph in full vertical glory.
   On mobile, the columns stack with the image on top.
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  isolation: isolate;
  /* background applied via the unified .light-section rule below */
}

.hero-copy {
  position: relative;
  z-index: 5;
  max-width: 620px;
  width: 100%;
  padding: 140px 48px 110px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* The image column — the image itself fades from transparent on the
   left to fully visible on the right, using a CSS mask. The hero's
   cream background shows through the transparent areas, creating an
   atmospheric "image emerging from cream" effect rather than a hard
   editorial split. */
.hero-image {
  position: relative;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  /* The mask fades the image from transparent (left) to fully opaque
     across the first 60% of its width. Curve has multiple stops so the
     transition reads as smooth atmosphere rather than a linear ramp. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 10%,
    rgba(0, 0, 0, 0.28) 22%,
    rgba(0, 0, 0, 0.55) 36%,
    rgba(0, 0, 0, 0.82) 50%,
    black 65%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 10%,
    rgba(0, 0, 0, 0.28) 22%,
    rgba(0, 0, 0, 0.55) 36%,
    rgba(0, 0, 0, 0.82) 50%,
    black 65%
  );
}

/* The CSS-painted scene elements are no longer used — the photo + cream
   column replace them. Markup may have been removed; rules kept for safety. */
.sky, .horizon, .grass, .flag, .balls {
  display: none;
}

/* Hero copy */
.hero-copy {
  position: relative;
  z-index: 5;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  text-align: left;
}

/* --- Phase 1: scene-setting ---
   The scene opens PROMINENT (large, like a film title card), then
   smoothly compresses to a small anchor that stays above the question
   for the rest of the hero scene. Triggered via JS adding .scene--compact. */
.scene {
  margin-bottom: 32px;
  /* Smooth handoff between the prominent and compact states */
  transition: margin-bottom 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-line {
  font-family: var(--sans);
  /* Prominent state — the opening title-card sizing */
  font-size: clamp(30px, 4.5vw, 54px);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink-950);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 4px;
  opacity: 0;
  animation: fade-up 1s ease-out forwards;
  /* Animate the shrink from prominent to compact when the parent gets
     the .scene--compact modifier. */
  transition:
    font-size 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    letter-spacing 1.2s ease,
    color 1.2s ease,
    font-weight 1.2s ease,
    line-height 1.2s ease,
    margin 1.2s ease;
}
.scene-line:nth-child(1) { animation-delay: 0.3s; }
.scene-line:nth-child(2) { animation-delay: 1.0s; }
.scene-line:nth-child(3) { animation-delay: 1.7s; }

/* Compact state — the small green-uppercase anchor that stays for the
   rest of the hero. Same typography family, just compressed. */
.scene--compact {
  margin-bottom: 28px;
}
.scene--compact .scene-line {
  font-size: clamp(15px, 1.5vw, 17px);
  letter-spacing: 0.04em;
  color: var(--green-900);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 4px;
}

/* The pulsing trailing dots on the third line */
.trail {
  display: inline-block;
  margin-left: 1px;
}
.trail span {
  display: inline-block;
  opacity: 0;
  animation: dot-in 0.4s ease-out forwards;
}
.trail span:nth-child(1) { animation-delay: 2.4s; }
.trail span:nth-child(2) { animation-delay: 2.8s; }
.trail span:nth-child(3) { animation-delay: 3.2s; }

@keyframes dot-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- Phase 2: the question (static) + Phase 3: rotating answers --- */
.hero-question {
  font-family: var(--serif);
  font-weight: 400;
  /* Sized so the longest answer ("…with real scenarios?", "…strengths and weak spots?")
     reads comfortably in 1–2 lines on desktop without overflowing. */
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink-950);
  /* Tight gap to the reveal block below — the reveal reads as the answer
     to the question, not as a disconnected paragraph. */
  margin: 0 0 16px;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  opacity: 0;
  /* Appears after the scene fades out */
  animation: fade-up 1.4s ease-out 5.2s forwards;
}

.hero-question .prefix {
  display: block;
}
.hero-question .prefix-trail {
  display: inline-block;
  color: var(--ink-500);
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/* The rotating tail uses CSS Grid to stack answers in the same cell */
.hero-question .rotating {
  display: inline-grid;
  position: relative;
  margin-top: 6px;
}
.hero-question .answer {
  grid-area: 1 / 1;
  font-style: italic;
  font-weight: 500;
  color: var(--amber-700);
  /* WONK reset (0 instead of 1) and lower SOFT make the italic letterforms
     sturdier — holds up better against busy backgrounds (mobile photo)
     and keeps the typography sharp on solid cream (desktop). */
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  opacity: 0;
  transform: translateY(6px);
  /* Long, soft crossfade with the Material "standard" curve — lets the
     answers breathe in and out rather than snapping. The 1.4s duration is
     well below the 4s rotation interval so there's still ~2.6s of fully-
     visible reading time per answer. */
  transition:
    opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-question .answer.active {
  opacity: 1;
  transform: translateY(0);
}

/* The meta answer is the climactic close — slightly darker amber for a
   subtle weight shift that signals "this is the wrapping-up one". */
.hero-question .answer.answer-meta {
  color: var(--amber-900);
}

/* The pocket answer (final question, 5th) — shifts colour toward the brand
   green to signal we're transitioning from question into answer territory. */
.hero-question .answer.answer-pocket {
  color: var(--green-800);
}

/* Brand reveal block — the answer to all the "what if"s. Logo + wordmark
   + tagline. Hidden until the rotation completes once, then animates in
   below the final question. */
.hero-reveal {
  /* Tight margin so the reveal reads as the answer to the question above
     rather than as a disconnected block further down the page. */
  margin-top: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* Two-part layout: the brand lockup + tagline on the left, the replay
     icon on the right — both vertically centered. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hero-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-content {
  display: flex;
  flex-direction: column;
  min-width: 0;  /* allow text to wrap if needed */
}

.reveal-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.reveal-mark {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-color: var(--green-600);
  -webkit-mask-image: url("looper-logo.png");
  mask-image: url("looper-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.reveal-name {
  /* Same font family as the header brand (.brand-name → Inter via body),
     scaled up for the climactic reveal moment. Tighter letter-spacing
     than the header because large-display text reads better tightly tracked. */
  font-family: var(--sans);
  font-size: clamp(40px, 5.5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  line-height: 1;
  margin: 0;
}

.reveal-tagline {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 14px 0 0;
}

/* Replay affordance — icon-only circular button, anchored next to the
   brand reveal so it reads as a contextual "play this again" action
   rather than a floating UI button. Sits to the right of the lockup +
   tagline, vertically centered. Has its own staggered fade so the brand
   reveal lands first, then the replay quietly joins a beat later. */
.hero-replay {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(20, 32, 26, 0.12);
  color: var(--ink-700);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.18s ease,
    border-color 0.18s ease;
}
.hero-replay.visible {
  opacity: 1;
  pointer-events: auto;
}
.hero-replay:hover {
  background: rgba(250, 248, 243, 0.9);
  border-color: rgba(20, 32, 26, 0.28);
}
.hero-replay:hover .replay-icon {
  transform: rotate(-180deg);
}
.replay-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* "Look closer" affordance — icon-only circular button at bottom-center
   of the hero. Just the down-arrow, with sr-only fallback text for
   screen readers. */
.hero-link {
  position: absolute;
  bottom: 40px;
  left: 50%;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(250, 248, 243, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 32, 26, 0.12);
  color: var(--ink-700);
  font-size: 18px;
  opacity: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
  /* Appears at 27s — after the full sequence (rotation + brand reveal)
     has finished. The translate(-50%, …) in the keyframes preserves
     horizontal centering throughout the entrance. */
  animation: link-enter 1.2s ease-out 27s forwards;
}
.hero-link:hover {
  background: rgba(250, 248, 243, 0.9);
  border-color: rgba(20, 32, 26, 0.28);
}
.hero-link:hover .link-arrow {
  transform: translateY(2px);
}
.link-arrow {
  display: inline-block;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes link-enter {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.hero-link .link-arrow {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper);
  font-size: 13px;
  transition: transform 0.4s ease;
  animation: arrow-bounce 2.4s ease-in-out infinite;
}
.hero-link:hover .link-arrow {
  transform: translateY(2px);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}


/* =========================================================================
   MOMENT 1 — THE WHISPER
   Quiet, intimate. Single block of text in a darker, cooler space.
   ========================================================================= */

.whisper {
  background: var(--night);
  color: var(--ink-100);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.whisper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%,
      rgba(74, 222, 128, 0.06) 0%,
      transparent 70%);
  pointer-events: none;
}

.whisper .container {
  max-width: 720px;
  position: relative;
  z-index: 1;
}

.whisper-text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(230, 233, 231, 0.85);
  margin: 0 0 28px;
}
.whisper-text:last-child { margin-bottom: 0; }

.whisper-emph {
  font-style: italic;
  color: var(--amber-300);
  font-size: clamp(20px, 2.2vw, 28px);
}


/* =========================================================================
   MOMENT 2 — THE NAME REVEAL
   Almost like a dictionary entry. Reverent. Poetic.
   ========================================================================= */

.name-reveal {
  padding: 160px 0 140px;
  position: relative;
  /* background applied via the unified .light-section rule */
}

.name-reveal-inner {
  max-width: 680px;
  text-align: center;
}

.reveal-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 28px;
}

.reveal-word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 132px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-950);
  margin: 0 0 36px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.reveal-word em {
  font-style: italic;
  color: var(--green-700);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  position: relative;
}
.reveal-word em::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0.05em;
  height: 0.06em;
  background: linear-gradient(90deg, var(--amber-400), var(--amber-600));
  opacity: 0.6;
  border-radius: 2px;
}

.reveal-def {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 56px;
  letter-spacing: -0.005em;
}
.reveal-def span {
  font-style: normal;
  font-weight: 500;
  font-family: var(--sans);
  font-size: 0.78em;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  display: block;
  margin-bottom: 14px;
  text-transform: lowercase;
}

.reveal-bridge {
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-900);
  margin: 0;
  font-weight: 500;
}
.reveal-quiet {
  display: inline-block;
  margin-top: 6px;
  color: var(--ink-500);
  font-style: italic;
  font-weight: 400;
  font-family: var(--serif);
  font-size: 0.92em;
}


/* =========================================================================
   MOMENT 3 — A GLIMPSE
   The phone mockup, framed quietly. Like seeing someone at the range.
   ========================================================================= */

/* Glimpse is now a dark section — phone mockup glows against the depth.
   Amber radial accent gives it its own identity (vs Whisper's green
   accent and Close's amber centre-burst). */
.glimpse {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 70% 50% at 30% 40%,
      rgba(251, 191, 36, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 40% at 80% 70%,
      rgba(74, 222, 128, 0.05) 0%,
      transparent 60%
    ),
    var(--night);
  color: var(--ink-100);
}

/* Redundant — gradient lives directly on the section */
.glimpse-bg {
  display: none;
}

/* Re-tone the Glimpse copy so it reads on the dark background */
.glimpse-line {
  color: rgba(230, 233, 231, 0.85);
}
.glimpse-aside {
  color: var(--green-300);
}

/* Block layout — flex would size the carousel to its content width
   (~1400px) instead of the container, breaking overflow-x scrolling.
   Block container lets the carousel naturally fill 100% of parent. */
.glimpse-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.glimpse-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  text-align: center;
}

/* =========================================================================
   GLIMPSE CAROUSEL — horizontal scroll-snap with one panel per VP
   ========================================================================= */

.carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  -webkit-overflow-scrolling: touch;
  padding: 10px 24px 14px;
  /* Hide scrollbar across browsers */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-panel {
  flex: 0 0 auto;
  width: clamp(280px, 82vw, 340px);
  scroll-snap-align: start;
  /* Force the carousel to stop at each panel — prevents momentum scrolling
     from skipping panels or leaving the user in a mid-state between two. */
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panel-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panel-title {
  margin: 12px 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--ink-100);
  text-align: center;
}

.panel-caption {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(230, 233, 231, 0.65);
  max-width: 280px;
  margin: 0;
  text-align: center;
}

/* Desktop: one full panel at a time with phone+text side-by-side.
   Panel is wide (~820px) to feel like a single "page" in the carousel,
   leaving a small ~50px peek of the next panel as scroll affordance. */
@media (min-width: 800px) {
  .carousel-panel {
    width: 820px;
    flex-direction: row;
    align-items: center;
    gap: 64px;
    padding: 16px 24px;
  }

  .carousel-panel .phone-wrap {
    flex-shrink: 0;
  }

  .panel-text {
    align-items: flex-start;
    text-align: left;
    flex: 1;
    max-width: 420px;
  }

  .panel-title {
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 1.15;
    text-align: left;
  }

  .panel-caption {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(230, 233, 231, 0.75);
    max-width: 380px;
    text-align: left;
  }
}

/* Carousel position indicator dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(230, 233, 231, 0.25);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dots .dot:hover {
  background: rgba(230, 233, 231, 0.5);
}
.carousel-dots .dot.active {
  background: var(--green-400);
  transform: scale(1.2);
}


/* =========================================================================
   MOCKUP COMPONENTS — content for the phone screens in each panel
   ========================================================================= */

/* Scenario card (panel 1: drills with real pressure) */
.scenario-card {
  margin-top: 8px;
  padding: 12px 14px 14px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(10, 30, 18, 0.07);
}
.scenario-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.scenario-sub {
  font-size: 11px;
  color: var(--ink-500);
  margin-bottom: 10px;
}
.scenario-progress {
  display: flex;
  gap: 5px;
}
.pip {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #e4ebe6;
}
.pip.on {
  background: linear-gradient(90deg, var(--green-400), var(--green-600));
}

/* Journey mock card (panel 2: play a hole) */
.journey-mock {
  margin-top: 8px;
  padding: 12px 14px 12px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(10, 30, 18, 0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey-mock-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.journey-mock-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-900);
}
.journey-mock-sub {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}
.journey-mock-pill {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.journey-mock-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #f5f7f5;
  border-radius: 8px;
}
.journey-mock-row {
  display: flex;
  gap: 4px;
}
.journey-mock-node {
  flex: 1;
  text-align: center;
  font-size: 9px;
  padding: 5px 4px;
  border-radius: 5px;
  font-weight: 600;
  background: white;
  color: var(--ink-500);
  border: 1px solid #e4ebe6;
}
.journey-mock-node.target {
  background: linear-gradient(180deg, var(--green-400), var(--green-600));
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

/* Journal mock (panel 4: yardage book) */
.journal-screen {
  background: linear-gradient(180deg, #f7fbf6 0%, #eaf4ea 100%);
}
.journal-mock {
  background: white;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(10, 30, 18, 0.07);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.journal-mock-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green-700);
  text-transform: uppercase;
}
.journal-mock-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.journal-mock-entry {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
  font-style: italic;
}
.journal-mock-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #e4ebe6;
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-500);
}
.journal-mock-stat {
  display: flex;
  justify-content: space-between;
}
.journal-mock-trend {
  color: var(--green-700);
  font-weight: 600;
}

/* Mobile carousel: only padding tweaks, panel size handled by clamp() */
@media (max-width: 720px) {
  .carousel {
    gap: 16px;
    padding: 20px 22px 32px;
    scroll-padding-left: 22px;
  }
}

/* Phone mockup — kept simple, atmospheric */
.phone-wrap {
  display: flex;
  justify-content: center;
  perspective: 1600px;
  margin-bottom: 56px;
}

.phone {
  position: relative;
  width: 280px;
  height: 460px;
  background: linear-gradient(160deg, #0d1b14 0%, #142a20 100%);
  border-radius: 42px;
  padding: 12px;
  box-shadow: var(--shadow-deep);
  transform: rotate(-2deg);
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #000;
  border-radius: 18px;
  z-index: 2;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(180deg, #f7fbf6 0%, #eaf4ea 100%);
  overflow: hidden;
  padding: 50px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-bubble {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(10, 30, 18, 0.07);
}
.chat-bubble .bubble-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2px;
}
.chat-bubble.caddie {
  background: white;
  color: var(--ink-900);
  align-self: flex-start;
  border-top-left-radius: 5px;
}
.chat-bubble.user {
  background: linear-gradient(180deg, var(--green-500), var(--green-600));
  color: white;
  align-self: flex-end;
  border-top-right-radius: 5px;
}
.chat-bubble.user .bubble-label { color: rgba(255, 255, 255, 0.85); }

.mic-orb {
  margin-top: auto;
  align-self: center;
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mic-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.22);
  animation: pulse 2.6s ease-out infinite;
}
.mic-pulse.delay { animation-delay: 1.3s; }
.mic-core {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--green-400), var(--green-600));
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.45);
}
@keyframes pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.6);  opacity: 0;   }
}

.glimpse-aside {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--green-800);
  margin: 0;
  max-width: 480px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}


/* =========================================================================
   MOMENT 4 — THE PROMISE
   Two lines. Big. Held in space.
   ========================================================================= */

.promise {
  padding: 200px 0;
  position: relative;
  /* background applied via the unified .light-section rule */
}

.promise .container {
  max-width: 800px;
  text-align: center;
}

.promise-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink-950);
  margin: 0 0 16px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.promise-line-2 {
  font-style: italic;
  color: var(--green-700);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  margin: 0;
}


/* =========================================================================
   QUIET CLOSE — WAITLIST
   No CTA pressure. An invitation.
   ========================================================================= */

.close {
  background: var(--night);
  color: var(--paper);
  padding: 160px 0 140px;
  position: relative;
  overflow: hidden;
}
.close::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(251, 191, 36, 0.12) 0%,
    transparent 60%);
  pointer-events: none;
}

.close-inner {
  max-width: 560px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.close-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-300);
  margin: 0 0 24px;
}

.close-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.close-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 19px);
  color: rgba(230, 233, 231, 0.65);
  margin: 0 0 44px;
}

.close-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  max-width: 440px;
  margin: 0 auto 18px;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.close-form:focus-within {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.close-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--paper);
  padding: 10px 4px;
  font-size: 16px;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.close-form input::placeholder {
  color: rgba(230, 233, 231, 0.4);
}
.close-form input:disabled {
  color: var(--amber-300);
  font-style: italic;
}

.close-form button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, var(--amber-400), var(--amber-600));
  color: white;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}
.close-form button:hover:not(:disabled) {
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5);
}
.close-form button:disabled {
  background: var(--green-600);
  box-shadow: none;
  cursor: default;
}

.close-fineprint {
  font-size: 13px;
  color: rgba(230, 233, 231, 0.45);
  font-style: italic;
  font-family: var(--serif);
  margin: 0;
}


/* =========================================================================
   FOOTER — almost not there
   ========================================================================= */

.footer {
  background: var(--night);
  color: rgba(230, 233, 231, 0.5);
  padding: 28px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-name {
  color: rgba(230, 233, 231, 0.75);
  font-weight: 500;
  font-size: 14px;
}

.footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.footer-meta a {
  transition: color 0.15s ease;
}
.footer-meta a:hover {
  color: var(--paper);
}
.footer-dot {
  color: rgba(230, 233, 231, 0.25);
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet and below — radical simplification: on portrait screens we
   drop the photograph entirely and let the cinematic typography breathe
   on the warm cream background alone. Desktop and mobile now serve
   intentionally different aesthetics: desktop is editorial split-layout
   with the photo, mobile is pure literary typography. Both are deliberate. */
@media (max-width: 900px) {
  .hero {
    display: block;
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    /* background-color: var(--paper-2) inherited from base .hero rule */
  }

  /* Hide the photograph entirely — mobile gets a typography-only stage */
  .hero-image {
    display: none;
  }

  /* Copy is the only thing in flow now (replay + look-closer are absolute).
     Centered vertically so scene + question + reveal read as one
     typographic composition — like a film title card. */
  .hero-copy {
    position: relative;
    z-index: 1;
    padding: 100px 28px 100px;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
  }
}

@media (max-width: 720px) {
  .nav { padding: 18px 22px; }
  .container { padding: 0 22px; }

  /* Hero already redefined in 900px breakpoint — just refine padding */
  .hero-copy { padding: 100px 22px 80px; }
  .hero-question { margin-bottom: 12px; }

  .whisper { padding: 100px 0; }
  .whisper .container { padding: 0 28px; }

  .name-reveal { padding: 110px 0 100px; }
  .reveal-def { margin-bottom: 40px; }

  .glimpse { padding: 50px 0; }
  .glimpse-line { margin-bottom: 14px; }
  .phone { width: 240px; height: 440px; }

  .promise { padding: 130px 0; }

  .close { padding: 110px 0 90px; }
  .close-form { max-width: 100%; }

  .footer-inner { flex-direction: column; gap: 14px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  /* Skip the cinematic sequence — show the final composition immediately.
     The scene stays visible in compact form (set via JS), the question
     and link appear at full opacity, no rotation or transitions run. */
  .scene { transition: none; }
  .scene-line { transition: none; }
  .scene-line, .trail span { opacity: 1; animation: none; transform: none; }
  .hero-question, .hero-link { opacity: 1; animation: none; }
  .hero-question .answer { transition: none; }
  .mic-pulse, .link-arrow { animation: none; }
}

/* =========================================================================
   LEGAL PAGES — privacy.html, imprint.html
   Static, low-key reading layout. Reuses the global nav + footer.
   No hero, no animations, narrower column for body text.
   ========================================================================= */
.legal-page {
  /* Push content below the fixed nav. */
  padding-top: 96px;
  padding-bottom: 80px;
  background: var(--paper-2);
  min-height: calc(100vh - 200px);
}

.legal-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}
.legal-back:hover { color: var(--ink-900); }
.legal-back .back-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.legal-back:hover .back-arrow { transform: translateX(-3px); }

.legal-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 12px;
}

.legal-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  margin: 0 0 8px;
}

.legal-subtitle {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-500);
  margin: 0 0 48px;
}

.legal-section + .legal-section {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid rgba(20, 32, 26, 0.08);
}

.legal-lang {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 24px;
}

.legal h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 36px 0 12px;
}
.legal h2:first-child { margin-top: 0; }

.legal h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  margin: 24px 0 6px;
}

.legal p,
.legal li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
}

.legal p { margin: 0 0 14px; }

.legal ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.legal li { margin-bottom: 6px; }

.legal a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: rgba(21, 128, 61, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.legal a:hover {
  text-decoration-color: var(--green-700);
}

.legal-address {
  font-style: normal;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 14px;
}

.legal-meta {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 32, 26, 0.08);
  font-size: 13px;
  color: var(--ink-400);
}

@media (max-width: 640px) {
  .legal-page {
    padding-top: 80px;
    padding-bottom: 60px;
  }
  .legal-section + .legal-section {
    margin-top: 44px;
    padding-top: 44px;
  }
  .legal h2 { font-size: 20px; }
}

/* =========================================================================
   LOCK MODE — pre-launch teaser blur.
   Activated by adding class="locked" to <body>.
   Blurs the <main> content, dims interactivity, shows a centred "coming
   soon" veil. Header + footer remain sharp and fully usable.
   To disable: remove class="locked" from <body> and the .lock-veil block,
   plus the inert attribute from <main>. Three edits in index.html.
   ========================================================================= */
body.locked main {
  filter: blur(16px) saturate(0.7);
  user-select: none;
  -webkit-user-select: none;
  /* Keep scroll working (filter doesn't break scroll); inert attr on the
     element itself prevents tab focus + clicks. */
}

body.locked .hero-image img {
  /* Image is already part of main and gets blurred via inheritance, but
     bumping the blur slightly avoids a faint sharp edge artefact on iOS
     Safari from the photo's high-frequency detail. */
  filter: blur(2px);
}

.lock-veil {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 15;                   /* above main (default), below nav (z=20) */
  padding: 0 24px;
  pointer-events: none;          /* let scroll pass through the empty area */
}

/* Re-enable interaction only on the actual text/links inside the veil. */
.lock-veil > * { pointer-events: auto; }

.lock-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 18px;
}

.lock-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 9vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink-950);
  margin: 0 0 18px;
}

.lock-sub {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0 0 28px;
  max-width: 380px;
}

.lock-link {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: rgba(21, 128, 61, 0.4);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}
.lock-link:hover {
  text-decoration-color: var(--green-700);
}

@media (max-width: 480px) {
  body.locked main { filter: blur(12px) saturate(0.7); }
  .lock-sub { font-size: 14px; }
}