/* ==========================================================================
   Section layouts. Every section reads complete without JavaScript and with
   reduced motion; motion/*.js only adds to it. The single exception is the
   hero intro: html.has-motion (set inline in <head>, removed by a failsafe
   if GSAP never loads) hides its targets before first paint to avoid a flash.
   ========================================================================== */

/* ---------- Hero: loud copy over a curved band of the demo stores ----------
   The panel is the size container the band's cqw/cqh units measure against,
   so it needs an explicit height. It falls away on scroll (motion/hero.js). */
.hero {
  background: #000;
}

.hero__panel {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100svh;
  min-height: 42rem;
  max-height: 68rem;
  padding: calc(var(--header-height) + clamp(2rem, 7vh, 5rem)) var(--margin) clamp(1.25rem, 3vh, 2rem);
  overflow: hidden;
  background: var(--paper);
  container-type: size;
  transform-origin: 50% 0;
}

/* A red bloom low in the frame, under the band: the page's one light source. */
.hero__panel::after {
  content: '';
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 80%;
  background: radial-gradient(closest-side, rgb(255 42 0 / 0.28), transparent 70%);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1.5rem;
  text-align: center;
}

/* Keeps the headline readable over the bright screenshots passing behind it. */
.hero__copy::before {
  content: '';
  position: absolute;
  inset: -12% -8% -18%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(8 8 10 / 0.92), rgb(8 8 10 / 0.6) 60%, transparent);
  pointer-events: none;
}

/* The copy and foot boxes stretch over the band; only their contents take the
   pointer, so the band underneath can still be hovered and dragged. */
.hero__copy,
.hero__foot {
  pointer-events: none;
}

.hero__copy > *,
.hero__foot > * {
  pointer-events: auto;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgb(18 18 20 / 0.8);
  color: var(--muted);
  font-size: 0.75rem;
  text-decoration: none;
  transition: border-color var(--duration-fast) ease;
}

.hero__pill:hover {
  border-color: var(--ink);
}

.hero__pill-link {
  padding-left: 0.6rem;
  border-left: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-weight: 500;
}

.hero__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.25rem rgb(255 42 0 / 0.18), 0 0 1rem var(--glow);
}

.hero__title {
  display: grid;
  justify-items: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 7vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-transform: uppercase;
}

.hero__line--soft {
  color: #8d8c88;
}

/* The niche word: five words stacked in a one-line window, stepping up in turn.
   CSS only; with reduced motion the first word simply stays. */
.hero__rotator {
  display: block;
  height: 0.92em;
  overflow: hidden;
  color: var(--ink);
}

.hero__rotator-track {
  display: grid;
}

.hero__rotator-track span {
  display: block;
  height: 0.92em;
  line-height: 0.92;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__rotator-track {
    animation: rotate-niche 12.5s var(--ease-out) infinite;
  }
}

/* Five words plus a repeat of the first, so the loop restarts without a jump. */
@keyframes rotate-niche {
  0%, 16% { translate: 0 0; }
  20%, 36% { translate: 0 -0.92em; }
  40%, 56% { translate: 0 -1.84em; }
  60%, 76% { translate: 0 -2.76em; }
  80%, 96% { translate: 0 -3.68em; }
  100% { translate: 0 -4.6em; }
}

.hero__lead {
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.hero__foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}


.band-toggle {
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.75rem/1 var(--font-body);
  cursor: pointer;
}

.band-toggle:hover {
  border-color: var(--ink);
}

/* The band: built by assets/band.js; invisible until it has measured itself. */
.band {
  position: absolute;
  inset: 0;
  visibility: hidden;
  cursor: grab;
  /* Vertical swipes still scroll the page; horizontal ones drag the band. */
  touch-action: pan-y;
  user-select: none;
}

.band.is-dragging {
  cursor: grabbing;
}

.band.is-ready {
  /* No fade: an opacity transition would delay the band images' first paint. */
  visibility: visible;
}

.band__tile {
  position: absolute;
  transform-style: preserve-3d;
}

.band__slice {
  position: absolute;
  top: 0;
  overflow: hidden;
  background: var(--well);
}

.band__slice:first-child {
  border-radius: 0.6rem 0 0 0.6rem;
}

.band__slice:last-child {
  border-radius: 0 0.6rem 0.6rem 0;
}

.band__slice img {
  position: absolute;
  top: 0;
  max-width: none;
  object-fit: cover;
}

/* "Brought into focus": the copy settles out of a blur at first paint. CSS
   only, so the headline (the LCP element) never waits for JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * {
    animation: focus-in 1100ms var(--ease-out) both;
  }

  .hero__copy > :nth-child(2) {
    animation-delay: 90ms;
  }

  .hero__copy > :nth-child(3) {
    animation-delay: 180ms;
  }

  .hero__copy > :nth-child(4) {
    animation-delay: 270ms;
  }
}

@keyframes focus-in {
  from {
    filter: blur(10px);
    translate: 0 0.6rem;
  }
}

@media (max-width: 600px) {
  .hero__panel {
    max-height: none;
  }

  .hero__foot {
    justify-content: center;
  }
}