/* ======================================================================
   O fecho líquido da Cena 03 (p 0.90 → 1.00).  Ver `scroll/water.js`.

   Todo o estado vem de variáveis que o JS escreve em `.rs-water`:
     --w-on      0/1   a camada existe no plano
     --w-rise    0..100  altura da água, em % do palco
     --w-veil    0..1  opacidade geral (cai no fim: a água "limpa o ecrã")
     --w-ripple  0..1  ondulação do menisco antes de a água subir
     --w-shift   %     deslocamento horizontal da onda
     --w-band    0..1  linha de água em baixo, enquanto a água assenta
     --w-cleared 0..1  quanto do enquadramento a água JÁ LIBERTOU
     --w-top     0..1  faixa turquesa residual no topo, já na entrega
   Nenhum `@keyframes` conduz a coreografia — se conduzisse, deixava de ser
   reversível com o scroll, que é o requisito central deste fecho.
   ====================================================================== */

.rs-water{
  position:absolute; inset:0; z-index:3;   /* acima da tela, abaixo do nada */
  pointer-events:none;                      /* nunca rouba um clique */
  opacity:var(--w-on,0);
  contain:paint;
}

/* ---- a água ---------------------------------------------------------- */
.rs-water-veil{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--w-rise,0) * 1%);
  opacity:var(--w-veil,1);
  background:
    radial-gradient(120% 90% at 50% 100%,
      color-mix(in srgb, var(--w-turq) 62%, transparent) 0%,
      color-mix(in srgb, var(--w-deep) 92%, transparent) 46%,
      var(--w-night) 100%),
    linear-gradient(to top, var(--w-night) 0%, var(--w-deep) 55%, var(--w-turq) 100%);
  /* a crista: a máscara de onda só morde os 24px de cima, o resto é opaco */
  -webkit-mask-image:var(--w-wave), linear-gradient(#000,#000);
  mask-image:var(--w-wave), linear-gradient(#000,#000);
  -webkit-mask-size:240px 24px, 100% calc(100% - 22px);
  mask-size:240px 24px, 100% calc(100% - 22px);
  -webkit-mask-position:var(--w-shift,0) top, left bottom;
  mask-position:var(--w-shift,0) top, left bottom;
  -webkit-mask-repeat:repeat-x, no-repeat;
  mask-repeat:repeat-x, no-repeat;
  -webkit-mask-composite:source-over;
  mask-composite:add;
  /* A limpeza é a MESMA folha de água a continuar o movimento que já trazia:
     sobe e sai pelo topo. Escolhido em vez de desvanecer a opacidade porque
     um desvanecer devolvia a villa iluminada durante um instante, mesmo ao
     fundo, e o que tem de aparecer por baixo é o escuro da secção seguinte.
     É também o que deixa a última cor EM CIMA e não em baixo. */
  transform:translate3d(0, calc(var(--w-cleared,0) * -100%), 0);
  will-change:transform;
}
/* O bordo de baixo da folha, enquanto ela escorre para fora do plano: sem
   isto a água saía com um corte a régua. */
.rs-water-veil::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:18px;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--w-pale) 40%, transparent) 0%,
    transparent 100%);
  filter:blur(2px);
  /* Medido na folha de provas: a 2.4 o bordo lia-se como uma barra clara a
     atravessar o plano em p 0.975, não como a água a escorrer. */
  opacity:calc(var(--w-cleared,0) * 1.2);
}

/* ---- o escuro por baixo da água ---------------------------------------
   Fica a zero durante toda a subida — a subida já estava aprovada e não se
   lhe toca. Só existe na limpeza, e chega a opaco três vezes mais depressa
   do que a água sai, para que nunca se veja a cena por baixo do bordo. */
.rs-water-ground{
  position:absolute; inset:0;
  /* `--ink` e NÃO `--w-night`: o chão que a água descobre é, literalmente, o
     fundo da secção 04, e esse fundo é `#estudio{background:var(--ink)}` no
     `finish.css` — um selector de id que ganha ao `.path{background:var(--void)}`
     do `path.css`. Medido no browser: rgb(15,18,27). Pintar aqui a cor da
     paleta líquida (#0A0F1C) ou a do `.path` (#07080D) punha um degrau visível
     exactamente na costura onde o `pin` se solta, que é o instante que o
     pedido nomeia. */
  background:var(--ink, #0A0F1C);
  opacity:calc(var(--w-cleared,0) * 3);   /* >1 é cortado a 1 pela própria regra */
}
/* brilho na linha de água: é o que a faz ler como superfície e não como
   um rectângulo azul a subir */
.rs-water-veil::after{
  content:""; position:absolute; left:0; right:0; top:-2px; height:26px;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--w-spark) 70%, transparent) 0%,
    color-mix(in srgb, var(--w-pale) 26%, transparent) 40%,
    transparent 100%);
  filter:blur(3px);
  opacity:.75;
}

/* ---- ondulação antes do mergulho ------------------------------------- */
/* Vive no fundo do palco, onde a água está: aos 0.90 a câmara já está rente
   à piscina, por isso a ondulação aparece onde o olho já está pousado. */
.rs-water::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  opacity:calc(var(--w-ripple,0) * .55);
  background:repeating-linear-gradient(to bottom,
    transparent 0 7px,
    color-mix(in srgb, var(--w-pale) 22%, transparent) 7px 9px);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
  mask-image:linear-gradient(to top, #000, transparent);
  transform:translateY(calc(var(--w-ripple,0) * -6px));
}

/* ---- gotas no "vidro" da lente --------------------------------------- */
.rs-water-drops{position:absolute; inset:0; overflow:hidden}
.rs-water-drops i{
  position:absolute; left:var(--x); top:0;
  width:calc(9px * var(--s)); height:calc(15px * var(--s));
  border-radius:50% 50% 46% 46% / 38% 38% 62% 62%;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--w-spark) 65%, transparent),
    color-mix(in srgb, var(--w-pale) 34%, transparent));
  box-shadow:0 0 6px color-mix(in srgb, var(--w-spark) 30%, transparent);
  /* a gota só existe depois de a água ter passado, e apaga-se no fim */
  opacity:calc(var(--t,0) * (1 - var(--t,0)) * 4.4);
  transform:translate3d(0, calc(var(--t,0) * 118cqh - 9px), 0);
}
.rs-water-drops{container-type:size}

/* ---- faixa residual: a ligação cromática para a secção seguinte ------- */
.rs-water-band{
  position:absolute; left:0; right:0; bottom:0; height:clamp(48px,7vh,88px);
  opacity:var(--w-band,0);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--w-turq) 46%, transparent) 0%,
    color-mix(in srgb, var(--w-deep) 18%, transparent) 55%,
    transparent 100%);
}
/* A faixa residual NO TOPO: o rasto que a folha de água deixa ao sair, e a
   única cor no plano quando a primeira linha da secção 04 aparece. É o que
   liga cromaticamente as duas secções sem ter de segurar o turquesa cheio. */
.rs-water-crown{
  position:absolute; left:0; right:0; top:0; height:clamp(80px,13vh,160px);
  opacity:var(--w-top,0);
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--w-turq) 34%, transparent) 0%,
    color-mix(in srgb, var(--w-deep) 18%, transparent) 58%,
    transparent 100%);
}

/* ---- telemóvel: menos partículas, nunca por cima de texto ------------- */
@media (max-width:820px){
  /* Uma secundária em ecrã estreito. Com a protagonista a viver na camada de
     passagem, o total no telemóvel fica em duas gotas — o limite do roteiro. */
  .rs-water-drops i:nth-child(n+2){display:none}
  .rs-water-band{height:clamp(36px,5.5vh,60px)}
  .rs-water-crown{height:clamp(60px,10vh,110px)}
  .rs-water::before{height:28%}
}

/* ---- movimento reduzido: dissolve azul, sem mergulho ------------------ */
/* O JS entra no ramo `is-still` e deixa de escrever ondulação, onda e gotas;
   aqui tira-se o que restaria do desenho. Continua a responder ao scroll,
   porque "estático" é sem movimento próprio, não sem resposta. */
@media (prefers-reduced-motion: reduce){
  .rs-water-veil{
    /* SEM ARESTA. Na folha do percurso em movimento reduzido via-se um
       rectangulo turquesa de topo recto no fundo do plano — exactamente o
       "rectangulo artificial" que o roteiro manda evitar, e que so aparece
       aqui porque sem a mascara de onda o veu passa a ter um limite duro.
       Esta mascara desvanece o proprio topo do veu: sem movimento, mas
       tambem sem linha. */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 30%);
    background:linear-gradient(to top, var(--w-night), var(--w-deep) 60%, var(--w-turq));
  }
  .rs-water-veil::after,
  .rs-water-veil::before,
  .rs-water-ground,
  .rs-water-drops,
  .rs-water::before{display:none}
  .rs-water-veil{transform:none}
}
.rs-water.is-still .rs-water-veil::after,
.rs-water.is-still .rs-water-veil::before,
.rs-water.is-still .rs-water-ground,
.rs-water.is-still .rs-water-drops,
.rs-water.is-still::before{display:none}
.rs-water.is-still .rs-water-veil{transform:none}
.rs-water.is-still .rs-water-veil{
  /* gemea da regra do `@media` acima — mesma razao, mesmo numero */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 30%);
  opacity:var(--w-veil,0);
  background:linear-gradient(to top, var(--w-night), var(--w-deep) 60%, var(--w-turq));
}

/* ---- a ligação cromática quando NADA monta ----------------------------
   Com `prefers-reduced-motion` o `main.js` não chega a montar a cena nem a
   sequência, por isso `.rs-water` nem existe — a faixa posta pelo ramo
   estático do `fallback.js` cobre o caso "sem ScrollTrigger", não este
   (medido: `.rs-water` ausente, e o fecho reduzido ficava sem ligação
   nenhuma para a secção seguinte).
   A faixa é CSS puro, estática, e vai no `.rs-poster::after` e NÃO no
   `.rs-stage::before`: esse já é a vinheta superior do `villa-night.css` e
   escrevê-lo aqui apagava-a. O `::after` do palco também está ocupado, em
   dois ficheiros. Pseudo-elemento livre é este. */
@media (prefers-reduced-motion: reduce){
  .rs-poster{position:relative}
  .rs-poster::after{
    content:""; position:absolute; left:0; right:0; top:0; z-index:2;
    height:clamp(44px,6.5vh,80px); pointer-events:none;
    background:linear-gradient(to bottom,
      color-mix(in srgb, #17BFC1 44%, transparent) 0%,
      color-mix(in srgb, #083B5C 18%, transparent) 55%,
      transparent 100%);
  }
}

/* ---- a mesma faixa, já na secção 04 -----------------------------------
   O véu vive dentro do `.rs-stage` e morre com ele quando o `pin` se solta —
   ou seja, deixa de existir exactamente no instante em que "Começamos por
   perceber o seu dia-a-dia." entra no enquadramento. Sem esta faixa gémea no
   topo do `#estudio`, a cor residual acabava a meio de um salto de secção.
   É CSS puro e estática: não depende de JS, não depende do WebGL e aparece
   igual nos dois caminhos e em movimento reduzido.
   `.path` não usava nenhum dos dois pseudo-elementos (verificado no
   `path.css`), por isso este `::before` está livre. */
#estudio::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:1;
  /* Mesma altura e mesma saturação da `.rs-water-crown`: é a MESMA faixa a
     continuar por cima da costura, e qualquer diferença nestes dois números
     lê-se como um degrau no instante exacto da passagem. */
/* Mais alta e MENOS saturada do que a primeira versao das provas: as 52%
   de turquesa num degrade curto liam-se como um rectangulo solido pousado
   no topo da seccao — o "rectangulo artificial" que o roteiro manda
   evitar. A mesma cor espalhada por mais altura le-se como agua. */
  height:clamp(80px,13vh,160px); pointer-events:none;
  /* a MESMA opacidade da coroa, do outro lado da costura — ver a nota em
     `scroll/water.js`. Sem isto a faixa existia mesmo quando a agua nunca
     correu, e lia-se como um rectangulo turquesa colado ao topo da seccao. */
  opacity:var(--w-top,0);
  background:linear-gradient(to bottom,
    color-mix(in srgb, #17BFC1 30%, transparent) 0%,
    color-mix(in srgb, #083B5C 16%, transparent) 58%,
    transparent 100%);
}
/* A faixa é decoração e o título é o conteúdo: o título fica por cima.
   Sem isto, um pseudo-elemento absoluto num pai `position:relative` ganha a
   um filho estático, e a primeira linha chegava por baixo de um banho
   turquesa — precisamente o contrário do que foi pedido. */
#estudio > *{position:relative; z-index:2}

/* ---- a faixa tem de existir dos DOIS lados da costura ------------------ */
/* Medicao: no instante da costura, `cima=(15,18,27)` e `baixo=(16,60,69)` —
   degrau 28.3, o maior do site, e exactamente a "banda horizontal a denunciar
   o limite da seccao" que o roteiro manda eliminar.

   A causa nao era a cor da faixa: era so ela existir de um lado. A coroa
   (`.rs-water-crown`) vive dentro do veu liquido, e o veu e empurrado para
   fora do enquadramento por `--w-cleared` — quando a agua limpa, a coroa sai
   com ela, mas `#estudio::before` fica. Esta gemea nao translada: mora no fim
   de `.rs` e usa a MESMA opacidade (`--w-top`) e o MESMO degrade, virado ao
   contrario. As duas metades encontram-se na fronteira. */
.rs::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:clamp(80px,13vh,160px); pointer-events:none;
  opacity:var(--w-top,0);
  background:linear-gradient(to top,
    color-mix(in srgb, #17BFC1 30%, transparent) 0%,
    color-mix(in srgb, #083B5C 16%, transparent) 58%,
    transparent 100%);
}
/* ---- movimento reduzido: a entrega faz-se por composicao -------------- */
/* Sem percurso continuo continua a ser preciso que uma cor entregue a
   seguinte — o roteiro diz isso por palavras. Medido em reduzido, sem estes
   dois degrades: a costura 02->03 dava 14.7 (o ceu do poster, (9,30,36),
   contra o preto da Cena 02) e a 03->04 dava 26.3 (o painel claro do ultimo
   capitulo, (41,45,53), contra o `--ink` da Cena 04). Nenhum dos dois e um
   efeito: sao degrades estaticos, que e exactamente o que se pode usar aqui. */
@media (prefers-reduced-motion: reduce){
  .rs::after{
    display:block; opacity:1;
    height:clamp(90px,15vh,190px);
    background:linear-gradient(to top, var(--ink,#0F121B) 0%,
      color-mix(in srgb, var(--ink) 55%, transparent) 46%, transparent 100%);
  }
  /* O veu de `villa-night.css` vive no palco e fica POR BAIXO do poster
     (`z-index:1` contra a imagem), por isso engrossa-lo nao mexia no numero:
     14.0 antes e 14.0 depois. Este mora na propria seccao, por cima de tudo
     o que ela desenha, e e ele que faz o ceu do poster entregar o preto da
     Cena 02 em vez de comecar nele. */
  .rs::before{
    content:""; position:absolute; left:0; right:0; top:0; z-index:4;
    height:clamp(110px,18vh,230px); pointer-events:none;
    background:linear-gradient(to bottom, var(--void) 0%,
      color-mix(in srgb, var(--void) 62%, transparent) 44%, transparent 100%);
  }
}