/* ============================================================
   Utilities + reveal-on-scroll
   ============================================================ */

.text-center { text-align: center; }
.text-muted  { color: var(--fg-muted); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* Reveal animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

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

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: scale(0.96);
}

[data-reveal="scale"].is-revealed {
  transform: scale(1);
}

/* Marquee decoration */
.glow-orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.glow-orb--gold {
  background: var(--c-gold-500);
}

.glow-orb--magenta {
  background: var(--c-magenta-500);
}

/* Soft floating shapes */
.float-shape {
  position: absolute;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--r-pill);
  pointer-events: none;
  opacity: 0.4;
}