/* 13 · Vamos iluminar Florianópolis juntos? — o fecho.
   Palco fixado: o f-fecho varrido (com o primeiro e o último quadro por trás, de reserva), o céu de dentro do vidro
   (recortado no círculo do globo, onde o trenó cruza a lua), a neve/purpurina do vidro, o brilho e o clarão do "tudo
   acende", o véu do texto, o fio de luzinhas da base e o texto do slide 15 à direita do globo (em pé: embaixo).
   Medidas que dependem do filme vêm do JS em px: --fc-pl (borda esquerda do texto), --fc-opx (object-position),
   --fc-gx/gy/gr (o globo na tela). */
#fecho .fc-stage { isolation: isolate; background: #140b07; --fc-opx: 50%; --fc-pl: 60%; --fc-gx: 38%; --fc-gy: 42%; --fc-gr: 30vh;
  --fc-sky: clamp(14px, 3vh, 48px); }

/* ---- câmera ---- */
#fecho .fc-cam { position: absolute; inset: 0; z-index: 0; background: #140b07; }
#fecho .fc-fallback { position: absolute; inset: 0; }
#fecho .fc-fallback img, #fecho .fc-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fc-opx) 50%; }
#fecho .fc-last { opacity: 0; }
#fecho .fc-film { background: transparent; opacity: 0; transition: opacity .5s ease; }
#fecho.is-film .fc-film { opacity: 1; }
#fecho .fc-fallback.has-missing { background: var(--velvet-wine); }

/* ---- o céu de dentro do vidro: o trenó voa recortado no círculo do globo (cruza a lua da miniatura) ---- */
#fecho .fc-glass { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  clip-path: circle(calc(var(--fc-gr) * .955) at var(--fc-gx) var(--fc-gy)); }
#fecho .fc-sleigh { position: absolute; left: 0; top: 0; width: calc(var(--fc-gr) * .66); aspect-ratio: 360 / 124; opacity: 0; will-change: transform, opacity; }
/* silhueta dourada com contorno escuro fino: lê no céu escuro e sobre a lua pálida */
#fecho .fc-sleigh__svg { position: absolute; inset: 0; --size: 100%; width: 100%; height: 100%; color: #ffd98c;
  filter: drop-shadow(0 0 1.5px rgba(40, 18, 4, .9)) drop-shadow(0 0 6px rgba(255, 226, 166, .9)) drop-shadow(0 0 16px rgba(247, 190, 100, .6)); }
/* rastro: um fio de luz que afina para trás, com pontinhos */
#fecho .fc-trail { position: absolute; right: 70%; top: 64%; width: 130%; height: 3px; border-radius: 3px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(247, 201, 120, 0), rgba(247, 201, 120, .4) 55%, rgba(255, 240, 210, .95));
  box-shadow: 0 0 10px rgba(247, 201, 120, .6); }
#fecho .fc-trail::before { content: ''; position: absolute; left: 10%; right: 0; top: -9px; bottom: -9px;
  background: radial-gradient(circle, rgba(255, 244, 214, .9) 0 1.4px, transparent 2px) 0 0 / 26px 18px repeat-x, radial-gradient(circle, rgba(247, 201, 120, .8) 0 1px, transparent 1.6px) 9px 12px / 34px 18px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.reduced #fecho .fc-glass { display: none; }

/* a neve viva de dentro do vidro (canvas recortado no círculo do vidro, no globo do último quadro) */
#fecho .fc-gsnow { position: absolute; z-index: 1; left: calc(var(--fc-gx) - var(--fc-gr)); top: calc(var(--fc-gy) - var(--fc-gr)); width: calc(var(--fc-gr) * 2); height: calc(var(--fc-gr) * 2); max-width: none; pointer-events: none; opacity: 0; }
.reduced #fecho .fc-gsnow { display: none; }

/* ---- "tudo acende": o vidro ganha um aro de luz, a cidade de dentro e a base um brilho quente, e a árvore atrás.
   O miolo do vidro (a lua, por onde o trenó passa) fica sem véu de luz ---- */
#fecho .fc-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background:
    radial-gradient(calc(var(--fc-gr) * 1.2) calc(var(--fc-gr) * 1.2) at var(--fc-gx) var(--fc-gy), rgba(255, 214, 150, 0) 72%, rgba(255, 224, 170, .3) 80.5%, rgba(255, 206, 130, .16) 86%, rgba(247, 180, 90, 0) 100%),
    radial-gradient(calc(var(--fc-gr) * .95) calc(var(--fc-gr) * .5) at var(--fc-gx) calc(var(--fc-gy) + var(--fc-gr) * .42), rgba(255, 214, 150, .34), rgba(247, 180, 90, .12) 60%, rgba(233, 162, 75, 0) 100%),
    radial-gradient(calc(var(--fc-gr) * 1.45) calc(var(--fc-gr) * .5) at var(--fc-gx) calc(var(--fc-gy) + var(--fc-gr) * 1.16), rgba(255, 196, 120, .3), rgba(255, 196, 120, 0) 100%),
    radial-gradient(34% 50% at 82% 26%, rgba(255, 204, 128, .22), rgba(255, 204, 128, 0) 100%); }
/* o clarão do vidro na chegada (tempo real, uma vez por passagem) */
#fecho .fc-flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(calc(var(--fc-gr) * 1.25) calc(var(--fc-gr) * 1.25) at var(--fc-gx) var(--fc-gy), rgba(255, 250, 232, .7), rgba(255, 214, 150, .32) 45%, rgba(247, 180, 90, 0) 100%); }

/* ---- véu do texto (como o da abertura: a partir da borda do globo) ---- */
#fecho .fc-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 5, 4, 0) calc(var(--fc-pl) - 14%), rgba(8, 5, 4, .7) calc(var(--fc-pl) - 3%), rgba(8, 5, 4, .86) calc(var(--fc-pl) + 6%), rgba(8, 5, 4, .92) 100%),
    linear-gradient(0deg, rgba(8, 5, 4, .5) 0, rgba(8, 5, 4, 0) 14%); }

/* ---- o fio de luzinhas da base (a caixa é o palco: o JS dá os pontos pela conta do "cover" do filme) ---- */
#fecho .fc-ring { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* ---- poeira de estrela em volta do vidro: cada faísca posta pelo JS (--x, --y em px do palco, --s tamanho) e
   cintilando devagar (≤ 0,4 Hz; pausa fora da tela pelo núcleo); a caixa acende no "tudo acende" ---- */
#fecho .fc-dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
#fecho .fc-dust i { position: absolute; left: var(--x, -99px); top: var(--y, -99px); width: var(--s, 20px); height: var(--s, 20px); margin: calc(var(--s, 20px) / -2) 0 0 calc(var(--s, 20px) / -2); }
#fecho .fc-dust i { animation: fc-tw var(--d, 2.8s) ease-in-out var(--dl, 0s) infinite; }   /* no invólucro HTML (composto) */
#fecho .fc-dust .sparkle { --size: 100%; width: 100%; height: 100%; color: #ffe6ad; filter: drop-shadow(0 0 4px rgba(255, 226, 166, .9)) drop-shadow(0 0 12px rgba(247, 190, 100, .55)); }
@keyframes fc-tw { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .55; } 50% { transform: scale(1.08) rotate(22deg); opacity: 1; } }
.reduced #fecho .fc-dust i { animation: none; }

/* ---- o texto do slide 15 ---- */
#fecho .fc-panel { position: absolute; z-index: 4; top: calc(var(--top-safe) + var(--fc-sky)); bottom: 0; left: var(--fc-pl); right: 0; display: flex; align-items: center;
  padding: 0 var(--gutter) clamp(36px, 5.6vh, 80px) 0; pointer-events: none; }
#fecho .fc-panel__in { display: grid; justify-items: start; gap: clamp(12px, 2.1vh, 26px); width: 100%; max-width: calc(560px * var(--ts, 1)); pointer-events: auto; container-type: inline-size; }
#fecho .fc-tarja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* data e lugar: crescem com a tela junto do título (antes 13 px × --ts: 16,4 px contra 74 px de título no 1920) */
#fecho .fc-date, #fecho .fc-stamp { font-size: calc((clamp(14px, .5vw + 8px, 20px)) * var(--ts, 1)); }
#fecho .fc-stamp { color: var(--cream); gap: .7em; }
#fecho .fc-stamp i { width: .78em; height: .78em; }
/* título pelo token do núcleo (.ch-title): --title-fs com teto pela coluna; "FLORIANÓPOLIS" (a linha mais larga) mede
   8,65 em na Josefin 400 com o espaçamento do .display. Três linhas fixas (o desenho do slide), cada uma inteira */
#fecho .fc-title-wrap { position: relative; width: 100%; --title-em: 8.8; font-size: min(var(--title-fs), calc(100cqi / var(--title-em))); }
#fecho .fc-title { --title-em: 8.8; max-width: none; }
#fecho .fc-t { display: block; white-space: nowrap; }
#fecho .fc-title .fr { font-size: 1.1em; }
/* a estrela do deck, pequena, logo depois de "JUNTOS?" (fora do texto; gira devagar, pausa fora da tela) */
#fecho .fc-star { position: absolute; left: 5.02em; bottom: .3em; width: .74em; height: .74em; pointer-events: none; }
#fecho .fc-star__in { display: block; width: 100%; height: 100%; }
#fecho .fc-star__svg { --size: 100%; width: 100%; height: 100%; --star8-c: var(--gold); --star8-core: #3a1a08; animation: spin 40s linear infinite; filter: drop-shadow(0 0 .12em rgba(247, 201, 120, .7)); }
.reduced #fecho .fc-star__svg { animation: none; }
#fecho .fc-lede { font-size: calc((clamp(18px, .75vw + 10px, 28px)) * var(--ts, 1)); max-width: 30ch; }
#fecho .fc-lockup { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(14px, 1.6vw, 26px); width: 100%; margin-top: 2px; }
#fecho .fc-logo { width: auto; height: calc((clamp(88px, 13.4vh, 170px)) * var(--ts, 1) / 1.1); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
#fecho .fc-mq-wrap { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); min-width: 0; }
#fecho .fc-plus { flex: none; font-family: var(--f-display); font-weight: 300; font-size: calc(40px * var(--ts, 1)); line-height: 1; color: var(--gold-2); padding-top: .12em; }
#fecho .fc-marquee { flex: 1 1 auto; min-width: 0; }
#fecho .fc-contact { display: grid; gap: 8px; justify-items: start; }
/* nome e telefone em caixa normal (mais estreito e mais legível que a caixa alta do .btn), sem quebrar */
#fecho .fc-call { font-size: calc(18px * var(--ts, 1)); letter-spacing: .02em; text-transform: none; min-height: calc(54px * var(--ts, 1) / 1.1); padding-inline: calc(24px * var(--ts, 1) / 1.1) calc(28px * var(--ts, 1) / 1.1); max-width: 100%; }
#fecho .fc-call span { white-space: nowrap; padding-top: .08em; }
#fecho .fc-call svg { width: 1.1em; height: 1.1em; }
/* "Realização" ≥ 14 px (14,6 no 1440 · 18,7 no 1920 · 26,8 no 2560) e o logo Sportsland acompanhando */
#fecho .fc-org { display: flex; align-items: center; gap: 1em; font-size: calc((clamp(13px, .3vw + 9px, 16px)) * var(--ts, 1)); }
#fecho .fc-org__k { font-family: var(--f-body); font-weight: 600; font-size: 1em; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
#fecho .fc-sl { width: auto; height: calc((clamp(21px, .5vw + 14px, 29px)) * var(--ts, 1)); }
/* o crédito fica embaixo à esquerda (sobre os presentes): a coluna do texto desce até o pé */
#fecho .fc-credit { position: absolute; z-index: 5; left: var(--gutter); bottom: clamp(12px, 2vh, 24px); }

/* telas baixas (1280 × 720): tudo um pouco mais junto */
@media (max-height: 760px) {
  #fecho .fc-stage { --fc-sky: 10px; }
  #fecho .fc-panel { padding-bottom: 30px; }
  #fecho .fc-panel__in { gap: 11px; }
  #fecho .fc-lede { max-width: 34ch; }
  #fecho .fc-logo { height: calc(80px * var(--ts, 1) / 1.1); }
  #fecho .fc-call { min-height: 46px; }
}

/* ---- em pé (tablet 1024 × 1366): a câmera vira uma janela mais larga que a tela e mais baixa (o "cover" corta
   menos dos lados e o globo inteiro cabe em cima), o texto embaixo; o contato ao lado da Natal Luz ---- */
#fecho.is-portrait .fc-cam { inset: 0 -12.5% 20% -12.5%;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
#fecho.is-portrait .fc-stage { background: #140b07; }
#fecho.is-portrait .fc-veil { background: linear-gradient(0deg, rgba(8, 5, 4, .95) 0%, rgba(8, 5, 4, .9) 30%, rgba(8, 5, 4, .55) 36%, rgba(8, 5, 4, 0) 44%); }
#fecho.is-portrait .fc-panel { left: 0; top: auto; bottom: 0; align-items: flex-end; padding: 0 var(--gutter) clamp(56px, 5vh, 80px); }
#fecho.is-portrait .fc-panel__in { max-width: 100%; gap: 14px 28px; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
#fecho.is-portrait .fc-tarja, #fecho.is-portrait .fc-title-wrap, #fecho.is-portrait .fc-lede, #fecho.is-portrait .fc-org { grid-column: 1 / -1; }
#fecho.is-portrait .fc-lede { max-width: 44ch; }
/* contato à esquerda, a Natal Luz (e, no fim, a marca) à direita: na parada 2 a vaga do letreiro fica na ponta */
#fecho.is-portrait .fc-contact { grid-row: 4; grid-column: 1; }
#fecho.is-portrait .fc-lockup { grid-row: 4; grid-column: 2; width: auto; }
#fecho.is-portrait .fc-org { grid-row: 5; }
#fecho.is-portrait .fc-marquee { width: calc(220px * var(--ts, 1) / 1.1); }
#fecho.is-portrait .fc-logo { height: calc(104px * var(--ts, 1) / 1.1); }
/* em pé, duas linhas: "VAMOS iluminar" / "FLORIANÓPOLIS JUNTOS?" (13,5 em); a estrela vai depois da primeira */
#fecho.is-portrait .fc-title-wrap, #fecho.is-portrait .fc-title { --title-em: 13.8; }
#fecho.is-portrait .fc-t { display: inline; }
#fecho.is-portrait .fc-t:first-child::after { content: '\A'; white-space: pre; }
#fecho.is-portrait .fc-star { left: 8.3em; bottom: auto; top: .26em; }