/* 10 · Comunicação antes, durante e depois — "a rota do trenó de luz". Tudo sob #comunicacao.
   Palco fixado. Camadas: o céu (s-lua) › véu › estrelinhas › o fio do arco (NL.garland, caixa = palco) › marcos ›
   rastro de faíscas › trenó › polaroide › texto (.cm-wrap). A .cm-wrap é uma grade de linhas: cabeçalho / o céu (a
   sobra da tela vai para ele: é onde o arco passa) / os quatro blocos / o fecho. O arco, os marcos e o trenó são
   posicionados pelo JS a partir das medidas do layout (refreshInit). */
#comunicacao .cm-stage { isolation: isolate; background: #040b10;
  --cm-sw: clamp(150px, min(18vw, 29vh), 470px);          /* largura do trenó (fora da coluna): 259 no 1440, 313 no 1920 */
  /* o presentinho e o ícone moram na coluna: medidos pela coluna (cqi da .cm-wrap), com teto pela altura */
  --cm-gift: clamp(34px, min(4cqi, 5.6vh), 90px);          /* .gift --size */
  --cm-icon: clamp(38px, min(4.4cqi, 6vh), 96px); }

/* ---- o céu ---- */
#comunicacao .cm-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform-origin: var(--cm-moon-x, 70%) var(--cm-moon-y, 29%); }
#comunicacao .cm-sky__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--cm-opx, 50%) 50%; filter: saturate(.78) brightness(.96); }
/* a caixa da foto em "cover" (medida pelo JS): o que está nela segue a lua e a ponte da foto */
#comunicacao .cm-imgbox { position: absolute; left: var(--cm-ix, 0px); top: var(--cm-iy, 0px); width: var(--cm-iw, 100%); height: var(--cm-ih, 100%); pointer-events: none; }
/* halo quente em volta da lua */
#comunicacao .cm-moonglow { position: absolute; left: 69.8%; top: 29.3%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 238, 200, .36), rgba(255, 214, 150, .17) 34%, rgba(247, 190, 110, .06) 62%, rgba(247, 190, 110, 0)); }
/* brilhos nas luzes da ponte (no horizonte da 1ª parada): dois grupos piscando */
#comunicacao .cm-glints { position: absolute; inset: 0; animation: cm-grp 3.4s ease-in-out infinite; }
#comunicacao .cm-glints--1 { animation-duration: 4.1s; animation-delay: -1.7s; }
#comunicacao .cm-glint { position: absolute; left: var(--gx); top: var(--gy); translate: -50% -50%; --size: calc(26px * var(--gs, 1) * var(--ts, 1)); color: #dcfff0; filter: drop-shadow(0 0 5px rgba(70, 227, 164, .95)); }
@keyframes cm-grp { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.reduced #comunicacao .cm-glints { animation: none; }
#comunicacao .cm-sky.has-missing { background: radial-gradient(3vmin 3vmin at 70% 29%, #fff8e6, rgba(255, 248, 230, .2) 60%, transparent 100%), radial-gradient(120% 80% at 60% 20%, #10263a, #050d12 70%); }
/* véu: tira o azul do céu para o verde-noite da peça, escurece o alto à esquerda (título); o de baixo (blocos) é à
   parte: leve na 1ª parada (a ponte acesa no horizonte), fecha quando os blocos chegam */
#comunicacao .cm-veil-b { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 9, 6, .95) 0%, rgba(3, 9, 6, .9) 30%, rgba(4, 11, 8, .62) 44%, rgba(4, 11, 8, 0) 58%); }
#comunicacao .cm-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(3, 9, 6, .34) 0%, rgba(3, 9, 6, 0) 14%),
    linear-gradient(180deg, rgba(3, 9, 6, .78) 0%, rgba(4, 11, 8, .3) 20%, rgba(4, 11, 8, 0) 34%),
    radial-gradient(70% 60% at 0% 12%, rgba(3, 9, 6, .72), rgba(3, 9, 6, 0) 70%),
    linear-gradient(rgba(8, 30, 20, .28), rgba(8, 30, 20, .28)); }
#comunicacao .cm-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* estrelinhas em três grupos (uma animação de opacidade por grupo, num invólucro HTML) */
#comunicacao .cm-stars__g { position: absolute; inset: 0; animation: cm-grp 4.2s ease-in-out infinite; }
#comunicacao .cm-stars__g--1 { animation-duration: 5.1s; animation-delay: -1.6s; }
#comunicacao .cm-stars__g--2 { animation-duration: 3.7s; animation-delay: -2.9s; }
#comunicacao .cm-star { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; --size: calc(15px * var(--s, 1) * var(--ts, 1)); opacity: .85; }
.reduced #comunicacao .cm-stars__g { animation: none; }

/* ---- o arco (linha do tempo) e os marcos ---- */
#comunicacao .cm-arc { position: absolute; inset: 0; z-index: 2; }
#comunicacao .cm-marks { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; padding: 0; }
/* posição (px do palco) dada pelo JS na montagem do fio: left/top (o GSAP anima só o transform da entrada) */
#comunicacao .cm-mark { position: absolute; left: var(--x, 0px); top: var(--y, 0px); display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; line-height: 1; padding-top: .14em;
  font-size: calc((clamp(13px, .5vw + 8px, 20px)) * var(--ts, 1)); color: var(--gold-2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 14px rgba(3, 9, 6, .9); }
#comunicacao .cm-mark--d { font-size: calc((clamp(18px, .9vw + 8px, 32px)) * var(--ts, 1)); letter-spacing: .06em; color: var(--cream); }
#comunicacao .cm-mark__star { --size: .8em; flex: none; margin-top: -.14em; }

/* ---- o trenó de luz e o rastro ---- */
#comunicacao .cm-trail { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* o rastro pisca em três circuitos (um invólucro por circuito, animação de opacidade): 3 animações, não 22 */
#comunicacao .cm-trg { position: absolute; inset: 0; animation: cm-grp var(--tw, 1.6s) ease-in-out var(--dl, 0s) infinite; }
.reduced #comunicacao .cm-trg, #comunicacao .cm-trail.is-idle .cm-trg { animation: none; }
/* o que não aparece não anima (o JS marca pela timeline): pontos do trenó que já saiu, brilhos da ponte sob o véu */
#comunicacao .cm-sleigh.is-gone .cm-sleigh__ph, #comunicacao .cm-stage.cm-late .cm-glints { animation-play-state: paused; }
#comunicacao .cm-stage.cm-late .cm-glints { visibility: hidden; }
#comunicacao .cm-tr { position: absolute; left: 0; top: 0; width: var(--s, 14px); height: var(--s, 14px); max-width: none; overflow: visible; color: var(--gold-2); opacity: 0; filter: drop-shadow(0 0 4px rgba(247, 201, 120, .9)); }
#comunicacao .cm-sleigh { position: absolute; left: 0; top: 0; z-index: 4; width: var(--cm-sw); aspect-ratio: 360 / 124; pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
#comunicacao .cm-sleigh__in { position: absolute; inset: 0; }
#comunicacao .cm-sleigh__in svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
/* halo: a luz quente em volta do trenó */
#comunicacao .cm-sleigh__halo { position: absolute; left: -16%; right: -16%; top: -70%; bottom: -70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 150, .3), rgba(247, 190, 100, .11) 55%, rgba(247, 190, 100, 0)); }
/* brilho: a silhueta desfocada (a luz em volta) */
#comunicacao .cm-sleigh__glow { color: #ffd88a; opacity: .75; filter: blur(calc(var(--cm-sw) * .026)); }
/* corpo: a silhueta dourada, quase opaca (é luz, não metal) */
#comunicacao .cm-sleigh__body { color: #f4b75e; opacity: .94; filter: drop-shadow(0 0 calc(var(--cm-sw) * .022) rgba(255, 214, 140, .95)); }
/* pontos de luz: contorno tracejado de pontos (herdado pelo <use>) em duas fases — a 2ª deslocada meio passo — que
   se alternam por opacidade num invólucro HTML (composto na GPU; animar o stroke-dashoffset repintava o trenó inteiro,
   com o desfoque, a cada quadro: ~12 pontos de thread a mais em repouso, CPU ×4) */
#comunicacao .cm-sleigh__ph { position: absolute; inset: 0; animation: cm-alt 1.3s ease-in-out infinite; }
#comunicacao .cm-sleigh__ph--b { animation-delay: -.65s; }
@keyframes cm-alt { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }
#comunicacao .cm-sleigh__dots { color: transparent; stroke: #fffaf0; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 7.5; fill: none;
  filter: drop-shadow(0 0 2px rgba(255, 244, 210, 1)) drop-shadow(0 0 5px rgba(255, 214, 140, .8)); }
#comunicacao .cm-sleigh__ph--b .cm-sleigh__dots { stroke-dashoffset: -3.75; }
.reduced #comunicacao .cm-sleigh__ph { animation: none; }
.reduced #comunicacao .cm-sleigh__ph--b { opacity: 0; }

/* ---- a polaroide da banda (foto real), presa por um alfinete dourado no canto de cima ---- */
/* presa na borda da TELA (não da coluna): no 1920 e no projetor a coluna de texto fica no meio e a lua (70% da foto)
   cairia atrás da polaroide */
#comunicacao .cm-pol { position: absolute; z-index: 5; margin: 0; top: calc(var(--top-safe) + clamp(14px, 3vh, 40px)); right: var(--gutter);
  width: clamp(150px, min(10.6vw, 19vh), 300px); }
/* crédito na letra mínima do guia (o núcleo põe 11 px × ts na polaroide) */
#comunicacao .cm-pol__card > .credit { white-space: nowrap; letter-spacing: .04em; font-size: var(--credit-fs, calc(12px * var(--ts, 1))); }
#comunicacao .cm-pol__swing { position: relative; transform-origin: 50% 0; }
#comunicacao .cm-pol__card { --rot: 4deg; }
#comunicacao .cm-pol__card > img { background: #3a2a24; }
#comunicacao .cm-pol__pin { position: absolute; z-index: 2; left: 50%; top: calc(var(--cm-sw) * -.02); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff3cf, #f0b75c 40%, #9c5f1f 90%); box-shadow: 0 2px 4px rgba(0, 0, 0, .55); }

/* ---- o texto ---- */
#comunicacao .cm-wrap { position: relative; z-index: 6; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding-top: calc(var(--top-safe) + clamp(10px, 2.6vh, 34px)); padding-bottom: clamp(40px, 6vh, 80px); container-type: inline-size; }
/* título pelo token do núcleo (.ch-title: ~60 px no 1440, ~74 no 1920); cada metade é um bloco e quebra se precisar */
#comunicacao .cm-head { position: relative; grid-row: 1; justify-self: start; width: fit-content; max-width: 100%; }
#comunicacao .cm-title { --title-em: 12.4; padding-top: .12em; max-width: none; }
#comunicacao .cm-t1, #comunicacao .cm-t2 { display: block; text-wrap: balance; }
#comunicacao .cm-t1 { color: var(--cream); }
/* a estrela do deck, pequena, logo depois da 1ª linha do título (fora do texto), girando devagar */
#comunicacao .cm-hstar { position: absolute; left: var(--cm-star-x, 100%); top: var(--cm-star-y, 0px); margin-left: calc(var(--title-fs) * .22); --size: calc(var(--title-fs) * 1.02); --star8-c: #b3141b; --star8-core: #07120d;
  pointer-events: none; animation: spin 90s linear infinite; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); }
.reduced #comunicacao .cm-hstar { animation: none; }
/* a frase em caixa alta: 18 px no 1440 (16,5 × ts), em 3 linhas (33 em); estreita o bastante para o morro do fio
   subir até a lua à direita dela */
#comunicacao .cm-kicker { margin-top: clamp(10px, 1.8vh, 24px); max-width: 33em; font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; line-height: 1.5;
  font-size: calc(16.5px * var(--ts, 1)); color: var(--text-2); text-wrap: pretty; }

#comunicacao .cm-blocks { grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.2cqi; margin: 0; padding: 0; }
#comunicacao .cm-block { display: grid; align-content: start; row-gap: clamp(6px, 1.1vh, 14px); min-width: 0; }
/* a vaga: o presente (pousa aqui) e o ícone que salta dele */
#comunicacao .cm-slot { position: relative; display: flex; align-items: flex-end; gap: clamp(8px, 1cqi, 18px); height: calc(var(--cm-gift) * 1.34); }
#comunicacao .cm-fall { position: relative; flex: none; will-change: transform; }
/* a poça de luz onde o presente vai pousar: espera acesa de leve e brilha quando ele chega */
#comunicacao .cm-pad { position: absolute; left: calc(var(--cm-gift) * -.34); bottom: calc(var(--cm-gift) * -.2); width: calc(var(--cm-gift) * 2.04); height: calc(var(--cm-gift) * .5); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .5), rgba(233, 162, 75, .16) 55%, rgba(233, 162, 75, 0)); opacity: .45; }
#comunicacao .cm-gift { --size: var(--cm-gift); display: block; --gift-ry: -24deg; }
#comunicacao .cm-block:nth-child(2) .cm-gift { --gift-ry: -32deg; }
#comunicacao .cm-block:nth-child(3) .cm-gift { --gift-ry: -20deg; }
#comunicacao .cm-icon-hop, #comunicacao .cm-icon-rise { position: relative; flex: none; }
#comunicacao .cm-icon-hop { margin-bottom: calc(var(--cm-gift) * .1); }
#comunicacao .cm-icon { display: block; width: var(--cm-icon); height: var(--cm-icon); max-width: none; overflow: visible; color: var(--gold-2); filter: drop-shadow(0 0 6px rgba(247, 201, 120, .45)); }
#comunicacao .cm-h { color: var(--gold-2); font-size: max(calc(15px * var(--ts, 1)), min(calc(1.52cqi * var(--ts, 1)), 1.7cqi)); white-space: nowrap; }
#comunicacao .cm-p { font-size: max(calc(14px * var(--ts, 1)), min(calc(1.3cqi * var(--ts, 1)), 1.46cqi)); line-height: 1.46; color: var(--text-2); max-width: none; }

#comunicacao .cm-foot { position: relative; grid-row: 4; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3cqi; align-items: end; margin-top: clamp(14px, 2.6vh, 34px);
  padding-top: clamp(12px, 1.8vh, 22px); }
#comunicacao .cm-foot__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(233, 162, 75, .5), rgba(233, 162, 75, .3) 60%, rgba(233, 162, 75, 0)); transform-origin: 0 50%; }
#comunicacao .cm-close { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.22; padding-top: .12em;
  font-size: max(calc(15px * var(--ts, 1)), min(calc(1.46cqi * var(--ts, 1)), 1.64cqi)); color: var(--gold-2); text-wrap: balance; }
#comunicacao .cm-close .fr { color: var(--cream); font-size: 1.12em; }
#comunicacao .cm-note { max-width: none; font-size: var(--note-fs, calc(13px * var(--ts, 1))); }
#comunicacao .cm-credit { position: absolute; z-index: 7; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(8px, 1.4vh, 16px); }

/* ---- telas baixas (1280 × 720) ---- */
@media (max-height: 760px) {
  #comunicacao .cm-stage { --cm-sw: clamp(150px, min(16vw, 25vh), 300px); }
  /* a frase em 2 linhas: o trenó do começo do fio passa livre embaixo dela */
  #comunicacao .cm-kicker { max-width: 52em; margin-top: 8px; }
  #comunicacao .cm-block { row-gap: 5px; }
  #comunicacao .cm-p { line-height: 1.4; }
  #comunicacao .cm-foot { margin-top: 10px; padding-top: 9px; }
}

/* ---- em pé (tablet 1024 × 1366): título em largura cheia; blocos em 2 × 2; o céu fica mais alto ---- */
@media (orientation: portrait) {
  #comunicacao .cm-stage { --cm-sw: clamp(150px, 24vw, 280px); --cm-gift: clamp(40px, 5.7cqi, 64px); --cm-icon: clamp(44px, 6.1cqi, 70px); }
  /* a lua mais para dentro do quadro (a foto é larga): o "cover" corta mais a esquerda */
  #comunicacao .cm-sky { --cm-opx: 64%; }
  #comunicacao .cm-kicker { max-width: 44ch; font-size: max(calc(16.5px * var(--ts, 1)), min(calc(1.8cqi * var(--ts, 1)), 2cqi)); }
  #comunicacao .cm-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5cqi; row-gap: clamp(22px, 2.6vh, 40px); }
  #comunicacao .cm-h { font-size: min(calc(2.4cqi * var(--ts, 1)), 2.7cqi); }
  #comunicacao .cm-p { font-size: min(calc(2cqi * var(--ts, 1)), 2.25cqi); }
  #comunicacao .cm-foot { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  #comunicacao .cm-close { font-size: min(calc(2.2cqi * var(--ts, 1)), 2.5cqi); }
  #comunicacao .cm-pol { width: clamp(140px, 19vw, 230px); }
}