/* ==========================================================
   HORIZONTAL PARALLAX OVERLAY — STYLES
   Pairs with parallax.js
   ========================================================== */

/* ----------------------------------------------------------
   Strip bottom padding from sections so the wave can sit
   flush at the very bottom edge. The wave itself provides
   the visual breathing room that the old padding gave.
---------------------------------------------------------- */
.horizontal-section {
  padding-bottom: 0 !important;
}

/* ----------------------------------------------------------
   WAVE LAYER — one per section, pinned to section's bottom
   The wave travels with its section as the user scrolls
   horizontally. Internal CSS animation provides ambient motion.

   position: sticky keeps the wave glued to the viewport
   bottom during vertical scroll. The wave takes its natural
   40vh of flow space (no negative margin), which guarantees
   the section always scrolls, so sticky always activates.
---------------------------------------------------------- */
.wave-layer {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 40vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  /* Opt out of flex centering on the hero */
  align-self: stretch;
  flex-shrink: 0;
}

/* Hero uses flex centering and doesn't scroll vertically,
   so absolute positioning to the bottom is sufficient. */
.hero .wave-layer {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
}

.wave-layer svg {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 200%;
  height: 100%;
  display: block;
  color: var(--accent-warm, #38BDF8);
}

.wave-layer .wave-svg-1 {
  opacity: 0;
  animation: wave-drift-1 28s linear infinite;
}
.wave-layer .wave-svg-2 {
  opacity: 0;
  animation: wave-drift-2 42s linear infinite;
}
.wave-layer .wave-svg-3 {
  opacity: 0;
  animation: wave-drift-3 60s linear infinite;
}

@keyframes wave-drift-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes wave-drift-2 {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes wave-drift-3 {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----------------------------------------------------------
   PARALLAX LAYER (floating SVG objects)
   Absolute-positioned so flex parents don't reposition it.
---------------------------------------------------------- */
.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  align-self: stretch;
  flex-shrink: 0;
}

.parallax-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-warm, #38BDF8);
  will-change: transform;
  transform-origin: center center;
  transition: opacity 0.6s ease;
}

.parallax-item svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----------------------------------------------------------
   Z-INDEX SAFETY NET — all real content above the layers
---------------------------------------------------------- */
.horizontal-section > *:not(.parallax-layer):not(.wave-layer) {
  position: relative;
  z-index: 2;
}


/* ----------------------------------------------------------
   Mobile — disable parallax + waves
---------------------------------------------------------- */
@media (max-width: 768px) {
  .parallax-layer,
  .wave-layer {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   Reduced motion — kill parallax + cursor, freeze waves
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .parallax-layer {
    display: none !important;
  }
  .wave-layer svg {
    animation: none !important;
  }
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}