/* 08 · Não é apenas patrocinar uma corrida — "o apagão e o acendimento". Tudo sob #protagonista.
   Palco fixado em duas faixas (grade da .pt-wrap): o cabeçalho no alto (a posição FINAL; o herói grande do começo é
   um transform do JS) e as duas colunas, que pousam no chão (a foto real, embaixo, esmaecida para cima). Cada coluna:
   o presente à esquerda, o título e a lista à direita, com o fio de luzinhas vertical (NL.garland) numa faixa estreita
   entre o presente e o texto — uma lâmpada por item, na altura do item. Os presentes estão no chão desde a 1ª parada,
   em penumbra (.pt-gdim), com o fio deitado no chão (.pt-floorg) entre eles. */
#protagonista .pt-stage { isolation: isolate;
  --pt-floor: clamp(140px, 24vh, 420px);      /* altura da foto do chão */
  --pt-sink: clamp(40px, 9vh, 140px);         /* quanto os presentes entram no chão (pisam na foto) */
  /* medidas das colunas pela largura da coluna de texto (cqi da .pt-wrap, que é contêiner): no 1920 e no projetor a
     composição cresce junto com a coluna, não com a janela. Presente: 150 px no 1440, 173 no 1920, 230 no 2560 */
  --pt-gift: clamp(84px, min(12.6cqi, 17vh), 340px);
  --pt-lane: clamp(48px, 5cqi, 120px);         /* faixa do fio vertical (as lâmpadas alternam os lados) */
  --pt-listh: clamp(200px, 42vh, 620px); }

/* estrela do deck no canto de cima, abaixo do HUD (regra do núcleo), menor: longe do título herói */
#protagonista .pt-star { --size: min(26vmin, 300px); opacity: .62; }

/* ---- o chão: o pelotão de longe e a ponte acesa, escurecidos e esmaecidos para cima ---- */
#protagonista .pt-floor { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: var(--pt-floor); overflow: hidden; background: var(--pine-3);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 54%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 54%); }
#protagonista .pt-floor.has-missing { background: radial-gradient(60% 90% at 70% 40%, rgba(70, 227, 164, .16), transparent 70%), var(--pine-3); }
/* recorte: o tabuleiro aceso da ponte e as cabeças do pelotão de longe (gorros de Papai Noel), sem rosto em close */
#protagonista .pt-floor__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 66%; filter: brightness(.5) saturate(.78) contrast(1.05); }
/* a sombra fria sobe pela metade do comum; a luz quente se derrama na metade do protagonista */
#protagonista .pt-floor__cold { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 9, 6, .82) 0%, rgba(3, 9, 6, .6) 38%, rgba(3, 9, 6, 0) 58%); opacity: 0; }
#protagonista .pt-floor__warm { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(40% 90% at var(--pt-gx, 60%) 10%, rgba(255, 206, 130, .45), rgba(233, 162, 75, .14) 48%, rgba(233, 162, 75, 0) 78%); }
#protagonista .pt-credit { position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(10px, 1.8vh, 24px); }

/* ---- a luz do palco ---- */
#protagonista .pt-cold { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(46% 62% at 22% 66%, rgba(2, 7, 5, .66), rgba(2, 7, 5, .4) 60%, rgba(2, 7, 5, 0) 100%),
    linear-gradient(90deg, rgba(2, 7, 5, .42) 0%, rgba(2, 7, 5, .3) 36%, rgba(2, 7, 5, 0) 52%); }
#protagonista .pt-warm { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  /* a luz sai do presente e se espalha em volta dele (maior que antes, mas centrada no presente, não na lista: o
     dourado da letra precisa de fundo escuro) */
  background:
    radial-gradient(22% 38% at var(--pt-gx, 58%) var(--pt-gy, 64%), rgba(255, 226, 166, .36), rgba(247, 190, 100, .12) 50%, rgba(233, 162, 75, 0) 78%),
    radial-gradient(46% 60% at calc(var(--pt-gx, 58%) - 6%) calc(var(--pt-gy, 64%) + 14%), rgba(233, 162, 75, .13), rgba(233, 162, 75, 0) 70%); }
/* o facho: uma cunha de luz que nasce na boca do presente e varre a coluna enquanto os itens acendem (o JS gira) */
#protagonista .pt-beam { position: absolute; z-index: 2; left: var(--pt-bx, 60%); top: var(--pt-by, 60%); width: 0; height: 0; pointer-events: none; }
#protagonista .pt-beam__ray { position: absolute; left: calc(var(--pt-bw, 300px) / -2); bottom: 0; width: var(--pt-bw, 300px); height: var(--pt-bh, 500px); opacity: 0; transform-origin: 50% 100%; mix-blend-mode: screen;
  clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0);
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 236, 190, .62), rgba(247, 196, 110, .22) 45%, rgba(233, 162, 75, 0) 100%); }

/* ---- o fio deitado no chão (duas metades; caixa = palco) ---- */
#protagonista .pt-floorg { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
/* fio todo apagado (marcado pelo JS): os circuitos do pisca-pisca param */
#protagonista .pt-idle .gl__ph { animation-play-state: paused; }

/* ---- as duas faixas ---- */
#protagonista .pt-wrap { position: relative; z-index: 3; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding-top: calc(var(--top-safe) + clamp(10px, 2.4vh, 36px)); padding-bottom: calc(var(--pt-floor) - var(--pt-sink));
  container-type: inline-size; }

/* cabeçalho: o título pelo token do núcleo (.ch-title: --title-fs, ~60 px no 1440, ~74 no 1920); cada frase é um
   bloco e quebra em 2 linhas equilibradas. A linha fina fica fora do fluxo (logo abaixo do título): aparece com a 2ª
   frase e sai quando as colunas chegam (uma ideia por quadro) — no reduzido ela volta ao fluxo. */
#protagonista .pt-head { grid-row: 1; justify-self: start; width: 100%; transform-origin: 0 0; }
#protagonista .pt-headin { position: relative; transform-origin: 0 0; }
#protagonista .pt-title { --title-em: 8; letter-spacing: .02em; padding-top: .12em; max-width: none; }
#protagonista .pt-t1, #protagonista .pt-t2 { display: block; text-wrap: balance; }
#protagonista .pt-t1 { color: var(--cream); }
#protagonista .pt-t2 { color: var(--gold); }
#protagonista .pt-title .fr { font-size: 1.12em; color: var(--gold-2); }
#protagonista .pt-ledebox { position: absolute; left: 0; top: 100%; padding-top: clamp(12px, 2vh, 26px); }
#protagonista .pt-lede { max-width: 60ch; font-size: calc((clamp(16px, .42vw + 11px, 21px)) * var(--ts, 1)); line-height: 1.5; color: var(--text-2); }
.reduced #protagonista .pt-ledebox { position: static; }
/* no reduzido a linha fina fica no fluxo (só o estado final existe): presentes menores para caber a tampa aberta */
.reduced #protagonista .pt-stage { --pt-gift: clamp(70px, min(9cqi, 12vh), 250px); }
/* faíscas perto do título (piscam devagar: ≤ 0,3 Hz) */
#protagonista .pt-spark { position: absolute; pointer-events: none; animation: twinkle 3.6s ease-in-out infinite; }
#protagonista .pt-spark--1 { --size: calc(20px * var(--ts, 1)); right: 6%; top: -4%; }
#protagonista .pt-spark--2 { --size: calc(14px * var(--ts, 1)); left: 38%; top: -6%; animation-delay: -1.4s; }
#protagonista .pt-spark--3 { --size: calc(16px * var(--ts, 1)); left: calc(-1.2em); top: 30%; animation-delay: -2.5s; }
.reduced #protagonista .pt-spark { animation: none; }

/* ---- as colunas ---- */
#protagonista .pt-cols { grid-row: 2; align-self: stretch; min-height: 0; margin-top: clamp(14px, 3vh, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 2.4cqi; align-items: stretch; }
#protagonista .pt-col { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 1.1cqi; row-gap: clamp(8px, 1.4vh, 20px); align-items: end; min-width: 0; min-height: 0; }
/* o título da coluna em cima de tudo; embaixo, o presente (pousado no pé) e a lista com o fio */
#protagonista .pt-gslot { grid-column: 1; grid-row: 2; align-self: end; position: relative; }
#protagonista .pt-gdrop, #protagonista .pt-gdim, #protagonista .pt-gtone { position: relative; }
/* a poça de luz no chão sob cada presente (já na penumbra da 1ª parada): quente no protagonista, fria no comum */
#protagonista .pt-gslot::before { content: ''; position: absolute; left: -24%; right: -24%; bottom: -12%; height: 36%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .36), rgba(233, 162, 75, .1) 60%, rgba(233, 162, 75, 0)); }
#protagonista .pt-col--common .pt-gslot::before { background: radial-gradient(closest-side, rgba(225, 232, 236, .22), rgba(225, 232, 236, .06) 60%, rgba(225, 232, 236, 0)); }
#protagonista .pt-gift { --size: var(--pt-gift); display: block; }
#protagonista .pt-col--hero .pt-gift { --gift-ry: -22deg; }
#protagonista .pt-col--common .pt-gift { --gift-ry: -34deg; --size: calc(var(--pt-gift) * .84); } /* o comum é uma caixa menor */

#protagonista .pt-colh { grid-column: 1 / -1; grid-row: 1; align-self: end; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  font-size: max(calc(15px * var(--ts, 1)), min(calc(1.9cqi * var(--ts, 1)), 2.1cqi)); line-height: 1.14; padding-top: .12em; text-wrap: balance; }
#protagonista .pt-col--common .pt-colh { color: var(--cream); }
#protagonista .pt-col--hero .pt-colh { color: var(--gold-2); }

#protagonista .pt-listwrap { grid-column: 2; grid-row: 2; align-self: end; position: relative; display: grid; grid-template-columns: var(--pt-lane) minmax(0, 1fr); column-gap: 2.3cqi;
  height: min(100%, var(--pt-listh)); }
#protagonista .pt-lane { position: relative; grid-column: 1; height: 100%; }
#protagonista .pt-list { grid-column: 2; display: grid; grid-auto-rows: minmax(0, 1fr); align-items: center; height: 100%; }
#protagonista .pt-item { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.16;
  font-size: max(calc(15px * var(--ts, 1)), min(calc(1.72cqi * var(--ts, 1)), 1.92cqi)); padding-top: .12em; text-wrap: balance; }
#protagonista .pt-item span { display: inline-block; }
/* o comum termina em cinza claro legível (≈ 7:1 no pinho); o JS vai do creme aceso até ele */
#protagonista .pt-col--common .pt-item { color: #b7c1c8; }
#protagonista .pt-col--hero .pt-item { color: var(--gold-2); }

/* o fio entre as duas colunas */
#protagonista .pt-divider { position: relative; align-self: stretch; width: 1.9cqi; display: grid; place-items: center; }
#protagonista .pt-divider__line { position: absolute; left: 50%; top: 4%; bottom: 0; width: 1.5px; margin-left: -.75px; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(247, 201, 120, 0), rgba(247, 201, 120, .55) 18%, rgba(247, 201, 120, .55) 80%, rgba(247, 201, 120, 0)); }
#protagonista .pt-divider__spark { --size: clamp(16px, 1.7cqi, 34px); position: relative; }

/* ---- telas baixas (1280 × 720) ---- */
@media (max-height: 760px) {
  #protagonista .pt-stage { --pt-floor: clamp(120px, 22vh, 190px); --pt-sink: clamp(36px, 8vh, 64px); }
  #protagonista .pt-cols { margin-top: 10px; }
}

/* ---- em pé (tablet 1024 × 1366): as duas colunas empilham (o comum em cima, o fio do meio vira horizontal, o
   protagonista embaixo), cada uma com o presente à esquerda e a lista em largura boa ---- */
@media (orientation: portrait) {
  #protagonista .pt-star { --size: min(18vmin, 220px); }
  #protagonista .pt-stage { --pt-floor: clamp(180px, 16vh, 300px); --pt-sink: clamp(40px, 4vh, 80px); --pt-listh: clamp(200px, 21vh, 340px); --pt-gift: clamp(100px, 16vw, 200px); --pt-lane: clamp(52px, 6vw, 80px); }
  #protagonista .pt-lede { font-size: calc((clamp(17px, 1.9vw, 24px)) * var(--ts, 1)); max-width: 52ch; }
  #protagonista .pt-cols { align-self: end; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: clamp(14px, 1.6vh, 28px); }
  #protagonista .pt-col { grid-template-rows: auto auto; }
  #protagonista .pt-listwrap { height: var(--pt-listh); }
  #protagonista .pt-divider { width: 100%; height: clamp(18px, 1.8vh, 30px); }
  #protagonista .pt-divider__line { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1.5px; margin: -.75px 0 0;
    background: linear-gradient(90deg, rgba(247, 201, 120, 0), rgba(247, 201, 120, .55) 14%, rgba(247, 201, 120, .55) 86%, rgba(247, 201, 120, 0)); }
  #protagonista .pt-colh { font-size: calc((clamp(17px, 2.1vw, 26px)) * var(--ts, 1)); }
  #protagonista .pt-item { font-size: calc((clamp(16px, 2.1vw, 26px)) * var(--ts, 1)); }
}