/* ==========================================================================
   ANIMATIONS
   Named keyframes only. Where an animation just needs opacity/transform on
   scroll, prefer the [data-reveal] utility in base.css instead — these
   keyframes are for things that need a specific timeline (header intro,
   carousel arrows, progress indicator) rather than a simple in/out.
   ========================================================================== */

@keyframes headerCircleIn {
  from { width: 0; height: 0; opacity: 0; }
  to   { width: var(--header-circle-size, 56px); height: var(--header-circle-size, 56px); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes arrowNudgeRight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

@keyframes arrowNudgeLeft {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}

@keyframes contentFadeCycle {
  0%     { opacity: 0; }
  11.11% { opacity: 1; }
  22.22% { opacity: 1; }
  33.33% { opacity: 0; }
  100%   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-arrow svg { animation: none !important; }
}