/* lilás da Odontologia (borla e gola), confirmar com a Viva */
:root { --lilas: #B49BEA; --lilas-fundo: #4B3878; }

/* =====================================================================
   Colação: "Quem filma são eles"
   A colação vista do palco. A luz vem dos celulares da família.
   ===================================================================== */
.col { position: relative; height: calc((var(--alto, 100vh) - var(--barra-h)) * 2.8); background: var(--breu); }
.col__palco {
  position: sticky; top: var(--topo-fixo, 0px); height: calc(var(--alto, 100vh) - var(--barra-h) - var(--topo-fixo, 0px)); overflow: clip;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.col__plateia { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* o formando de costas */
.sil {
  position: absolute; z-index: 3; left: 50%; bottom: 0;
  width: var(--sil-w, min(125vw, 62vh)); height: auto; aspect-ratio: 1; max-width: none;
  transform: translate(-50%, var(--sil-y, 13%));
  transition: transform 1.1s var(--ease);
  overflow: visible; pointer-events: none;
  /* camada própria: mudar a opacidade não redesenha o desfoque do SVG */
  will-change: transform, opacity;
}
.sil--halo { z-index: 2; opacity: var(--aro, .4); }
.sil--aro { opacity: var(--aro, .4); }
.sil--quente { opacity: var(--quente, 0); mix-blend-mode: screen; }
.col__palco { --sil-y: 24%; }

.col__flash {
  position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none;
}
.col__flash.is-pisca { animation: pisca .24s linear; }
@keyframes pisca { 0%, 50% { opacity: .85; } 100% { opacity: 0; } }

/* a lista fica no alto do palco, legível do primeiro ao último quadro */
.col__palco::before {
  content: ""; position: absolute; inset: 0 0 auto; height: max(62%, calc(var(--lista-fim, 0px) + 56px)); z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgb(6 7 11 / .96) 0%, rgb(6 7 11 / .82) 55%, rgb(6 7 11 / 0) 100%);
  opacity: max(0, 1 - var(--inclina, 0) * 2.5);
}
.col__texto {
  position: absolute; z-index: 5; left: 0; right: 0; top: 1.25rem;
  padding-inline: var(--gutter);
  display: grid; justify-items: center; gap: .7rem; text-align: center; pointer-events: none;
  /* quando a câmera sobe, a lista sai de cena */
  opacity: max(0, 1 - var(--inclina, 0) * 3);
}
.col__rotulo { display: inline-flex; align-items: center; gap: .6em; color: var(--ouro); }
.col__rec { width: .62em; height: .62em; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 .6em rgb(255 59 48 / .7); animation: rec 1.6s steps(1) 3; }
@keyframes rec { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .15; } }

/* o programa da cerimônia: leve e largo, uma linha por item, filetes entre eles */
.col__programa {
  display: grid; width: min(100%, 30rem);
  font-size: clamp(1.15rem, .95rem + 1vw, 1.75rem);
}
.col__programa li {
  padding: .5em 0; border-top: 1px solid rgb(255 243 225 / .12);
  font-weight: 300; font-stretch: 125%; line-height: 1.15; letter-spacing: -.012em;
  color: var(--luz); text-wrap: balance;
}
.col__programa li:first-child { border-top: 0; }
/* a homenagem aos pais fecha a lista: quando ela acende, o salão inteiro esquenta */
.col__programa li[data-homenagem] { transition: color .6s, font-weight .6s; }
.col__palco.is-quente .col__programa li[data-homenagem] { font-weight: 640; color: var(--ouro-claro); }

@media (min-width: 900px) {
  .col__programa { width: min(100%, 40rem); }
}
/* tela baixa (navegador do WhatsApp, notebook): a lista encolhe para não cobrir a plateia */
@media (max-height: 800px) {
  .col__texto { top: .8rem; gap: .45rem; }
  .col__programa { font-size: clamp(1rem, .9rem + .5vw, 1.3rem); }
  .col__programa li { padding: .36em 0; }
}

/* o fim: a câmera sobe da plateia para o teto e a turma joga os capelos */
.col__cena { position: absolute; inset: 0; transform: translateY(calc(var(--inclina, 0) * 108%)); will-change: transform; }
.col__teto {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  transform: translateY(calc((var(--inclina, 0) - 1) * 70%)); opacity: var(--inclina, 0);
  background:
    radial-gradient(ellipse 34% 22% at 50% 44%, rgb(255 236 200 / .55), transparent 70%),
    radial-gradient(ellipse 80% 42% at 50% 46%, rgb(255 196 120 / .32), rgb(255 160 80 / .08) 55%, transparent 78%),
    radial-gradient(ellipse 70% 26% at 50% 104%, rgb(255 226 180 / .28), transparent 70%),
    linear-gradient(to bottom, #040406 0%, #0B0908 30%, #17110C 62%, #0B0807 100%);
  will-change: transform, opacity;
}
.col__feixe {
  position: absolute; top: -8%; width: 26%; height: 120%;
  background: linear-gradient(to bottom, rgb(255 236 205 / .5), rgb(255 214 160 / .1) 55%, rgb(255 210 150 / 0) 85%);
  filter: blur(10px); transform-origin: 50% 0;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}
.col__feixe:nth-child(1) { left: 6%; transform: rotate(14deg); }
.col__feixe:nth-child(2) { left: 37%; transform: rotate(-2deg); opacity: .75; }
.col__feixe:nth-child(3) { left: 66%; transform: rotate(-16deg); }
.col__capelos { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

.col__oficial {
  font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--ouro-claro);
  font-size: min(12.4vw, 6.5rem, 9vh); line-height: .92; letter-spacing: -.035em; text-wrap: balance;
}
/* "Agora é oficial." aparece no teto, depois do flash */
.col__oficial--cena {
  position: absolute; z-index: 5; left: 0; right: 0; top: clamp(1.5rem, 9vh, 5rem);
  padding-inline: var(--gutter); text-align: center; pointer-events: none;
  text-shadow: 0 2px 24px rgb(6 7 11 / .6);
  opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .9s var(--ease);
}
.col__palco.is-oficial .col__oficial--cena { opacity: 1; transform: none; }
.col__oficial--fim { display: none; }
.col__fim { margin-top: 1.5rem; }

/* movimento reduzido, ou tela baixa demais (celular deitado, zoom alto):
   o quadro parado, com a plateia acesa e o salão dourado, sem câmera subindo nem capelos */
.is-estatico .col, .is-parado .col { height: auto; }
.is-estatico .col__palco, .is-parado .col__palco { position: relative; top: 0; height: min(86vh, 760px); }
.is-parado .col__palco { height: auto; overflow: visible; }
.is-parado .col__palco::before { display: none; }
.is-parado .col__texto { position: relative; top: 0; padding-block: 1.25rem; }
.is-parado .col__cena { position: relative; height: 80vh; }
.is-estatico .col__cena, .is-parado .col__cena { transform: none; }
.is-estatico .col__texto, .is-parado .col__texto { opacity: 1; }
.is-estatico .col__rec, .is-parado .col__rec { animation: none; }
.is-estatico .col__capelos, .is-estatico .col__flash, .is-estatico .col__teto, .is-estatico .col__oficial--cena,
.is-parado .col__capelos, .is-parado .col__flash, .is-parado .col__teto, .is-parado .col__oficial--cena { display: none; }
.is-estatico .col__oficial--fim, .is-parado .col__oficial--fim { display: block; }

/* camadas próprias para o que muda a cada quadro de rolagem */
.col__palco::before, .col__texto, .col__oficial--cena { will-change: opacity; }
.is-estatico .sil, .is-parado .sil, .is-estatico .col__cena, .is-parado .col__cena { will-change: auto; }