/* ============================================================================
 * effects.css — experimental water-themed motion layer.
 *
 * Everything is gated behind `prefers-reduced-motion: no-preference` and uses
 * only `transform`/`opacity` (plus one tiny pseudo-element gradient sweep), so
 * it stays cheap for Core Web Vitals. The `.wfx-*` classes are added at runtime
 * by initWaterEffects() in app.js — if JS never runs, nothing hides and the
 * page renders exactly as before.
 *
 * To revert: delete this file, its <link> in BaseLayout.astro, and the
 * initWaterEffects() block + its call in app.js.
 * ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* 1. Drip-in reveal — content falls in from just above and settles, like a
     drop landing (slight overshoot in the easing). One-shot via IO. */
  .wfx-reveal {
    opacity: 0;
    transform: translateY(-16px) scaleY(0.98);
    transform-origin: top center;
    transition:
      opacity 0.5s ease,
      transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1);
  }
  .wfx-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* 2. Ripple — a water ring spreads from the click point on any button. The
     ring takes the button's text colour, so it adapts to every variant. */
  .btn {
    position: relative;
    overflow: hidden;
  }
  .wfx-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
    transform: scale(0);
    pointer-events: none;
    animation: wfx-ripple 0.6s ease-out forwards;
  }
  @keyframes wfx-ripple {
    to {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  /* 3. Shimmer — a slow band of light drifts across the dark accent bars, like
     sunlight moving over water. Clipped to each bar via overflow:hidden. */
  .geo-strip,
  .cta-banner {
    position: relative;
    overflow: hidden;
  }
  .geo-strip::after,
  .cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 40%,
      rgba(255, 255, 255, 0.07) 50%,
      transparent 60%
    );
    transform: translateX(-65%);
    animation: wfx-shimmer 9s ease-in-out infinite;
  }
  .cta-banner::after {
    animation-duration: 11s;
  }
  @keyframes wfx-shimmer {
    0%,
    100% {
      transform: translateX(-65%);
    }
    50% {
      transform: translateX(65%);
    }
  }
}

/* 4. Flowing pipe — water runs left→right through the gaps between the
   How-it-works steps, aligned with the number circles. Desktop only (the steps
   are a single 3-up row at >=768px); the last step has no outgoing pipe. The
   dash period (14px) matches the animation distance for a seamless loop. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .how-step {
    position: relative;
  }
  .how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    /* border(1) + padding-top(space-8) + half of the 48px circle */
    top: calc(1px + var(--space-8) + 24px);
    left: 100%;
    width: var(--space-6); /* the grid gap */
    height: 3px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(
      90deg,
      var(--color-brand-secondary) 0 6px,
      transparent 6px 14px
    );
    background-size: 14px 100%;
    animation: wfx-pipe 0.7s linear infinite;
  }
  @keyframes wfx-pipe {
    to {
      background-position-x: 14px;
    }
  }
}