/**
 * Fourth Design System — Animation Keyframes
 * Verbatim lift from magicui + additional motion primitives.
 * All OKLCH-safe. No hex in keyframes — only transforms and relative values.
 *
 * Import alongside theme CSS and base.css.
 * Do not override --animate-* variables without understanding the full chain.
 */

/* -------------------------------------------------- */
/* ANIMATION CUSTOM PROPERTIES                        */
/* -------------------------------------------------- */
:root {
  --animate-gradient:       gradient 8s linear infinite;
  --animate-meteor:         meteor 5s linear infinite;
  --animate-marquee:        marquee var(--duration, 40s) infinite linear;
  --animate-spin-around:    spin-around calc(var(--speed, 6s) * 2) infinite linear;
  --animate-shiny-text:     shiny-text 8s infinite;
  --animate-shimmer-slide:  shimmer-slide var(--speed, 2s) ease-in-out infinite alternate;
  --animate-ripple:         ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite;
  --animate-orbit:          orbit calc(var(--duration, 20) * 1s) linear infinite;
  --animate-shine:          shine var(--duration, 4s) infinite linear;
  --animate-aurora:         aurora 8s ease-in-out infinite alternate;
  --animate-pulse-ripple:   pulse-ripple var(--duration, 2s) cubic-bezier(0.16, 1, 0.3, 1) infinite;
  --animate-line:           line 2s linear infinite;
  --animate-rainbow:        rainbow var(--speed, 2s) infinite linear;
  --animate-spin:           spin 6s linear infinite;
  --animate-fade-in:        fade-in var(--duration, 400ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-slide-up:       slide-up var(--duration, 700ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-scale-in:       scale-in var(--duration, 400ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-blink-cursor:   blink-cursor 1s step-end infinite;
}

/* -------------------------------------------------- */
/* KEYFRAMES — LIFTED FROM MAGICUI                    */
/* -------------------------------------------------- */

@keyframes gradient {
  to { background-position: var(--bg-size, 300%) 0; }
}

@keyframes aurora {
  0% {
    background-position: 0% 50%;
    transform: rotate(-5deg) scale(0.9);
  }
  25% {
    background-position: 50% 100%;
    transform: rotate(5deg) scale(1.1);
  }
  50% {
    background-position: 100% 50%;
    transform: rotate(-3deg) scale(0.95);
  }
  75% {
    background-position: 50% 0%;
    transform: rotate(3deg) scale(1.05);
  }
  100% {
    background-position: 0% 50%;
    transform: rotate(-5deg) scale(0.9);
  }
}

@keyframes meteor {
  0% {
    transform: rotate(var(--angle)) translateX(0);
    opacity: 1;
  }
  70% { opacity: 1; }
  100% {
    transform: rotate(var(--angle)) translateX(-500px);
    opacity: 0;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--gap, 16px))); }
}

@keyframes spin-around {
  0%              { transform: translateZ(0) rotate(0); }
  15%, 35%        { transform: translateZ(0) rotate(90deg); }
  65%, 85%        { transform: translateZ(0) rotate(270deg); }
  100%            { transform: translateZ(0) rotate(360deg); }
}

@keyframes ripple {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes shimmer-slide {
  to { transform: translate(calc(100cqw - 100%), 0); }
}

@keyframes line {
  0%   { mask-position-x: 0%; }
  100% { mask-position-x: 100%; }
}

@keyframes shiny-text {
  0%, 90%, 100% {
    background-position: calc(-100% - var(--shiny-width, 100px)) 0;
  }
  30%, 60% {
    background-position: calc(100% + var(--shiny-width, 100px)) 0;
  }
}

@keyframes orbit {
  0% {
    transform:
      rotate(calc(var(--angle) * 1deg))
      translateY(calc(var(--radius, 100) * 1px))
      rotate(calc(var(--angle) * -1deg));
  }
  100% {
    transform:
      rotate(calc(var(--angle) * 1deg + 360deg))
      translateY(calc(var(--radius, 100) * 1px))
      rotate(calc((var(--angle) * -1deg) - 360deg));
  }
}

@keyframes shine {
  0%  { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  to  { background-position: 0% 0%; }
}

@keyframes pulse-ripple {
  0%   { box-shadow: 0 0 0 0 var(--pulse-color, var(--accent)); }
  100% { box-shadow: 0 0 0 40px transparent; }
}

@keyframes rainbow {
  to { background-position: 200% 0; }
}

/* -------------------------------------------------- */
/* KEYFRAMES — FOURTH ADDITIONS                       */
/* -------------------------------------------------- */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Glow pulse (used by glow-effect primitive) */
@keyframes glow-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.1);  opacity: 0.8; }
}

/* Glow breathe (slow, ambient) */
@keyframes glow-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Border beam (traveling light effect) */
@keyframes border-beam {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

/* -------------------------------------------------- */
/* SCROLL-DRIVEN REVEAL                               */
/* Native animation-timeline: view()                 */
/* Shipped in all modern browsers as of 2026         */
/* No polyfill — modern-only intentional             */
/* -------------------------------------------------- */
@keyframes scroll-reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  animation: scroll-reveal linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

/* Staggered children variant */
.scroll-reveal-group > * {
  animation: scroll-reveal linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

.scroll-reveal-group > *:nth-child(1) { animation-delay: 0ms; }
.scroll-reveal-group > *:nth-child(2) { animation-delay: 80ms; }
.scroll-reveal-group > *:nth-child(3) { animation-delay: 160ms; }
.scroll-reveal-group > *:nth-child(4) { animation-delay: 240ms; }
.scroll-reveal-group > *:nth-child(5) { animation-delay: 320ms; }
.scroll-reveal-group > *:nth-child(6) { animation-delay: 400ms; }

/* -------------------------------------------------- */
/* RESPECT REDUCED MOTION                             */
/* -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-reveal,
  .scroll-reveal-group > * {
    animation: none;
    animation-timeline: unset;
    opacity: 1;
    transform: none;
  }

  html { scroll-behavior: auto; }
}