/*
  Anti-collision rule — each layer owns different CSS properties, never
  overlapping:

  - .section (here) is the ONLY class allowed to set padding-block on a
    top-level <section>. No component or section-specific class may set
    vertical section padding.
  - Component classes (.card, .btn, .panel, in 03-components.css) own
    their OWN internal padding/border/radius/shadow — never margin-block
    that would add space between sections.
  - Section-specific classes (in 04-sections.css) own only display,
    grid-template-columns, gap, align-items — layout glue, never padding
    or margin that duplicates .section's job.
*/

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

.section {
  padding-block: var(--space-8);
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-6);
  }
}

@media (max-width: 599px) {
  .section {
    padding-block: var(--space-5);
  }
}

.section--tight {
  padding-block: var(--space-6);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--space-5);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--gold);
}

.prose {
  max-width: var(--prose-max);
  color: var(--mist);
}

/* ---- grid / flex primitives ---- */

.grid {
  display: grid;
  gap: var(--space-5);
}

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

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- utilities ---- */

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- scroll reveal (structure only — animation lives here, content in 04) ---- */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 80ms);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal].u-reveal-zoom {
    transform: scale(0.86);
  }

  [data-reveal].u-reveal-zoom.is-visible {
    transform: scale(1);
  }
}

/* ---- load choreography (plays once on initial paint, no scroll/JS needed) ---- */

@media (prefers-reduced-motion: no-preference) {
  .u-load-rise {
    opacity: 0;
    transform: translateY(16px);
    animation: load-settle 620ms var(--ease-out) forwards;
    animation-delay: calc(var(--load-i, 0) * var(--hero-stagger));
  }

  .u-load-fall {
    opacity: 0;
    transform: translateY(-14px);
    animation: load-settle 520ms var(--ease-out) forwards;
  }

  @keyframes load-settle {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}