/* ============================================
   AQUASTEALTH - Animations & Keyframes v4
   Reveal system + ambient idle dynamics
   ============================================ */

/* ---- Scroll-Reveal System ---- */
/* Initial hidden states */
[data-scroll] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out),
    filter 0.8s var(--ease-out),
    clip-path 0.8s var(--ease-out);
}

/* Per-type initial transforms */
[data-scroll="fade-up"]    { transform: translateY(50px); }
[data-scroll="fade-down"]  { transform: translateY(-50px); }
[data-scroll="fade-left"]  { transform: translateX(60px); }
[data-scroll="fade-right"] { transform: translateX(-60px); }
[data-scroll="scale-up"]   { transform: scale(0.85); }
[data-scroll="blur-in"]    { transform: translateY(20px); filter: blur(10px); }
[data-scroll="rotate-in"]  { transform: perspective(800px) rotateY(20deg) translateX(40px); }

/* Revealed state */
[data-scroll].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
}

/* ---- Stagger Children ---- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

[data-stagger] > *.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Keyframe Animations ---- */

/* Device Float — gentle bob */
@keyframes device-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-10px) rotate(0.5deg); }
  50%      { transform: translateY(-18px) rotate(0deg); }
  75%      { transform: translateY(-8px) rotate(-0.5deg); }
}

/* Atom Orbit Spin */
@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotateX(60deg) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(60deg) rotate(360deg); }
}

@keyframes orbit-spin-2 {
  from { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(60deg) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(60deg) rotate(-360deg); }
}

/* Proton Pulse */
@keyframes proton-pulse {
  0%, 100% {
    box-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(34, 209, 238, 0.15);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 60px var(--accent-glow), 0 0 100px rgba(34, 209, 238, 0.2);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Ripple Pulse (atom) */
@keyframes ripple-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* Bubble Rise */
@keyframes bubble-rise {
  0%   { transform: translateY(100%) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-100vh) scale(1); opacity: 0; }
}

/* Ripple click expand */
@keyframes ripple-expand {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Success Checkmark Draw */
@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

/* ============================================
   IDLE AMBIENT ANIMATIONS
   These play continuously to keep pages alive
   ============================================ */

/* ---- Card Border Breathing ---- */
/* Active section cards pulse their border subtly */
@keyframes border-breathe {
  0%, 100% { border-color: var(--glass-border); }
  50%      { border-color: rgba(34, 209, 238, 0.18); }
}

.section.is-active .benefit-card,
.section.is-active .pillar-card,
.section.is-active .indication-card,
.section.is-active .problem-card {
  animation: border-breathe 4s ease-in-out infinite;
}

/* Stagger the breathing so cards don't pulse in sync */
.section.is-active .benefit-card:nth-child(2),
.section.is-active .pillar-card:nth-child(2),
.section.is-active .indication-card:nth-child(2) { animation-delay: 1s; }

.section.is-active .benefit-card:nth-child(3),
.section.is-active .pillar-card:nth-child(3),
.section.is-active .indication-card:nth-child(3) { animation-delay: 2s; }

.section.is-active .benefit-card:nth-child(4),
.section.is-active .indication-card:nth-child(4) { animation-delay: 3s; }

.section.is-active .indication-card:nth-child(5) { animation-delay: 0.5s; }
.section.is-active .indication-card:nth-child(6) { animation-delay: 1.5s; }
.section.is-active .indication-card:nth-child(7) { animation-delay: 2.5s; }
.section.is-active .indication-card:nth-child(8) { animation-delay: 3.5s; }

/* ---- Shimmer Sweep on Active Cards ---- */
@keyframes shimmer-sweep {
  0%   { left: -100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

.section.is-active .benefit-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  pointer-events: none;
  z-index: 0;
  animation: shimmer-sweep 8s ease-in-out infinite;
}

.section.is-active .benefit-card:nth-child(2)::after { animation-delay: 2s; }
.section.is-active .benefit-card:nth-child(3)::after { animation-delay: 4s; }
.section.is-active .benefit-card:nth-child(4)::after { animation-delay: 6s; }

/* ---- Ambient Floating Particles ---- */
/* CSS-only particles that float in active sections */
@keyframes particle-drift {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  10%  { opacity: 0.6; transform: translate(0, 0) scale(1); }
  90%  { opacity: 0.6; }
  100% { transform: translate(var(--dx, 40px), var(--dy, -80px)) scale(0); opacity: 0; }
}

.ambient-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-particles .particle {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: particle-drift var(--dur, 10s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ---- Section Title Underline Pulse ---- */
@keyframes line-glow {
  0%, 100% { box-shadow: none; opacity: 0.8; }
  50%      { box-shadow: 0 0 12px var(--accent-glow); opacity: 1; }
}

.section.is-active .section__title::after {
  animation: line-glow 3s ease-in-out infinite;
}

/* ---- Timeline Dot Pulse (when active) ---- */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 15px var(--accent-glow); }
  50%      { box-shadow: 0 0 25px var(--accent-glow), 0 0 50px rgba(34, 209, 238, 0.15); }
}

.timeline__step.is-active .timeline__dot {
  animation: dot-pulse 2s ease-in-out infinite;
}

/* ---- Stat Number Glow ---- */
@keyframes number-glow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 20px var(--accent-glow); }
}

.section.is-active .stat-card__number {
  animation: number-glow 3s ease-in-out infinite;
}

.section.is-active .stat-card:nth-child(2) .stat-card__number { animation-delay: 0.75s; }
.section.is-active .stat-card:nth-child(3) .stat-card__number { animation-delay: 1.5s; }
.section.is-active .stat-card:nth-child(4) .stat-card__number { animation-delay: 2.25s; }

/* ---- Device Shadow Pulse ---- */
@keyframes device-glow-pulse {
  0%, 100% { filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(34, 209, 238, 0.15)); }
  50%      { filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 80px rgba(34, 209, 238, 0.25)); }
}

.section.is-active .device-section__image img,
.section.is-active .specs__image img {
  animation: device-float 6s ease-in-out infinite, device-glow-pulse 4s ease-in-out infinite;
}

.section.is-active .specs__image img {
  animation: device-float 8s ease-in-out infinite, device-glow-pulse 5s ease-in-out infinite;
}

/* ---- Pill Subtle Float ---- */
@keyframes pill-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.section.is-active .pill {
  animation: pill-float 3s ease-in-out infinite;
}

.section.is-active .pill:nth-child(2) { animation-delay: 0.5s; }
.section.is-active .pill:nth-child(3) { animation-delay: 1s; }
.section.is-active .pill:nth-child(4) { animation-delay: 1.5s; }
.section.is-active .pill:nth-child(5) { animation-delay: 2s; }
.section.is-active .pill:nth-child(6) { animation-delay: 2.5s; }

/* ---- Image Card Subtle Zoom Breathe ---- */
@keyframes card-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

.section.is-active .image-card__img {
  animation: card-breathe 6s ease-in-out infinite;
}

.section.is-active .image-card:nth-child(2) .image-card__img { animation-delay: 1.5s; }
.section.is-active .image-card:nth-child(3) .image-card__img { animation-delay: 3s; }
.section.is-active .image-card:nth-child(4) .image-card__img { animation-delay: 4.5s; }

/* ---- CTA Button Glow Pulse ---- */
@keyframes cta-pulse {
  0%, 100% { box-shadow: var(--shadow-cta); }
  50%      { box-shadow: 0 0 40px var(--cta-glow), 0 0 80px rgba(251, 191, 36, 0.15); }
}

.section.is-active .btn-primary {
  animation: cta-pulse 3s ease-in-out infinite;
}

/* ---- Hover Glow on Cards ---- */
.benefit-card::before,
.pillar-card::before,
.indication-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    300px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(34, 209, 238, 0.08),
    transparent 60%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.benefit-card:hover::before,
.pillar-card:hover::before,
.indication-card:hover::before {
  opacity: 1;
}

/* Ensure card content stays above glow */
.benefit-card > *,
.pillar-card > *,
.indication-card > * {
  position: relative;
  z-index: 1;
}

/* ---- Light Sweep on Glass Cards ---- */
.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.glass-card:hover::after {
  left: 100%;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-scroll],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  .hero__content {
    opacity: 1 !important;
    transform: none !important;
  }

  .h2-bubble,
  .atom-viz__orbit,
  .atom-viz__proton,
  .atom-viz__ripple {
    animation: none !important;
  }

  .device-section__image img,
  .specs__image img {
    animation: none !important;
  }

  #hero-canvas {
    display: none !important;
  }

  .ambient-particles {
    display: none !important;
  }
}