/**
 * animations.css
 * -----------------------------------------------------------------------------
 * Keyframes, reveal classes, and motion primitives.
 * GSAP handles scroll choreography; this file covers ambient + state animations.
 * ----------------------------------------------------------------------------- */

/* ============================================================
 *  KEYFRAMES
 * ============================================================ */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
  50%      { box-shadow: 0 0 32px 4px var(--color-accent-glow); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-radius, 100px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-radius, 100px)) rotate(-360deg); }
}

@keyframes aurora {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(40px, -30px) rotate(120deg); }
  66%      { transform: translate(-30px, 40px) rotate(240deg); }
}

/* ============================================================
 *  REVEAL CLASSES (initial states for GSAP ScrollTrigger)
 * ============================================================ */
.reveal       { opacity: 0; transform: translateY(40px); }
.reveal-up    { opacity: 0; transform: translateY(60px); }
.reveal-down  { opacity: 0; transform: translateY(-60px); }
.reveal-left  { opacity: 0; transform: translateX(-60px); }
.reveal-right { opacity: 0; transform: translateX(60px); }
.reveal-scale { opacity: 0; transform: scale(0.85); }
.reveal-blur  { opacity: 0; filter: blur(20px); }

/* Once revealed by GSAP, elements get .revealed */
.revealed {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              filter var(--duration-slow) var(--ease-out);
}

/* ============================================================
 *  ANIMATION UTILITIES
 * ============================================================ */
.animate-fade-in    { animation: fade-in var(--duration-base) var(--ease-out) both; }
.animate-fade-up    { animation: fade-up var(--duration-slow) var(--ease-out) both; }
.animate-scale-in   { animation: scale-in var(--duration-base) var(--ease-spring) both; }
.animate-float      { animation: float 6s var(--ease-in-out) infinite; }
.animate-spin       { animation: spin 1s var(--ease-linear) infinite; }
.animate-pulse-glow { animation: pulse-glow 2.4s var(--ease-in-out) infinite; }
.animate-blink      { animation: blink 1.2s steps(2, start) infinite; }

.animate-aurora {
  background: var(--gradient-aurora);
  background-size: 200% 200%;
  animation: gradient-shift 8s var(--ease-in-out) infinite;
}

/* Delay utilities */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }
.delay-6 { animation-delay: 600ms; }
.delay-7 { animation-delay: 700ms; }
.delay-8 { animation-delay: 800ms; }

/* ============================================================
 *  SHIMMER (skeleton loaders)
 * ============================================================ */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-elevated) 0%,
    var(--color-bg-card) 50%,
    var(--color-bg-elevated) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s var(--ease-linear) infinite;
  border-radius: var(--radius-sm);
}

/* ============================================================
 *  AURORA BLOB (background ambient)
 * ============================================================ */
.aurora-blob {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.aurora-blob--blue   { background: var(--color-accent); }
.aurora-blob--purple { background: #8B5CF6; }
.aurora-blob--pink   { background: #EC4899; }

/* ============================================================
 *  PAGE TRANSITION OVERLAY
 * ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-bg-primary);
  z-index: var(--z-loader);
  transform: translateY(100%);
  pointer-events: none;
}
.page-transition.active {
  animation: page-wipe var(--duration-page) var(--ease-in-out) forwards;
}

@keyframes page-wipe {
  0%   { transform: translateY(100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* ============================================================
 *  LOADER PROGRESS BAR
 * ============================================================ */
.loader-bar {
  height: 2px;
  background: var(--color-accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out);
}

/* ============================================================
 *  REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-up, .reveal-down, .reveal-left,
  .reveal-right, .reveal-scale, .reveal-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}