/* Floating ball */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-22px); }
}

.ball {
  animation: float 6s ease-in-out infinite;
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-delay="3"] { transition-delay: 0.35s; }
[data-reveal][data-delay="4"] { transition-delay: 0.5s; }

/* ─── Glitch — SVG turbulence displacement (periodic burst) ── */

/*
  The warp is produced by an SVG <filter> (feTurbulence → feDisplacementMap)
  defined in index.html and animated there via SMIL. Idle most of the cycle
  (displacement scale 0 → crisp text), then a distortion burst at ~80–96%, in
  sync across all three lines. Here we only attach the filter.
*/

/* Hidden container for the inline SVG filter defs */
.glitch-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.glitch {
  position: relative;
  display: inline-block;
}

/* Auto burst — all lines reference the same animated filter, so they warp
   together. The burst timing lives in the SMIL <animate> tags. */
.glitch-auto {
  filter: url(#glitch-distort);
  will-change: filter;
}

/* Hover: swap to the continuous fast-jitter filter */
.glitch-wrapper:hover .glitch-auto {
  filter: url(#glitch-distort-hover);
}

@media (prefers-reduced-motion: reduce) {
  .glitch-auto,
  .glitch-wrapper:hover .glitch-auto {
    filter: none;
  }
  /* Stop the floating ball and show revealed content without motion */
  .ball {
    animation: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}