/* ============================================================================
   CARLA & HENRIQUE · camada cinematográfica
   ----------------------------------------------------------------------------
   Carregado DEPOIS de estilo.css e sobrescreve o que precisa. Se algum dia
   você quiser o site sem movimento, é só remover as duas linhas de cinema
   do index.html: o site volta ao estado anterior, inteiro e funcionando.

   Índice
   01. Cenas fixadas (o coração do efeito)
   02. Abertura: a cortina
   03. Hero cinematográfico
   04. Títulos que sobem por máscara
   05. Fotos: revelação e Ken Burns
   06. Botões magnéticos
   07. Movimento reduzido e telas pequenas
   ============================================================================ */


/* ==========================================================================
   01. CENAS FIXADAS
   A seção fica alta; dentro dela um palco de uma tela inteira "gruda" no
   topo. Enquanto a página rola, a cena continua parada e o conteúdo dela
   é animado pela posição da rolagem. É o que dá a sensação de plano de
   cinema em vez de bloco que passa.
   ========================================================================== */
.cena {
  position: relative;
  padding: 0 !important;
  min-height: 0;
  height: 220vh;                 /* quanto tempo de rolagem a cena dura */

  /* Dois detalhes que quebram a cena se ficarem do jeito antigo:
     - display:grid com place-items:center dimensionava o palco pelo
       conteúdo e o centralizava, em vez de ocupar a tela toda;
     - overflow:hidden num ancestral ANULA o position:sticky do palco.
       Quem recorta agora é o próprio palco. */
  display: block !important;
  overflow: visible !important;
  place-items: initial !important;
}
.cena[data-cena="interludio"]                 { height: 210vh; }
.cena[data-cena="interludio"].interludio--curto { height: 185vh; }
.cena[data-cena="contagem"]                   { height: 240vh; }

.cena__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
}

/* A imagem preenche o palco inteiro. O zoom é controlado pelo JS conforme
   a cena avança, então nada de transição aqui: seria briga com o scroll. */
.cena__midia {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: none !important;
  will-change: transform;
}
.cena__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Agora a foto ocupa a tela inteira e fica parada por vários segundos, então
   o texto precisa de mais apoio do que precisava num bloco de passagem. */
.cena__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(180deg,
      hsla(20, 14%, 6%, .58)  0%,
      hsla(20, 13%, 9%, .66) 28%,
      hsla(20, 12%, 11%, .72) 50%,
      hsla(20, 13%, 9%, .66) 72%,
      hsla(20, 14%, 6%, .58) 100%),
    radial-gradient(120% 80% at 50% 50%,
      hsla(20, 14%, 5%, .30) 0%,
      hsla(20, 14%, 5%, 0)  70%);
}

.cena__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  will-change: opacity, transform;
}
/* Esconder só acontece quando o JS está de pé (ele acende a classe
   "cinema" no html). Se o script falhar, nada some da tela. */
.cinema .cena__conteudo { opacity: 0; }

/* o texto dos interlúdios cresce, agora que tem uma tela inteira para ele */
.cena[data-cena="interludio"] .interludio__texto p {
  font-size: clamp(2rem, 5.6vw, 4.6rem);
  line-height: 1.14;
  letter-spacing: -.02em;
}


/* ==========================================================================
   02. ABERTURA: A CORTINA
   ========================================================================== */
.preloader {
  background: var(--tinta);
  /* A gota, desenhada uma vez e reaproveitada pela máscara. */
  --forma-gota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 C50 2 87 44 87 63 A37 37 0 1 1 13 63 C13 44 50 2 50 2 Z' fill='%23fff'/%3E%3C/svg%3E");
}
.preloader__texto { color: var(--ouro-claro); }

/* --- A GOTA ---
   A moldura é uma máscara em forma de gota. Ela gira; a foto dentro gira
   ao contrário, na mesma velocidade, e por isso fica sempre em pé enquanto
   a moldura roda. O nível de cor sobe conforme a página carrega. */
.gota {
  --tam: clamp(160px, 42vw, 230px);
  position: relative;
  width: var(--tam);
  height: var(--tam);
  margin: 0 auto 2rem;
  animation: gotaGira 5s linear infinite;
  will-change: transform;
}

/* A janela é o que recorta a foto na forma da gota. O contorno fica de
   fora dela, para o traço aparecer inteiro. */
.gota__janela {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--forma-gota);
          mask-image: var(--forma-gota);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.gota__interno {
  position: absolute;
  inset: 0;
  animation: gotaGiraAoContrario 5s linear infinite;
  will-change: transform;
}

@keyframes gotaGira            { to { transform: rotate(360deg) } }
@keyframes gotaGiraAoContrario { to { transform: rotate(-360deg) } }

.gota__cor {
  position: absolute;
  left: 0;
  width: var(--tam);
  height: var(--tam);
  object-fit: cover;
}

/* o traço da gota */
.gota__contorno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.gota__contorno path {
  fill: none;
  stroke: var(--ouro-claro);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;   /* o traço não engorda ao ampliar */
  filter: drop-shadow(0 0 6px hsla(38, 45%, 70%, .35));
}

/* A faixa de cor cresce de baixo para cima. A foto colorida dentro dela
   fica presa ao pé da gota, senão ela subiria junto com o nível. */
.gota__nivel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--nivel, 0) * 100%);
  overflow: hidden;
}
.gota__cor { bottom: 0; top: auto; }

/* a queda e a abertura são comandadas pelo JS */
.gota.e-caindo  { animation: none; }
.gota.e-abrindo { animation: none; }

.preloader__nomes {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--areia);
}
.preloader__nomes i { font-style: italic; color: var(--ouro-claro); margin-inline: .15em; }

.preloader__conta {
  position: fixed;
  right: clamp(1.5rem, 5vw, 4rem);
  bottom: clamp(1.2rem, 4vw, 3rem);
  font-family: var(--serif);
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 200;
  line-height: 1;
  color: var(--areia);
  opacity: .22;
  font-variant-numeric: lining-nums tabular-nums;
}
.preloader__conta::after { content: '%'; font-size: .34em; vertical-align: .9em; margin-left: .12em; }

/* --- as etapas da abertura --- */

/* cheia: o texto de carregamento sai, os nomes ficam */
.preloader.e-cheia .preloader__texto,
.preloader.e-cheia .preloader__conta { opacity: 0; transition: opacity .5s ease-out; }

/* caindo: some tudo menos a gota */
.preloader.e-caindo .preloader__nomes { opacity: 0; transition: opacity .35s ease-out; }
.preloader.e-caindo .gota { transition: none; }

/* abrindo: o fundo escuro se dissolve e a foto do banner aparece atrás.
   O contorno sai antes do resto, senão viraria um risco atravessando a tela. */
.preloader.e-abrindo { background: transparent; transition: background-color .55s ease-out .15s; }
.preloader.e-abrindo .gota__contorno { opacity: 0; transition: opacity .3s ease-out; }

/* transições próprias da gota, para o JS só trocar valores */
.preloader__texto,
.preloader__conta,
.preloader__nomes { transition: opacity .5s ease-out; }


/* ==========================================================================
   03. HERO CINEMATOGRÁFICO
   ========================================================================== */
/* O hero fica preso no topo e o resto do site sobe por cima dele, como uma
   cortina. As seções seguintes já são position:relative, então passam na
   frente naturalmente, sem precisar de z-index. */
.cinema .hero { position: sticky; top: 0; overflow: hidden; }

.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Depois que a gota se abre, a foto fica sozinha na tela por um instante:
   sem véu, sem menu, sem texto. Só então tudo entra por cima. */
.e-abertura .topo { opacity: 0; pointer-events: none; }
.topo { transition: opacity 1.1s ease-out, transform .55s var(--suave),
                    background-color .5s, padding .5s, color .5s,
                    box-shadow .5s, backdrop-filter .5s; }
.e-abertura .hero__rolar { opacity: 0; }
.hero__midia { transition: none !important; will-change: transform; }
.hero__base  { will-change: transform, opacity; }

/* a abertura da foto agora é feita pelo JS junto com a cortina */
.hero__midia img { animation: none; }


/* ==========================================================================
   04. TÍTULOS QUE SOBEM POR MÁSCARA
   Cada palavra vive dentro de uma faixa com overflow escondido e sobe de
   baixo, uma atrás da outra. É o que faz o título "entrar em cena".
   ========================================================================== */
.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.palavra > i {
  display: inline-block;
  font-style: inherit;
  transition: transform .95s cubic-bezier(.22, 1, .36, 1) var(--atraso, 0ms);
}
.cinema .palavra > i { transform: translateY(110%); }
.cinema .e-revelado .palavra > i { transform: none; }


/* ==========================================================================
   05. FOTOS: REVELAÇÃO E KEN BURNS
   ========================================================================== */
.quadro-cine { position: relative; overflow: hidden; }
.quadro-cine > img,
.quadro-cine .foto__img {
  transform-origin: center;
  transition: none !important;
  will-change: transform;
}

/* cortina que descobre a foto de baixo para cima */
.cinema .quadro-cine::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--areia-2);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 1.15s cubic-bezier(.76, 0, .24, 1);
  pointer-events: none;
}
.cinema .quadro-cine.e-revelado::before { transform: scaleY(0); }

/* A cortina antiga da linha do tempo sai de cena: quem revela agora é a
   do .quadro-cine. A leve inclinação da foto continua. */
.cinema .momento__quadro::after { content: none !important; }

/* leve inclinação conforme a velocidade da rolagem */
.grade, .grade--colunas, .linha__lista { will-change: transform; }


/* ==========================================================================
   06. BOTÕES MAGNÉTICOS
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .botao, .topo__cta {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                color .45s var(--suave), border-color .45s var(--suave);
  }
}


/* ==========================================================================
   07. MOVIMENTO REDUZIDO E TELAS PEQUENAS
   ========================================================================== */
@media (max-width: 780px) {
  /* cenas mais curtas: no celular a rolagem é mais lenta e uma cena longa
     demais dá a impressão de que a página travou */
  .cena[data-cena="interludio"]                   { height: 175vh; }
  .cena[data-cena="interludio"].interludio--curto { height: 155vh; }
  .cena[data-cena="contagem"]                     { height: 195vh; }
  .preloader__conta { font-size: clamp(2.6rem, 18vw, 5rem); }

  /* No celular o bloco de texto do hero vai de 25% a 95% da altura, e o
     vídeo é claro no céu e no mato. Medindo os pixels atrás das letras, o
     rótulo dava 1,25:1 e os nomes 2,45:1. Este véu é bem mais fechado, e a
     faixa forte sobe até onde os nomes ficam. */
  .hero__veu {
    background-image:
      linear-gradient(0deg,
        hsla(20, 16%, 3%, .93)   0%,
        hsla(20, 15%, 4%, .90)  10%,
        hsla(20, 15%, 5%, .86)  22%,
        hsla(20, 14%, 6%, .81)  34%,
        hsla(20, 14%, 7%, .75)  46%,
        hsla(20, 13%, 8%, .66)  58%,
        hsla(20, 13%, 9%, .54)  70%,
        hsla(20, 12%, 11%, .38) 82%,
        hsla(20, 12%, 13%, .20) 92%,
        hsla(20, 11%, 15%, .10) 100%),
      linear-gradient(90deg,
        hsla(20, 16%, 3%, .40)   0%,
        hsla(20, 15%, 5%, .30)  28%,
        hsla(20, 14%, 8%, .18)  52%,
        hsla(20, 13%, 11%, .07) 76%,
        hsla(20, 12%, 14%, 0)  100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento: as cenas voltam a ser seções normais e tudo aparece
     estático. O conteúdo continua completo e legível. */
  .cena { height: auto; }
  .cena__palco { position: relative; height: auto; min-height: 70vh; padding-block: var(--secao); }
  .cena__conteudo { opacity: 1 !important; transform: none !important; }
  .cena__midia { transform: none !important; }
  .palavra > i { transform: none !important; }
  .quadro-cine::before { display: none; }
  .preloader.e-fora { opacity: 0; visibility: hidden; transform: none; }
}