/*
 * White Tiger journey overlays (styles for wt-overlays.js).
 *
 * A product-film readout laid over the journey: mono micro-labels with a stop index ("02 / 08"),
 * hairline rules, one big confident line per beat, flavour-accent glow on the details only.
 * Copy lives in the lower third / start edge so the can label in the centre stays clear.
 *
 * Motion model: wt-overlays.js writes --e (0..1, the stop envelope) on each beat. Each line has an
 * index --i; --t is that line's staggered share of --e. Everything below is calc() on --t:
 *   mask wipe (clip-path), 16px rise, letter-spacing settling from wide to rest, opacity.
 * The same curve runs backwards on exit, so reveal and exit are symmetric and scroll-scrubbed.
 * Reduced motion keeps only the opacity.
 */

.wt-ov {
  --ov-accent: #7fb2ff;
  --ov-glow: #4d8dff;
  --ov-display: 'Space Grotesk', system-ui, sans-serif;
  --ov-display-case: none;
  --ov-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ov-wide: 'Archivo', 'Space Grotesk', system-ui, sans-serif; /* heavy wide headline face */
  --ov-sans: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --ov-gutter: clamp(20px, 5vw, 72px);
  /* Clears the HUD's bottom bar (PREV / rail / NEXT). */
  --ov-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(76px, 11vh, 120px));
  --ov-dim: rgba(255, 255, 255, 0.72);

  position: fixed;
  inset: 0;
  z-index: 25; /* above the canvas and backgrounds, below the HUD (30) */
  pointer-events: none;
  color: #fff;
  font-family: var(--ov-sans);
}

/* ─── Legibility scrim: a soft pool under the lower third, never a bar ─── */

.wt-ov-scrim {
  position: absolute;
  inset: auto 0 0 0;
  block-size: 58vh;
  background:
    radial-gradient(90% 80% at 50% 100%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 80%);
  opacity: 0; /* driven from wt-overlays.js */
  visibility: hidden;
}

/* ─── Beats ─── */

.wt-ov-beat {
  position: absolute;
  inset-block-end: var(--ov-bottom);
  inset-inline-start: var(--ov-gutter);
  max-inline-size: min(600px, calc(100vw - 2 * var(--ov-gutter)));
  visibility: hidden;
  --e: 0;
}

/* Centred beats (the mark, release, return): horizontally centred, still in the lower third. */
.wt-ov-beat.is-trait,
.wt-ov-beat.is-cta {
  inset-inline: var(--ov-gutter);
  max-inline-size: none;
  text-align: center;
}
.wt-ov-beat.is-trait .wt-ov-meta,
.wt-ov-beat.is-cta .wt-ov-meta { justify-content: center; }

/* Every animated line: staggered share of the envelope, then wipe + rise + tracking settle. */
.wt-ov-line {
  --i: 0;
  --d: calc(var(--i) * 0.14);
  --t: clamp(0, calc((var(--e, 0) - var(--d)) / (1 - var(--d))), 1);
  --track: 0em;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 16px));
  letter-spacing: calc(var(--track) + (1 - var(--t)) * 0.18em);
  /* The reveal wipe. The slack (--glow-room) must hold the drop-shadow glows (up to ~40px): with
     0.4em the glow was cut, and at rest the reveal edge sat exactly on the text box, slicing the
     glow with a hard vertical line. At t = 1 every side now has the full room. */
  --glow-room: 80px;
  clip-path: inset(calc(-1 * var(--glow-room))
    calc((1 - var(--t)) * (100% + var(--glow-room)) - var(--glow-room))
    calc(-1 * var(--glow-room)) calc(-1 * var(--glow-room)));
  margin: 0;
}
[dir='rtl'] .wt-ov-line {
  clip-path: inset(calc(-1 * var(--glow-room)) calc(-1 * var(--glow-room)) calc(-1 * var(--glow-room))
    calc((1 - var(--t)) * (100% + var(--glow-room)) - var(--glow-room)));
}

/* ─── Readout row: 02 / 08 ── CHAPTER ─── */

.wt-ov-meta {
  --track: 0.28em;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 14px;
  font-family: var(--ov-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ov-dim);
  white-space: nowrap;
}
.wt-ov-index {
  color: var(--ov-accent);
  text-shadow: 0 0 12px var(--ov-glow);
}
.wt-ov-rule {
  inline-size: 36px;
  block-size: 1px;
  flex: none;
  background: linear-gradient(90deg, var(--ov-accent), rgba(255, 255, 255, 0.25));
  box-shadow: 0 0 8px var(--ov-glow);
}
.wt-ov-chapter {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Type ─── */

/* Traits and the CTA: the flavour's own display face, big and short. */
/* Punchlines (the mark, release, CTA, the hook): big, bold, clean white with the key words
   (.wt-ov-hl, from *starred* copy) filled with the flavour gradient: white-hot to accent to glow,
   clipped to the letters, with a glow. */
.wt-ov-display,
.wt-ov-headline {
  font-weight: 800;
  text-wrap: balance;
  color: #fff;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55));
}
.wt-ov-hl {
  color: var(--ov-accent);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ov-accent) 35%, #fff) 0%,
    var(--ov-accent) 45%,
    var(--ov-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--ov-glow) 55%, transparent));
}
/* In running copy the highlight is lighter: accent colour, same weight bump, no gradient. */
.wt-ov-body .wt-ov-hl {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ov-accent);
  font-weight: 600;
  filter: none;
}
.wt-ov-display {
  --track: -0.01em;
  font-family: var(--ov-display);
  text-transform: var(--ov-display-case);
  font-size: clamp(40px, 9vw, 104px);
  line-height: 0.98;
}

/* The hook: a confident multi-line statement. */
.wt-ov-headline {
  --track: -0.015em;
  font-size: clamp(32px, 6vw, 68px);
  line-height: 1.04;
}

/* The turn: running copy, kept narrow for reading. */
.wt-ov-body {
  max-inline-size: 38ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
  padding-inline-start: 16px;
  border-inline-start: 1px solid color-mix(in srgb, var(--ov-accent) 70%, transparent);
}

/* ─── Ingredients: label + big figure + unit ─── */

.wt-ov-fact-label {
  --track: 0.32em;
  font-family: var(--ov-mono);
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ov-accent);
  text-shadow: 0 0 14px var(--ov-glow), 0 1px 10px rgba(0, 0, 0, 0.8);
  margin-block-end: 4px;
}
.wt-ov-fact-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 14px;
}
/* The figure is the hero of the beat: huge, heavy, filled with the flavour gradient and glowing. */
.wt-ov-figure {
  font-size: clamp(76px, 19vw, 176px);
  line-height: 1.02;
  padding-block-end: 0.12em; /* room for descenders: the gradient fill is clipped to this box */
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ov-accent);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--ov-accent) 30%, #fff) 0%,
    var(--ov-accent) 50%,
    var(--ov-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px color-mix(in srgb, var(--ov-glow) 50%, transparent));
}
.wt-ov-unit {
  font-family: var(--ov-mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.78);
}
/* Long text values (vitamins, flavour names) step down so they stay on one or two lines. */
.wt-ov-fact-value:has(.wt-ov-figure:only-child) .wt-ov-figure {
  font-size: clamp(40px, 9vw, 96px);
  line-height: 1;
}
/* The ingredient punchline: bold white with its key word in the flavour gradient (.wt-ov-hl). */
.wt-ov-fact-line {
  --track: -0.01em;
  margin-block-start: 10px;
  max-inline-size: 22ch;
  font-size: clamp(22px, 5.4vw, 38px);
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.6));
}

/* "Inside the can": the ingredient section's title card, top centre, clear of the label. */
.wt-ov-header {
  position: absolute;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + clamp(70px, 9vh, 96px));
  inset-inline-start: var(--ov-gutter);
  visibility: hidden;
  --e: 0;
}
.wt-ov-header-tag {
  --track: 0.28em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--ov-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ov-accent);
  text-shadow: 0 0 12px var(--ov-glow);
}
.wt-ov-header-tag .wt-ov-rule { inline-size: 22px; }
/* Heavy, wide, all-caps: the product-film headline voice. */
.wt-ov-header-title {
  --track: -0.01em;
  margin: 0;
  font-family: var(--ov-wide);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(34px, 9vw, 76px);
  line-height: 0.9;
  text-transform: uppercase;
  color: #fff;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.6));
}

/* ─── Ingredient beats: stat top-right, detail card at the bottom ─── */
.wt-ov-beat.is-fact {
  inset: 0;
  max-inline-size: none;
}
.wt-ov-stat {
  position: absolute;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + clamp(70px, 9vh, 96px));
  inset-inline-end: var(--ov-gutter);
  text-align: end;
}
.wt-ov-stat-figure {
  --track: -0.03em;
  margin: 0;
  font-family: var(--ov-wide);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(28px, 7vw, 60px); /* long text values (vitamins, flavours); numbers are larger below */
  line-height: 1.02;
  max-inline-size: 11ch;
  margin-inline-start: auto;
  padding-block-end: 0.08em;
  color: var(--ov-accent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--ov-accent) 30%, #fff) 0%, var(--ov-accent) 55%, var(--ov-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--ov-glow) 55%, transparent));
}
.wt-ov-beat.is-fact:has(.wt-ov-stat-caption span) .wt-ov-stat-figure { font-size: clamp(48px, 14vw, 120px); }
.wt-ov-stat-caption {
  --track: 0.24em;
  margin: 2px 0 0;
  font-family: var(--ov-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.wt-ov-stat-caption span { color: var(--ov-accent); }
.wt-ov-card {
  position: absolute;
  inset-inline: var(--ov-gutter);
  inset-block-end: var(--ov-bottom);
  padding-block-start: 14px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
}
.wt-ov-card-title {
  --track: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 6px;
  font-family: var(--ov-wide);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(20px, 5vw, 34px);
  text-transform: uppercase;
  color: #fff;
}
.wt-ov-card-index {
  font-family: var(--ov-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--ov-accent);
}
.wt-ov-card-line {
  --track: 0.01em;
  margin: 0 0 14px;
  max-inline-size: 34ch;
  font-size: clamp(15px, 3.6vw, 20px);
  line-height: 1.35;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}
.wt-ov-card-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.wt-ov-card-bar span {
  block-size: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.wt-ov-card-bar span.is-on {
  background: var(--ov-accent);
  box-shadow: 0 0 10px var(--ov-glow);
}

/* CTA arrow: a hairline shaft with a glowing head. */
.wt-ov-arrow {
  display: inline-block;
  inline-size: 0.9em;
  block-size: 1px;
  margin-inline-start: 0.35em;
  vertical-align: 0.3em;
  background: var(--ov-accent);
  box-shadow: 0 0 10px var(--ov-glow);
  position: relative;
}
.wt-ov-arrow::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -4px;
  inline-size: 8px;
  block-size: 8px;
  border-block-start: 1px solid var(--ov-accent);
  border-inline-end: 1px solid var(--ov-accent);
  transform: rotate(45deg);
}
[dir='rtl'] .wt-ov-arrow::after { transform: rotate(-135deg); }

/* Screen-reader channel for the landed beat. */
.wt-ov-live {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ─── Small screens: tighter, everything bottom-anchored ─── */

@media (max-width: 600px) {
  .wt-ov { --ov-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .wt-ov-meta { font-size: 9.5px; gap: 10px; }
  .wt-ov-rule { inline-size: 24px; }
  .wt-ov-body { font-size: 14px; line-height: 1.55; }
  /* The can fills a phone frame, so the copy always sits over it: a deeper pool from the bottom. */
  .wt-ov-scrim {
    block-size: 62vh;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.74) 38%, rgba(0, 0, 0, 0) 100%);
  }
}

/* ─── Reduced motion: opacity only ─── */

@media (prefers-reduced-motion: reduce) {
  .wt-ov-line {
    transform: none;
    letter-spacing: var(--track);
    clip-path: none;
  }
}

/* Below wide desktop the headline takes most of the width, so the stat drops beneath it. */
@media (max-width: 1100px) {
  .wt-ov-stat {
    inset-block-start: calc(env(safe-area-inset-top, 0px) + clamp(70px, 9vh, 96px) + clamp(92px, 21vw, 150px));
  }
  .wt-ov-beat.is-fact:has(.wt-ov-stat-caption span) .wt-ov-stat-figure { font-size: clamp(44px, 13vw, 84px); }
}

/* ─── Uniform step design (MotionLab "ghost word + headline + sub") ─── */

/* Every stop: a centred block in the lower third: numbered tag, short bold headline with its key
   word in the flavour gradient (.wt-ov-hl), and one supporting line. */
.wt-ov-beat.is-step {
  inset-inline: var(--ov-gutter);
  inset-block-end: var(--ov-bottom);
  max-inline-size: none;
  text-align: center;
}
.wt-ov-tag {
  --track: 0.26em;
  margin: 0 0 10px;
  font-family: var(--ov-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ov-accent);
  text-shadow: 0 0 12px var(--ov-glow), 0 1px 8px rgba(0, 0, 0, 0.8);
}
.wt-ov-step-title {
  --track: -0.02em;
  margin: 0 auto 8px;
  max-inline-size: 16ch;
  font-size: clamp(34px, 8.5vw, 72px);
  line-height: 1;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.6));
}
.wt-ov-step-sub {
  --track: 0;
  margin: 0 auto;
  max-inline-size: 34ch;
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* Ghost words: one giant outlined word per stop, behind the can (the layer sits under the WebGL
   canvas), softly blurred and tinted with the flavour accent. Opacity follows the stop envelope. */
.wt-ghost {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.wt-ghost-word {
  position: absolute;
  top: 44%;
  left: 50%;
  margin: 0;
  translate: -50% -50%;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(120px, 34vw, 380px);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--wt-backlight, #7fb2ff) 55%, transparent);
  filter: blur(3px); /* a soft 10%-ish blur so the word reads as background, never competing with the can */
  opacity: 0;
  visibility: hidden;
  scale: calc(0.94 + var(--e, 0) * 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .wt-ghost-word { scale: 1; }
}

/* Phones: the ghost words are rebuilt on every flavour switch, and a CSS blur on giant text is
   re-rasterised each time; unblurred outlines read the same behind the can at no cost. */
@media (pointer: coarse) {
  .wt-ghost-word {
    filter: none;
  }
}