/* ==========================================================================
   sections/tabs-showcase.css · owner: tabs-showcase-agent
   The hero's 4-step sticky scroll story (DESIGN_SPEC §4, §4.1, §4.3, §4.4; motion.md §3.2–§3.5):
   #hero root · .hero-bg (theme swap + glow bloom) · .hero-triggers / #step-1…4
   · .hero-scroll · sticky .hero-stage · .hero-runway · .hero-fade · sticky .hero-tabbar.
   State is written only by sections/tabs-showcase.js on #hero[data-hero-step|data-hero-theme].
   ========================================================================== */

/* ---------- Root ---------- */
#hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  isolation: isolate; /* keeps .hero-bg (z -1) inside the hero, under every hero layer */
}

/* ---------- Background: light ↔ dark (motion.md §3.5) ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip; /* clip, not hidden: keeps the sticky glow layer tied to the viewport */
  background-color: var(--color-bg);
  transition: background-color var(--dur-fast) var(--ease-inout);
  pointer-events: none;
}

#hero[data-hero-theme="dark"] .hero-bg {
  background-color: var(--color-bg-dark);
}

/* Sticky layer that mirrors .hero-stage: same natural top (below the headline block),
   same sticky top and height, same containing height → same pin range (260 → 862 at 1440×900). */
/* ---------- Step trigger markers (top 0 / 178 / 600 / 900 at every width) ---------- */
.hero-triggers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 900px;
  z-index: var(--z-raised);
  pointer-events: none;
}

#step-1,
#step-2,
#step-3,
#step-4 {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
}

#step-1 { top: 0; }
#step-2 { top: 178px; }
#step-3 { top: 600px; }
#step-4 { top: 900px; }

/* ---------- Scroll container, sticky stage, runway (DESIGN_SPEC §4.3) ---------- */
.hero-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hero-stage {
  position: sticky;
  top: var(--hero-stage-top);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--hero-stage-h);
  overflow: hidden;
  z-index: var(--z-hero-stage);
}

.hero-runway {
  flex: none;
  width: 100%;
  height: var(--hero-runway-h);
}

/* ---------- Bottom fade into #press ---------- */
.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: var(--grad-fade-to-dark);
  z-index: var(--z-hero-fade);
  pointer-events: none;
}

/* ---------- Sticky tab bar (DESIGN_SPEC §4.4) ---------- */
.hero-tabbar {
  position: sticky;
  top: var(--hero-tabbar-top);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 43px;
  margin-top: var(--hero-tabbar-mt);
  z-index: var(--z-hero-tabbar);
  pointer-events: none; /* only the pill takes clicks; the full-width strip must not block the cards */
}

.hero-tabbar__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 528px;
  height: 43px;
  padding: 3px;
  border-radius: var(--radius-70);
  background: var(--color-hero-pill);
  -webkit-backdrop-filter: blur(var(--blur-pill));
  backdrop-filter: blur(var(--blur-pill));
  overflow: hidden;
  pointer-events: auto;
}

/* Yellow thumb: left/width come from the active tab (JS sets --thumb-x / --thumb-w).
   Fallback = step 1 geometry, so the bar is right without JS. */
.hero-tabbar__thumb {
  position: absolute;
  top: 3px;
  left: var(--thumb-x, 3px);
  width: var(--thumb-w, 112px);
  height: 37px;
  border-radius: var(--radius-50);
  background: var(--color-accent-yellow);
  z-index: 0;
}

#hero:not([data-hero-step="1"]) .hero-tabbar__thumb {
  border-radius: var(--radius-67);
}

/* Transitions switch on after the first measurement, so the thumb never slides in on load. */
.hero-tabbar__pill[data-ready] .hero-tabbar__thumb {
  transition:
    left var(--t-spring),
    width var(--t-spring),
    border-radius var(--t-spring);
}

.hero-tabbar__tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--hero-tab-w, 0px);
  height: 34px;
  padding: 0 15px;
  border-radius: var(--radius-pill);
  color: var(--color-tab-inactive);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hero-tabbar__pill[data-ready] .hero-tabbar__tab {
  transition: color var(--t-spring);
}

.hero-tabbar__tab[aria-current] {
  color: var(--color-text);
}

/* Spec tab widths 108 / 132 / 135 / 118 as minimums (placeholder labels may run a little wider) */
.hero-tabbar__tab[data-step="1"] { --hero-tab-w: 108px; }
.hero-tabbar__tab[data-step="2"] { --hero-tab-w: 132px; }
.hero-tabbar__tab[data-step="3"] { --hero-tab-w: 135px; }
.hero-tabbar__tab[data-step="4"] { --hero-tab-w: 118px; }

.hero-tabbar__label {
  color: inherit;
}

/* The base currentColor ring would be black on the black pill: inset white ring instead */
.hero-tabbar__tab:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: -2px;
}

/* Generic line icons, recolored with the tab (mask + currentColor) */
.hero-tabbar__icon {
  flex: none;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--hero-tab-icon) center / contain no-repeat;
  mask: var(--hero-tab-icon) center / contain no-repeat;
}

.hero-tabbar__icon--1 { width: 17px; height: 13px; --hero-tab-icon: url("../assets/placeholders/icons/leaf.svg"); }
.hero-tabbar__icon--2 { width: 12px; height: 16px; --hero-tab-icon: url("../assets/placeholders/icons/shield.svg"); }
.hero-tabbar__icon--3 { width: 17px; height: 14px; --hero-tab-icon: url("../assets/placeholders/icons/heart.svg"); }
.hero-tabbar__icon--4 { width: 19px; height: 19px; --hero-tab-icon: url("../assets/placeholders/icons/download.svg"); }

/* ---------- Phone (≤789) ---------- */
@media (max-width: 789.98px) {
  .hero-fade {
    height: 211px;
    background: var(--grad-fade-to-dark-phone);
  }

  .hero-tabbar__pill {
    width: 282px;
  }

  /* Inactive tabs are icon-only; their label stays in the accessibility tree. */
  .hero-tabbar__tab:not([aria-current]) .hero-tabbar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Inactive: icon + 15px padding (42 / 47 / 49). Active: icon + label, at least 108 wide,
     10px side padding so the longest placeholder label still fits the 282 pill. */
  .hero-tabbar__tab:not([aria-current]) {
    gap: 0;
    min-width: 0;
  }

  .hero-tabbar__tab[aria-current] {
    min-width: 108px;
    padding: 0 10px;
  }
}