/**
 * Ben Live TV - Shared Animations
 * Keyframes used across multiple pages
 * Includes accessibility support for prefers-reduced-motion
 */

/* ============================================================================
   Entrance Animations
   ============================================================================ */

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

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

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   Floating Animations (Decorative Elements)
   ============================================================================ */

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

/* float1, float2, float3 remain locally defined in landing.css (complex multi-axis paths) */

@keyframes characterFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

/* ============================================================================
   Pulse & Glow Animations
   ============================================================================ */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* pulseGlow removed - simplified button effects */

@keyframes glow {
  0%, 100% {
    filter: drop-shadow(0 0 4px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 12px currentColor);
  }
}

/* ============================================================================
   Shimmer & Gradient Animations
   ============================================================================ */

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

/* Gradient animations consolidated */
/* rainbowShift removed - rainbow overlay removed */
/* logoShimmer: oscillating background-position (pingpong). Used for logo/text shimmer.
   gradientFlow: was a one-directional background-position scroll, now consolidated into prismFlow below.
   NOTE: gradientShift in ai-lab.css animates opacity (not background-position) and is NOT covered here. */

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

/**
 * Canonical prismatic gradient scroll animation.
 * Used on all gradient text elements via: animation: prismFlow <duration> linear infinite
 * Duration varies by context — use --prism-speed-* tokens from _gradients.css:
 *   hero headings: 11s   (--prism-speed-slow)
 *   nav/interactive: 2.35s (--prism-speed-medium)
 * Replaces: landingHeroPrismFlow, landingSectionPrismFlow, gradientFlow,
 *           blogHeroPrismFlow, hireHeroPrismFlow, hireSectionPrismFlow,
 *           interactivePrismTextShift, navLinkPrismShimmer
 */
@keyframes prismFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/**
 * CTA button glass sweep animation — the moving highlight on .btn-large::after.
 * Moved here from landing.css and hire-me.css (were duplicated identically).
 */
@keyframes ctaGlassSweep {
  0%   { transform: translate3d(-68%, 0, 0); }
  100% { transform: translate3d(68%, 0, 0); }
}

/* ============================================================================
   AI Lab App Animations (shared across promptpad, problem-solver, agent-agenda, chat)
   ============================================================================ */

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

@keyframes neonFlicker {
  0%,
  100% {
    opacity: 1;
    transform: translate(-14%, -46%) rotate(-8deg);
  }
  45% {
    opacity: 0.7;
    transform: translate(-14%, -46%) rotate(-6deg);
  }
  60% {
    opacity: 0.9;
    transform: translate(-14%, -46%) rotate(-8deg);
  }
}

/* ============================================================================
   Icon-Specific Animations
   ============================================================================ */

@keyframes draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rotate3d {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ============================================================================
   Accessibility: Respect User Motion Preferences
   ============================================================================ */

/*
  Users with vestibular disorders or motion sensitivity can enable
  "prefers-reduced-motion" in their OS settings. We respect this by
  disabling or simplifying animations.
*/

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Specifically disable floating and pulsing effects */
  .float-shape,
  .ai-character,
  .btn-large,
  .btn-large::before,
  .btn-large::after {
    animation: none !important;
  }

  /*
   * Optimal gradient freeze position for animated rainbow headings.
   *
   * WHY: When animation is frozen (duration: 0.01ms, iteration-count: 1),
   * the gradient background-position stays at 0% 50% (the animation's
   * first keyframe). With a 200%-wide gradient, this shows only the
   * first half of the color stops — a narrow cyan-to-teal slice.
   *
   * FIX: Shift to 50% 50% which centers the visible window on the
   * gradient, displaying all 6 distinct hues (cyan, blue, indigo,
   * violet, magenta, teal) in balanced representation. This gives
   * reduced-motion users the full prismatic spectrum as a beautiful
   * static rainbow, matching the visual intent of the animated version.
   *
   * See: docs/GRADIENT_REDUCED_MOTION_GUIDE.md
   */
  .gradient,
  .gradient-text,
  .gradient-text-animated,
  .gradient-rainbow,
  .section-title-text,
  .section-title-label {
    background-position: 50% 50% !important;
  }
}

/* ============================================================================
   Usage Examples
   ============================================================================ */

/*
  To use these animations in your CSS:

  .my-element {
    animation: fadeInUp 0.6s ease-out;
  }

  .floating-decoration {
    animation: float1 12s ease-in-out infinite;
  }

  .pulsing-badge {
    animation: pulse 2s ease-in-out infinite;
  }

  .shimmer-button::before {
    animation: shimmer 3s linear infinite;
  }
*/