/* ==========================================================================
   Ambiente — a luz do fundo.

   Camada única de ambientação: manchas amplas de luz azul, um grão de papel
   quase invisível e a dissolvência entre as seções claras e as azuis. Tudo
   decorativo, tudo atrás do conteúdo, nada que receba clique.

   Regra que vale para o arquivo inteiro: se o efeito chamar atenção para si,
   está forte demais. O fundo serve à tipografia e às fotografias.
   ========================================================================== */

/* A camada de luz cobre o documento inteiro, e para isso precisa de um
   ancestral posicionado. O único absoluto filho do body é o atalho de
   teclado, que já mora no topo da página: nada se desloca com isso. */
body {
  position: relative;
}

/* --- Manchas de luz ------------------------------------------------------
   Elipses largas ancoradas no documento, não na tela: a luz fica onde está
   e a página passa por ela. São poucas e assimétricas de propósito — uma
   por seção viraria padrão, e padrão se enxerga. Os raios em porcentagem
   do documento fazem cada mancha atravessar várias seções, longe de
   qualquer contorno de círculo. */
.ambiente {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* A luz alterna: uma mancha tinge de azul, a seguinte clareia. É esse
     vaivém que se percebe ao rolar — só tingir daria metade da variação e
     custaria o dobro em contraste. A ordem das camadas segue a página, de
     cima para baixo. */
  background-image:
    /* fim da história: clareia rumo ao branco do grande dia */
    radial-gradient(
      ellipse 92% 9% at 42% 30%,
      var(--ambient-lift),
      transparent 74%
    ),
    /* história: luz azul entrando pela esquerda */
    radial-gradient(
      ellipse 72% 11% at 2% 19%,
      var(--ambient-glow),
      transparent 72%
    ),
    /* como chegar: do lado oposto */
    radial-gradient(
      ellipse 68% 10% at 99% 47%,
      var(--ambient-glow),
      transparent 70%
    ),
    /* presentes: de volta à esquerda, mais aberta */
    radial-gradient(
      ellipse 78% 12% at 6% 75%,
      var(--ambient-glow-soft),
      transparent 72%
    ),
    /* recado final: a página termina clareando */
    radial-gradient(
      ellipse 88% 8% at 62% 93%,
      var(--ambient-lift),
      transparent 76%
    );
}

/* --- Grão de papel -------------------------------------------------------
   feTurbulence dessaturado, gerado pelo próprio navegador: nenhum arquivo
   de imagem baixado, nada de cor introduzida.

   O que se vê não é a opacidade, é o desvio que ela produz no fundo. Com
   `fractalNoise` liso, 4,5% davam 0,85 nível de 255 — papel nenhum. Trocado
   por `turbulence` com o alfa esticado (o feComponentTransfer), a mesma
   ordem de opacidade rende quase o triplo de textura, e a média do fundo
   quase não se move: o contraste do texto fica onde estava.

   `absolute`, e não `fixed`, de propósito: com a camada presa à tela o
   Chrome promove a página a camada composta e desliga a suavização
   subpixel do texto — medido, isso mexia em 0,3% dos pixels da primeira
   dobra, justo nas linhas de texto pequeno do hero. Ancorada no documento,
   a tela do hero volta a ser idêntica à de antes. */
.ambiente::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--ambient-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='3' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* --- Dissolvência entre as seções --------------------------------------
   O layout alterna seção clara e seção azul, e a troca era um corte reto.
   Aqui o branco vira véu translúcido que nasce e morre em transparente: a
   fronteira passa a ser um degradê de mais de cem pixels, e a luz de baixo
   atravessa a seção clara em vez de bater num muro branco. */
.section:nth-of-type(even) {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--surface-veil) 14%,
    var(--surface-veil) 86%,
    transparent 100%
  );
}

/* A contagem vem logo abaixo do hero, cujo pé já dissolve a foto no branco.
   Começar transparente abriria uma faixa azul entre os dois: ela entra em
   véu cheio e só dissolve embaixo.

   Classe dobrada nesta e na regra seguinte: `.section:nth-of-type(even)`
   pesa (0,2,0), e uma classe sozinha perderia para ela em silêncio — foi
   o que aconteceu até a primeira medição em produção. */
.section.section--countdown {
  background-image: linear-gradient(
    to bottom,
    var(--surface-veil) 0%,
    var(--surface-veil) 84%,
    transparent 100%
  );
}

/* A passagem da história para o grande dia acontece em três tempos, e não
   num corte: o miolo da história fica no azul do fundo, o pé dela já clareia
   (aqui), e o grande dia entra recebendo esse mesmo tom e seguindo até o
   branco (regra abaixo). Só clareia — nenhum azul extra — para o texto do
   fecho não perder contraste. */
.section.section--story {
  background-image: linear-gradient(
    to bottom,
    transparent 58%,
    var(--ambient-fade) 100%
  );
}

/* "O grande dia" recebe uma luz vinda do alto à direita, do lado oposto à
   mancha que ilumina a história. Vai no próprio fundo da seção, acima do
   véu e sob todo o conteúdo dela. */
.section.section--event {
  background-image:
    radial-gradient(
      ellipse 86% 78% at 96% -12%,
      var(--ambient-glow-strong),
      transparent 78%
    ),
    linear-gradient(
      to bottom,
      var(--ambient-fade) 0%,
      var(--surface-veil) 22%,
      var(--surface-veil) 86%,
      transparent 100%
    );
}

/* --- O caminho -----------------------------------------------------------
   Uma linha abstrata que desce da história para o grande dia, com duas
   interrupções e dois pontos: o caminho que começou numa espera. Não é
   desenho de nada — só uma curva lenta em 5% de azul, que o véu da seção
   seguinte apaga aos poucos.

   A forma vem por máscara, e não por imagem colorida: assim a cor continua
   saindo da paleta, em variables.css, como todo o resto. Sem suporte a
   `mask-image`, a linha simplesmente não aparece — e nada mais muda. */
.section--story::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4rem;
  height: clamp(13rem, 27vw, 23rem);
  z-index: -1;
  pointer-events: none;
  background-color: var(--ambient-trace);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M-30 88 C 170 90 250 132 424 174'/%3E%3Cpath d='M470 190 C 618 226 706 268 892 292'/%3E%3Cpath d='M948 302 C 1046 314 1122 344 1232 396'/%3E%3Ccircle cx='446' cy='182' r='4.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='920' cy='297' r='3.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M-30 88 C 170 90 250 132 424 174'/%3E%3Cpath d='M470 190 C 618 226 706 268 892 292'/%3E%3Cpath d='M948 302 C 1046 314 1122 344 1232 396'/%3E%3Ccircle cx='446' cy='182' r='4.2' fill='%23000' stroke='none'/%3E%3Ccircle cx='920' cy='297' r='3.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* --- Tablet e celular ----------------------------------------------------
   Tela estreita concentra a luz: as manchas do desktop ficariam densas e
   deixariam de parecer iluminação. Aqui elas são mais largas que a viewport
   — assim nenhuma borda de elipse aparece — e o grão afina um pouco. */
@media (max-width: 900px) {
  .ambiente {
    background-image:
      radial-gradient(
        ellipse 140% 8% at 50% 30%,
        var(--ambient-lift),
        transparent 74%
      ),
      radial-gradient(
        ellipse 130% 11% at 0% 18%,
        var(--ambient-glow),
        transparent 72%
      ),
      radial-gradient(
        ellipse 140% 10% at 100% 46%,
        var(--ambient-glow),
        transparent 72%
      ),
      radial-gradient(
        ellipse 150% 10% at 0% 75%,
        var(--ambient-glow-soft),
        transparent 74%
      );
  }

  .ambiente::before {
    opacity: calc(var(--ambient-grain) * 0.78);
  }

  /* A curva esticada para 390px de largura vira quase uma reta. Fica só um
     trecho dela, ampliado, para continuar lendo como curva — e mais alto,
     para o olho ter o que seguir até a seção seguinte. */
  .section--story::after {
    bottom: -2rem;
    height: 11rem;
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-position: 36% 50%;
    mask-position: 36% 50%;
  }
}

/* No papel não há luz de tela: sai tudo. */
@media print {
  .ambiente,
  .section--story::after {
    display: none;
  }

  .section:nth-of-type(even),
  .section.section--countdown,
  .section.section--event {
    background-image: none;
  }
}