/* ========================================
   BRANDS Platform — Animation Presets
   ======================================== */

/* ==========================================
   WATER-SPLASH PRESET
   ========================================== */

/* Water droplet particles */
.animation-water-splash .water-drops {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.animation-water-splash .water-drop {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.6), transparent);
  border-radius: 50%;
  animation: waterFloat linear infinite;
}

@keyframes waterFloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-20vh) scale(1);
    opacity: 0;
  }
}

/* Generate multiple drops with different timing */
.animation-water-splash .water-drop:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; width: 6px; height: 6px; }
.animation-water-splash .water-drop:nth-child(2) { left: 15%; animation-duration: 10s; animation-delay: 1s; width: 10px; height: 10px; }
.animation-water-splash .water-drop:nth-child(3) { left: 25%; animation-duration: 7s; animation-delay: 2s; width: 5px; height: 5px; }
.animation-water-splash .water-drop:nth-child(4) { left: 35%; animation-duration: 9s; animation-delay: 0.5s; width: 8px; height: 8px; }
.animation-water-splash .water-drop:nth-child(5) { left: 45%; animation-duration: 11s; animation-delay: 3s; width: 12px; height: 12px; }
.animation-water-splash .water-drop:nth-child(6) { left: 55%; animation-duration: 8s; animation-delay: 1.5s; width: 7px; height: 7px; }
.animation-water-splash .water-drop:nth-child(7) { left: 65%; animation-duration: 10s; animation-delay: 4s; width: 9px; height: 9px; }
.animation-water-splash .water-drop:nth-child(8) { left: 75%; animation-duration: 7s; animation-delay: 2.5s; width: 6px; height: 6px; }
.animation-water-splash .water-drop:nth-child(9) { left: 85%; animation-duration: 9s; animation-delay: 0.8s; width: 11px; height: 11px; }
.animation-water-splash .water-drop:nth-child(10) { left: 95%; animation-duration: 12s; animation-delay: 3.5s; width: 5px; height: 5px; }
.animation-water-splash .water-drop:nth-child(11) { left: 10%; animation-duration: 9s; animation-delay: 5s; width: 7px; height: 7px; }
.animation-water-splash .water-drop:nth-child(12) { left: 40%; animation-duration: 11s; animation-delay: 6s; width: 4px; height: 4px; }
.animation-water-splash .water-drop:nth-child(13) { left: 60%; animation-duration: 8s; animation-delay: 4.5s; width: 10px; height: 10px; }
.animation-water-splash .water-drop:nth-child(14) { left: 80%; animation-duration: 10s; animation-delay: 2s; width: 6px; height: 6px; }
.animation-water-splash .water-drop:nth-child(15) { left: 30%; animation-duration: 7s; animation-delay: 7s; width: 8px; height: 8px; }

/* Ripple effect */
.animation-water-splash .ripple {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  animation: rippleExpand 4s ease-out infinite;
  pointer-events: none;
}

@keyframes rippleExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  100% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    opacity: 0;
  }
}

/* Wave animation for section dividers */
.animation-water-splash .wave-divider {
  position: relative;
  height: 60px;
  overflow: hidden;
}

.animation-water-splash .wave-divider::before,
.animation-water-splash .wave-divider::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: var(--bg-color);
  border-radius: 100% 100% 0 0;
}

.animation-water-splash .wave-divider::before {
  animation: waveMove 8s ease-in-out infinite;
  opacity: 0.3;
}

.animation-water-splash .wave-divider::after {
  animation: waveMove 6s ease-in-out infinite reverse;
  opacity: 0.5;
}

@keyframes waveMove {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(2%) translateY(-5px); }
  50% { transform: translateX(-2%) translateY(0); }
  75% { transform: translateX(1%) translateY(-3px); }
}

/* Liquid morph shapes */
.animation-water-splash .liquid-shape {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  animation: morphShape 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes morphShape {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

.animation-water-splash .liquid-shape:nth-child(1) {
  width: 300px; height: 300px;
  top: 10%; left: -5%;
  animation-duration: 15s;
}

.animation-water-splash .liquid-shape:nth-child(2) {
  width: 200px; height: 200px;
  top: 50%; right: -5%;
  animation-duration: 18s;
  animation-delay: -5s;
}

/* Bubbling effect */
.animation-water-splash .bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.08), transparent);
  animation: bubbleRise linear infinite;
  pointer-events: none;
}

@keyframes bubbleRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.8; }
  50% {
    transform: translateY(-40vh) scale(1.1) translateX(20px);
  }
  90% { opacity: 0.3; }
  100% {
    transform: translateY(-80vh) scale(0.8) translateX(-10px);
    opacity: 0;
  }
}

.animation-water-splash .bubble:nth-child(1) { left: 10%; width: 20px; height: 20px; animation-duration: 6s; animation-delay: 0s; }
.animation-water-splash .bubble:nth-child(2) { left: 30%; width: 30px; height: 30px; animation-duration: 8s; animation-delay: 1s; }
.animation-water-splash .bubble:nth-child(3) { left: 50%; width: 15px; height: 15px; animation-duration: 5s; animation-delay: 2s; }
.animation-water-splash .bubble:nth-child(4) { left: 70%; width: 25px; height: 25px; animation-duration: 7s; animation-delay: 0.5s; }
.animation-water-splash .bubble:nth-child(5) { left: 90%; width: 18px; height: 18px; animation-duration: 9s; animation-delay: 3s; }
.animation-water-splash .bubble:nth-child(6) { left: 20%; width: 12px; height: 12px; animation-duration: 6s; animation-delay: 4s; }
.animation-water-splash .bubble:nth-child(7) { left: 60%; width: 22px; height: 22px; animation-duration: 8s; animation-delay: 1.5s; }
.animation-water-splash .bubble:nth-child(8) { left: 80%; width: 16px; height: 16px; animation-duration: 7s; animation-delay: 5s; }

/* ==========================================
   TECH-GRID PRESET
   ========================================== */

.animation-tech-grid .tech-grid-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Grid lines */
.animation-tech-grid .grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridScroll 20s linear infinite;
}

@keyframes gridScroll {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* Glowing dots at grid intersections */
.animation-tech-grid .glow-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5),
              0 0 20px rgba(var(--accent-rgb), 0.3);
  animation: dotPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

.animation-tech-grid .glow-dot:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.animation-tech-grid .glow-dot:nth-child(2) { top: 40%; left: 70%; animation-delay: 0.5s; }
.animation-tech-grid .glow-dot:nth-child(3) { top: 60%; left: 20%; animation-delay: 1s; }
.animation-tech-grid .glow-dot:nth-child(4) { top: 30%; left: 80%; animation-delay: 1.5s; }
.animation-tech-grid .glow-dot:nth-child(5) { top: 70%; left: 50%; animation-delay: 2s; }
.animation-tech-grid .glow-dot:nth-child(6) { top: 15%; left: 60%; animation-delay: 0.8s; }
.animation-tech-grid .glow-dot:nth-child(7) { top: 80%; left: 40%; animation-delay: 2.5s; }
.animation-tech-grid .glow-dot:nth-child(8) { top: 50%; left: 10%; animation-delay: 1.2s; }

/* Circuit-board pattern lines */
.animation-tech-grid .circuit-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.3), transparent);
  height: 1px;
  animation: circuitFlow 4s linear infinite;
  pointer-events: none;
}

@keyframes circuitFlow {
  0% { width: 0; opacity: 0; }
  10% { opacity: 1; }
  100% { width: 200px; opacity: 0; }
}

.animation-tech-grid .circuit-line:nth-child(1) { top: 25%; left: 10%; animation-delay: 0s; }
.animation-tech-grid .circuit-line:nth-child(2) { top: 45%; left: 40%; animation-delay: 1s; }
.animation-tech-grid .circuit-line:nth-child(3) { top: 65%; left: 20%; animation-delay: 2s; }
.animation-tech-grid .circuit-line:nth-child(4) { top: 35%; left: 60%; animation-delay: 0.5s; }
.animation-tech-grid .circuit-line:nth-child(5) { top: 75%; left: 50%; animation-delay: 3s; }

/* Data flow vertical lines */
.animation-tech-grid .data-flow {
  position: absolute;
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
  animation: dataDown 3s linear infinite;
  pointer-events: none;
}

@keyframes dataDown {
  0% { transform: translateY(-100px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.animation-tech-grid .data-flow:nth-child(1) { left: 15%; animation-delay: 0s; animation-duration: 4s; }
.animation-tech-grid .data-flow:nth-child(2) { left: 35%; animation-delay: 1s; animation-duration: 3s; }
.animation-tech-grid .data-flow:nth-child(3) { left: 55%; animation-delay: 2s; animation-duration: 5s; }
.animation-tech-grid .data-flow:nth-child(4) { left: 75%; animation-delay: 0.5s; animation-duration: 3.5s; }
.animation-tech-grid .data-flow:nth-child(5) { left: 90%; animation-delay: 3s; animation-duration: 4.5s; }

/* ==========================================
   BUBBLES PRESET
   ========================================== */

.animation-bubbles .bubbles-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.animation-bubbles .float-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(var(--accent-rgb), 0.15),
    rgba(var(--accent-rgb), 0.05) 50%,
    transparent);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  animation: floatUp ease-in infinite;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.animation-bubbles .float-bubble:hover {
  animation-play-state: paused;
  transform: scale(1.3);
  background: radial-gradient(circle at 30% 30%,
    rgba(var(--accent-rgb), 0.3),
    rgba(var(--accent-rgb), 0.1) 50%,
    transparent);
}

@keyframes floatUp {
  0% {
    bottom: -10%;
    opacity: 0;
    transform: translateX(0) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    transform: translateX(30px) scale(1.05);
  }
  90% {
    opacity: 0.5;
  }
  100% {
    bottom: 110%;
    opacity: 0;
    transform: translateX(-20px) scale(0.8);
  }
}

.animation-bubbles .float-bubble:nth-child(1) { left: 5%; width: 40px; height: 40px; animation-duration: 10s; animation-delay: 0s; }
.animation-bubbles .float-bubble:nth-child(2) { left: 15%; width: 60px; height: 60px; animation-duration: 12s; animation-delay: 2s; }
.animation-bubbles .float-bubble:nth-child(3) { left: 25%; width: 30px; height: 30px; animation-duration: 8s; animation-delay: 1s; }
.animation-bubbles .float-bubble:nth-child(4) { left: 35%; width: 50px; height: 50px; animation-duration: 14s; animation-delay: 3s; }
.animation-bubbles .float-bubble:nth-child(5) { left: 45%; width: 70px; height: 70px; animation-duration: 11s; animation-delay: 0.5s; }
.animation-bubbles .float-bubble:nth-child(6) { left: 55%; width: 35px; height: 35px; animation-duration: 9s; animation-delay: 4s; }
.animation-bubbles .float-bubble:nth-child(7) { left: 65%; width: 55px; height: 55px; animation-duration: 13s; animation-delay: 1.5s; }
.animation-bubbles .float-bubble:nth-child(8) { left: 75%; width: 25px; height: 25px; animation-duration: 7s; animation-delay: 5s; }
.animation-bubbles .float-bubble:nth-child(9) { left: 85%; width: 45px; height: 45px; animation-duration: 10s; animation-delay: 2.5s; }
.animation-bubbles .float-bubble:nth-child(10) { left: 92%; width: 35px; height: 35px; animation-duration: 12s; animation-delay: 6s; }
.animation-bubbles .float-bubble:nth-child(11) { left: 8%; width: 20px; height: 20px; animation-duration: 9s; animation-delay: 7s; }
.animation-bubbles .float-bubble:nth-child(12) { left: 50%; width: 28px; height: 28px; animation-duration: 11s; animation-delay: 3.5s; }

/* Gradient sphere animations */
.animation-bubbles .gradient-sphere {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--accent-rgb), 0.12),
    rgba(var(--accent-rgb), 0.03) 60%,
    transparent);
  filter: blur(30px);
  animation: sphereFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sphereFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.9); }
  75% { transform: translate(40px, 30px) scale(1.05); }
}

.animation-bubbles .gradient-sphere:nth-child(1) {
  width: 300px; height: 300px;
  top: 10%; left: 10%;
  animation-delay: 0s;
}

.animation-bubbles .gradient-sphere:nth-child(2) {
  width: 200px; height: 200px;
  top: 60%; right: 10%;
  animation-delay: -7s;
}

.animation-bubbles .gradient-sphere:nth-child(3) {
  width: 250px; height: 250px;
  bottom: 10%; left: 40%;
  animation-delay: -14s;
}

/* Pop effect on hover (used by JS) */
@keyframes bubblePop {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
  100% { transform: scale(0); opacity: 0; }
}

.animation-bubbles .float-bubble.popping {
  animation: bubblePop 0.3s ease-out forwards;
}

/* ==========================================
   SHARED ANIMATION UTILITIES
   ========================================== */

/* Fade in from below */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Stagger children animation */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

/* Glow pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.2); }
  50% { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4), 0 0 40px rgba(var(--accent-rgb), 0.1); }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* Gradient shift */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* Float animation */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.gentle-float {
  animation: gentleFloat 4s ease-in-out infinite;
}

/* Hero canvas for particle system (JS-driven) */
.hero-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* 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-left, .reveal-right {
    opacity: 1;
    transform: none;
  }
}