/* 03 · Quem realiza: Sportsland — o trem de brinquedo do Circuito + etiquetas de presente + a frase em lâmpadas.
   Palco fixado em três faixas (grade da .sp-wrap): no alto, a agência (esquerda) e a frase-manifesto (direita, só
   acende no fim); no meio, a faixa do trem (a sobra da tela vai para ela; o JS mede e põe o trilho); embaixo, as três
   etiquetas de número penduradas num fio de luzinhas sob o trilho. A posição natural do CSS é o quadro final (e o
   reduzido); o "herói" da 1ª parada, o trem no meio da tela (paradas 1 e 2) e as etiquetas abaixo do quadro são
   transforms. Tamanhos do trem em --u (passo de um vagão, px), medido no JS. Tudo sob #sportsland. */
#sportsland .sp-stage { isolation: isolate; --u: 160px; --fs-tag: calc((clamp(16.4px, .3vw + 12px, 17.8px)) * var(--ts, 1)); }

/* ---------- ambiente: a estrela do deck no canto (regra do núcleo) e faíscas ---------- */
/* o invólucro cobre o palco (a .star8--corner se posiciona nele); a saída de quadro no fim é dele */
#sportsland .sp-starbox { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform, opacity; }
#sportsland .sp-star { --size: min(28vmin, 320px); --star8-c: #9a0c12; --star8-core: #3a0508; opacity: .9; }
#sportsland .sp-spark { position: absolute; z-index: 2; pointer-events: none; animation: twinkle 3.6s ease-in-out infinite; }
#sportsland .sp-spark--1 { --size: calc(.42em); left: 102%; top: -30%; }
#sportsland .sp-spark--2 { --size: calc(.26em); left: 96%; top: 82%; animation-delay: -1.5s; }
#sportsland .sp-spark--3 { --size: clamp(12px, 1.1vw, 22px); left: 102%; top: -24%; animation-delay: -2.4s; }
.reduced #sportsland .sp-spark { animation: none; }

/* ---------- as três faixas ---------- */
#sportsland .sp-wrap { position: relative; z-index: 4; height: 100%; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  grid-template-rows: auto minmax(0, 1fr) auto; row-gap: clamp(8px, 1.6vh, 20px);
  padding-top: calc(var(--top-safe) + clamp(8px, 2vh, 26px)); padding-bottom: clamp(28px, 4vh, 48px); pointer-events: none; }
#sportsland .sp-wrap > * { min-width: 0; }

/* 1 · a agência: o título é o logo (token do núcleo: o logo mede 5,4 em do --title-fs; teto = 70% da coluna) */
#sportsland .sp-intro { grid-column: 1 / 7; grid-row: 1; align-self: start; display: grid; gap: clamp(12px, 2vh, 24px); justify-items: start; transform-origin: 0 0; container-type: inline-size; }
#sportsland .sp-logo { --title-em: 7.7; display: grid; justify-items: start; gap: .16em; line-height: 0; padding: 0; margin: 0; }
#sportsland .sp-kicker { font-family: var(--f-body); font-weight: 600; font-size: calc((clamp(12px, .42vw + 8.6px, 15px)) * var(--ts, 1)); line-height: 1.3; letter-spacing: .14em; color: var(--gold-2); }
#sportsland .sp-logo__art { position: relative; display: block; width: 5.4em; line-height: 0; }
#sportsland .sp-logo__art img { width: 100%; height: auto; filter: drop-shadow(0 3px 12px rgba(20, 2, 4, .45)); }
#sportsland .sp-text { font-size: calc((clamp(16px, .5vw + 11px, 21px)) * var(--ts, 1)); line-height: 1.5; color: var(--cream); max-width: 44ch; text-wrap: pretty; }
/* brilho que corre por dentro do logo (máscara = o próprio logo) */
#sportsland .sp-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask: var(--sheen-mask) center / 100% 100% no-repeat; mask: var(--sheen-mask) center / 100% 100% no-repeat; }
#sportsland .sp-sheen b { position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; transform: translateX(-130%);
  background: linear-gradient(100deg, rgba(255, 236, 190, 0) 0%, rgba(255, 236, 190, .95) 48%, rgba(255, 250, 235, 1) 52%, rgba(255, 236, 190, 0) 100%); }
#sportsland .sp-sheen--logo { --sheen-mask: url(../../assets/brand/sportsland-white.svg); }
#sportsland .sp-sheen--circuit { --sheen-mask: url(../../assets/logos/circuito-sportsland.png); }

/* 4 · a frase-manifesto: no alto à direita, três partes, cada uma com o seu fio de luzinhas embaixo */
#sportsland .sp-man { grid-column: 7 / 13; grid-row: 1; align-self: center; container-type: inline-size; display: grid; justify-items: center; text-align: center; }
#sportsland .sp-row { position: relative; display: block; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--cream);
  font-size: min(calc(4.1cqi * var(--ts, 1)), 5cqi); line-height: 1.1; padding: .08em .2em .72em; text-wrap: balance; max-width: 100%; }
#sportsland .sp-row__t { display: inline-block; filter: drop-shadow(0 2px 8px rgba(20, 2, 4, .55)); }
#sportsland .sp-k { font-weight: 600; color: var(--gold-2); }
#sportsland .sp-row__g { position: absolute; left: 6%; right: 6%; bottom: .04em; height: .62em; }

/* a faixa do trem: só ocupa espaço (o trem mora no palco) */
#sportsland .sp-band { grid-column: 1 / -1; grid-row: 2; min-height: 0; }

/* 3 · as etiquetas de número: penduradas no fio sob o trilho (o espaço de cima é o do barbante) */
#sportsland .sp-nums { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--gap) * 1.2);
  padding-top: clamp(28px, 4.4vh, 60px); will-change: transform; }
#sportsland .sp-hang { position: relative; display: grid; container-type: inline-size; }
#sportsland .sp-swing, #sportsland .sp-sway { position: relative; display: grid; }
#sportsland .sp-sway { transform-origin: 50% calc(var(--len, 40px) * -1); }
#sportsland .sp-card { position: relative; display: grid; transform-origin: 50% 0; }
/* o corpo da etiqueta: a legenda (1 em) nunca abaixo de 18 px na 1440 */
#sportsland .sp-face { --string: 0px; min-width: 0; width: 100%; font-size: var(--fs-tag);
  padding: 2.2em .9em .95em; gap: .28em; align-content: start; }
#sportsland .sp-face--back { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 2em; }
#sportsland .sp-face__flake { --size: 26%; width: 26%; height: auto; aspect-ratio: 1; color: var(--gold-3); opacity: .8; }
/* a frente: papel pinho aveludado com fio dourado por dentro; número dourado com brilho, legenda creme */
#sportsland .sp-face--front { color: var(--cream); }
#sportsland .sp-face--front::before { background: radial-gradient(120% 80% at 30% 0%, rgba(90, 160, 110, .22), transparent 60%), var(--velvet-pine); }
#sportsland .sp-rim { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; }
#sportsland .sp-rim path { fill: none; stroke: var(--gold); stroke-opacity: .72; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* o barbante: do fio de luzinhas até o ilhós (1,1 em abaixo do topo da etiqueta) */
#sportsland .sp-str { position: absolute; left: 50%; bottom: calc(100% - 1.1em); width: 2px; margin-left: -1px; height: calc(var(--len, 40px) + 1.1em);
  font-size: var(--fs-tag); background: linear-gradient(90deg, #9c7a45, #e2c48f 50%, #9c7a45); pointer-events: none; }
/* o número: Josefin 700 dourado, ~62 px × ts, com teto pela etiqueta ("+R$ 120 MI" = 5,68 em, pode entrar no respiro
   lateral) — igual nas três */
#sportsland .sp-n { font-size: min(calc(62px * var(--ts, 1)), calc((100cqi - 1.2em) / 5.74)); color: var(--gold); white-space: nowrap; letter-spacing: 0; line-height: 1; padding-top: .1em; }
#sportsland .sp-glow { display: inline-block; }
#sportsland .sp-n .odo { vertical-align: baseline; }
#sportsland .sp-l { font-family: var(--f-body); font-weight: 500; line-height: 1.34; color: var(--cream); text-wrap: balance; max-width: 21em; }
#sportsland .sp-face .sp-f { font-size: var(--note-fs); line-height: 1.3; color: rgba(255, 244, 226, .74); max-width: none; letter-spacing: .02em; }
/* sombra de virada (escurece a etiqueta no meio do giro) */
#sportsland .sp-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--shade, 0); background: linear-gradient(90deg, rgba(20, 2, 4, .5), rgba(20, 2, 4, .15)); clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); border-radius: 4px; }

/* o fio de luzinhas das etiquetas (caixa = o palco; o JS põe a altura do fio) */
#sportsland .sp-glbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; will-change: transform; }

/* ---------- a "câmera" do trem ---------- */
#sportsland .sp-rig { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; }

/* ---------- o trilho ---------- */
/* janela que anda da direita para a esquerda (só transform): o trilho "se desenha" à frente do trem */
/* a janela tem 2 telas de largura: depois de andar para a esquerda, a borda direita dela continua fora do quadro */
#sportsland .sp-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 200%; z-index: 1; overflow: hidden; pointer-events: none; will-change: transform; }
#sportsland .sp-rail__in { position: absolute; left: 0; top: 0; width: 50%; height: 100%; will-change: transform; }
#sportsland .sp-rail__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
#sportsland .sp-tip { position: absolute; z-index: 2; left: 0; top: 0; width: calc(var(--u) * .56); height: calc(var(--u) * .56); margin: calc(var(--u) * -.28) 0 0 calc(var(--u) * -.28); opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 250, 235, .95), rgba(247, 201, 120, .55) 34%, rgba(233, 162, 75, 0)); will-change: transform, opacity; }
#sportsland .sp-tip svg { position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; }

/* ---------- o trem ---------- */
#sportsland .sp-train { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#sportsland .sp-car { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transform: translate(-9999px, 0); }
#sportsland .sp-car__art { position: absolute; max-width: none; overflow: visible; filter: drop-shadow(0 calc(var(--u) * .03) calc(var(--u) * .04) rgba(20, 2, 4, .5)); }
#sportsland .sp-loco { left: calc(var(--u) * -.64); top: calc(var(--u) * -1); width: calc(var(--u) * 1.28); height: var(--u); }
#sportsland .sp-wagon { left: calc(var(--u) * -.5); top: calc(var(--u) * -.5); width: var(--u); height: calc(var(--u) * .5); }
#sportsland .sp-wh { position: absolute; max-width: none; left: calc(var(--u) * (var(--x) - var(--r)) / 100); top: calc(var(--u) * (var(--y) - var(--r)) / 100);
  width: calc(var(--u) * var(--r) / 50); height: calc(var(--u) * var(--r) / 50); will-change: transform; }
#sportsland .sp-rod { position: absolute; left: calc(var(--u) * -.175); top: calc(var(--u) * -.146); width: calc(var(--u) * .35); height: calc(var(--u) * .032); border-radius: 99px;
  background: linear-gradient(180deg, #ffe2a6, #e9a24b 50%, #8a5418); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); will-change: transform; }
/* farol aceso (desde a espera na borda da tela): halo e um facho curto para a frente (à esquerda) */
#sportsland .sp-lamp { position: absolute; left: calc(var(--u) * -1.2); top: calc(var(--u) * -.92); width: calc(var(--u) * .9); height: calc(var(--u) * .54); pointer-events: none;
  background: radial-gradient(closest-side at 67% 50%, rgba(255, 246, 220, .95), rgba(255, 226, 166, .35) 30%, rgba(255, 226, 166, 0) 70%),
    linear-gradient(90deg, rgba(255, 236, 190, 0), rgba(255, 236, 190, .18) 60%, rgba(255, 236, 190, 0) 70%);
  -webkit-mask: radial-gradient(100% 70% at 67% 50%, #000 40%, transparent 100%); mask: radial-gradient(100% 70% at 67% 50%, #000 40%, transparent 100%); }
/* a etiqueta de presente dentro da gôndola (o pé fica atrás da parede da frente) — fica em pé mesmo no arco do trilho */
#sportsland .sp-cargo { position: absolute; left: calc(var(--u) * -.43); width: calc(var(--u) * .86); top: calc(var(--u) * -1.2); height: calc(var(--u) * .9); transform-origin: 50% 100%; will-change: transform; }
#sportsland .sp-ctag { position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 8%, #ffffff, #fbf6ec 70%), #fbf6ec; clip-path: polygon(15% 0, 85% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
#sportsland .sp-ctag::before { content: ''; position: absolute; left: 50%; top: calc(var(--u) * .052); width: calc(var(--u) * .076); height: calc(var(--u) * .076); margin-left: calc(var(--u) * -.038); border-radius: 50%;
  background: radial-gradient(closest-side, #3a0508 0 42%, #e9a24b 48% 82%, rgba(233, 162, 75, 0) 90%); }
#sportsland .sp-ctag::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 calc(var(--u) * .006) rgba(185, 119, 44, .45), inset 0 calc(var(--u) * -.2) calc(var(--u) * .12) rgba(58, 5, 8, .08); }
/* a área do logo: abaixo do laço, acima da parede da gôndola (o pé da etiqueta fica escondido atrás dela) */
#sportsland .sp-ctag__logo { position: absolute; left: calc(var(--u) * .04); top: calc(var(--u) * .2); width: calc(var(--u) * .78); height: calc(var(--u) * .48); max-width: none; object-fit: contain; }
#sportsland .sp-ctag__bow { position: absolute; left: 50%; top: calc(var(--u) * .02); width: calc(var(--u) * .27); height: calc(var(--u) * .191); margin-left: calc(var(--u) * -.135); max-width: none; overflow: visible; color: var(--gold); filter: drop-shadow(0 1px 1.5px rgba(58, 5, 8, .4)); }
/* o último vagão, a Natal Luz: uma estrela no alto da etiqueta */
#sportsland .sp-lstar { position: absolute; left: 50%; top: calc(var(--u) * -.2); width: calc(var(--u) * .4); height: calc(var(--u) * .4); margin-left: calc(var(--u) * -.2); --star8-c: #f7c978; --star8-core: #b9772c; will-change: transform, opacity; }
#sportsland .sp-lstar .star8 { position: relative; --size: 100%; width: 100%; height: 100%; filter: drop-shadow(0 0 calc(var(--u) * .03) rgba(255, 214, 140, .9)); }
#sportsland .sp-lstar__halo { position: absolute; left: -90%; top: -90%; width: 280%; height: 280%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 236, 190, .6), rgba(247, 201, 120, .18) 45%, rgba(247, 201, 120, 0)); animation: sp-halo 2.6s ease-in-out infinite; }
@keyframes sp-halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .55; } }
.reduced #sportsland .sp-lstar__halo { animation: none; }

/* vapor de neve da chaminé */
#sportsland .sp-puffs { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#sportsland .sp-puff { position: absolute; left: 0; top: 0; width: calc(var(--u) * .36); height: calc(var(--u) * .36); margin: calc(var(--u) * -.18) 0 0 calc(var(--u) * -.18); border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 3%, transparent 4%), radial-gradient(circle at 72% 40%, #fff 0 2.4%, transparent 3.4%), radial-gradient(circle at 46% 74%, #fff 0 2%, transparent 3%),
    radial-gradient(closest-side, rgba(255, 255, 255, .92), rgba(243, 247, 251, .6) 45%, rgba(243, 247, 251, 0)); }

/* o vapor lento da espera (antes da partida): quatro baforadas em laço, só transform/opacity (compositor), nascendo na
   chaminé (--cx/--cy medidos no JS); só existem com .is-wait e somem quando o trem parte */
#sportsland .sp-idle { position: absolute; left: var(--cx, -999px); top: var(--cy, 0px); width: calc(var(--u) * .36); height: calc(var(--u) * .36); margin: calc(var(--u) * -.18) 0 0 calc(var(--u) * -.18);
  border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle at 34% 32%, #fff 0 3%, transparent 4%), radial-gradient(circle at 70% 46%, #fff 0 2.4%, transparent 3.4%),
    radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(243, 247, 251, .55) 45%, rgba(243, 247, 251, 0));
  animation-delay: calc(var(--k) * -.7s); }
/* só anima na espera: animação CSS de elemento escondido continua custando na thread principal (medido: ~50% com CPU ×4) */
#sportsland .is-wait .sp-idle { animation: sp-idle 2.8s cubic-bezier(.25, .6, .4, 1) infinite; animation-delay: calc(var(--k) * -.7s); }
@keyframes sp-idle {
  0% { transform: translate(0, 0) scale(.34); opacity: 0; }
  8% { opacity: .95; }
  100% { transform: translate(calc(var(--u) * -.34), calc(var(--u) * -1.2)) scale(2.1); opacity: 0; }
}
.reduced #sportsland .sp-idle { display: none; }

/* o logo do Circuito: acima da locomotiva (o JS põe left/top/largura) */
#sportsland .sp-circuit { position: absolute; z-index: 3; left: 0; top: 0; width: 200px; }
#sportsland .sp-circuit__logo { width: 100%; height: auto; filter: drop-shadow(0 3px 10px rgba(20, 2, 4, .5)); }

/* ---------- telas baixas: menos folga ---------- */
@media (max-height: 760px) {
  #sportsland .sp-wrap { row-gap: 6px; padding-bottom: 30px; }
  #sportsland .sp-intro { gap: 8px; }
  #sportsland .sp-text { line-height: 1.42; }
  #sportsland .sp-nums { padding-top: 24px; }
  #sportsland .sp-face { padding: 2em .7em .75em; gap: .2em; }
  #sportsland .sp-n { font-size: min(calc(50px * var(--ts, 1)), calc((100cqi - 1.2em) / 5.74)); }
  #sportsland .sp-l { line-height: 1.24; }
}

/* ---------- em pé (tablet 1024 × 1366): a agência, o trem, as etiquetas e a frase, um embaixo do outro ---------- */
/* a faixa do trem tem a altura do trem (o JS põe min-height: em pé o trem é medido pela largura) e a sobra da tela
   se divide entre as faixas; a frase quebra em mais linhas, com letra maior */
@media (orientation: portrait) {
  #sportsland .sp-wrap { grid-template-rows: auto auto auto auto; align-content: space-evenly; row-gap: clamp(14px, 2vh, 30px); }
  #sportsland .sp-intro { grid-column: 1 / -1; grid-row: 1; }
  #sportsland .sp-text { font-size: calc(21px * var(--ts, 1)); max-width: 46ch; }
  #sportsland .sp-band { grid-row: 2; }
  #sportsland .sp-nums { grid-row: 3; column-gap: clamp(12px, 2vw, 24px); }
  #sportsland .sp-face { padding-inline: .7em; }
  #sportsland .sp-man { grid-column: 1 / -1; grid-row: 4; }
  #sportsland .sp-row { max-width: 26em; font-size: min(calc(3.6cqi * var(--ts, 1)), 4cqi); line-height: 1.16; }
}