/* 06 · brasil — "Floripa recebe o Brasil". A descida orbital (f-orbita) pousa em Florianópolis e a
   câmera recua até o mapa do Brasil: MG, SP, PR e RS acendem e mandam linhas de luz para a ilha.
   Mapa vetorial traçado da lâmina 8 (um caminho por estado). Tudo sob #brasil. */
#brasil .br-stage { background: #07030b; }

/* ---------- 1 · a descida (reserva espacial enquanto o filme não chega) ---------- */
#brasil .br-space {
  position: absolute; inset: 0; overflow: hidden; transform-origin: 60% 60%; will-change: transform;
  background:
    radial-gradient(120% 80% at 18% 8%, rgba(142, 68, 166, .22), transparent 60%),
    radial-gradient(140% 100% at 70% 120%, #1a0a26 0%, #0c0513 55%, #040207 100%);
}
#brasil .br-stars { position: absolute; inset: -10%; opacity: .9;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 38% 7%, rgba(255, 255, 255, .8) 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 71% 23%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 88% 61%, rgba(255, 240, 214, .8) 60%, transparent 100%),
    radial-gradient(1px 1px at 53% 44%, rgba(255, 255, 255, .7) 60%, transparent 100%),
    radial-gradient(1.3px 1.3px at 23% 77%, rgba(220, 210, 255, .9) 60%, transparent 100%),
    radial-gradient(1px 1px at 64% 86%, rgba(255, 255, 255, .6) 60%, transparent 100%);
  background-size: 290px 230px; }
#brasil .br-stars--far { opacity: .55; background-size: 170px 140px; transform: rotate(17deg); }
/* a Terra: limbo inclinado no alto, lado noturno, atmosfera violeta */
#brasil .br-earth { position: absolute; left: -62%; width: 224%; top: 21%; aspect-ratio: 1; border-radius: 50%; rotate: -7deg;
  background:
    radial-gradient(50% 50% at 50% 50%, #0a0611 0%, #0b0714 86%, #1b1236 97%, #3b2a6e 99.4%, #8f7ad8 100%);
  box-shadow: 0 -2px 0 0 rgba(190, 170, 255, .45), 0 -10px 46px 4px rgba(125, 90, 220, .42), 0 -34px 150px 36px rgba(90, 50, 170, .3); }
/* a primeira luz do dia correndo pelo limbo */
#brasil .br-dawn { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  background:
    radial-gradient(22% 9% at 16% 30%, rgba(255, 244, 214, .95) 0%, rgba(255, 214, 107, .55) 28%, rgba(244, 178, 35, 0) 70%),
    radial-gradient(52% 16% at 26% 29%, rgba(244, 178, 35, .32) 0%, rgba(142, 68, 166, .22) 45%, transparent 75%); }
/* luzes da costa (canvas; o JS projeta o litoral do mapa com a câmera da descida) */
#brasil .br-lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#brasil .br-haze { position: absolute; inset: -20%; opacity: 0; pointer-events: none;
  background:
    radial-gradient(40% 30% at 30% 40%, rgba(235, 225, 255, .75), transparent 70%),
    radial-gradient(46% 34% at 72% 62%, rgba(214, 200, 240, .7), transparent 70%),
    radial-gradient(30% 22% at 55% 30%, rgba(255, 240, 214, .5), transparent 70%); filter: blur(10px); }
#brasil.br-has-film :is(.br-space, .br-lights, .br-haze), #brasil.br-has-poster :is(.br-space, .br-lights, .br-haze) { visibility: hidden; }

#brasil .br-film { background: transparent; opacity: 0; transition: opacity .6s ease; }
#brasil.br-has-film .br-film, #brasil.br-has-poster .br-film { opacity: 1; }
#brasil .br-scrim { background: linear-gradient(90deg, rgba(7, 3, 11, .88) 0%, rgba(7, 3, 11, .66) 32%, rgba(7, 3, 11, .3) 58%, rgba(7, 3, 11, 0) 80%); }

/* ---------- 2 · o fundo escuro do mapa ---------- */
#brasil .br-night { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(46% 62% at 72% 58%, rgba(74, 31, 96, .5) 0%, rgba(40, 5, 50, .22) 55%, transparent 80%),
    radial-gradient(60% 50% at 10% 100%, rgba(244, 178, 35, .05), transparent 70%),
    #0b0510; }
/* retícula de grafismo de TV, dissolvendo em volta do mapa */
#brasil .br-night::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(245, 238, 224, .05) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(245, 238, 224, .05) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(40% 58% at 72% 56%, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 100%); mask-image: radial-gradient(40% 58% at 72% 56%, #000 0%, rgba(0, 0, 0, .5) 55%, transparent 100%); }
@media (max-aspect-ratio: 5/6) { #brasil .br-night::after { -webkit-mask-image: radial-gradient(60% 34% at 50% 70%, #000 0%, transparent 100%); mask-image: radial-gradient(60% 34% at 50% 70%, #000 0%, transparent 100%); } }

#brasil .br-wrap { position: relative; z-index: 3; height: 100%; display: grid; align-content: center;
  padding-top: calc(var(--hud-h) + clamp(12px, 2.4vh, 28px)); padding-bottom: clamp(20px, 4vh, 44px); }
#brasil .br-cam { position: absolute; left: var(--gutter); top: calc(var(--hud-h) + 26px); }
#brasil .br-cam { display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; }
#brasil .br-cam > i { grid-area: 1 / 1; }
#brasil .br-cam__a, #brasil .br-cam__b { grid-area: 1 / 2; white-space: nowrap; }
#brasil .br-cam__a { opacity: 0; visibility: hidden; }
#brasil .br-lay { align-items: center; }

/* ---------- coluna de leitura ---------- */
#brasil .br-copy { position: relative; z-index: 2; display: grid; gap: clamp(16px, 3vh, 34px); align-content: center; }
#brasil .br-head { display: grid; gap: 10px; justify-items: start; transform-origin: 0 0; }
#brasil .br-title { font-size: calc((clamp(40px, 4.3vw, 76px)) * var(--ts, 1)); text-wrap: balance; max-width: 14ch; text-shadow: 0 2px 30px rgba(7, 3, 11, .5); }
/* "Floripa recebe" não quebra: com o texto 10% maior, a partir de ~1700 px o título caía em três linhas de uma
   palavra só (FLORIPA / RECEBE / O BRASIL). Na coluna de 5 ele passa até ~60 px para o vão da coluna do mapa,
   onde o desenho do Brasil ainda não começa (canto noroeste vazio do quadro) */
#brasil .br-nw { white-space: nowrap; }
#brasil .br-hero { display: grid; gap: 6px; }
#brasil .br-n { display: inline-flex; align-items: flex-start; font-size: calc((clamp(104px, min(11.5vw, 21vh), 208px)) * var(--ts, 1)); line-height: .92; text-shadow: 0 0 60px rgba(244, 178, 35, .22); }
#brasil .br-n__u { font-size: .52em; margin: .1em 0 0 .04em; }
#brasil .br-n__l { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: calc((clamp(17px, .7vw + 9px, 25px)) * var(--ts, 1)); line-height: 1.2; color: var(--text-2); max-width: 24ch; }
#brasil .br-n__l b { color: var(--offwhite); font-weight: 800; }

/* barra 100% empilhada, rotulada em cada segmento */
#brasil .br-bar { margin: 0; display: grid; gap: 10px; }
#brasil .br-brace { position: relative; margin-left: 43%; height: 26px; display: grid; justify-items: center; align-content: start; }
#brasil .br-brace span { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(14px, .4vw + 9px, 17px)) * var(--ts, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--honey); line-height: 1; padding: 0 .6em; background: #0b0510; position: relative; z-index: 1; }
#brasil .br-brace i { position: absolute; left: 3px; right: 16px; top: .5em; height: 10px; margin-top: 1px; border: 2px solid var(--honey); border-bottom: 0; transform-origin: 0 50%; }
#brasil .br-bar__reveal { clip-path: inset(0 0 0 0); }
#brasil .br-bar__track { display: flex; gap: 3px; height: clamp(72px, 10vh, 100px); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
#brasil .br-seg { flex: var(--w) 1 0; min-width: 0; display: grid; align-content: center; gap: 3px; padding: 0 clamp(8px, .9vw, 16px) 0 clamp(14px, 1.3vw, 22px); }
#brasil .br-seg b { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(24px, 1.4vw + 8px, 36px)) * var(--ts, 1)); line-height: 1; font-variant-numeric: tabular-nums; }
#brasil .br-seg span { font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(12px, .3vw + 8.5px, 15px)) * var(--ts, 1)); letter-spacing: .03em; text-transform: uppercase; line-height: 1.12; text-wrap: balance; }
#brasil .br-seg--gf { background: var(--acai); color: var(--offwhite); }
#brasil .br-seg--gf span { color: rgba(245, 238, 224, .82); }
#brasil .br-seg--sc { background: var(--violet); color: #fff; padding-left: clamp(9px, .8vw, 14px); }
#brasil .br-seg--out { background: var(--honey); color: var(--acai-dark); }

/* ---------- o mapa ---------- */
#brasil .br-mapcol { position: relative; z-index: 1; display: grid; justify-items: end; }
#brasil .br-map { position: relative; width: min(100%, calc((100svh - var(--hud-h) - 110px) * var(--ar))); aspect-ratio: var(--ar);
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%); }
#brasil .br-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#brasil .br-land { fill: url(#br-g-land); }
#brasil .br-borders { fill: none; stroke: rgba(245, 238, 224, .12); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#brasil .br-coast { fill: none; stroke: rgba(245, 238, 224, .3); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#brasil .br-st { fill: var(--violet); stroke: rgba(245, 238, 224, .55); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#brasil .br-sc { fill: var(--honey); stroke: #ffd66b; stroke-width: 2; vector-effect: non-scaling-stroke; }
#brasil .br-sc-glow { fill: none; stroke: var(--honey); stroke-width: 16; stroke-linejoin: round; opacity: .28; filter: blur(7px); }
#brasil .br-arcs { filter: drop-shadow(0 0 6px rgba(244, 178, 35, .7)); }
#brasil .br-arc { fill: none; stroke-width: 8; stroke-linecap: round; }
#brasil .br-comet { opacity: 0; }
#brasil .br-ping { fill: none; stroke: var(--honey); stroke-width: 3; opacity: 0; }
#brasil .br-ring { fill: none; stroke: var(--honey); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
#brasil .br-dot { fill: #fff8e6; stroke: var(--honey); stroke-width: 5; }
#brasil.br-live .br-ring { animation: br-ring 2.2s var(--ease-out) infinite; }
#brasil.br-live .br-sc-glow { animation: br-glow 2.2s ease-in-out infinite; }
@keyframes br-ring { 0% { transform: scale(.5); opacity: .95; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes br-glow { 0%, 100% { opacity: .18; } 50% { opacity: .62; } }

#brasil .br-labels { position: absolute; inset: 0; pointer-events: none; }
#brasil .br-sig { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); translate: -50% -50%;
  font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(17px, 1.5vw, 28px)) * var(--ts, 1)); line-height: 1; letter-spacing: .02em; padding-top: .06em;
  color: var(--offwhite); text-shadow: 0 1px 2px rgba(14, 7, 19, .7), 0 0 16px rgba(14, 7, 19, .5); }
#brasil .br-sig[data-st="SC"] { font-size: calc((clamp(12px, .9vw, 17px)) * var(--ts, 1)); color: var(--acai-dark); text-shadow: none; translate: -62% -46%; }
#brasil .br-fln { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); translate: 12px -50%; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--f-display); font-weight: 800; font-size: calc((clamp(13px, .45vw + 8px, 17px)) * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--honey); }
#brasil .br-fln i { width: clamp(22px, 2.4vw, 40px); height: 2px; background: var(--honey); }
#brasil .br-key { position: absolute; right: 0; bottom: 0; display: grid; gap: 7px; font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(11px, .25vw + 8px, 14px)) * var(--ts, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
#brasil .br-key li { display: flex; align-items: center; gap: 10px; }
#brasil .br-key i { width: 14px; height: 14px; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
#brasil .br-key__st { background: var(--violet); }
#brasil .br-key__sc { background: var(--honey); }

#brasil .br-lt { position: absolute; right: var(--gutter); bottom: clamp(56px, 9vh, 96px); z-index: 2; }

/* ---------- tablet em pé e janelas altas: mapa embaixo da leitura ---------- */
@media (max-aspect-ratio: 5/6) {
  #brasil .br-lay > * { grid-column: 1 / -1; }
  #brasil .br-copy { gap: clamp(14px, 2vh, 26px); }
  #brasil .br-head { justify-self: start; }
  #brasil .br-title { max-width: 15ch; }
  #brasil .br-mapcol { justify-items: center; }
  #brasil .br-wrap { padding-top: calc(var(--hud-h) + 70px); }
  #brasil .br-map { width: min(100%, calc((100svh - var(--hud-h) - 720px) * var(--ar)), 760px); }
  #brasil .br-n { font-size: calc((clamp(96px, 13vw, 170px)) * var(--ts, 1)); }
}
@media (max-width: 980px) and (min-aspect-ratio: 5/6) {
  #brasil .br-lay { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #brasil .br-lay > .br-copy { grid-column: 1 / 7; }
  #brasil .br-lay > .br-mapcol { grid-column: 7 / 13; }
}

/* sem JS / movimento reduzido: estado final (fundo escuro, mapa completo) */
#brasil .br-lt { opacity: 0; visibility: hidden; }
.reduced #brasil .br-ring, .reduced #brasil .br-sc-glow { animation: none; }
.reduced #brasil .br-ring { opacity: 0; }