/* =========================================================================
   ONE BOOST — ripples.css
   Ripple/wave effects + cursor FX. Built under the README "Effect-safety
   rules": every effect lives inside a CLIPPING container (no geometric
   rotation of unclipped boxes, no px-sized overlays), so nothing here can
   ever widen the page on mobile. Reduced-motion guard at the bottom.
   Load AFTER premium.css, BEFORE responsive.css.
   ========================================================================= */

/* ---------- 1. Cursor FX overlay (desktop pointers only, added by cursor.js)
   Host is fixed + inset:0 + overflow:hidden + pointer-events:none →
   geometrically incapable of causing horizontal scroll. ---------- */
.cursor-fx {
  position: fixed; inset: 0; z-index: 80;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
}
.cursor-fx.on { opacity: 1; }

/* small bright dot that hugs the cursor */
.cursor-dot {
  position: absolute; top: 0; left: 0; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 10px var(--red), 0 0 24px var(--glow);
}
/* soft wide glow that trails behind it */
.cursor-glow {
  position: absolute; top: 0; left: 0; width: 220px; height: 220px;
  margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--red) 14%, transparent), transparent 65%);
}
/* expanding wave ring on click (clipped by the host at screen edges) */
.cursor-wave {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid var(--red-bright); opacity: .85;
  animation: ob3-wave .65s ease-out forwards;
}
@keyframes ob3-wave {
  to { transform: scale(9); opacity: 0; }
}

/* ---------- 2. Button press ripple (works on touch too)
   .btn already has overflow:hidden (buttons.css); give the two small nav
   controls the same containment so the ripple can never escape. ---------- */
.lang-btn, .nav-toggle { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.38),
              rgba(255,255,255,.14) 42%, transparent 70%);
  transform: scale(0); opacity: .9;
  animation: ob3-ripple .6s ease-out forwards;
}
@keyframes ob3-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ---------- 3. Hero gauge — living pulse rings (app's ALIVE-gauge language)
   .gauge sits inside .mock which has overflow:hidden → fully contained. */
.gauge::before, .gauge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--red) 50%, transparent);
  opacity: 0; pointer-events: none;
  animation: ob3-gaugeRipple 3.2s ease-out infinite;
}
.gauge::after { animation-delay: 1.6s; }
@keyframes ob3-gaugeRipple {
  0%        { transform: scale(.92); opacity: .5; }
  70%, 100% { transform: scale(1.42); opacity: 0; }
}

/* ---------- 4. CTA band — slow breathing glow (box-shadow only: shadows
   never contribute to overflow) ---------- */
.cta-band { animation: ob3-ctaBreathe 6s ease-in-out infinite; }
@keyframes ob3-ctaBreathe {
  0%, 100% { box-shadow: 0 44px 90px -54px var(--glow); }
  50%      { box-shadow: 0 40px 110px -42px var(--glow); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor-fx { display: none !important; }
  .btn-ripple, .cursor-wave { display: none !important; }
  .gauge::before, .gauge::after { animation: none !important; opacity: 0 !important; }
  .cta-band { animation: none !important; }
}