/* ==========================================================================
   Animations — keyframes, scroll reveals, entrance choreography
   All motion is disabled or reduced under prefers-reduced-motion (bottom).
   ========================================================================== */

/* Keyframes ---------------------------------------------------------------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes float-tilt {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gradient-pan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18), 0 0 12px #22d3ee; }
  50% { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0.06), 0 0 18px #22d3ee; }
}
@keyframes ring-pulse {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes scroll-line {
  0% { top: -40%; }
  100% { top: 100%; }
}
@keyframes marquee {
  to { transform: translateX(calc(-50% - 1.5rem)); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bar-grow {
  0% { transform: scaleY(0.45); }
  100% { transform: scaleY(1); }
}
@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes card-hop {
  0%, 20% { transform: translateX(0); }
  40%, 60% { transform: translateX(calc(100% + 6px)); }
  80%, 100% { transform: translateX(calc(200% + 12px)); }
}
@keyframes pulse-travel-x {
  0% { left: 8%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 92%; opacity: 0; }
}
@keyframes pulse-travel-y {
  0% { top: 4%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 96%; opacity: 0; }
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4vw, 3vh) scale(1.08); }
  66% { transform: translate(-3vw, 5vh) scale(0.95); }
}
@keyframes iso-bob {
  0%, 100% { transform: translateZ(0); }
  50% { transform: translateZ(26px); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* Ambient motion ----------------------------------------------------------- */
.ambient__blob--1 { animation: blob-drift 26s ease-in-out infinite; }
.ambient__blob--2 { animation: blob-drift 32s ease-in-out infinite reverse; }
.ambient__blob--3 { animation: blob-drift 38s ease-in-out infinite; }

.floating-element { animation: float-y 6s ease-in-out infinite; }
.floating-element--slow { animation-duration: 9s; }
.floating-element--tilt { animation-name: float-tilt; animation-duration: 8s; }
.float-card:nth-child(2n) .float-card__inner { animation-delay: -2s; }
.float-card__inner { animation: float-y 7s ease-in-out infinite; }
.float-card:nth-child(3) .float-card__inner { animation-duration: 8.5s; animation-delay: -4s; }
.float-card:nth-child(4) .float-card__inner { animation-duration: 6.5s; animation-delay: -1s; }

/* Scroll reveal (toggled by animations.js via IntersectionObserver) -------- */
.js .reveal-on-scroll {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal-on-scroll[data-reveal="left"] { transform: translateX(-40px); }
.js .reveal-on-scroll[data-reveal="right"] { transform: translateX(40px); }
.js .reveal-on-scroll[data-reveal="scale"] { transform: scale(0.94); }
.js .reveal-on-scroll[data-reveal="fade"] { transform: none; }
.js .reveal-on-scroll.is-visible { opacity: 1; transform: none; }

/* Hero entrance choreography (body.is-loaded set in animations.js) --------- */
.js [data-hero-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .is-loaded [data-hero-reveal] { opacity: 1; transform: none; }

.js [data-split] .word-inner {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--w, 0) * 55ms + 150ms);
}
.js .is-loaded [data-split] .word-inner { transform: none; }

.js .float-card {
  opacity: 0;
  scale: 0.92;
  transition: opacity 1.2s var(--ease), scale 1.2s var(--ease), translate 0.9s var(--ease);
  transition-delay: var(--d, 600ms), var(--d, 600ms), 0ms;
}
.js .is-loaded .float-card { opacity: 1; scale: 1; }

/* Card tilt (data-tilt, set by animations.js) ------------------------------ */
[data-tilt] {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}
[data-tilt].is-tilting { transition: transform 0.15s linear, border-color 0.4s, box-shadow 0.5s var(--ease); }

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal-on-scroll,
  .js [data-hero-reveal],
  .js .float-card { opacity: 1; transform: none; scale: 1; }
  .js [data-split] .word-inner { transform: none; }
  .mock-spark path.line { stroke-dashoffset: 0; }
  [data-tilt] { transform: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}