/* Crystal Tropical — hero e parallax
   Cada camada le --scroll-y (px, sem unidade) e aplica seu proprio fator --f.
   Fator alto = camada distante (parece quase parada).
   Fator zero/negativo = primeiro plano (passa rapido).
   Nenhum listener de scroll por elemento: um unico rAF em scroll.js. */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  /* A agua e o fundo do proprio hero: nao translada, so muda de cor.
     As paradas sao interpoladas via --hero-progress em scroll.js. */
  background: linear-gradient(
    to bottom,
    var(--ceu-topo, #7FD8F5) 0%,
    var(--ceu-meio, #1B4FA0) 48%,
    var(--ceu-base, #03102E) 76%,
    /* A ultima parada e EXATAMENTE a cor da secao seguinte, e translucida
       como ela. Sem isto o hero termina opaco em #020A1E e a secao comeca
       em rgba(7,26,62,.82) sobre a agua fixa — duas cores diferentes
       encostando, o que desenha uma linha dura na emenda. */
    rgba(7, 26, 62, .82) 100%
  );
}

.hero__cenario {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.camada {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(
    calc(var(--mouse-x) * var(--mx, 0) * 1px),
    calc(var(--scroll-y) * var(--f, 0) * 1px),
    0
  );
}

.camada svg {
  width: 100%;
  height: 100%;
}

/* Os sete planos, do fundo para a frente.
   --f  deslocamento vertical por px de scroll
   --mx deriva horizontal do mouse, em px */
.camada--luz        { --f: .45; --mx:  2; }
.camada--superficie { --f: .38; --mx:  4; }
.camada--gotas      { --f: .28; --mx:  7; }
.camada--ondas      { --f: .18; --mx: 10; }
.camada--bolhas     { --f: .10; --mx: 14; }
.camada--frente     { --f: -.08; --mx: 20; }

/* Bolhas: sobem sozinhas, independentes do scroll — eco do nucleo do emblema */
.bolha {
  transform-box: fill-box;
  animation: subir var(--t, 14s) linear infinite;
  animation-delay: var(--d, 0s);
  transform-origin: center;
}
@keyframes subir {
  0%   { transform: translateY(0) scale(1);      opacity: 0; }
  12%  {                                          opacity: .55; }
  85%  {                                          opacity: .35; }
  100% { transform: translateY(-260px) scale(.5); opacity: 0; }
}

/* Conteudo sobre o cenario */
.hero__conteudo {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) clamp(6rem, 16vh, 9rem);
  /* Sobe e desvanece conforme o hero sai — reforca a sensacao de descida */
  transform: translate3d(0, calc(var(--scroll-y) * -.16 * 1px), 0);
  opacity: calc(1 - var(--hero-progress) * 1.25);
  will-change: transform, opacity;
}

.hero__emblema {
  width: min(360px, 62vw);
  height: auto;
  margin: 0 auto clamp(1.5rem, 4vh, 2.75rem);
  filter: drop-shadow(0 18px 40px rgba(3, 16, 46, .55));
}

.hero__titulo {
  font-size: clamp(2.25rem, 6.4vw, 4.5rem);
  color: var(--texto-claro);
  text-shadow: 0 2px 24px rgba(3, 16, 46, .5);
}

.hero__apoio {
  margin: clamp(.75rem, 2vh, 1.25rem) auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.9vw, 1.175rem);
  color: var(--texto-suave);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  justify-content: center;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.hero__rolar {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  translate: -50% 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
  opacity: calc(1 - var(--hero-progress) * 2.2);
  pointer-events: none;
}

.hero__rolar::after {
  content: '';
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--azul-gelo), transparent);
  animation: descer 2.4s var(--ease) infinite;
}
@keyframes descer {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ---- Vida propria do cenario aquatico ----
   Tudo independente do scroll: a agua continua se movendo mesmo parado. */

/* Raios de luz da superficie: respiram de intensidade */
.raio { animation: respirar var(--t, 9s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes respirar {
  0%, 100% { opacity: .10; }
  50%      { opacity: .30; }
}

/* Gotas suspensas: flutuam devagar */
.gota { transform-box: fill-box; transform-origin: center; animation: flutuar var(--t, 11s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes flutuar {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -22px, 0); }
}

/* Ondas concentricas: abrem e desaparecem */
.onda { transform-box: fill-box; transform-origin: center; animation: abrir var(--t, 8s) ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes abrir {
  0%   { transform: scale(.2); opacity: 0; }
  18%  { opacity: .38; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Bolhas grandes fora de foco no primeiro plano */
.desfoque-leve  { filter: blur(3px); }
.desfoque-forte { filter: blur(9px); }

@media (prefers-reduced-motion: reduce) {
  .raio, .gota, .onda { animation: none; }
  .raio { opacity: .18; }
  .onda { opacity: .22; }
}

/* Quem pediu menos movimento recebe um hero parado e legivel. */
@media (prefers-reduced-motion: reduce) {
  .camada,
  .hero__conteudo { transform: none !important; }
  .hero__conteudo { opacity: 1 !important; }
  .hero__rolar    { opacity: 1 !important; }
  .bolha,
  .hero__rolar::after { animation: none; }
  .bolha { opacity: .4; }
}