/* ═══════════════════════════════════════════════════════════
   DABFOS – animations.css
   Scroll reveal · Keyframes · Water effects
   ═══════════════════════════════════════════════════════════ */

/* ── TICKER ────────────────────────────────────────────────── */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── WATER / BUBBLE ─────────────────────────────────────────── */
@keyframes bubbleRise {
  0%   { transform: translateY(0);    opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .5; }
  100% { transform: translateY(-95%); opacity: 0; }
}

@keyframes streamFall {
  0%   { transform: scaleX(.85); }
  100% { transform: scaleX(1.05); }
}

@keyframes pumpPulse {
  0%, 100% { opacity: .7; transform: scale(.98); }
  50%       { opacity: 1;  transform: scale(1.04); }
}

/* ── GENERAL ────────────────────────────────────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(240,165,0,.3); }
  50%       { box-shadow: 0 4px 40px rgba(240,165,0,.65); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── SCROLL REVEAL SYSTEM ───────────────────────────────────── */

/* Elements with [data-reveal] start hidden */
[data-reveal] {
  opacity: 0;
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
}
[data-reveal="up"]     { transform: translateY(36px); }
[data-reveal="down"]   { transform: translateY(-36px); }
[data-reveal="left"]   { transform: translateX(-48px); }
[data-reveal="right"]  { transform: translateX(48px); }
[data-reveal="scale"]  { transform: scale(.92); }
[data-reveal="fade"]   { transform: none; }

/* When JS adds .is-visible, element animates in */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Optional delay modifiers */
[data-delay="100"] { transition-delay: .1s; }
[data-delay="200"] { transition-delay: .2s; }
[data-delay="300"] { transition-delay: .3s; }
[data-delay="400"] { transition-delay: .4s; }
[data-delay="500"] { transition-delay: .5s; }
[data-delay="600"] { transition-delay: .6s; }
[data-delay="700"] { transition-delay: .7s; }

/* ── STAGGER CHILDREN ───────────────────────────────────────── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1),
              transform .55s cubic-bezier(.4,0,.2,1);
}
[data-stagger].is-staggered > *:nth-child(1)  { transition-delay: .04s; }
[data-stagger].is-staggered > *:nth-child(2)  { transition-delay: .12s; }
[data-stagger].is-staggered > *:nth-child(3)  { transition-delay: .20s; }
[data-stagger].is-staggered > *:nth-child(4)  { transition-delay: .28s; }
[data-stagger].is-staggered > *:nth-child(5)  { transition-delay: .36s; }
[data-stagger].is-staggered > *:nth-child(6)  { transition-delay: .44s; }
[data-stagger].is-staggered > *:nth-child(7)  { transition-delay: .52s; }
[data-stagger].is-staggered > *:nth-child(8)  { transition-delay: .60s; }
[data-stagger].is-staggered > * {
  opacity: 1;
  transform: none;
}

/* ── DEPTH BAR ──────────────────────────────────────────────── */
.depth-bar__fill {
  transform-origin: left;
  animation: none;
}
.depth-bar__fill.animate {
  animation: barGrow 1.1s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── PAGE ENTER ─────────────────────────────────────────────── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.page-enter { animation: pageEnter .5s cubic-bezier(.4,0,.2,1) forwards; }

/* ── FLOAT ──────────────────────────────────────────────────── */
.float-anim { animation: floatY 3.5s ease-in-out infinite; }

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .float-anim, .glow-pulse { animation: none !important; }
}