/*
 * utilities.css — Animations, dark mode, accessibility, layout helpers
 * Source: DESIGN-SYSTEM.md §12, §13, §14
 * Supersedes previous utilities.css. Legacy aliases kept for backward compat.
 */

/* ══════════════════════════════════════════════
   ANIMATIONS (§12)
   ══════════════════════════════════════════════ */

/* Fade-up (intersection observer trigger) */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.fade-up.vis,
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger > * { opacity: 0; transform: translateY(20px); }
.stagger.vis > *:nth-child(1) { animation: staggerIn .5s .05s cubic-bezier(.22,1,.36,1) forwards; }
.stagger.vis > *:nth-child(2) { animation: staggerIn .5s .12s cubic-bezier(.22,1,.36,1) forwards; }
.stagger.vis > *:nth-child(3) { animation: staggerIn .5s .19s cubic-bezier(.22,1,.36,1) forwards; }
.stagger.vis > *:nth-child(4) { animation: staggerIn .5s .26s cubic-bezier(.22,1,.36,1) forwards; }
.stagger.vis > *:nth-child(5) { animation: staggerIn .5s .33s cubic-bezier(.22,1,.36,1) forwards; }
.stagger.vis > *:nth-child(6) { animation: staggerIn .5s .40s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Easing functions */
:root {
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-inout:  cubic-bezier(.4, 0, .2, 1);
}

/* Duration tokens */
:root {
  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   380ms;
}

/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; transform: none; }
}

/* Dark mode tokens live in tokens.css — one source of truth. */

/* ══════════════════════════════════════════════
   ACCESSIBILITY (§14)
   ══════════════════════════════════════════════ */

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Touch targets — minimum 44×44px */
button, [role="button"], a, input, select, textarea {
  min-height: 44px;
}
/* Inline links don't need 44px height */
p a, li a, span a { min-height: unset; }

/* ARIA patterns */
[aria-hidden="true"] { pointer-events: none; }
[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
[aria-busy="true"] { cursor: wait; }

/* ══════════════════════════════════════════════
   DISPLAY HELPERS
   ══════════════════════════════════════════════ */

.hidden   { display: none !important; }
.sr-only  {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════
   FLEX / GRID HELPERS
   ══════════════════════════════════════════════ */

.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm  { gap: 12px; }
.gap-md  { gap: 24px; }
.gap-lg  { gap: 40px; }

/* ══════════════════════════════════════════════
   TEXT HELPERS
   ══════════════════════════════════════════════ */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-gold    { color: var(--gold); }
.text-ink     { color: var(--ink); }
.text-muted   { color: var(--mid); }
.text-white   { color: var(--white); }
.text-balance { text-wrap: balance; }

/* ══════════════════════════════════════════════
   SPACING HELPERS
   ══════════════════════════════════════════════ */

.mt-sm  { margin-top: 12px; }
.mt-md  { margin-top: 24px; }
.mt-lg  { margin-top: 40px; }
.mb-sm  { margin-bottom: 12px; }
.mb-md  { margin-bottom: 24px; }
.mb-lg  { margin-bottom: 40px; }

/* ══════════════════════════════════════════════
   DIVIDER
   ══════════════════════════════════════════════ */

.divider {
  border: none;
  border-top: 1px solid var(--rule-soft);
  margin: 40px 0;
}

/* ══════════════════════════════════════════════
   BADGE / LABEL CHIP (legacy + new)
   ══════════════════════════════════════════════ */

.badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(var(--accent-glow-deep),.10); color: var(--gold);
}

/* ══════════════════════════════════════════════
   EYEBROW (shared across all pages)
   ══════════════════════════════════════════════ */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px; display: block;
}