/* ==========================================================================
   ANIMATIONS — keyframes, scroll-reveal, parallax, word stagger, hover FX
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Float / bounce keyframes ---- */
  @keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
  }
  @keyframes float-y-sm {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  @keyframes float-rotate {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(6deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
  }
  @keyframes spin-slow {
    to { transform: rotate(360deg); }
  }
  @keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .float { animation: float-y 6s var(--ease-in-out) infinite; }
  .float-sm { animation: float-y-sm 5s var(--ease-in-out) infinite; }
  .float-rotate { animation: float-rotate 8s var(--ease-in-out) infinite; }
  .float-delay-1 { animation-delay: 0.6s; }
  .float-delay-2 { animation-delay: 1.2s; }
  .float-delay-3 { animation-delay: 1.8s; }

  .pulse-glow { animation: pulse-glow 3.5s var(--ease-in-out) infinite; }
  .spin-slow { animation: spin-slow 14s linear infinite; }

  /* ---- Scroll reveal (JS adds .in-view when IntersectionObserver fires) ---- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    will-change: opacity, transform;
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }

  .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .reveal-left.in-view { opacity: 1; transform: translateX(0); }

  .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  .reveal-right.in-view { opacity: 1; transform: translateX(0); }

  .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .reveal-scale.in-view { opacity: 1; transform: scale(1); }

  /* Stagger children of a .reveal-group — JS assigns --stagger-index */
  .reveal-group > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: calc(var(--stagger-index, 0) * 90ms);
  }
  .reveal-group.in-view > * { opacity: 1; transform: translateY(0); }

  /* ---- Word-by-word headline animation ---- */
  .word-anim .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em) rotate(4deg);
    filter: blur(6px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
    transition-delay: calc(var(--word-index, 0) * 70ms);
  }
  .word-anim.in-view .word {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }

  /* ---- Parallax layers (JS updates translateY via --parallax-y) ---- */
  .parallax {
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
  }

  /* ---- Hover: glow ---- */
  .hover-glow { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .hover-glow:hover {
    box-shadow: var(--shadow-glow-accent);
    transform: translateY(-4px);
  }

  /* ---- Hover: scale ---- */
  .hover-scale { transition: transform var(--dur-base) var(--ease-out); }
  .hover-scale:hover { transform: scale(1.04); }

  /* ---- Hover: rotate icon ---- */
  .hover-rotate { transition: transform var(--dur-base) var(--ease-out); }
  .hover-rotate:hover { transform: rotate(12deg) scale(1.08); }

  /* ---- Gradient animated backgrounds ---- */
  .gradient-anim {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }

  /* ---- Page transition fade ---- */
  body { animation: page-fade-in 0.5s var(--ease-out); }
  @keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Reduced motion: keep things visible, skip motion entirely */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-group > *, .word-anim .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}