/* ============================================
   O-FEST — Liquid glass parallax waves
   Decorative undertow layer: wavy lines that drift
   at different speeds on scroll and visually
   refract the content sitting behind them.
   ============================================ */

.waves-layer {
  position: absolute;
  inset: -10% -5%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Each wave is an independent element so it can carry
   its own parallax speed (set via data-speed + JS transform)
   and its own displacement filter for the "liquid" refraction. */
.wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 220px;
  will-change: transform;
}

.wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wave path {
  fill: none;
  stroke-linecap: round;
}

/* The glass strip: a thin horizontal band that bends whatever
   sits behind it, like the brand's liquid-glass reference art.
   It's a slim ribbon (not the full wave height) so the refraction
   reads as a delicate ripple rather than smearing nearby text.
   backdrop-filter + feDisplacementMap degrades gracefully —
   browsers without support just show the soft tinted strip. */
.wave-glass {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 34px;
  transform: translateY(-50%);
  backdrop-filter: url(#liquidDisplace);
  -webkit-backdrop-filter: none;
  background: linear-gradient(
    180deg,
    rgba(240, 238, 245, 0) 0%,
    rgba(240, 238, 245, 0.06) 35%,
    rgba(229, 10, 0, 0.07) 50%,
    rgba(134, 231, 255, 0.06) 65%,
    rgba(240, 238, 245, 0) 100%
  );
  mix-blend-mode: screen;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.wave-1 { top: 8%; height: 180px; opacity: 0.5; }
.wave-2 { top: 32%; height: 240px; opacity: 0.65; }
.wave-3 { top: 58%; height: 200px; opacity: 0.45; }
.wave-4 { top: 80%; height: 260px; opacity: 0.55; }

@media (max-width: 768px) {
  .waves-layer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wave { transform: none !important; }
}