/* 11 acesa — "Floripa acesa"
   A foto real da ponte (edição 2025) em tela cheia. Por cima, a MESMA foto apagada (escura, dessaturada, azulada)
   numa camada que anda para a direita enquanto a foto dentro dela anda para a esquerda (só transform: a foto fica
   parada, a borda corre). A borda é uma onda com esmaecimento (máscara em SVG). À frente da onda, um cometa de luz
   corre pela corrente; os pontos de brilho acendem quando a onda passa por eles. Depois, três fogos de faísca no céu
   e o carimbo da data. A câmera (.ac-cam) avança devagar. Texto embaixo à esquerda, sobre véu; crédito na plaqueta.
   Sem a foto: céu noturno + a ponte desenhada em luz (.ac-alt) sob a foto; a camada apagada tem fundo próprio. */

#acesa { --F: max(160px, 20vw); --pt: clamp(16px, 1.6vw, 46px); --ac-pos: 50% 50%; }
/* o céu da reserva (a foto cobre tudo quando pinta) */
#acesa .ac-stage { background: radial-gradient(90% 70% at 58% 22%, #0d2140, #060d1b 58%, #03070a); }
#acesa .ac-cam { position: absolute; inset: 0; z-index: 0; transform-origin: 58% 32%; will-change: transform; }
#acesa .ac-lit, #acesa .ac-dark__img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; object-position: var(--ac-pos); }
#acesa .ac-lit { left: 0; width: 100%; filter: saturate(1.1) contrast(1.04); }

/* reserva sem foto: a ponte em luz, nas coordenadas da foto (o JS põe a caixa do "cover": left/top/width/height) */
#acesa .ac-alt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
#acesa .ac-stage.is-photo .ac-alt { display: none; } /* com a foto pintada, a reserva nem entra na pintura da câmera */
#acesa .ac-alt path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#acesa .ac-alt .a-glow { stroke: rgba(70, 227, 164, .2); stroke-width: 26; }
#acesa .ac-alt .a-chain { stroke: #9dffd6; stroke-width: 10; stroke-dasharray: 0 26; }
#acesa .ac-alt .a-tower { stroke: #46e3a4; stroke-width: 15; }
#acesa .ac-alt .a-brace { stroke: rgba(70, 227, 164, .6); stroke-width: 5; }
#acesa .ac-alt .a-truss { stroke: rgba(255, 240, 210, .42); stroke-width: 5; }
#acesa .ac-alt .a-deck { stroke: #fff2d0; stroke-width: 11; stroke-dasharray: 0 36; }
#acesa .ac-alt .a-deckg { stroke: #7dffc6; stroke-width: 8; stroke-dasharray: 0 24; }
#acesa .ac-alt .a-dark { stroke: rgba(70, 227, 164, .3); stroke-width: 5; }
#acesa .ac-alt .a-hang { stroke: rgba(255, 244, 214, .2); stroke-width: 3; }
#acesa .ac-alt .a-red { stroke: #ff5a52; stroke-width: 7; }
#acesa .ac-alt .a-redg { stroke: rgba(255, 70, 60, .22); stroke-width: 22; }

/* brilho aceso por cima da foto (fica sob a camada apagada: aparece com a onda) */
#acesa .ac-bloom { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background:
    radial-gradient(30% 44% at 58% 26%, rgba(80, 255, 176, .3), rgba(80, 255, 176, 0) 70%),
    radial-gradient(52% 26% at 36% 44%, rgba(90, 240, 170, .18), rgba(90, 240, 170, 0) 70%),
    radial-gradient(40% 24% at 84% 30%, rgba(90, 240, 170, .16), rgba(90, 240, 170, 0) 70%); }

/* a camada apagada: mais larga que a tela pela faixa da onda (--F), à esquerda; a máscara é a onda (0…F) + cheio.
   O fundo próprio (degradê só vertical: não muda ao andar de lado) é a noite apagada quando a foto não pintou. */
#acesa .ac-dark { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--F)); width: calc(100% + var(--F)); overflow: hidden; will-change: transform;
  background: linear-gradient(180deg, #050b17, #04090e 56%, #030608);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='%23fff' d='M52 -40C74 -22 30 4 50 22S76 52 54 70S30 104 52 140L160 140L160 -40Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) 0 0 / var(--F) 100% no-repeat, linear-gradient(#000, #000) var(--F) 0 / calc(100% - var(--F) + 1px) 100% no-repeat;
  mask: var(--wave) 0 0 / var(--F) 100% no-repeat, linear-gradient(#000, #000) var(--F) 0 / calc(100% - var(--F) + 1px) 100% no-repeat; }
#acesa .ac-dark__img { left: var(--F); width: calc(100% - var(--F)); filter: grayscale(.92) brightness(.3) contrast(1.18); will-change: transform; }
#acesa .ac-dark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 30, .42), rgba(4, 9, 16, .28)); pointer-events: none; }

/* a crista da onda: um brilho verde-dourado que corre com a borda */
#acesa .ac-front { position: absolute; top: 0; bottom: 0; left: 0; width: var(--F); margin-left: calc(var(--F) / -2); pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(34% 52% at 50% 36%, rgba(150, 255, 205, .2), rgba(150, 255, 205, 0) 72%), radial-gradient(22% 30% at 50% 62%, rgba(255, 220, 150, .14), rgba(255, 220, 150, 0) 70%); }

/* pontos de brilho (JS: translate + escala + giro em cada ponto); o piscar é do grupo (três circuitos) */
#acesa .ac-pts, #acesa .ac-pts__c { position: absolute; inset: 0; pointer-events: none; }
#acesa .ac-pt { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, opacity; }
#acesa .ac-pt__halo { position: absolute; left: calc(var(--pt) * -1.3); top: calc(var(--pt) * -1.3); width: calc(var(--pt) * 2.6); height: calc(var(--pt) * 2.6); border-radius: 50%;
  background: radial-gradient(closest-side, var(--pt-h1, rgba(120, 255, 190, .62)), var(--pt-h2, rgba(70, 227, 164, .2)) 45%, rgba(70, 227, 164, 0)); }
#acesa .ac-pt__star { position: absolute; left: calc(var(--pt) * -.5); top: calc(var(--pt) * -.5); --size: var(--pt); color: var(--pt-c, #e9fff5);
  filter: drop-shadow(0 0 4px var(--pt-g, rgba(120, 255, 190, .9))); }
#acesa .ac-pt--white { --pt-h1: rgba(255, 244, 214, .6); --pt-h2: rgba(247, 201, 120, .2); --pt-c: #fffaf0; --pt-g: rgba(255, 226, 166, .9); }
#acesa .ac-stage.is-vis .ac-pts__c--0 { animation: ac-tw 2.1s ease-in-out infinite; }
#acesa .ac-stage.is-vis .ac-pts__c--1 { animation: ac-tw 2.6s ease-in-out -.9s infinite; }
#acesa .ac-stage.is-vis .ac-pts__c--2 { animation: ac-tw 3.1s ease-in-out -1.7s infinite; }
@keyframes ac-tw { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.reduced #acesa .ac-pts__c { animation: none !important; }

/* o cometa de luz na corrente: cabeça, cauda para trás (giro = ângulo da corrente), faísca girando */
#acesa .ac-comet { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
#acesa .ac-comet__head { position: absolute; left: calc(var(--pt) * -1.4); top: calc(var(--pt) * -1.4); width: calc(var(--pt) * 2.8); height: calc(var(--pt) * 2.8); border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff, rgba(220, 255, 236, .9) 18%, rgba(120, 255, 190, .45) 42%, rgba(70, 227, 164, 0)); }
#acesa .ac-comet__tail { position: absolute; right: 0; top: calc(var(--pt) * -.28); width: calc(var(--pt) * 11); height: calc(var(--pt) * .56); border-radius: 999px;
  background: linear-gradient(90deg, rgba(70, 227, 164, 0), rgba(120, 255, 190, .34) 60%, rgba(235, 255, 244, .85)); filter: blur(1px); }
#acesa .ac-comet__spark { position: absolute; left: calc(var(--pt) * -.8); top: calc(var(--pt) * -.8); --size: calc(var(--pt) * 1.6); color: #fffdf4;
  filter: drop-shadow(0 0 6px rgba(160, 255, 210, .95)); }
/* a faísca do cometa só gira com o cometa aceso (classe do JS): parada, a animação num SVG com filtro custava quadro */
#acesa .ac-comet.is-run .ac-comet__spark { animation: spin 3s linear infinite; }

/* ---------- fogos de faísca (JS monta e move; só transform/opacidade) ----------
   Por fogo: o foguete (risco que sobe), o clarão, e N raios = rastro (linha) + cabeça (faísca de 4 pontas com halo).
   As cabeças moram em três "circuitos" (.ac-fw__c--0/1/2): assentadas, piscam por grupo (3 animações, não 42). */
#acesa .ac-fw { position: absolute; inset: 0; pointer-events: none; --fwh: calc(15px * var(--ts, 1)); --fwt: max(2px, calc(1.8px * var(--ts, 1))); }
#acesa .ac-fw__c, #acesa .ac-fw__trs { position: absolute; inset: 0; }
#acesa .ac-fw i { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
#acesa .ac-fw__t { width: 100px; height: var(--fwt); margin-top: calc(var(--fwt) / -2); transform-origin: 0 50%; border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 244, 214, 0), var(--fw-t) 70%, var(--fw-h)); }
#acesa .ac-fw__h { width: var(--fwh); height: var(--fwh); margin: calc(var(--fwh) / -2) 0 0 calc(var(--fwh) / -2); }
#acesa .ac-fw__h::before { content: ''; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(closest-side, var(--fw-g), rgba(0, 0, 0, 0)); }
#acesa .ac-fw__h::after { content: ''; position: absolute; inset: 0; background: var(--fw-h);
  -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; }
#acesa .ac-fw__fl { width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 255, 246, .9), var(--fw-g) 32%, rgba(0, 0, 0, 0)); }
#acesa .ac-fw__rk { width: 3px; height: 100px; margin-left: -1.5px; transform-origin: 50% 0; border-radius: 3px;
  background: linear-gradient(180deg, #fffdf2, var(--fw-t) 26%, rgba(255, 244, 214, 0)); }
#acesa .ac-fw.is-set .ac-fw__c--0 { animation: ac-fwtw 1.9s ease-in-out infinite; }
#acesa .ac-fw.is-set .ac-fw__c--1 { animation: ac-fwtw 2.3s ease-in-out -.8s infinite; }
#acesa .ac-fw.is-set .ac-fw__c--2 { animation: ac-fwtw 2.7s ease-in-out -1.5s infinite; }
@keyframes ac-fwtw { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.reduced #acesa .ac-fw__c { animation: none !important; }

/* ---------- texto ---------- */
#acesa .ac-veil { z-index: 2;
  background:
    radial-gradient(78% 62% at 0% 100%, rgba(3, 8, 6, .9) 0%, rgba(4, 10, 7, .8) 38%, rgba(4, 10, 7, .42) 64%, rgba(4, 10, 7, 0) 86%),
    linear-gradient(0deg, rgba(3, 8, 6, .72) 0%, rgba(4, 10, 7, .38) 22%, rgba(4, 10, 7, 0) 42%); }
/* o texto encosta na margem esquerda (não na coluna centrada): a torre acesa fica em ~58% da largura em qualquer tela */
#acesa .ac-wrap { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; max-width: none; padding-bottom: clamp(44px, 8vh, 130px); pointer-events: none; }
#acesa .ac-txt { display: grid; gap: clamp(18px, 2.8vh, 40px); justify-items: start; width: min(100%, calc(55vw - var(--gutter))); pointer-events: auto; }
/* título pelo token do núcleo (.ch-title); a coluna que mede o teto termina antes da torre (55% da largura).
   A linha mais longa ("iluminada do ano.", com o itálico a 1,14 em) mede ~9,4 em. */
#acesa .ac-tbox { position: relative; container-type: inline-size; width: 100%; }
#acesa .ac-title { --title-em: 9.4; max-width: 10.5em; }
#acesa .ac-title .fr { font-size: 1.14em; }
/* a estrela do deck, pequena, logo depois da 1ª linha do título (o JS mede a linha e põe --sx/--sy) */
#acesa .ac-star { position: absolute; left: var(--sx, 7.4em); top: var(--sy, 0); font-size: min(var(--title-fs), calc(100cqi / 9.4)); width: .8em; height: .8em; pointer-events: none; }
#acesa .ac-star__in { position: absolute; inset: 0; }
#acesa .ac-star__halo { position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 110, 80, .34), rgba(255, 90, 60, 0)); }
/* o giro num invólucro HTML (gira no compositor); o <svg> com sombra é pintado uma vez */
#acesa .ac-star__spin { position: absolute; inset: 0; animation: spin 46s linear infinite; will-change: transform; }
#acesa .ac-star .star8 { position: absolute; inset: 0; --size: 100%; width: 100%; height: 100%; --star8-c: #e0262a; --star8-core: #3a0508;
  filter: drop-shadow(0 0 8px rgba(255, 96, 70, .55)); }
.reduced #acesa .ac-star__spin { animation: none; }

/* o carimbo da data (a novidade da última parada): placa com filete duplo dourado, levemente torta (o GSAP dá o giro) */
#acesa .ac-date { margin: 0; }
#acesa .ac-date__in { display: inline-grid; justify-items: start; row-gap: .55em; transform-origin: 28% 60%;
  padding: calc(15px * var(--ts, 1)) calc(24px * var(--ts, 1)) calc(14px * var(--ts, 1)) calc(18px * var(--ts, 1)); border-radius: calc(10px * var(--ts, 1));
  background: rgba(6, 14, 10, .82);
  box-shadow: inset 0 0 0 1.5px rgba(247, 201, 120, .92), inset 0 0 0 5px rgba(6, 14, 10, .82), inset 0 0 0 6px rgba(247, 201, 120, .42), 0 12px 34px rgba(0, 0, 0, .5); }
#acesa .ac-date__d { display: flex; align-items: center; gap: .38em; font-family: var(--f-display); font-weight: 600; font-size: calc(27px * var(--ts, 1)); line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; color: var(--gold-2); padding-top: .12em; white-space: nowrap; }
#acesa .ac-date__d i { flex: none; width: .66em; height: .66em; margin-top: -.14em; background: var(--gold-2); filter: drop-shadow(0 0 6px rgba(247, 201, 120, .8));
  -webkit-mask: var(--sparkle-mask) center / contain no-repeat; mask: var(--sparkle-mask) center / contain no-repeat; }
#acesa .ac-date__p { font-family: var(--f-body); font-weight: 600; font-size: calc(15px * var(--ts, 1)); line-height: 1.25; letter-spacing: .13em; text-transform: uppercase; color: var(--text); }

/* crédito: só com a foto pintada (sem ela, "Foto: edição 2025" ficaria solto sobre a reserva) */
#acesa .ac-credit { position: absolute; right: 16px; bottom: 12px; z-index: 5; margin: 0; visibility: hidden; opacity: 0; transition: opacity .5s, visibility 0s .5s; }
#acesa .ac-stage.is-photo .ac-credit { visibility: visible; opacity: 1; transition: opacity .5s; }

@media (max-height: 800px) {
  #acesa .ac-wrap { padding-bottom: 46px; }
  #acesa .ac-txt { gap: 16px; }
}
/* em pé (tablet): a ponte no alto (recorte que guarda a torre e as duas correntes), o texto embaixo */
@media (orientation: portrait) {
  #acesa { --ac-pos: 57% 50%; --F: max(160px, 34vw); --pt: clamp(16px, 2.6vw, 40px); }
  #acesa .ac-cam { transform-origin: 50% 26%; }
  #acesa .ac-veil { background: linear-gradient(0deg, rgba(3, 8, 6, .92) 0%, rgba(4, 10, 7, .76) 24%, rgba(4, 10, 7, .3) 40%, rgba(4, 10, 7, 0) 52%); }
  #acesa .ac-txt { width: 100%; }
}