/* ─── FONTS ─── */

@font-face {
  font-family: 'Greed';
  src: url('fonts/GreedCollectionVF-TRIAL.woff2') format('woff2-variations'),
       url('fonts/GreedCollectionVF-TRIAL.ttf')   format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* ─── RESET ─── */

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

/* ─── TOKENS ─── */

:root {
  /* surfaces */
  --bg-primary:   #fff6eb;
  --bg-surface:   #fffaf5;

  /* foreground */
  --fg-primary:   #041106;
  --fg-on-dark:   #fffaf5;
  --fg-invert-secondary: rgba(255,255,255,0.7);
  --fg-invert-tertiary:  rgba(255,255,255,0.5);

  /* brand */
  --brand-primary:    #145d24; /* forest */
  --brand-secondary:  #ea5910; /* orange */
  --brand-tertiary:   #00e7ff; /* cyan */
  --brand-quaternary: #f3de2b; /* yellow */

  /* shape */
  --radius-card:   16px;
  --radius-tile:    8px;
  --radius-pill:  999px;
  --border-solid: 1px solid var(--fg-primary);
  --border-thick: 2px solid var(--fg-primary);

  /* shadow (neo-brutalist solid drop) */
  --shadow-md:    0 4px 0 0 var(--fg-primary);
  --shadow-lg:    0 8px 0 0 var(--fg-primary);

  /* layout */
  --pad-x: clamp(24px, 11.1vw, 160px);

  /* paper texture overlay applied sitewide */
  --paper-texture: url('images/bg_opt.webp');
}

/* ─── BASE ─── */

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
  /* Scroll-snap: gentle 'proximity' so scrub still feels free. When the
     user stops scrolling near a snap point (section boundary or marker),
     the browser eases to it. ScrollTrigger reads the same scroll
     position so animations land on a clean rest state. */
  scroll-snap-type: y proximity;
}

/* Each top-level section snaps to viewport top. Pinned wrappers (.hero-wrapper,
   .benefits-wrapper) also snap, plus inner .snap-marker dots add finer
   sub-states inside the long pinned timelines. */
.hero-wrapper,
.benefits-wrapper,
section {
  scroll-snap-align: start;
}

.snap-marker {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
  scroll-snap-align: start;
}

body {
  font-family: 'Greed', system-ui, sans-serif;
  font-stretch: 100%; /* Standard — body default */
  font-weight: 400;
  color: var(--fg-primary);
  background: var(--bg-primary);
  overflow-x: clip;
  position: relative;
}

/* Sitewide paper-texture overlay. Sits on top of all content with multiply
   blend so it tints sections, the hero image, and the wordmark uniformly —
   gives the whole page a unified printed-paper feel. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--paper-texture);
  background-size: cover;
  background-position: center;
  mix-blend-mode: darken;
  opacity: 0.85;
  z-index: 9999;
}

main, header, section { position: relative; z-index: 2; }

img { max-width: 100%; display: block; }

section {
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── HERO ─── */

.hero-wrapper {
  height: 700svh; /* 1 timeline unit = 100svh; ends ~6.4 with 60svh trailing rest */
  position: relative;
  z-index: 2;
}

.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  background: var(--bg-primary); /* cream surround for masked wordmark */
}

/* Hero image. Always full-bleed, always opacity 1 — the image is "there
   all along". A CSS mask-image (the brandmark SVG) restricts the visible
   region to the logo glyphs initially; JS grows --mask-size on scroll
   and then drops the mask entirely. The <img> never moves or zooms. */
.hero-image {
  --mask-size: 83%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: url('images/logo/twentyfive-logo-full-light.svg');
          mask-image: url('images/logo/twentyfive-logo-full-light.svg');
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: var(--mask-size) auto;
          mask-size: var(--mask-size) auto;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  will-change: mask-size, opacity;
}

/* Unmasked twin behind .hero-image. Crossfades in as the masked layer fades
   out near the end of the zoom, so the cream gaps between letterforms are
   already filled by this layer when the masked one disappears. Becomes the
   active layer for Scene 7 (scale) and Scene 8 (final fade). */
.hero-image-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Layer 3: Imagine + supporting lines overlay */
.hero-imagine {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 var(--pad-x);
  text-align: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0; /* timeline fades this in */
}

.hero-imagine-title {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;        /* Narrow */
  font-weight: 700;           /* Bold */
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-on-dark);
  margin: 0;
}

.hero-imagine-lines {
  position: relative;
  width: 100%;
  max-width: 720px;
  min-height: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-imagine-line {
  position: absolute;
  inset: 0;
  display: block;
  text-align: center;
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;         /* Standard */
  font-weight: 400;           /* Regular */
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--fg-on-dark);
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  margin: 0;
  padding-top: 1em; /* visually offset chars under the Imagine title */
}

/* ─── DISPLAY / HEADING HELPERS ─── */

.display {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;        /* Narrow */
  font-weight: 700;           /* Bold */
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fg-primary);
}

.heading {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;        /* Narrow */
  font-weight: 700;           /* Bold */
  letter-spacing: -0.02em;
  line-height: 1;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;         /* Standard */
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--brand-primary);
  color: var(--fg-on-dark);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-solid);
  box-shadow: var(--shadow-md);
}

/* ─── BENEFITS ─── */

.benefits-wrapper {
  height: 300svh; /* 3 sub-states, ~1 viewport each */
  position: relative;
  z-index: 2;
}

.benefits {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-primary);
  overflow: clip;
}

.benefits-left {
  position: relative;
  overflow: hidden;
}

.benefits-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}

.benefits-image[data-state="0"] { opacity: 1; }

.benefits-right {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 clamp(24px, 4vw, 64px);
}

.benefits-content {
  position: absolute;
  inset: 0;
  padding: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  opacity: 0;
  will-change: opacity;
}

.benefits-content[data-state="0"] { opacity: 1; }

/* Tokens from Figma — heading/xxl desktop (56/64), mobile (36/40) */
.benefits-heading {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;          /* Narrow */
  font-weight: 700;             /* Bold */
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.143;
  letter-spacing: -0.02em;      /* -2% */
  color: var(--fg-primary);
  margin: 0;
  white-space: nowrap;
}

/* Tokens from Figma — body desktop body/lg (20/28), mobile body/md (16/24) */
.benefits-body {
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;           /* Standard */
  font-weight: 400;             /* Regular */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: clamp(24px, 1.95vw, 28px);
  letter-spacing: 0;
  color: var(--fg-primary);
  margin: 0;
}

/* ─── GIFT ─── */

/* Override the global `section { height: 100svh; overflow: hidden }` so the
   gift section grows to fit phone images on shorter viewports instead of
   clipping them. On Figma-reference 911px+ heights, content already fits
   in 100svh; on shorter laptop heights, the section grows by a few dozen px. */
.gift {
  background: var(--bg-primary);
  padding: clamp(48px, 7.5vh, 68px) var(--pad-x);
  justify-content: flex-start;
  height: auto;
  min-height: 100svh;
  overflow: visible;
}

.gift-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Tokens from Figma — heading/xxl desktop (56/64), mobile (36/40) */
.gift-header h2 {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;          /* Narrow */
  font-weight: 700;             /* Bold */
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.143;
  letter-spacing: -0.02em;      /* -2% */
  color: var(--fg-primary);
  margin-bottom: 8px;
}

/* Tokens from Figma — body desktop body/lg (20/28), mobile body/md (16/24) */
.gift-header p {
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;           /* Standard */
  font-weight: 400;             /* Regular */
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: clamp(24px, 1.95vw, 28px);
  color: var(--fg-primary);
  opacity: 0.7;
  max-width: 800px;
  margin: 0 auto;
}

.gift-phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  max-width: 825px;             /* Figma mocks-wrap width */
  width: 100%;
  margin: auto auto 0;          /* push to bottom of 100svh section */
  align-items: end;
}

.gift-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                    /* Figma: caption 48 + 16 + phone */
}

.gift-phone img {
  width: 100%;
  max-width: 246px;             /* Figma phone width */
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Tokens from Figma — body/md/def (Standard Regular) */
.gift-phone-caption {
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;           /* Standard */
  font-weight: 400;             /* Regular */
  font-size: 16px;
  line-height: 24px;
  color: var(--fg-primary);
  text-align: center;
  max-width: 246px;
  margin: 0;
}

/* ─── USE CASES ─── */

.use-cases {
  background: var(--bg-primary);
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
}

.use-cases-header {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.use-cases-header .section-label { margin-bottom: 16px; }

.use-cases-header h2 {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--fg-primary);
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.use-case-card {
  background: var(--bg-surface);
  border: var(--border-solid);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.use-case-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 0 6px 0 0 var(--fg-primary);
}

.use-case-card p {
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;
  font-weight: 400;
  font-size: 14px;
  color: var(--fg-primary);
  text-align: center;
  line-height: 1.55;
}

/* ─── THE CARD ─── */

.the-card {
  background: var(--brand-primary);
  padding: 40px var(--pad-x);
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.the-card-header {
  text-align: center;
  max-width: 800px;
  width: 100%;
}

/* Tokens from Figma — heading/xxl desktop (56/64), mobile (36/40) */
.the-card-header h2 {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;          /* Narrow */
  font-weight: 700;             /* Bold */
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.143;
  letter-spacing: -0.02em;      /* -2% */
  color: var(--fg-on-dark);     /* #fffaf5 — fg/on-primary/primary */
  margin: 0;
}

.wish-cards {
  display: flex;
  flex-direction: row;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  justify-content: center;
}

.wish-card-img {
  width: 100%;
  max-width: 246px;
  height: auto;
  display: block;
}

/* ─── SIGN-OFF (CTA + copyright) ─── */

.signoff {
  background: var(--bg-primary);
  padding: 0 var(--pad-x);
  align-items: center;
  justify-content: center;
  position: relative;
}

.signoff-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 800px;
  width: 100%;
  text-align: center;
}

/* Logo: desktop 80, mobile 40 (Figma 125×40) */
.signoff-logo {
  height: clamp(40px, 5.55vw, 80px);
  width: auto;
  display: block;
}

/* Display heading: desktop 80/80, mobile 36/40 (Figma) */
.signoff-heading {
  font-family: 'Greed', sans-serif;
  font-stretch: 87.5%;       /* Narrow */
  font-weight: 700;          /* Bold */
  font-size: clamp(36px, 5.55vw, 80px);
  line-height: clamp(40px, 5.55vw, 80px);
  letter-spacing: -0.02em;   /* -2% */
  color: var(--fg-primary);
  margin: 0;
}

/* Tokens from Figma — body/lg/def (Standard Regular) */
.signoff-body {
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;        /* Standard */
  font-weight: 400;          /* Regular */
  font-size: 20px;
  line-height: 28px;
  color: var(--fg-primary);
  opacity: 0.7;
  margin: 0;
}

.signoff-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 0;
}

/* Secondary button — bg-surface to contrast against the section's bg-primary */
.signoff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 24px;
  background: var(--bg-surface);
  border: var(--border-thick);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  color: var(--fg-primary);
  text-decoration: none;
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;        /* Standard */
  font-weight: 700;          /* Bold (label/md/em — brand uses bold) */
  font-size: 16px;
  line-height: 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.signoff-btn:hover {
  transform: translate(0, 2px);
  box-shadow: 0 2px 0 0 var(--fg-primary);
  background: var(--bg-primary);
}

.signoff-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: currentColor;
}

.signoff-copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 40px 0;
  font-family: 'Greed', sans-serif;
  font-stretch: 100%;        /* Standard Regular (label/xxs/def) */
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  color: rgba(4, 17, 6, 0.5);
  margin: 0;
  pointer-events: none;
}

/* ─── RESPONSIVE ─── */

/* Tablet — 769–1024px. Sections grow if content exceeds 100svh
   (overrides global `section { height: 100svh; overflow: hidden }`). */
@media (max-width: 1024px) {
  section {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .use-cases-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — ≤768px. Reference: Figma 393×911. */
@media (max-width: 768px) {
  /* Figma mobile uses 24px horizontal padding; override the desktop clamp
     so headings/bodies hit their intended 345px width (393 − 48). */
  :root { --pad-x: 24px; }

  /* BENEFITS — drop the sticky-left grid; each subsection becomes 50svh
     image stacked over 50svh text-block, three subsections totalling 300svh.
     The GSAP scrub timeline is disabled at this breakpoint via matchMedia
     in main.js, so no inline pin/transform fights the layout. */
  .benefits-wrapper { height: auto; }
  .benefits {
    position: relative;
    height: auto;
    grid-template-columns: 1fr;
    background: transparent;
  }
  .benefits-left,
  .benefits-right { display: contents; }

  /* All three states are visible on mobile (no crossfade — they stack).
     Force opacity 1 with !important to override the default rule that
     keeps states 1+2 at opacity 0 for the desktop crossfade. */
  .benefits-image,
  .benefits-image[data-state="0"],
  .benefits-image[data-state="1"],
  .benefits-image[data-state="2"] {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    width: 100%;
    height: 50svh;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .benefits-image[data-state="0"] { order: 1; }
  .benefits-image[data-state="1"] { order: 3; }
  .benefits-image[data-state="2"] { order: 5; }

  .benefits-content,
  .benefits-content[data-state="0"],
  .benefits-content[data-state="1"],
  .benefits-content[data-state="2"] {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    height: 50svh;
    padding: 0 var(--pad-x);
    justify-content: center;
    gap: 8px;          /* Figma: 8px between heading and body */
  }
  .benefits-content[data-state="0"] { order: 2; }
  .benefits-content[data-state="1"] { order: 4; }
  .benefits-content[data-state="2"] { order: 6; }
  .benefits-heading { white-space: normal; }

  /* SplitText prep on desktop sets chars/words to yPercent 60 + opacity 0
     for states 1+2 so they stagger in via the timeline. On mobile that
     timeline never runs, so reset them to fully visible. */
  .benefits-heading > *,
  .benefits-body > * {
    opacity: 1 !important;
    transform: none !important;
  }

  /* GIFT — single column, phones 246 wide, 44px gap, body/md per Figma */
  .gift { padding: 80px var(--pad-x); }
  .gift-header { max-width: 345px; }
  .gift-phones {
    grid-template-columns: 1fr;
    max-width: 246px;
    margin: 64px auto 0;
    gap: 44px;
  }
  .gift-phone { gap: 16px; }

  /* USE CASES — single column */
  .use-cases-grid { grid-template-columns: 1fr; }

  /* THE CARD / 25card — stacked, 305 wide, 44px gap (Figma) */
  .the-card { padding: 80px var(--pad-x); }
  .wish-cards {
    flex-direction: column;
    max-width: 305px;
    gap: 44px;
    margin: 0 auto;
  }
  .wish-card-img { max-width: 305px; }

  /* SIGNOFF — buttons in 2-row layout (Figma): App store + Google Play
     in row 1, Web app centered in row 2. Flex wrap + center handles it. */
  .signoff-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
}