/* 04 corrida — "A corrida natalina de Florianópolis"
   Palco fixado com o f-vila varrido (a maquete da Beira-Mar à noite; o terço esquerdo é o mar escuro, o texto vai
   ali, sobre véu). Assinatura: o percurso de luz (NL.garland com caminho) e os quatro marcos de bengala doce com as
   placas dos percursos, que brotam onde o fio passa. Camadas: filme · véu · percurso · texto · crédito. */

#corrida .cr-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* unidade dos marcos (a bengala mede 100 × 172 u): cabe 4 marcos na largura, cresce com a altura */
#corrida { --u: calc(min(24vh, 16vw) / 170); }
@supports (height: 1svh) { #corrida { --u: calc(min(24svh, 16vw) / 170); } }

#corrida .cr-stage { background: radial-gradient(120% 80% at 30% 20%, #10233a, #07120d 70%); }
#corrida .cr-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #0b1830, #0a1a22 55%, #07120d); }
#corrida .cr-film { object-position: 50% 50%; background: transparent; }

/* véu: o mar escuro à esquerda (texto) e o chão da avenida embaixo (o percurso) */
#corrida .cr-veil { z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 13, 9, .92) 0%, rgba(6, 15, 12, .8) 30%, rgba(7, 18, 13, .56) 45%, rgba(7, 18, 13, .22) 57%, rgba(7, 18, 13, 0) 70%),
    linear-gradient(0deg, rgba(5, 13, 9, .82) 0%, rgba(6, 15, 12, .5) 20%, rgba(7, 18, 13, 0) 42%); }

/* ---------- o percurso ---------- */
#corrida .cr-route { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; z-index: 3; pointer-events: none; }
#corrida .cr-wire { position: absolute; inset: 0; }
#corrida .cr-marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

/* marco: a base do cabo (14, 170 u) fica no ponto do fio (--x, --y, px da caixa, postos pelo onBuild do fio) */
#corrida .cr-mark { position: absolute; left: calc(var(--x, -999px) - 14 * var(--u)); top: calc(var(--y, 0px) - 170 * var(--u));
  width: calc(100 * var(--u)); height: calc(172 * var(--u)); }
#corrida .cr-mark__pop { position: absolute; inset: 0; transform-origin: calc(14 * var(--u)) calc(170 * var(--u)); }
#corrida .cr-cane { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
#corrida .cr-mark__halo { position: absolute; left: calc(82 * var(--u)); top: calc(112 * var(--u)); width: calc(260 * var(--u)); height: calc(200 * var(--u));
  margin: calc(-100 * var(--u)) 0 0 calc(-130 * var(--u)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .42), rgba(233, 162, 75, .16) 55%, rgba(233, 162, 75, 0)); }
/* a placa pende da ponta do gancho (82, 58 u): o invólucro do balanço tem largura zero ali */
#corrida .cr-mark__swing { position: absolute; left: calc(82 * var(--u)); top: calc(58 * var(--u)); width: 0; height: 0; }
#corrida .cr-mark__drop { position: absolute; left: 0; top: 0; }
#corrida .cr-sign {
  position: relative; translate: -50% 0; margin-top: calc(13 * var(--u));
  width: max-content; min-width: calc(118 * var(--u));
  display: grid; justify-items: center; row-gap: .12em;
  padding: calc(12 * var(--u) + 6px) 13px calc(8 * var(--u) + 2px); border-radius: 7px;
  background: radial-gradient(120% 90% at 30% 10%, #fffaf1, #f6ead3 72%), #f6ead3; color: var(--ink);
  box-shadow: inset 0 0 0 2px #fdf6ea, inset 0 0 0 3.5px rgba(125, 10, 14, .55), 0 10px 18px rgba(0, 0, 0, .42), 0 2px 4px rgba(0, 0, 0, .3);
  text-align: center; white-space: nowrap;
}
/* os dois barbantes em V, da ponta do gancho aos cantos da placa */
#corrida .cr-sign::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: calc(100% - 2px); height: calc(15 * var(--u)); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 1L1 100M50 1L99 100' fill='none' stroke='%23d9b56a' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
#corrida .cr-sign::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 15 * var(--u) - 5px); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe6b0, #b9772c 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
#corrida .cr-sign__n { font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(24px, 3.6vh, 50px)) * var(--ts, 1)); line-height: 1; letter-spacing: .02em;
  padding-top: .12em; color: var(--wine); font-variant-numeric: lining-nums; }
#corrida .cr-sign__t { font-family: var(--f-body); font-weight: 600; font-size: calc((clamp(12px, 1.7vh, 22px)) * var(--ts, 1)); line-height: 1.2; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); }
/* fileira de 5 lampadinhas no alto da placa: apagadas por baixo, acesas por cima (a opacidade é a animação) */
#corrida .cr-sign__bulbs, #corrida .cr-sign__lit { position: absolute; left: 14%; right: 14%; pointer-events: none; }
#corrida .cr-sign__bulbs { top: calc(4 * var(--u) + 2px); height: calc(8 * var(--u) + 2px);
  background: radial-gradient(circle closest-side, #7a5a2e 0 55%, #3d2a12 70%, rgba(61, 42, 18, 0) 80%) 0 50% / 20% 100% repeat-x; }
#corrida .cr-sign__lit { top: calc(4 * var(--u) + 2px - 9 * var(--u)); height: calc(26 * var(--u) + 2px);
  background: radial-gradient(circle closest-side, #fffdf4 0 16%, #ffe2a0 26%, rgba(247, 190, 100, .55) 40%, rgba(233, 162, 75, 0) 100%) 0 50% / 20% 100% repeat-x;
  mix-blend-mode: normal; }
#corrida .cr-sign b + span { margin-top: 0; }

/* o pino dourado no começo do percurso (ponta em --x, --y) e a legenda do lugar ao lado */
#corrida .cr-pin { position: absolute; left: var(--x, -999px); top: var(--y, 0px); width: 0; height: 0; }
#corrida .cr-pin__drop { position: absolute; left: calc(var(--pin) / -2); top: calc(var(--pin) * -.92); width: var(--pin); height: var(--pin); }
#corrida { --pin: clamp(40px, 6.6vh, 92px); }
#corrida .cr-pin__ico { width: 100%; height: 100%; max-width: none; color: var(--gold-2); --pin-hole: #3a0508;
  filter: drop-shadow(0 0 10px rgba(247, 201, 120, .55)) drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
#corrida .cr-pin__ring { position: absolute; left: calc(var(--pin) * -.7); top: calc(var(--pin) * -.2); width: calc(var(--pin) * 1.4); height: calc(var(--pin) * .4); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(247, 201, 120, .8), 0 0 14px rgba(247, 201, 120, .5); opacity: 0; }
/* a legenda do lugar: o JS escolhe onde (--wx, --wy, px da caixa do percurso) — ao lado do pino; sem espaço antes do
   1º marco, em cima do pino; ainda encostando num marco (em pé), os marcos andam para a direita ou ela sobe acima deles.
   Folga mínima de 24 px para qualquer marco. */
#corrida .cr-where { position: absolute; left: var(--wx, -999px); top: var(--wy, 0px); max-width: calc(100% - 24px); }
#corrida .cr-where::before { display: none; }
#corrida .cr-where { grid-template-columns: auto; padding-left: 16px; }
#corrida .cr-where b { color: var(--gold-2); }
#corrida .cr-where span { color: var(--text-2); }

/* ---------- texto ---------- */
#corrida .cr-wrap { position: absolute; inset: 0; z-index: 4; padding-top: calc(var(--top-safe) + clamp(14px, 3.2vh, 46px)); pointer-events: none; }
#corrida .cr-wrap * { pointer-events: auto; }
#corrida .cr-lay { align-items: start; }
#corrida .cr-head { --span: 1 / 7; position: relative; display: grid; gap: clamp(14px, 2.2vh, 28px); container-type: inline-size; }
/* título pelo token do núcleo (.ch-title): teto pela coluna do cabeçalho — a palavra que não quebra é
   "FLORIANÓPOLIS" (≈ 8,6 em na Josefin 400); o título quebra em 2–3 linhas */
#corrida .cr-title { --title-em: 8.6; max-width: 12.5em; }
/* a estrela do deck, pequena, logo depois da 1ª linha do título (o JS mede a linha e põe --sx/--sy) */
#corrida .cr-star { position: absolute; left: var(--sx, 6em); top: var(--sy, 0); font-size: min(var(--title-fs), calc(100cqi / 8.6)); width: .78em; height: .78em; pointer-events: none; }
#corrida .cr-star__in { position: absolute; inset: 0; }
#corrida .cr-star__halo { position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 110, 80, .3), rgba(255, 90, 60, 0)); }
/* o giro mora num invólucro HTML (camada própria, gira no compositor); a estrela SVG com sombra é pintada uma vez —
   girar o próprio <svg> com filtro repintava a cada quadro (medido: 40% → 13% da thread parada, CPU ×4) */
#corrida .cr-star__spin { position: absolute; inset: 0; animation: spin 46s linear infinite; will-change: transform; }
#corrida .cr-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, .5)); }
.reduced #corrida .cr-star__spin { animation: none; }
#corrida .cr-lede { max-width: 30ch; color: var(--cream); }
#corrida .cr-facts { --span: 8 / 13; display: grid; gap: clamp(12px, 1.8vh, 22px); }
#corrida .cr-card { padding: calc(clamp(12px, 1.8vh, 19px) * var(--ts, 1)) calc(clamp(17px, 1.8vw, 26px) * var(--ts, 1)); background: rgba(9, 26, 16, .84); }
#corrida .cr-card__k { display: flex; align-items: center; gap: .45em; font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: calc((clamp(24px, 2.3vw, 33px)) * var(--ts, 1)); line-height: 1; letter-spacing: .06em; color: var(--gold); padding-top: .1em; }
#corrida .cr-card__spark { --size: .7em; flex: none; margin-top: -.14em; }
#corrida .cr-card__v { margin-top: .4em; font-size: calc((clamp(16px, .6vw + 8.6px, 17.3px)) * var(--ts, 1)); line-height: 1.36; color: var(--text); max-width: 30ch; text-wrap: pretty; }
#corrida .cr-big { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; font-family: var(--f-display); text-transform: uppercase; }
#corrida .cr-big__n { font-weight: 700; color: var(--gold); font-size: calc((clamp(52px, 5.4vw, 78px)) * var(--ts, 1)); line-height: 1; letter-spacing: 0; padding-top: .1em;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
#corrida .cr-big__pre { font-size: .42em; letter-spacing: .04em; color: var(--gold-2); vertical-align: .72em; }
#corrida .cr-big__l { font-weight: 600; font-size: calc((clamp(22px, 2vw, 29px)) * var(--ts, 1)); letter-spacing: .08em; color: var(--cream); }
#corrida .cr-odo { display: inline-flex; }

/* crédito "Imagem ilustrativa": só com o filme ou o pôster pintado (sem mídia, o fundo é o degradê e o crédito ficaria solto) */
#corrida .cr-credit { position: absolute; right: 16px; bottom: 12px; z-index: 5; margin: 0; visibility: hidden; opacity: 0; transition: opacity .5s, visibility 0s .5s; }
#corrida .cr-stage.has-media .cr-credit { visibility: visible; opacity: 1; transition: opacity .5s; }

/* ---------- tela baixa (1280 × 720) ---------- */
@media (max-height: 800px) {
  #corrida { --u: calc(min(20.5vh, 16vw) / 170); }
  #corrida .cr-head { gap: 12px; }
  #corrida .cr-lede { font-size: calc(20px * var(--ts, 1)); }
  #corrida .cr-card__v { font-size: calc(16px * var(--ts, 1)); }
  #corrida .cr-big__n { font-size: calc((clamp(48px, 4.6vw, 66px)) * var(--ts, 1)); }
}

/* ---------- em pé (tablet 1024 × 1366): texto em cima, destaques no meio, percurso embaixo ---------- */
@media (orientation: portrait) {
  #corrida { --u: calc(min(15svh, 15.4vw) / 170); }
  #corrida .cr-film { object-position: 44% 50%; }
  #corrida .cr-veil { background:
    linear-gradient(180deg, rgba(5, 13, 9, .86) 0%, rgba(6, 15, 12, .66) 36%, rgba(7, 18, 13, .2) 56%, rgba(7, 18, 13, 0) 64%),
    linear-gradient(0deg, rgba(5, 13, 9, .84) 0%, rgba(6, 15, 12, .5) 18%, rgba(7, 18, 13, 0) 34%); }
  #corrida .cr-head { --span: 1 / -1; }
  #corrida .cr-title { max-width: 14em; }
  /* a legenda do lugar em duas linhas ("Av. Beira-Mar / Continental"): cabe em cima do pino sem encostar no 1º marco */
  #corrida .cr-where b { max-width: 9.6em; text-wrap: balance; }
  #corrida .cr-sign__n { font-size: calc((clamp(22px, 3.3vw, 46px)) * var(--ts, 1)); }
  #corrida .cr-sign__t { font-size: calc((clamp(12px, 1.3vw, 20px)) * var(--ts, 1)); }
  #corrida .cr-lede { max-width: 36ch; }
  #corrida .cr-facts { --span: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; margin-top: clamp(8px, 2vh, 30px); }
  #corrida .cr-fact > .card { height: 100%; }
  #corrida .cr-route { top: 58%; }
}

/* bônus: a placa responde ao clique (balança) — o percurso em si não recebe ponteiro */
#corrida .cr-sign { pointer-events: auto; cursor: pointer; }