/* ============================================================
   Hero — full-width analog slider replacing the hairline rule
   between the headline and the meta grid. Ported from the local
   Next.js portfolio's tuning slider (web/app/components/
   HeroHeadline.tsx + globals.css).
   ============================================================ */

/* 1. Reduce hero top padding by 50px from the original
      clamp(80px, 14vh, 160px). */
.hero {
  padding-top: clamp(40px, calc(14vh - 50px), 110px);
}

/* Tighten the gap between the eyebrow and the headline. */
.hero-eyebrow {
  margin-bottom: 24px;
}

/* Shrink the hero headline by 10% (was clamp(48px, 7.4vw, 116px) via
   .t-display in styles.css). */
.hero-statement {
  font-size: clamp(43.2px, 6.66vw, 104.4px);
}

/* "obvious" — each of the 7 letters lights up sequentially as the
   slider moves right. Letter index `--n` (0..6) sets the threshold:
   letter n stays gray until --slider-pct passes n*14.28, then
   transitions to slider-green by (n+1)*14.28. */
.hero-statement .accent .obvious-key > span {
  color: color-mix(
    in srgb,
    var(--fg),
    var(--signal) clamp(
      0%,
      calc((var(--slider-pct, 0) - var(--n) * 14.285) * 7%),
      100%
    )
  );
  transition: color 280ms cubic-bezier(0, 0, 0.3, 1);
}

/* 2. Drop the hairline above the meta grid — the slider now plays
      that role as the divider. Padding-top tightened by 10px to
      pull the meta block closer to the slider. Negative margins
      let the grid bleed past the wrap's gutter so the row spans
      the full container, while inner padding keeps the cells
      breathing from the viewport edge.

      Layout: BASED / NOW / EMAIL share the available space (each
      gets 1fr) while ELSEWHERE hugs its content and sits at the end.
      Each cell stays left-aligned within its slot. */
.hero-meta-grid {
  border-top: 0;
  padding-top: 26px;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  grid-template-columns: 1fr 1fr 1fr auto;
}
.hero-meta-grid > .hero-meta {
  grid-column: auto;
}

/* Nav brand: hide the trailing " · " separator when no .brand-sub
   follows (i.e. on the home view). */
.brand:not(:has(.brand-sub)) .brand-mark::after {
  content: "";
}

/* 3. Slider container — full container width, sits between the h1
      and the meta grid. */
.hero-slider {
  --ink:    var(--fg);
  --accent: var(--signal);
  --ease:   cubic-bezier(0.2, 0, 0, 1);
  --dur:    180ms;
  width: 100%;
  margin: 16px 0 8px;
}

.hero-tuner {
  position: relative;
  width: calc(100% - 76px);
  margin: 0 auto;
  height: 108px;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  outline: none;
}
.hero-tuner:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 8px;
  border-radius: 999px;
}

.hero-tuner-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #D6D9F0 0%, #E6E8F6 100%);
}
.hero-tuner-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px 0 0 999px;
  will-change: width, background;
  transition:
    width 620ms cubic-bezier(0.4, 0, 0.2, 1),
    background 620ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-tuner-handle {
  --handle-w: 76px;
  --handle-h: 52px;
  position: absolute;
  top: 50%;
  width: var(--handle-w);
  height: var(--handle-h);
  /* translate(-50%, -50%) centers the handle on its `left` percentage so
     the JSX can just set `left: ${value*100}%` and CSS can resize the
     handle responsively without breaking the centering math. */
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
  z-index: 10;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16))
          drop-shadow(0 6px 11px rgba(0, 0, 0, 0.11))
          drop-shadow(0 12px 22px rgba(0, 0, 0, 0.07));
  transition:
    transform 160ms var(--ease),
    filter 160ms var(--ease),
    left 620ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-tuner-handle svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-tuner-handle .hero-tuner-handle-svg { position: absolute; inset: 0; }
.hero-tuner-handle .hero-tuner-handle-svg--light { display: block; }
.hero-tuner-handle .hero-tuner-handle-svg--dark  { display: none; }
[data-theme="dark"] .hero-tuner-handle .hero-tuner-handle-svg--light { display: none; }
[data-theme="dark"] .hero-tuner-handle .hero-tuner-handle-svg--dark  { display: block; }

.hero-tuner.is-dragging .hero-tuner-handle,
.hero-tuner.is-dragging .hero-tuner-track-fill {
  transition: none;
}
.hero-tuner.is-dragging .hero-tuner-handle {
  transform: translate(-50%, -50%) translateY(2px) scale(0.99);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16))
          drop-shadow(0 3px 6px rgba(0, 0, 0, 0.10))
          drop-shadow(0 7px 13px rgba(0, 0, 0, 0.06));
}
[data-theme="dark"] .hero-tuner-handle {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55))
          drop-shadow(0 6px 11px rgba(0, 0, 0, 0.40))
          drop-shadow(0 12px 22px rgba(0, 0, 0, 0.30));
}

/* Guide ticks — 3 above / 3 below at 25, 50, 75% */
.hero-tuner-guides {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  z-index: 1;
}
.hero-tuner-guides--top    { top: calc(50% - 22px); }
.hero-tuner-guides--bottom { top: calc(50% + 12px); }

.hero-tuner-guide {
  position: absolute;
  width: 1px;
  transform: translateX(-50%);
  border-radius: 0;
}
.hero-tuner-guide--center { height: 10px; background: #C9CBD0; }
.hero-tuner-guide--side   { height: 10px; background: #C9CBD0; }
.hero-tuner-guides--top    .hero-tuner-guide { bottom: 0; }
.hero-tuner-guides--bottom .hero-tuner-guide { top: 0; }
[data-theme="dark"] .hero-tuner-guide--center { background: #5a5a5a; }
[data-theme="dark"] .hero-tuner-guide--side   { background: #5a5a5a; }

/* ============================================================
   Responsive — tablet & mobile
   The hero is the page's first impression; on smaller viewports the
   headline, slider, and meta grid all need to scale together so the
   keycap stays proportional to the headline instead of dominating it.
   ============================================================ */

/* Tablet (≤900px): headline still allowed up to ~64px; handle ~62×42px;
   meta grid drops from 4 columns to 2. */
@media (max-width: 900px) {
  .hero {
    padding-top: clamp(56px, 8vh, 96px);
  }
  .hero-statement {
    font-size: clamp(40px, 6.4vw, 64px);
  }
  .hero-tuner {
    width: calc(100% - 62px);
    height: 96px;
  }
  .hero-tuner-handle {
    --handle-w: 62px;
    --handle-h: 42px;
  }
  .hero-meta-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: 32px;
  }
}

/* Mobile (≤560px): headline floored at 32px so the three short lines
   fit without dwarfing the page; slider handle shrinks to 50×34px so
   it reads as a control, not a brick; meta grid stacks to one column
   for legibility (matches the 12-col rule in styles.css that was being
   overridden). */
@media (max-width: 560px) {
  .hero {
    padding-top: clamp(40px, 6vh, 64px);
  }
  .hero-eyebrow {
    margin-bottom: 20px;
  }
  .hero-statement {
    font-size: clamp(32px, 8.8vw, 44px);
    margin-bottom: 40px;
  }
  .hero-slider {
    margin: 8px 0 4px;
  }
  .hero-tuner {
    width: calc(100% - 50px);
    height: 80px;
  }
  .hero-tuner-handle {
    --handle-w: 50px;
    --handle-h: 34px;
  }
  /* Track is thinner on mobile so the slimmer keycap still reads as
     the heavier element on the bar. */
  .hero-tuner-track {
    height: 6px;
  }
  .hero-tuner-guides--top    { top: calc(50% - 18px); }
  .hero-tuner-guides--bottom { top: calc(50% + 10px); }
  .hero-tuner-guide--center,
  .hero-tuner-guide--side    { height: 8px; }

  .hero-meta-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding-top: 20px;
  }
}