/* =============================================================
   animations.css — KEYFRAMES & TRANSITION RULES
   All timing values come from var(--...) tokens.
   ============================================================= */

/* ── Reveal keyframe ──────────────────────────────────────── */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Fade keyframe (reduced-motion fallback) ──────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Gem pulse (divider accent dot) ──────────────────────── */
@keyframes gem-pulse {
  0%, 100% { opacity: 0.5; transform: rotate(45deg) scale(1); }
  50%       { opacity: 1;   transform: rotate(45deg) scale(1.4); }
}

.divider-gem {
  animation: gem-pulse 3s var(--ease-in-out) infinite;
}

/* ── Stagger delays assigned by JS via data attribute ─────── */
/* These classes are applied dynamically in main.js            */
.stagger-logo    { animation-delay: var(--stagger-logo);    }
.stagger-tagline { animation-delay: var(--stagger-tagline); }
.stagger-btn-1   { animation-delay: var(--stagger-btn-1);  }
.stagger-btn-2   { animation-delay: var(--stagger-btn-2);  }
.stagger-btn-3   { animation-delay: var(--stagger-btn-3);  }
.stagger-btn-4   { animation-delay: var(--stagger-btn-4);  }
.stagger-btn-5   { animation-delay: var(--stagger-btn-5);  }
.stagger-btn-6   { animation-delay: var(--stagger-btn-6);  }
.stagger-footer  { animation-delay: var(--stagger-footer); }

/* ── Reduced-motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Disable all stagger / transform animations */
  .animate-item,
  body.is-ready .animate-item {
    animation: fade-in var(--duration-base) var(--ease-out) both !important;
    animation-delay: 0ms !important;
  }

  /* Disable hover lift on buttons */
  .link-btn:hover,
  .link-btn:focus-visible {
    transform: none !important;
  }

  /* Disable logo hover scale */
  .logo-img:hover {
    transform: none !important;
  }

  /* Stop gem pulse */
  .divider-gem {
    animation: none;
  }

  /* Stop chevron slide */
  .link-btn:hover .btn-arrow,
  .link-btn:focus-visible .btn-arrow {
    transform: none !important;
  }
}