/* 01 · Plano comercial — "Floripa no globo de neve".
   Palco fixado: o f-globo varrido (com o pôster e o último quadro por trás, de reserva), a nevasca da travessia num
   canvas, dois véus (o do texto, à direita, sempre; o do logo, quando ele se monta), o logo oficial em peças e o
   texto do slide 1. Medidas que dependem do filme (onde o globo está na tela) vêm do JS em px: --ab-pl (borda
   esquerda do texto), --ab-lx/ly/lw/lh (caixa do logo), --ab-opx (object-position do filme). Tudo sob #abertura. */
#abertura .ab-stage { isolation: isolate; background: #0d0806; --ab-opx: 50%; --ab-pl: 60%; --ab-lx: 6%; --ab-ly: 14%; --ab-lw: 44%; --ab-lh: 74%; }

/* ---- câmera: filme e reserva ---- */
#abertura .ab-cam { position: absolute; inset: 0; z-index: 0; transform-origin: 34% 52%; background: #100a07; }
#abertura .ab-fallback { position: absolute; inset: 0; }
#abertura .ab-fallback img, #abertura .ab-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ab-opx) 50%; }
#abertura .ab-last { opacity: 0; }
/* o vídeo só aparece quando pinta de verdade (antes disso, a reserva por trás) */
#abertura .ab-film { background: transparent; opacity: 0; transition: opacity .5s ease; }
#abertura.is-film .ab-film { opacity: 1; }
#abertura .ab-fallback.has-missing { background: var(--velvet-wine); }

/* a neve viva de dentro do vidro (canvas recortado no círculo do vidro; o JS põe o globo na tela: --ab-gx/gy/gr) */
#abertura .ab-gsnow { position: absolute; z-index: 1; left: calc(var(--ab-gx, 36%) - var(--ab-gr, 30vh)); top: calc(var(--ab-gy, 44%) - var(--ab-gr, 30vh)); width: calc(var(--ab-gr, 30vh) * 2); height: calc(var(--ab-gr, 30vh) * 2); max-width: none; pointer-events: none; transform-origin: 50% 50%; }
.reduced #abertura .ab-gsnow { display: none; }
/* a nevasca da travessia do vidro */
#abertura .ab-rush { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; pointer-events: none; }

/* ---- véus ---- */
#abertura .ab-veil { position: absolute; inset: 0; pointer-events: none; }
/* o do texto: a partir da borda do globo (como no pré-show), bem escuro sob o texto — a árvore em bokeh ainda
   brilha por trás, apagada; embaixo, um pé escuro para o crédito */
#abertura .ab-veil--panel { z-index: 2;
  background:
    linear-gradient(90deg, rgba(4, 10, 7, 0) calc(var(--ab-pl) - 15%), rgba(4, 10, 7, .66) calc(var(--ab-pl) - 3%), rgba(4, 10, 7, .84) calc(var(--ab-pl) + 6%), rgba(4, 10, 7, .9) 100%),
    linear-gradient(0deg, rgba(4, 10, 7, .55) 0, rgba(4, 10, 7, 0) 16%); }
/* o do logo: a miniatura escurece em volta do logo (o logo é creme e dourado); o resto só um pouco */
#abertura .ab-veil--logo { z-index: 2;
  background:
    radial-gradient(calc(var(--ab-lw) * .95) calc(var(--ab-lh) * .74) at calc(var(--ab-lx) + var(--ab-lw) / 2) calc(var(--ab-ly) + var(--ab-lh) * .52), rgba(10, 4, 5, .8) 0%, rgba(10, 4, 5, .66) 46%, rgba(10, 4, 5, 0) 100%),
    rgba(6, 4, 4, .2); }

/* ---- o logo em peças ---- */
#abertura .ab-logo-box { position: absolute; z-index: 3; left: var(--ab-lx, 8%); top: var(--ab-ly, 14%); width: var(--ab-lw, 40%); height: var(--ab-lh, 70%); pointer-events: none; }
#abertura .ab-logo { position: relative; width: 100%; height: 100%; container-type: size; }
#abertura .ab-p { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); }
#abertura .ab-p img { display: block; width: 100%; height: 100%; max-width: none; }
/* brilho quente atrás do logo (estado final aceso) */
#abertura .ab-halo { position: absolute; left: -12%; right: -12%; top: 18%; bottom: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 162, 75, .2), rgba(233, 162, 75, .07) 55%, rgba(233, 162, 75, 0)); }
/* NIGHT RUN: cada letra desce pendurada por um fio (o fio some quando ela assenta) */
#abertura .ab-nr { transform-origin: 50% 0; }
#abertura .ab-thread { position: absolute; left: 50%; bottom: 100%; width: max(1px, .2cqw); height: 36cqh; margin-left: max(-.5px, -.1cqw); opacity: 0;
  background: linear-gradient(0deg, rgba(247, 201, 120, .9), rgba(247, 201, 120, 0)); }
/* NATAL LUZ: apagada (ouro escuro), halo por trás, a letra, e o clarão por cima (os dois de brilho são pré-assados) */
#abertura .ab-nldim { opacity: 0; }
#abertura .ab-nlh { opacity: .5; }
#abertura .ab-nlg { opacity: 0; }
/* revelação por janela (só transform): a janela anda para um lado e a tinta para o outro; borda macia por máscara */
#abertura .ab-win { position: absolute; overflow: hidden; }
#abertura .ab-ink { position: absolute; }
#abertura .ab-arab .ab-win { left: 0; top: 0; bottom: 0; right: -18%;
  -webkit-mask-image: linear-gradient(90deg, #000 84.7%, transparent 100%); mask-image: linear-gradient(90deg, #000 84.7%, transparent 100%); }
#abertura .ab-arab .ab-ink { left: 0; top: 0; width: calc(100% / 1.18); height: 100%; }
#abertura .ab-arvore .ab-win { left: 0; right: 0; bottom: 0; top: -18%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15.3%); mask-image: linear-gradient(180deg, transparent 0, #000 15.3%); }
#abertura .ab-arvore .ab-ink { left: 0; bottom: 0; width: 100%; height: calc(100% / 1.18); }
/* a faísca que corre na ponta do arabesco */
#abertura .ab-tip { position: absolute; left: 0; top: 0; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; opacity: 0; pointer-events: none; }
#abertura .ab-tip .sparkle { --size: 100%; width: 100%; height: 100%; color: #fff4d6; filter: drop-shadow(0 0 .8cqw rgba(255, 226, 166, .95)) drop-shadow(0 0 2.4cqw rgba(247, 190, 100, .7)); }
/* bolinha: descida (GSAP) › balanço pela rolagem (NL.swing) › balanço do pouso (GSAP); pivô no fio */
#abertura .ab-bol-drop, #abertura .ab-bol-sw, #abertura .ab-bol-sway { position: absolute; inset: 0; transform-origin: var(--pvx) var(--pvy); }
#abertura .ab-selo { transform-origin: 50% 50%; }
/* faíscas: piscam devagar depois de montadas (≤ 0,4 Hz), só com o logo na tela */
#abertura .ab-fa-in { width: 100%; height: 100%; }
#abertura .ab-logo.is-done.is-vis .ab-fa-in { animation: ab-tw 3.2s ease-in-out infinite; }
#abertura .ab-logo.is-done.is-vis .ab-fa:nth-last-child(2) .ab-fa-in { animation-delay: -1.1s; }
#abertura .ab-logo.is-done.is-vis .ab-fa:nth-last-child(3) .ab-fa-in { animation-delay: -2.2s; }
#abertura .ab-logo.is-done.is-vis .ab-fa:nth-last-child(4) .ab-fa-in { animation-delay: -.6s; }
#abertura .ab-logo.is-done.is-vis .ab-fa:nth-last-child(5) .ab-fa-in { animation-delay: -1.7s; }
/* o halo de NATAL LUZ respira devagar (0,23 Hz) com o logo pronto e na tela (a animação passa por cima do valor do GSAP) */
#abertura .ab-logo.is-done.is-vis .ab-nlh { animation: ab-breathe 4.4s ease-in-out infinite; }
@keyframes ab-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .26; } }
.reduced #abertura .ab-nlh { animation: none !important; }
@keyframes ab-tw { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.78) rotate(12deg); opacity: .62; } }
.reduced #abertura .ab-fa-in { animation: none !important; }

/* ---- o texto do slide 1 (à direita do globo; em pé, embaixo) ---- */
#abertura .ab-panel { position: absolute; z-index: 4; top: var(--top-safe); bottom: 0; left: var(--ab-pl); right: 0; display: flex; align-items: center;
  padding: clamp(12px, 2vh, 24px) var(--gutter) clamp(64px, 9vh, 110px) 0; pointer-events: none; }
#abertura .ab-panel__in { display: grid; justify-items: start; gap: clamp(16px, 2.8vh, 34px); width: 100%; max-width: calc((clamp(24px, 1.3vw + 12px, 42px)) * var(--ts, 1) * 19); pointer-events: auto; }
#abertura .ab-frase { font-size: calc((clamp(24px, 1.3vw + 12px, 42px)) * var(--ts, 1)); line-height: 1.3; max-width: none; color: var(--cream); font-weight: 400; text-wrap: pretty; }
#abertura .ab-frase .fr { color: var(--gold-2); font-size: 1.14em; line-height: .8; }
/* data e lugar do evento: crescem com a tela junto da frase (antes 14 px × --ts fixo — no projetor parecia letra
   miúda ao lado do lede: 15,4 contra 40 px no 1920) — 15,8 · 16,7 (1440) · 22,3 (1920) · 33,4 (2560) */
#abertura .ab-stamp { font-size: calc((clamp(14px, .5vw + 8px, 20px)) * var(--ts, 1)); letter-spacing: .12em; color: var(--cream); line-height: 1.5; align-items: flex-start; gap: .7em; }
#abertura .ab-stamp i { width: .78em; height: .78em; margin-top: .32em; }
/* data e lugar em duas linhas (sem o ponto pendurado no fim da primeira) */
#abertura .ab-stamp__t { display: grid; }
#abertura .ab-dot { display: none; }
/* "Realização" ≥ 14 px (14,6 no 1440 · 18,7 no 1920 · 26,8 no 2560) e o logo Sportsland acompanhando */
#abertura .ab-org { display: flex; align-items: center; gap: 1em; margin-top: clamp(0px, 1vh, 10px); font-size: calc((clamp(13px, .3vw + 9px, 16px)) * var(--ts, 1)); }
#abertura .ab-org__k { font-family: var(--f-body); font-weight: 600; font-size: 1em; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
#abertura .ab-sl { width: auto; height: calc((clamp(22px, .5vw + 15px, 30px)) * var(--ts, 1)); }
#abertura .ab-credit { position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(14px, 2.4vh, 28px); }

/* telas baixas (1280 × 720) */
@media (max-height: 760px) {
  #abertura .ab-panel__in { gap: 14px; }
  #abertura .ab-frase { font-size: calc((clamp(20px, .9vw + 12px, 30px)) * var(--ts, 1)); }
}

/* ---- em pé (tablet 1024 × 1366): globo/logo em cima, texto embaixo, no escuro ---- */
#abertura.is-portrait .ab-veil--panel { background: linear-gradient(0deg, rgba(4, 10, 7, .94) 0%, rgba(4, 10, 7, .86) 20%, rgba(4, 10, 7, .5) 30%, rgba(4, 10, 7, 0) 40%); }
#abertura.is-portrait .ab-panel { left: 0; top: auto; bottom: 0; align-items: flex-end; padding: 0 var(--gutter) clamp(64px, 6vh, 90px); }
#abertura.is-portrait .ab-panel__in { max-width: 100%; gap: 16px; }
#abertura.is-portrait .ab-veil--logo { background:
  radial-gradient(calc(var(--ab-lw) * .95) calc(var(--ab-lh) * .7) at calc(var(--ab-lx) + var(--ab-lw) / 2) calc(var(--ab-ly) + var(--ab-lh) * .52), rgba(10, 4, 5, .8) 0%, rgba(10, 4, 5, .64) 48%, rgba(10, 4, 5, 0) 100%),
  rgba(6, 4, 4, .18); }