/* ============================================================
   GOTA VOLUMÉTRICA · faixa .gcv-hero-band (Global Ecosolutions)

   Estado base = a gota ESTÁTICA em CSS. Ela é o que aparece sem JS, sem WebGL,
   e no mobile (<760px). O JS só marca .gv-on depois que o shader compilou e
   assumiu — aí o fallback sai de cena. Mesmo contrato do .is-water do hero.

   Este arquivo precisa carregar DEPOIS de css/style.css: .gv-band e
   .gcv-hero-band têm a mesma especificidade (0,1,0), então quem vem por último
   ganha o padding.
   ============================================================ */

.gv-band {
  /* Único dial de tamanho da peça. O JS LÊ a altura do slot — quem manda no
     tamanho é o CSS, não um número cravado no shader. */
  --gv-h: clamp(170px, 20vw, 240px);

  /* silhueta da gota derivada do SDF do shader (ver .gv-fallback) — viewBox 71x100,
     mesma proporção .71:1 da caixa, então não distorce. */
  --gv-gota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71 100'%3E%3Cpath fill='%23000' d='M 35.5 100 A 35 35 0 0 0 65.90 47.65 L 40.28 2.77 A 5.5 5.5 0 0 0 30.72 2.77 L 5.10 47.65 A 35 35 0 0 0 35.5 100 Z'/%3E%3C/svg%3E");

  /* A gota (~200px) ocupa o lugar de um ícone de 64px: a faixa cresce ~180px.
     Compensamos parte no padding pra ela não virar uma tela inteira.
     A faixa não tem min-height própria; quem dá altura é o conteúdo em fluxo. */
  padding: clamp(36px, 4.6vw, 60px) 0;
}

/* O slot fica FORA do .reveal de propósito. Dentro dele, os 0.7s de
   transition aplicam transform => ele vira containing block e a peça nasce
   deslocada até a animação terminar. Aqui ele é estável desde o primeiro
   frame — e é dele que o JS tira o centro e a escala da gota. */
.gv-slot {
  position: relative;
  height: var(--gv-h);
  margin: 0 auto 26px;
  pointer-events: none;
}

/* --- gota estática (fallback) ------------------------------------------- */
.gv-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--gv-h) * .71);        /* mesma proporção do SDF: 0.71 x 1.0 */
  height: var(--gv-h);
  transform: translate(-50%, -50%);
  /* SILHUETA via máscara SVG, não border-radius.
     border-radius é INCAPAZ de fazer ponta: com rx=50% nos dois cantos de cima, os
     arcos TL e TR sempre se encontram TANGENTES no topo-centro (ambos com tangente
     horizontal no extremo da elipse) — o ápice é C1-contínuo por construção, sempre
     domo. Resultado: o fallback era um OVO. E o fallback é a entrega INTEIRA no
     mobile (<760px) e sem WebGL — numa empresa de água, era um ovo pra todo mundo.
     O path abaixo vem das PRÓPRIAS constantes do SDF do shader (r1=.35, r2=.055,
     h=.595 -> meia-abertura 29.7°): círculo de baixo centro (35.5,65) r=35, calota
     da ponta centro (35.5,5.5) r=5.5, tangentes em (65.90,47.65) e (40.28,2.77).
     Assim a silhueta do fallback bate com a do WebGL, em vez de mudar por aparelho.
     Máscara (e não clip-path:path(), que é px fixo) pra escalar com o clamp. */
  -webkit-mask: var(--gv-gota) center / 100% 100% no-repeat;
          mask: var(--gv-gota) center / 100% 100% no-repeat;
  background:
    radial-gradient(78% 58% at 34% 26%, rgba(255,255,255,.40), rgba(255,255,255,0) 62%),
    radial-gradient(120% 110% at 62% 86%, rgba(169,207,91,.30), rgba(169,207,91,0) 58%),
    linear-gradient(160deg, rgba(15,84,136,.92), rgba(6,40,63,.96) 62%, rgba(4,26,42,.98));
  /* só inset: a máscara recortaria a sombra EXTERNA do box-shadow. Ela virou
     drop-shadow, que segue o alpha da máscara — ou seja, a sombra agora tem
     forma de gota, não de retângulo. */
  box-shadow:
    inset 0 -14px 26px rgba(169,207,91,.18),
    inset 6px 10px 22px rgba(255,255,255,.10),
    inset -8px -6px 18px rgba(0,0,0,.35);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.32));
  transition: opacity .45s cubic-bezier(.22,.61,.36,1);
}

/* brilho especular — a luz vem de cima-à-esquerda-frente, igual ao shader */
.gv-fallback::after {
  content: '';
  position: absolute;
  left: 30%;
  top: 21%;
  width: 22%;
  height: 15%;
  border-radius: 50%;
  transform: rotate(-18deg);
  background: radial-gradient(closest-side, rgba(255,255,255,.90), rgba(255,255,255,0));
}

/* poça de cáustica: o mesmo papel do glow lima do shader — ancorar a gota */
.gv-slot::before {
  content: '';
  position: absolute;
  left: 46%;
  top: 82%;
  width: calc(var(--gv-h) * 1.35);
  height: calc(var(--gv-h) * .52);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(10px);
  background: radial-gradient(closest-side,
    rgba(169,207,91,.32), rgba(169,207,91,.08) 52%, rgba(169,207,91,0) 78%);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1);
}

/* handshake: o shader assumiu, o fallback sai */
.gv-band.gv-on .gv-fallback,
.gv-band.gv-on .gv-slot::before { opacity: 0; }

/* --- mobile: o JS não roda abaixo de 760px, a gota CSS é a entrega --------- */
@media (max-width: 759px) {
  .gv-band { --gv-h: clamp(140px, 42vw, 190px); padding: clamp(40px, 9vw, 56px) 0; }
  .gv-slot { margin-bottom: 20px; }
}

/* --- reduced-motion ------------------------------------------------------
   O JS desenha UM frame do shader e para: quem pediu menos movimento continua
   vendo a gota volumétrica de verdade, parada. Se o WebGL falhar, sobra a gota
   CSS acima — que também é 100% estática. Em nenhum caminho sobra buraco. */
@media (prefers-reduced-motion: reduce) {
  .gv-fallback, .gv-slot::before { transition: none; }
}