/* =============================================================
   CENÁRIO — o "fundo do mar" que acompanha o site inteiro
   Camada fixa atrás de tudo (z-index -2) com degradê de profundidade,
   raios de luz, cáusticas e bolhas subindo. As bolhas e o elemento
   .aqua-bg são criados pelo js/cenario.js (não sujam o HTML).
   ============================================================= */

.aqua-bg {
  position: fixed; inset: 0; z-index: -2;
  overflow: hidden; pointer-events: none;
  /* raso (topo, claro) → fundo (base, escuro) */
  background: linear-gradient(180deg, #6FBBE6 0%, #4098CF 44%, #2E86C4 76%, #1E76B4 100%);
}

/* Luz entrando da superfície + escurecido no canto inferior direito,
   pra dar noção de profundidade. */
.aqua-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(72% 55% at 24% -10%, rgba(205,241,255,.55), transparent 60%),
    linear-gradient(203deg, rgba(214,244,255,.22) 0 2.5%, transparent 20%),
    linear-gradient(197deg, rgba(214,244,255,.15) 7% 9%, transparent 26%),
    linear-gradient(211deg, rgba(214,244,255,.12) 13% 15%, transparent 30%),
    radial-gradient(50% 45% at 88% 108%, rgba(6,40,78,.35), transparent 60%);
}

/* Cáusticas: listras diagonais que deslizam devagar, como reflexo na água.
   O inset negativo é pra listra nenhuma mostrar a borda ao se mover. */
.aqua-bg::after {
  content: ''; position: absolute; inset: -25% -10%; opacity: .45;
  background: repeating-linear-gradient(116deg, transparent 0 46px, rgba(255,255,255,.06) 46px 48px);
  animation: caustic 22s linear infinite;
}
@keyframes caustic { from { transform: translateX(0); } to { transform: translateX(58px); } }

/* ---------- Bolhas ---------- */
.bubble {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,.12) 60%, transparent);
  animation: rise linear infinite;
}
/* As do fundo são mais brilhantes que as do hero (lá o vídeo já clareia tudo) */
.aqua-bg .bubble {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.98), rgba(214,240,252,.4) 52%, rgba(214,240,252,0) 72%);
  box-shadow: 0 0 10px rgba(255,255,255,.28);
}
@keyframes rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: .8; }
  100% { transform: translateY(-115vh) scale(.4); opacity: 0; }
}

/* ---------- Bolhas que saem do cursor ----------
   Só no desktop com mouse — no touch some (ver media query no fim). */
.cursor-bubble {
  position: fixed; top: 0; left: 0; z-index: 9998;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(191,231,250,.35) 55%, rgba(191,231,250,.05) 78%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 7px rgba(255,255,255,.4), inset 0 0 4px rgba(255,255,255,.5);
  transform: translate(-50%,-50%); will-change: transform, opacity;
  animation: cbubble 1.8s ease-out forwards;
}
/* --drift e --rise são sorteados no JS pra nenhuma bolha subir igual à outra */
@keyframes cbubble {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scale(.2); }
  14%  { opacity: .95; }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--drift, 0px)), calc(-50% + var(--rise, -180px))) scale(1.12); }
}
@media (hover: none), (pointer: coarse) { .cursor-bubble { display: none !important; } }