/* ============================================================
   Round — Utilities
   Small, single-purpose helper classes shared across sections.
   ============================================================ */

.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 hook --------------------------------------------------
   Default (pre-JS / reduced-motion) state is fully visible so content
   never depends on JS running. scroll-reveal.js flips to the "armed"
   state only when GSAP is present and motion isn't reduced, then
   animates to .is-visible via ScrollTrigger.batch(). */
[data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(24px);
}

[data-reveal].is-armed.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

/* ---- Eyebrow / numbered badge ------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.eyebrow__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-inverted);
  color: var(--color-text-on-inverted);
  font-size: 11px;
  font-weight: 600;
}

.on-dark .eyebrow__index {
  background: var(--color-accent-secondary);
  color: var(--color-navy-900);
}

/* ---- Aspect helpers ------------------------------------------------------ */
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-landscape { aspect-ratio: 3 / 2; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

/* ---- Screen-reader-only text that should stay in flow --------------------- */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}