/* O mergulho e a emersão — ver `scroll/dive.js` (2026-10-08).
   z-index 44: abaixo da gota/pulso da travessia (`.wx`, 45), do bloco
   editorial (`.wx-pitch`, 46) e do cabeçalho (50). A água passa por trás do
   texto, nunca por cima. A opacidade é escrita pelo JS a partir do mesmo `u`
   que conduz tudo o resto — um valor, um dono. */
.dv{
  position: fixed; inset: 0; z-index: 44;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
  opacity: var(--dv-on, 0);
  --dv-line: 100%;
}

/* ---- o corpo de água: tudo o que está abaixo da linha ------------------ */
.dv-body{
  position: absolute; inset: 0;
  /* água acima de `--dv-top` e abaixo de `--dv-line`; seco entre as duas.
     A aresta vertical em x=0 é só a ponte do polígono (largura zero). */
  clip-path: polygon(0 0, 100% 0, 100% var(--dv-top, 0%), 0 var(--dv-top, 0%),
                     0 var(--dv-line), 100% var(--dv-line), 100% 100%, 0 100%);
  /* mais claro perto da superfície; a subida (`--dv-lift`) aclara o topo */
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(120,190,200, calc(.06 + var(--dv-lift, 0) * .10)) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(14,46,66,.88) 0%,
      rgba(10,32,50,.92) 30%,
      rgba(8,20,34,.95) 68%,
      rgba(7,10,18,.98) 100%);
}
.dv--blur .dv-body{ backdrop-filter: blur(3px) saturate(1.1); }
/* com a máscara da emersão o desfoque tem de sair (ver `dv--emerge` em dive.js) */
.dv--blur.dv--emerge .dv-body{ backdrop-filter: none; }

/* EMERSÃO EM ABERTURA (2026-10-19). Era uma dissolução escura e baça por
   inteiro. Agora `--dv-open` (0 -> 1, de `dive.js`) faz crescer uma abertura
   elíptica centrada no título de `#estudio` (`--dv-cy` acompanha a secção a
   subir): a superfície a romper-se por cima de quem sobe. A máscara tem uma
   orla de ~40% de largura, por isso nunca há uma aresta a atravessar o
   título; e a mesma geometria pinta, logo antes da orla, uma faixa clara e
   fria, que é a face de baixo da superfície. */
.dv-body{
  /* cresce de um ponto nas duas dimensões: um oval achatado desde o início
     lia-se como anel, "portal" */
  --dv-r: calc(var(--dv-open, 0) * 200% + 1%);
  --dv-rx: calc(var(--dv-open, 0) * 300% + 1%);   /* x 34%: o título é alinhado à esquerda */
  -webkit-mask-image: radial-gradient(var(--dv-rx) var(--dv-r) at 34% var(--dv-cy, 60%), transparent 36%, #000 78%);
          mask-image: radial-gradient(var(--dv-rx) var(--dv-r) at 34% var(--dv-cy, 60%), transparent 36%, #000 78%);
}
.dv-body::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(var(--dv-rx) var(--dv-r) at 34% var(--dv-cy, 60%),
    transparent 34%, rgba(190,236,238,.09) 52%, rgba(120,200,210,.04) 66%, transparent 80%);
  opacity: calc(var(--dv-open, 0) * 4);   /* aparece logo que a abertura começa */
  mix-blend-mode: screen;
}

/* raios de luz inclinados, a entrar pela superfície */
.dv-rays{
  position: absolute; inset: -10% -20%;
  background:
    linear-gradient(104deg, transparent 16%, rgba(169,243,232,.20) 20%, transparent 26%),
    linear-gradient(98deg,  transparent 36%, rgba(169,243,232,.12) 41%, transparent 50%),
    linear-gradient(106deg, transparent 55%, rgba(169,243,232,.17) 58%, transparent 63%),
    linear-gradient(101deg, transparent 74%, rgba(169,243,232,.10) 78%, transparent 84%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
  opacity: calc(.18 + var(--dv-lift, 0) * .30);
  transform: translateX(calc(var(--dv-shift, 0px) * .08));
  mix-blend-mode: screen;
}
/* cáusticas: a rede de luz que a superfície projecta — ruído SVG, zero raster */
.dv-caustic{
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.0125 .025' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .66  0 0 0 0 .95  0 0 0 0 .91  0 0 0 -3.2 1.1'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  background-size: 640px 640px;
  background-position: calc(var(--dv-shift, 0px) * .35) calc(var(--dv-shift, 0px) * -.2);
  opacity: calc(.05 + var(--dv-lift, 0) * .07);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  mix-blend-mode: screen;
}
.dv-bub{
  position: absolute; top: 0; border-radius: 50%;
  border: 1px solid rgba(216,255,245,.55);
  background: radial-gradient(circle at 32% 30%, rgba(216,255,245,.7) 0 18%, rgba(169,243,232,.08) 40%, transparent 70%);
  will-change: transform;
}

/* ---- o menisco: a superfície a atravessar a lente ---------------------- */
.dv-meniscus{
  position: absolute; left: 0; right: 0;
  top: calc(var(--dv-line) - 14px);
  height: 28px;
  opacity: var(--dv-men, 0);
  /* Sobriedade (2026-10-11): era uma onda SVG em ciano forte com brilho, e
     lia-se como desenho. Agora é a superfície vista de perto: um reflexo
     fino e frio por cima, e uma sombra suave por baixo, onde a luz entra. */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(210,232,236,.10) 40%,
    rgba(210,232,236,.32) 50%,
    rgba(14,46,66,.40) 56%,
    transparent 100%);
}

/* a orla: a água a escorrer do topo da secção que acabou de sair */
.dv-edge{
  position: absolute; left: 0; right: 0; height: 34px;
  top: calc(var(--dv-top, 0%) - 4px);
  opacity: var(--dv-edge, 0);
  background: linear-gradient(180deg, rgba(210,232,236,.22), rgba(14,46,66,.12) 35%, transparent);
}

/* ---- molhado: o que está acima da linha, ainda a escorrer -------------- */
.dv-wet{
  position: absolute; inset: 0;
  opacity: var(--dv-wet, 0);
  background: linear-gradient(180deg, rgba(169,243,232,.07), rgba(23,191,193,.05) 60%, rgba(8,59,92,.08));
  /* seca de cima para baixo: o topo já está limpo, por baixo ainda brilha */
  -webkit-mask-image: linear-gradient(180deg, transparent var(--dv-dry, 0%), #000 calc(var(--dv-dry, 0%) + 22%));
          mask-image: linear-gradient(180deg, transparent var(--dv-dry, 0%), #000 calc(var(--dv-dry, 0%) + 22%));
}
.dv--blur .dv-wet{ backdrop-filter: blur(1.4px); }
/* o mesmo defeito do Chromium: com máscara e `backdrop-filter` no mesmo
   elemento, o desfoque ignora a máscara e apanhava o título de `#estudio`
   durante a emersão (revisão independente, 2026-10-20) */
.dv--blur.dv--emerge .dv-wet{ backdrop-filter: none; }

/* respingos: gota alongada, orientada pela velocidade (JS escreve o rotate) */
.dv-splash{
  position: absolute; left: 0; top: 0;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.95) 0 14%, rgba(169,243,232,.75) 34%, rgba(23,191,193,.35) 70%, transparent 72%);
  box-shadow: 0 0 6px rgba(169,243,232,.45);
  opacity: 0;
  will-change: transform, opacity;
}
/* gotas na lente: lente de vidro com reflexo e um rasto que escorre */
.dv-lens{
  position: absolute; top: 0;
  border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.75) 0 10%, transparent 24%),
    radial-gradient(circle at 60% 70%, rgba(8,59,92,.25), rgba(169,243,232,.10) 60%, transparent 72%);
  box-shadow: inset 0 -2px 4px rgba(255,255,255,.28), inset 0 2px 5px rgba(8,59,92,.35), 0 1px 2px rgba(0,0,0,.25);
  opacity: 0;
  will-change: transform, opacity;
}
.dv-lens::after{
  content: ""; position: absolute; left: 30%; bottom: 70%;
  width: 40%; height: 120%;
  background: linear-gradient(0deg, rgba(169,243,232,.10), transparent);
  filter: blur(1px);
  border-radius: 999px;
}

/* ---- a passagem para o Estúdio (2026-10-20) ---------------------------- */
/* O palco da villa apaga-se debaixo de água opaca: sem isto, o `#estudio`
   opaco subia por cima do palco fixo e a sua aresta atravessava o ecrã. */
html.has-dive .rs-stage{ opacity: var(--dv-palco, 1); }

/* o clarão da superfície a romper: luz fria de cima, a encher o ecrã */
.dv-sol{
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 55% at 50% -6%, rgba(206,242,240,.42) 0%, rgba(150,214,220,.16) 42%, transparent 72%),
    linear-gradient(180deg, rgba(190,236,238,.10), transparent 60%);
  opacity: var(--dv-sol, 0);
  mix-blend-mode: screen;
}

/* "rack focus" do primeiro ecrã do Estúdio enquanto a água sai: o bloco
   inteiro, para o título e a barra das estações focarem juntos. Só enquanto
   há desfoque (um `filter` a zero continuaria a obrigar a uma camada
   própria), e acaba em u ~0.2, antes de o pin da `.path-inner` engatar. */
html.has-dive.dv-focando #estudio .path-pin{
  filter: blur(calc(var(--dv-foco, 0) * 9px));
  scale: calc(1 + var(--dv-foco, 0) * .035);
  transform-origin: 28% 30%;
}

/* Reflexos de água no topo do Estúdio: a luz da piscina que fica na sala.
   Ruído SVG (zero raster), como as cáusticas; deriva lenta no compositor. */
/* `#estudio > .dv-reflexo` e não só a classe: `water.css` tem
   `#estudio > *{position:relative; z-index:2}`, que punha o reflexo no fluxo
   e empurrava o conteúdo da secção um ecrã para baixo */
#estudio > .dv-reflexo{
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0;
  height: min(120vh, 1100px);
  overflow: hidden;
  pointer-events: none;
  /* entra em fundido também em cima: o topo da secção não pode ganhar aresta */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, rgba(0,0,0,.4) 48%, transparent 80%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, rgba(0,0,0,.4) 48%, transparent 80%);
}
.dv-reflexo::before{
  content: ""; position: absolute; inset: -12% -8%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='720'><filter id='r' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.011 .02' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .62  0 0 0 0 .9  0 0 0 0 .9  0 0 0 -6 1.15'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
  background-size: 720px 720px;
  opacity: .085;
  mix-blend-mode: screen;
}
/* a deriva só com os reflexos à vista (`is-viva`, posto por um
   IntersectionObserver em `dive.js`) */
.dv-reflexo.is-viva::before{
  animation: dv-reflexo-deriva 26s ease-in-out infinite alternate;
}
@keyframes dv-reflexo-deriva{
  from{ transform: translate3d(0, 0, 0) skewX(0deg); }
  to  { transform: translate3d(-70px, -34px, 0) skewX(-3deg); }
}

/* ---- com o mergulho montado, o fecho antigo sai de cena ---------------- */
/* a cortina que subia do fundo do palco e as faixas turquesa da costura
   eram o fecho anterior; o mergulho substitui-os */
html.has-dive .rs-water{ display: none !important; }
html.has-dive .rs::after,
html.has-dive #estudio::before{ opacity: 0 !important; }
/* a queda de água da travessia contradiz a emersão (cai enquanto a lente
   sobe); fica a gota/pulso que entrega o sinal à Estação 04 */
html.has-dive .wx-pool,
html.has-dive .wx-fio,
html.has-dive .wx-grelha{ display: none !important; }
/* 2026-10-12: a gota e o seu rasto descem pela borda esquerda enquanto o
   ecrã está submerso — lida como uma bola solta e uma risca de defeito, e é
   uma segunda metáfora de água por cima do mergulho. Saem; o anel (`.wx-pulse`)
   continua a aparecer na barra da Estação 01 quando o sinal chega. */
html.has-dive .wx-drop,
html.has-dive .wx-canal{ display: none !important; }

/* O pitch deixa de pertencer a `handover.js` quando o mergulho monta. O
   `translateX` estrutural continua aqui e o eixo vertical vem do mesmo `u`
   que conduz a superfície em `dive.js`; não há uma transição temporal a
   perseguir o scroll nem uma animação CSS a ganhar ao valor do JS. */
html.has-dive .wx-pitch.wx-pitch--dive{
  transform: translate3d(-50%, var(--dv-pitch-y, 0), 0);
  will-change: transform, opacity;
}

/* O bloco "Do interesse à ação" fica por cima da água, e a superfície a
   subir atravessava-lhe o parágrafo (visto 2026-10-11). Uma vinheta escura e
   larga atrás do texto apaga a linha só onde há letras; fora dela, a
   superfície continua inteira. Só com o mergulho montado. */
html.has-dive .wx-pitch::before{
  content: ""; position: absolute; z-index: -1;
  inset: -18% -22%;
  background: radial-gradient(closest-side, rgba(7,10,18,.78), rgba(7,10,18,.45) 55%, transparent);
  pointer-events: none;
}