/* LAJE — site oficial. Mesmo kit visual do jogo: papel creme, contorno marrom-escuro com sombra
   deslocada, amarelo dos botões, Alfa Slab One nos letreiros e Rubik no texto. Sem scripts. */

@font-face {
  font-family: "Alfa Slab One";
  src: url("../assets/fonts/alfa-slab-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/rubik.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --creme: #FFF7E6;
  --papel: #F6ECD6;
  --escuro: #2B1B17;
  --suave: #5C4A42;
  --amarelo: #F7C33C;
  --vermelho: #D8412F;
  --azul: #2F5FB3;
  --noite: #232B5C;
  --lilas: #5D4E96;
  --foco: #1D4FB0;
  --letreiro: "Alfa Slab One", "Rockwell", "Georgia", serif;
  --texto: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --borda: 3px solid var(--escuro);
  --sombra: 0 6px 0 var(--escuro);
  --raio: 16px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--escuro);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--letreiro); font-weight: 400; line-height: 1.12; text-wrap: balance; margin: 0 0 .5em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
p { margin: 0 0 1em; }
a { color: var(--azul); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--amarelo); color: var(--escuro); padding: .6em 1em;
  border: var(--borda); border-radius: 10px; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

/* Topo: sobre a arte na página inicial; faixa escura nas páginas de texto. */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: var(--noite);
}
.inicio .topo { position: absolute; inset: 0 0 auto 0; z-index: 3; background: transparent; }
.inicio .topo-marca { display: none; }
.inicio .topo { justify-content: flex-end; }
.topo-marca img { width: 110px; height: auto; }
.idiomas ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.idiomas a {
  display: inline-block; padding: .3em .8em; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: var(--escuro); background: var(--creme); border: 2px solid var(--escuro); text-decoration: none;
}
.idiomas a[aria-current="page"] { background: var(--amarelo); }
.idiomas a:hover { background: var(--amarelo); }

/* Abertura */
.abertura {
  position: relative; isolation: isolate; color: var(--creme);
  min-height: min(100svh, 1000px); min-height: min(100vh, 1000px);
  display: grid; place-items: center; text-align: center;
  padding: 88px 16px 40px;
  --foco: var(--amarelo);
}
@supports (min-height: 100svh) { .abertura { min-height: min(100svh, 1000px); } }
.abertura-fundo, .abertura-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura-fundo { z-index: -2; will-change: transform; }
.abertura { overflow: hidden; }
.abertura-fundo img { object-fit: cover; object-position: 50% 60%; }
.abertura::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(24, 22, 60, .55) 0%, rgba(24, 22, 60, .12) 38%, rgba(24, 22, 60, 0) 55%, rgba(24, 16, 30, .55) 100%);
}
.abertura-conteudo { max-width: 860px; width: 100%; display: grid; justify-items: center; gap: 10px; }
.abertura-titulo { margin: 0; display: grid; justify-items: center; gap: 2px; }
.abertura-titulo img { width: clamp(220px, 52vw, 560px); filter: drop-shadow(0 6px 10px rgba(20, 12, 30, .35)); }
.abertura-sub {
  font-size: clamp(1.4rem, 1rem + 2.6vw, 2.6rem);
  text-shadow: 0 3px 0 var(--escuro), 0 0 18px rgba(20, 12, 30, .45);
}
.promessa {
  font-family: var(--letreiro); font-size: clamp(1.15rem, .95rem + 1.2vw, 1.75rem); line-height: 1.25; margin: .4em 0 0;
  text-shadow: 0 2px 0 var(--escuro), 0 0 14px rgba(20, 12, 30, .55);
}
.promessa span { display: inline-block; }
.promessa-texto {
  max-width: 34em; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-weight: 500;
  text-shadow: 0 1px 2px rgba(20, 12, 30, .9), 0 0 16px rgba(20, 12, 30, .6);
}

/* Lojas */
.lojas { display: grid; justify-items: center; gap: 10px; margin-top: 8px; }
.lojas-rotulo {
  margin: 0; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem;
  text-shadow: 0 1px 2px rgba(20, 12, 30, .9);
}
.lojas-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.selo img { height: 54px; width: auto; }
.selo { border-radius: 10px; display: inline-block; }
.em-breve, .steam {
  display: inline-flex; align-items: center; gap: .4em; flex-wrap: wrap; justify-content: center;
  min-height: 54px; padding: .5em 1.2em; border-radius: 12px; font-weight: 700; text-decoration: none;
  background: var(--creme); color: var(--escuro); border: var(--borda); box-shadow: 0 4px 0 var(--escuro);
}
.steam { background: var(--noite); color: var(--creme); border-color: var(--creme); box-shadow: none; min-height: 44px; font-size: .95rem; }
.lojas-steam { margin: 0; }

/* Faixas de conteúdo */
.faixa { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
.video, .pilares, .galeria { padding-block: clamp(48px, 7vw, 96px); }
.video { text-align: center; position: relative; isolation: isolate; overflow: hidden; }
.video p { max-width: 36em; margin-inline: auto; color: var(--suave); }
.video .faixa, .pilares .faixa, .modos .faixa, .galeria .faixa { position: relative; z-index: 1; }
.video-quadro { margin-top: 24px; }
.video-player {
  width: 100%; aspect-ratio: 16 / 9; background: var(--noite);
  border: 4px solid var(--escuro); border-radius: var(--raio); box-shadow: 0 8px 0 var(--escuro);
}
.video-aviso { font-size: .9rem; margin-top: 18px; }

.pilares { background: var(--creme); border-block: var(--borda); position: relative; isolation: isolate; overflow: hidden; }
.pilares h2, .galeria h2, .modos h2 { text-align: center; }
.pilares-grade { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 900px) { .pilares-grade { grid-template-columns: 1fr 1fr; } }
.pilar {
  background: var(--papel); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
}
.pilar-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: var(--borda); }
.pilar-texto { padding: 20px 22px 8px; }
.pilar-texto p { color: var(--suave); }

.modos {
  padding-block: clamp(64px, 8vw, 110px) clamp(48px, 7vw, 88px); color: var(--creme);
  background: linear-gradient(180deg, #141a4a 0%, var(--noite) 45%, var(--lilas) 100%);
  --foco: var(--amarelo); position: relative; isolation: isolate; overflow: hidden;
}
.modos-lista {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.modos-lista li {
  display: grid; gap: 6px; align-content: start; padding: 18px 18px 20px;
  border: 2px solid rgba(255, 247, 230, .55); border-radius: var(--raio); background: rgba(20, 16, 50, .28);
}
.modos-lista strong { font-family: var(--letreiro); font-weight: 400; font-size: 1.35rem; color: var(--amarelo); }

.galeria { position: relative; isolation: isolate; overflow: hidden; }
.galeria p { text-align: center; color: var(--suave); }
.galeria-grade { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 900px) { .galeria-grade { grid-template-columns: 1fr 1fr; } }
.foto { margin: 0; min-width: 0; }
.foto a { display: block; border: var(--borda); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); }
.foto img { width: 100%; aspect-ratio: 2868 / 1320; object-fit: cover; }
.foto figcaption { font-family: var(--letreiro); font-size: 1.15rem; margin-top: 14px; text-align: center; }

/* Encerramento */
.fim {
  position: relative; isolation: isolate; color: var(--creme); text-align: center;
  min-height: clamp(460px, 42vw, 760px); display: grid; place-items: center; padding: 56px 16px;
  --foco: var(--amarelo);
}
.fim-fundo, .fim-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fim-fundo { z-index: -2; }
.fim-fundo img { object-fit: cover; }
.fim::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(14, 12, 40, .5), rgba(14, 12, 40, 0) 70%); }
.fim-conteudo { max-width: 640px; display: grid; justify-items: center; gap: 6px; }
.fim h2 { text-shadow: 0 3px 0 var(--escuro), 0 0 18px rgba(10, 8, 30, .7); }
.fim p { font-size: 1.15rem; font-weight: 500; text-shadow: 0 1px 2px rgba(10, 8, 30, .9); }

/* Rodapé */
.rodape { background: var(--escuro); color: var(--creme); padding-block: 40px 48px; --foco: var(--amarelo); }
.rodape-dentro { max-width: 1120px; margin: 0 auto; padding-inline: 16px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.rodape a { color: var(--amarelo); }
.rodape-logo { width: 140px; }
.rodape-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-weight: 600; }
.rodape-seguranca { font-weight: 600; max-width: 40em; margin: 0; }
.rodape-pequeno { font-size: .85rem; opacity: .82; max-width: 60em; margin: 0; }

/* Páginas de texto (suporte, privacidade, 404) */
.texto { padding: clamp(28px, 5vw, 64px) 16px 64px; }
.texto-cartao {
  max-width: 760px; margin: 0 auto; background: var(--creme); border: var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: clamp(22px, 4vw, 44px);
}
.texto-cartao h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.texto-cartao h2 { font-size: 1.45rem; margin-top: 1.4em; }
.intro { color: var(--suave); }
.perguntas { display: grid; gap: 12px; margin-top: 18px; }
details { border: 2px solid var(--escuro); border-radius: 12px; background: var(--papel); padding: 0 18px; }
summary { cursor: pointer; font-weight: 700; padding: 14px 0; }
details[open] summary { border-bottom: 1px dashed rgba(43, 27, 23, .4); margin-bottom: 10px; }
.voltar { margin-top: 2em; font-weight: 600; }
.erro404 { text-align: center; display: grid; justify-items: center; }
.erro404 h1 { font-size: 4rem; margin: .2em 0 0; }

/* Marca de pendente: só na prévia, nunca na publicação. */
.pendente {
  display: inline-block; margin: 0 .3em; padding: .05em .5em; border: 2px dashed #B3261E; border-radius: 6px;
  background: #FFF; color: #B3261E; font: 600 .75rem/1.4 var(--texto); text-shadow: none; letter-spacing: 0; text-transform: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .em-breve, .selo, .foto a, .idiomas a { transition: transform .15s ease; }
  .selo:hover, .foto a:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 480px) {
  .abertura { padding-top: 76px; }
  .em-breve { width: 100%; }
}

/* ------------------------------------------------------------------------------------------
   Céus vivos: o que é chapado vira céu do jogo, com nuvens, pipas (as do jogo, com linha e
   rabiola), estrelas e o cordão de lâmpadas do Festival. Só transformações e opacidade
   (compostas pela GPU); as animações param fora da tela e somem com "reduzir movimento".
   ------------------------------------------------------------------------------------------ */
.ceu { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.video .ceu { background: linear-gradient(180deg, #8DBBE8 0%, #BBD8F0 55%, #F3E3C6 100%); }
.galeria .ceu { background: linear-gradient(180deg, #5C5BA8 0%, #B98BB3 40%, #F0B090 78%, #F7D8B2 100%); }
.pilares .ceu { background: var(--creme); }
.video h2, .video p { color: var(--escuro); }
.galeria h2 { color: var(--creme); text-shadow: 0 2px 0 var(--escuro), 0 0 14px rgba(20, 12, 30, .4); }
.galeria .faixa > p { color: var(--creme); text-shadow: 0 1px 2px rgba(20, 12, 30, .8); }
.galeria .foto figcaption { color: var(--creme); text-shadow: 0 2px 0 var(--escuro); }

/* Nuvens: blocos arredondados que atravessam a faixa devagar, cada uma num ritmo. */
.nuvem {
  position: absolute; top: var(--y, 20%); left: -30%; width: var(--w, 220px); height: calc(var(--w, 220px) * .32);
  border-radius: 999px; background: rgba(255, 255, 255, var(--o, .75));
  filter: blur(.5px); animation: nuvem-passa var(--d, 90s) linear infinite; animation-delay: var(--i, 0s);
  will-change: transform;
}
.nuvem::before, .nuvem::after {
  content: ""; position: absolute; bottom: 20%; border-radius: 50%; background: inherit;
}
.nuvem::before { left: 18%; width: 45%; height: 150%; }
.nuvem::after { left: 48%; width: 38%; height: 120%; }
.galeria .nuvem { background: rgba(255, 230, 220, var(--o, .55)); }
@keyframes nuvem-passa { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(100vw + 60%), 0, 0); } }

/* Pipas do jogo: a imagem, uma linha fina que desce até fora da faixa e a rabiola. */
.pipa {
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--s, 1) * 120px);
  transform-origin: 50% 90%; animation: pipa-voa var(--d, 9s) ease-in-out infinite alternate; animation-delay: var(--i, 0s);
  will-change: transform; filter: drop-shadow(0 6px 6px rgba(20, 12, 30, .18));
}
.pipa img { width: 100%; height: auto; display: block; }
.pipa .linha {
  position: absolute; left: calc(var(--lx, .5) * 100%); top: calc(var(--ly, .98) * 100%); width: 2px; height: 160vh;
  transform-origin: 50% 0; transform: translateX(-1px) rotate(var(--inc, -16deg));
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0));
}
.modos .pipa { filter: drop-shadow(0 0 5px rgba(255, 245, 210, .8)) drop-shadow(0 0 14px rgba(255, 235, 170, .35)); }
.modos .pipa .linha { background: linear-gradient(180deg, rgba(210, 225, 255, .75), rgba(210, 225, 255, .2) 55%, rgba(210, 225, 255, 0)); }
.pipa .rabiola {
  position: absolute; left: calc(var(--lx, .5) * 100% - 10px); top: calc(var(--ly, .98) * 100% - 4px); width: 36px; height: 86px;
  transform-origin: 10px 4px; animation: rabiola-balanca calc(var(--d, 9s) * .45) ease-in-out infinite alternate; animation-delay: var(--i, 0s);
}
@keyframes pipa-voa {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  35%  { transform: translate3d(calc(var(--s, 1) * 10px), calc(var(--s, 1) * -16px), 0) rotate(calc(var(--r, 0deg) + 4deg)); }
  70%  { transform: translate3d(calc(var(--s, 1) * -6px), calc(var(--s, 1) * -6px), 0) rotate(calc(var(--r, 0deg) - 3deg)); }
  100% { transform: translate3d(calc(var(--s, 1) * 14px), calc(var(--s, 1) * -22px), 0) rotate(calc(var(--r, 0deg) + 2deg)); }
}
@keyframes rabiola-balanca { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }

/* Vento nos pilares: traços finos que passam atrás dos cartões, como as rajadas do jogo. */
.vento {
  position: absolute; left: -20%; top: var(--y, 30%); width: 24vw; max-width: 320px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(43, 27, 23, 0), rgba(43, 27, 23, .22), rgba(43, 27, 23, 0));
  animation: vento-passa var(--d, 7s) linear infinite; animation-delay: var(--i, 0s); will-change: transform;
}
.vento::after { content: ""; position: absolute; inset: 0; transform: translate(-40%, 6px) scaleX(.6); background: inherit; }
@keyframes vento-passa { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(140vw, 0, 0); } }

/* Noite do Festival: estrelas (duas camadas, uma pisca), fogos ao longe e o cordão de lâmpadas. */
.estrelas, .estrelas-pisca { position: absolute; inset: 0; background-repeat: repeat; background-size: 520px 420px; }
.estrelas { opacity: .9; }
.estrelas-pisca { animation: estrela-pisca 3.2s ease-in-out infinite alternate; }
@keyframes estrela-pisca { from { opacity: .15; } to { opacity: .95; } }
.fogo {
  position: absolute; left: var(--x); top: var(--y); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0) 0 30%, var(--c, #F7C33C) 31% 33%, rgba(255, 255, 255, 0) 34%),
    repeating-conic-gradient(from 0deg, var(--c, #F7C33C) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 70%); mask: radial-gradient(circle, #000 0 20%, transparent 70%);
  opacity: 0; transform: scale(.2); animation: fogo-abre var(--d, 7s) ease-out infinite; animation-delay: var(--i, 0s); will-change: transform, opacity;
}
@keyframes fogo-abre {
  0% { opacity: 0; transform: scale(.2); } 6% { opacity: .95; } 22% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.05); }
}
.lampadas { position: absolute; left: -2%; top: 0; width: 104%; height: auto; }
.lampadas .bulbo { fill: #FFE9A0; filter: drop-shadow(0 0 6px rgba(255, 220, 120, .9)); animation: bulbo 2.4s ease-in-out infinite alternate; }
.lampadas .bulbo:nth-child(3n + 1) { animation-delay: -.8s; }
.lampadas .bulbo:nth-child(3n + 2) { animation-delay: -1.6s; fill: #FFD36A; }
@keyframes bulbo { from { opacity: .55; } to { opacity: 1; } }
.modos-lista li { background: rgba(14, 12, 44, .42); backdrop-filter: blur(2px); }

/* Abertura: pipas cortadas soltas, pequenas, levadas pelo vento (girando e descendo devagar),
   com um pedaço de linha pendurado. Ficam atrás do título. */
.ceu-solto, .ceu-festa { background: none; }
.abertura-conteudo, .fim-conteudo { position: relative; z-index: 1; }
.solta {
  position: absolute; left: -12%; top: var(--y, 12%); width: calc(var(--s, 1) * 46px);
  animation: solta-deriva var(--d, 44s) linear infinite; animation-delay: var(--i, 0s); will-change: transform;
}
.solta-gira {
  position: relative; display: block; transform-origin: 50% 35%;
  animation: solta-gira var(--g, 3s) ease-in-out infinite alternate; animation-delay: var(--i, 0s);
}
.solta img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 3px rgba(20, 12, 30, .25)); }
.solta .fio {
  position: absolute; left: calc(var(--lx, .5) * 100%); top: calc(var(--ly, .95) * 100%); width: 1.5px;
  height: calc(var(--s, 1) * 74px); transform-origin: 50% 0; transform: rotate(16deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
}
@keyframes solta-deriva {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(32vw, 4vh, 0); }
  50%  { transform: translate3d(63vw, 2vh, 0); }
  75%  { transform: translate3d(92vw, 9vh, 0); }
  100% { transform: translate3d(126vw, 15vh, 0); }
}
@keyframes solta-gira {
  from { transform: translate3d(0, -4px, 0) rotate(calc(var(--r, 0deg) - 22deg)); }
  to   { transform: translate3d(0, 5px, 0) rotate(calc(var(--r, 0deg) + 28deg)); }
}

/* Encerramento: fogos na noite do Festival, cada um com o rastro subindo e o estouro em duas
   coroas de cores próximas. */
.festa { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.festa .sobe {
  position: absolute; left: -1px; top: 0; width: 2px; height: 30px; border-radius: 2px; opacity: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0), var(--c2, #fff));
  animation: festa-sobe var(--d, 7s) ease-out infinite; animation-delay: var(--i, 0s); will-change: transform, opacity;
}
.festa .abre {
  position: absolute; left: calc(var(--t, 140px) / -2); top: calc(var(--t, 140px) / -2);
  width: var(--t, 140px); height: var(--t, 140px); border-radius: 50%; opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0) 0 30%, var(--c, #F7C33C) 31% 33%, rgba(255, 255, 255, 0) 34%),
    repeating-conic-gradient(from 0deg, var(--c, #F7C33C) 0 2deg, transparent 2deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 22%, transparent 70%); mask: radial-gradient(circle, #000 0 22%, transparent 70%);
  filter: drop-shadow(0 0 6px var(--c, #F7C33C));
  animation: festa-estoura var(--d, 7s) ease-out infinite; animation-delay: var(--i, 0s); will-change: transform, opacity;
}
.festa .abre.dois {
  background: repeating-conic-gradient(from 6deg, var(--c2, #fff) 0 1.5deg, transparent 1.5deg 18deg);
  animation-name: festa-estoura-dois;
}
@keyframes festa-sobe {
  0%       { opacity: 0; transform: translate3d(0, 34vh, 0); }
  2%       { opacity: .9; }
  12%      { opacity: .9; transform: translate3d(0, 0, 0); }
  14%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}
@keyframes festa-estoura {
  0%, 12%  { opacity: 0; transform: scale(.12); }
  14%      { opacity: 1; }
  34%, 100% { opacity: 0; transform: scale(1.1); }
}
@keyframes festa-estoura-dois {
  0%, 13%  { opacity: 0; transform: scale(.1) rotate(0deg); }
  16%      { opacity: .95; }
  40%, 100% { opacity: 0; transform: scale(.78) rotate(14deg); }
}

/* Aparecer ao rolar (só com o script; sem ele, tudo já está visível). */
.revela { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.revela.escondido { opacity: 0; transform: translateY(26px); }
.revela:nth-child(2) { transition-delay: .08s; } .revela:nth-child(3) { transition-delay: .16s; }
.revela:nth-child(4) { transition-delay: .24s; } .revela:nth-child(5) { transition-delay: .32s; } .revela:nth-child(6) { transition-delay: .4s; }

/* Com o script, os céus só animam enquanto estão na tela. */
.js .ceu-vivo:not(.ativo) .pipa, .js .ceu-vivo:not(.ativo) .rabiola, .js .ceu-vivo:not(.ativo) .nuvem,
.js .ceu-vivo:not(.ativo) .vento, .js .ceu-vivo:not(.ativo) .fogo, .js .ceu-vivo:not(.ativo) .estrelas-pisca,
.js .ceu-vivo:not(.ativo) .bulbo, .js .ceu-vivo:not(.ativo) .solta, .js .ceu-vivo:not(.ativo) .solta-gira,
.js .ceu-vivo:not(.ativo) .festa i { animation-play-state: paused; }

/* Cabeçalho das páginas de texto com o mesmo céu da noite. */
.interna .topo { position: relative; overflow: hidden; }
.interna .topo .estrelas { opacity: .6; }
.interna .topo > * { position: relative; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pilar { transition: transform .25s ease, box-shadow .25s ease; }
  .pilar:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--escuro); }
}
@media (max-width: 700px) {
  .pipa { width: calc(var(--s, 1) * 84px); }
  .nuvem { width: calc(var(--w, 220px) * .7); height: calc(var(--w, 220px) * .22); }
  .pipa.so-largo, .nuvem.so-largo, .fogo.so-largo, .solta.so-largo, .festa.so-largo { display: none; }
  .solta { width: calc(var(--s, 1) * 36px); }
  .festa .abre { --t: 96px; }
}

.estrelas{background-image:radial-gradient(1.6px 1.6px at 121px 163px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 514px 262px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 105px 114px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 430px 401px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 502px 384px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 451px 122px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 2px 314px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 82px 56px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 294px 418px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 100px 230px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 11px 417px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 502px 347px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 321px 107px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 406px 128px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 356px 182px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 385px 381px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 78px 370px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 348px 45px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 299px 147px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 468px 72px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 316px 12px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 377px 186px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 472px 216px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 92px 204px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 510px 59px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 435px 259px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 502px 203px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 264px 215px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 490px 262px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 25px 294px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 229px 392px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 132px 418px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 50px 360px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 105px 367px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 439px 240px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 145px 246px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 234px 62px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 467px 345px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 480px 365px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 257px 286px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 411px 342px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 315px 280px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 513px 357px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 490px 412px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 411px 221px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 207px 150px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 275px 4px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 33px 76px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 469px 411px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 501px 184px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 204px 133px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 497px 238px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 509px 413px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 444px 285px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 34px 148px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 324px 234px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 100px 224px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 265px 231px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 187px 217px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 490px 32px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 272px 255px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 379px 49px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 199px 382px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 421px 74px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 460px 7px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 94px 0px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 462px 297px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 85px 312px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 203px 126px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px at 123px 317px, #fff 50%, transparent 55%)}.estrelas-pisca{background-image:radial-gradient(2.2px 2.2px at 45px 384px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 274px 342px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 365px 79px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 5px 160px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 503px 353px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 138px 279px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 228px 242px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 134px 306px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 516px 148px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 86px 213px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 163px 69px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 313px 259px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 421px 199px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 152px 266px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 201px 192px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 14px 54px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 398px 37px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 52px 177px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 361px 394px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 26px 13px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 487px 167px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 310px 230px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 333px 62px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 509px 238px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 174px 78px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 211px 222px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 344px 234px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 238px 347px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 71px 280px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 408px 17px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 200px 331px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 177px 23px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 49px 231px, #fff 50%, transparent 55%), radial-gradient(2.2px 2.2px at 193px 247px, #fff 50%, transparent 55%)}