/* ============================================================
   04 — LAYOUT PRIMITIVES
   Shared structural rules reused by every section: the section
   wrapper, the "reveal on scroll" animation, and eyebrow labels.
   Section-specific layout lives in 05-sections.css instead.
   ============================================================ */

main{ position:relative; z-index:5; }

section{
  position:relative;
  padding: clamp(90px, 14vw, 200px) clamp(24px, 6vw, 96px);
  max-width:1200px;
  margin:0 auto;
}

.eyebrow{
  font-family: var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--gold);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background: var(--gold-dim);
}

/* ---- scroll reveal (toggled by js/modules/reveal.js) ---- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-cinematic), transform 1.1s var(--ease-cinematic);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:0.08s; }
.reveal-delay-2.is-visible{ transition-delay:0.16s; }
.reveal-delay-3.is-visible{ transition-delay:0.24s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}