/* ==========================================================================
   AQUAVAULT — Animations & effets d'ambiance
   ========================================================================== */

/* Reveal on scroll — léger flou en plus du déplacement, pour un rendu plus "orchestré" */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

/* Stagger children */
[data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .14s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .23s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .32s; }
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }

/* Floating */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-18px) rotate(var(--rot, 0deg)); }
}
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }
.float-delay { animation-delay: 1.4s; }

/* Ripple rings (waterproof demo) */
@keyframes ripple {
  0% { transform: scale(0.7); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ripple-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(0, 212, 255, 0.55);
  animation: ripple 3.2s var(--ease) infinite;
}
.ripple-ring.r2 { animation-delay: 1s; }
.ripple-ring.r3 { animation-delay: 2s; }

/* Rising bubbles */
@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translateY(-260px) scale(0.4); opacity: 0; }
}
.bubble {
  position: absolute; bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.15));
  animation: rise 4.5s ease-in infinite;
}

/* Glow pulse */
@keyframes glow-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.08); }
}
.glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }

/* Marquee (logos / trust bar) */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }

/* Wave drift (background blobs) */
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}
.blob { animation: drift 14s ease-in-out infinite; }

/* Fade in page */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.page-fade { animation: fadeIn .6s var(--ease); }

/* Sticky ATC bar slide up */
.sticky-atc { transform: translateY(100%); transition: transform .5s var(--ease); }
.sticky-atc.is-visible { transform: translateY(0); }

/* Hover lift for images */
.img-lift { transition: transform .6s var(--ease); }
.img-lift:hover { transform: translateY(-8px) scale(1.01); }

/* Progress underline for tabs */
.tab-underline { position: relative; }
.tab-underline::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--ocean); transition: width .4s var(--ease);
}
.tab-underline.is-active::after { width: 100%; }

/* Loader shimmer (skeleton, optional use) */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Séquence d'entrée du hero — orchestrée au chargement (pas au scroll, le hero est visible d'emblée) */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
.hero-sequence > * {
  opacity: 0;
  animation: heroIn 1s var(--ease) forwards;
}
.hero-sequence > *:nth-child(1) { animation-delay: .15s; }
.hero-sequence > *:nth-child(2) { animation-delay: .30s; }
.hero-sequence > *:nth-child(3) { animation-delay: .45s; }
.hero-sequence > *:nth-child(4) { animation-delay: .60s; }
.hero-sequence > *:nth-child(5) { animation-delay: .75s; }

/* Grain discret sur les sections sombres — texture "instrument premium", jamais au détriment de la lisibilité */
.hero::after,
.demo-section::after,
.stats-band::after,
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tilt 3D subtil sur le visuel produit (desktop, souris fine uniquement — piloté en JS) */
.tilt-target {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-sequence > * { opacity: 1 !important; }
  .hero::after, .demo-section::after, .stats-band::after, .final-cta::after { display: none; }
}