/* ==========================================================================
   Megaliner — efeitos de água (tom azul suave, bolhas e ondulação ao clicar)
   Tudo é decorativo: não muda conteúdo nem layout e desliga sozinho para
   quem pede "menos movimento" no celular/computador.
   ========================================================================== */

/* ---------- Tom azul suave nas seções claras ---------- */
.fx-water { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #f4f9fd 0%, #ffffff 50%, #f1f8fc 100%); }
.fx-water > .container { position: relative; z-index: 2; }
.fx-water__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(30% 45% at 0% 25%, rgba(0, 189, 240, .20), transparent 70%),
    radial-gradient(28% 40% at 100% 65%, rgba(4, 103, 168, .16), transparent 70%),
    radial-gradient(22% 30% at 92% 10%, rgba(0, 189, 240, .10), transparent 70%);
}

/* ---------- Bolhas flutuando nas seções escuras ---------- */
.fx-bubbles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fx-bubbles span,
.fx-scroll-bubbles span {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(127, 227, 255, .65);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85) 0 10%, rgba(127, 227, 255, .22) 28%, rgba(0, 189, 240, .06) 65%, rgba(0, 189, 240, .14) 100%);
  box-shadow: 0 0 10px rgba(0, 189, 240, .25), inset 0 0 6px rgba(127, 227, 255, .3);
}
.fx-bubbles span { bottom: -30px; animation: fxBubble linear infinite; }
@keyframes fxBubble {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translate3d(var(--sway, 12px), -55vh, 0); }
  100% { transform: translate3d(0, -110vh, 0); opacity: 0; }
}
.section--dark > .container, .quote > .container { position: relative; z-index: 2; }

/* ---------- Leva de bolhas ao rolar a página ---------- */
.fx-scroll-bubbles { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.fx-scroll-bubbles span {
  bottom: -24px; opacity: 0;
  border: 1.5px solid rgba(0, 150, 210, .7);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 12%, rgba(127, 227, 255, .45) 32%, rgba(0, 189, 240, .12) 66%, rgba(0, 150, 210, .28) 100%);
  animation: fxScrollBubble ease-out forwards;
}
@keyframes fxScrollBubble {
  0%   { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  12%  { opacity: .9; }
  45%  { transform: translate3d(var(--sway, 10px), calc(var(--rise) * -.45), 0) scale(.9); }
  100% { transform: translate3d(calc(var(--sway, 10px) * -.6), calc(var(--rise) * -1), 0) scale(1.1); opacity: 0; }
}

/* ---------- Ondulação ao clicar em qualquer lugar ---------- */
.fx-click {
  position: fixed; z-index: 9999; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid rgba(0, 189, 240, .7);
  animation: fxClick .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
.fx-click--2 { animation-delay: .12s; opacity: 0; }
@keyframes fxClick { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(6); opacity: 0; } }

/* o site desliga animações para quem pede "menos movimento"; os efeitos de água continuam (são suaves) */
@media (prefers-reduced-motion: reduce) {
  .fx-bubbles span { animation-name: fxBubble !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; }
  .fx-scroll-bubbles span { animation-name: fxScrollBubble !important; animation-timing-function: ease-out !important; animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; }
  .fx-click { animation-name: fxClick !important; animation-duration: .9s !important; animation-timing-function: cubic-bezier(.2, .7, .3, 1) !important; animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; }
  .fx-click--2 { animation-delay: .12s !important; }
}