/* 08 · Esporte que movimenta a cidade — fim de manhã. Abre na rua (s-cidade, o calçadão da Beira-Mar), que
   encolhe até o ponto da arena num mapa de satélite real, em cor de manhã. A bola cai na arena e ondas
   concêntricas acendem a cidade: Turismo esportivo, depois Cadeia do evento; por fim o mapa se abre para
   Santa Catarina (Visibilidade). Camadas de mapa fora da grade (sangram); o texto na coluna da esquerda,
   com véu; a legenda cresce (o estado final tem os três grupos). Posições de mapa vêm do JS (transform). */
#impacto .mc-stage { background: radial-gradient(120% 90% at 62% 54%, #10242f 0%, #081219 64%, #050b10 100%); }
#impacto .mc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* mapa: níveis Esri empilhados (o JS escala e posiciona) */
#impacto .mc-map { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
#impacto .mc-map img { position: absolute; left: 0; top: 0; width: 2880px; height: 1620px; max-width: none; transform-origin: 0 0; opacity: 0; visibility: hidden; will-change: transform, opacity;
  filter: grayscale(var(--gs, .2)) brightness(var(--br, .92)); }
/* tablet: só os níveis na tela ganham camada (o JS liga o will-change deles) */
.is-tablet #impacto .mc-map img { will-change: auto; }
/* o filtro sai de variáveis que o JS interpola: satélite em cor de manhã (o mesmo Esri do 04), que clareia um
   pouco ao se abrir para o estado. Os níveis da cidade (z13–z16) vêm com a baía lisa (site/assets/ch/impacto/
   agua-lisa.py), quase preta: a camada de mar (clarear) só sobe o que é mais escuro que ela — a água vira
   azul-petróleo de mar fundo, a cidade (mais clara) quase não muda. Ela apaga quando o mapa se abre para o
   estado (--sea, do JS): lá o oceano já tem cor e a mata escura ficaria azulada */
#impacto .mc-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #173c48; mix-blend-mode: lighten; opacity: var(--sea, 1); }
/* a luz: sombra leve fora do alcance da onda (manhã, não noite), calor leve dentro */
#impacto .mc-light { position: absolute; inset: 0; z-index: 2; pointer-events: none; --r: 0px; --x: 62%; --y: 54%; --w: 1;
  background:
    radial-gradient(circle at var(--x) var(--y), rgba(242, 151, 109, calc(.14 * var(--w))) 0, rgba(242, 151, 109, calc(.06 * var(--w))) calc(var(--r) * .75), rgba(242, 151, 109, 0) var(--r)),
    radial-gradient(circle at var(--x) var(--y), rgba(6, 14, 20, 0) 0, rgba(6, 14, 20, 0) var(--r), rgba(6, 14, 20, .3) calc(var(--r) + 110px)); }

/* ondas (SVG em px de tela: o JS põe o viewBox no refresh) */
#impacto .mc-waves { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
#impacto .mc-waves circle { fill: none; vector-effect: non-scaling-stroke; transform-box: view-box; will-change: transform, opacity; }
#impacto .mc-ripple { stroke: var(--sun); stroke-width: 2.2; opacity: 0; filter: drop-shadow(0 0 6px rgba(242, 151, 109, .55)); }
#impacto .mc-ripple--soft { stroke: var(--flare); stroke-width: 1.2; }
#impacto .mc-zone { stroke: rgba(255, 200, 138, .9); stroke-width: 1.8; stroke-dasharray: .5 7; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 4px rgba(242, 151, 109, .6)); }

/* marcas no mapa: os pinos dos ícones e os rótulos geográficos */
#impacto .mc-marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#impacto .mc-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, opacity; }
#impacto .mc-pin__in { position: absolute; left: calc(var(--pin) / -2); top: calc(var(--pin) / -2); width: var(--pin); height: var(--pin); display: grid; place-items: center; border-radius: 50%;
  background: rgba(10, 24, 34, .92); color: var(--sand); box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .85), 0 0 0 5px rgba(242, 151, 109, .16), 0 8px 22px rgba(0, 0, 0, .5); will-change: transform; }
#impacto .mc-pin { --pin: clamp(40px, 3.4vw, 54px); }
#impacto .mc-pin svg { width: calc(var(--pin) * .52); height: calc(var(--pin) * .52); max-width: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
#impacto .mc-geo { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
#impacto .mc-geo > span { display: inline-block; transform: translate(-50%, -50%); font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: calc(13px * var(--ts, 1)); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 239, 229, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .75); }
#impacto .mc-geo--big > span { font-size: calc(16px * var(--ts, 1)); font-weight: 800; letter-spacing: .2em; }
#impacto .mc-geo--water > span { font-style: italic; font-weight: 600; letter-spacing: .22em; color: rgba(217, 226, 229, .85); }

/* a bola: cai de perto da câmera até a arena; depois fica ali, pulsando */
#impacto .mc-ballbox { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; pointer-events: none; will-change: transform; }
#impacto .mc-ball { --ball: clamp(30px, 2.4vw, 40px); max-width: none; position: absolute; left: calc(var(--ball) / -2); top: calc(var(--ball) / -2); opacity: 0; will-change: transform, opacity; }
#impacto .mc-shadow { position: absolute; left: -18px; top: -9px; width: 36px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); opacity: 0; will-change: transform, opacity; }
#impacto .mc-ping { position: absolute; left: 0; top: 0; opacity: 0; }
#impacto .mc-ping b { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255, 200, 138, .85); animation: mc-ping 2.4s var(--ease-out) infinite; }
@keyframes mc-ping { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.reduced #impacto .mc-ping b { animation: none; opacity: .5; }
/* a cápsula do lugar é a .tag--sun do núcleo; aqui só a posição ao lado da bola */
#impacto .mc-arena { position: absolute; left: clamp(24px, 2vw, 30px); top: 0; transform: translateY(-50%); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); opacity: 0; }

/* abertura: a foto da rua (encolhe até a arena pelo JS; a origem do encolhimento é o ponto da arena) */
#impacto .mc-photo { position: absolute; inset: 0; z-index: 6; overflow: hidden; background: linear-gradient(180deg, #8fb6c6 0%, #cfdfe3 38%, #9fb7a0 52%, #d9cdb4 60%, #b9ad97 100%); transform-origin: var(--ox, 62%) var(--oy, 54%); will-change: transform, opacity; }
#impacto .mc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; }

#impacto .mc-scrim { z-index: 7; background: linear-gradient(90deg, rgba(6, 14, 20, .9) 0%, rgba(6, 14, 20, .76) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .3), rgba(6, 14, 20, .34) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .44), rgba(6, 14, 20, 0) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .56)); }
#impacto .mc-scrim-t { z-index: 7; }
#impacto .mc-scrim-b { z-index: 7; background: linear-gradient(0deg, rgba(6, 14, 20, .88) 0%, rgba(6, 14, 20, .5) 9%, rgba(6, 14, 20, 0) 22%); }
#impacto .mc-wrap { position: relative; z-index: 8; }
#impacto .mc-lay { height: 100%; align-items: start; padding-top: calc(var(--hud-h) + clamp(18px, 5.5vh, 64px)); padding-bottom: calc(clamp(18px, 3vh, 30px) + 44px); }
#impacto .mc-panel { display: grid; gap: clamp(16px, 2.6vh, 30px); container-type: inline-size; }
#impacto .mc-head { display: grid; gap: 10px; }
#impacto .mc-title { font-size: min(calc((min(8.4cqi, 6.2vh, 52px)) * var(--ts, 1)), 9.2cqi); }
#impacto .mc-cell { display: grid; }
#impacto .mc-cell > * { grid-area: 1 / 1; }
/* movimento reduzido: sem a troca, a frase do slide 6 e a legenda ficam uma embaixo da outra */
.reduced #impacto .mc-cell { gap: clamp(14px, 2.2vh, 22px); }
.reduced #impacto .mc-cell > * { grid-area: auto; }
/* sem pin (o núcleo não fixa a cena no reduzido): no deitado a tela cresce até caber a frase e a legenda */
@media (orientation: landscape) {
  .reduced #impacto .mc-stage { height: auto; min-height: 100vh; min-height: 100svh; }
  .reduced #impacto .mc-wrap, .reduced #impacto .mc-lay { height: auto; }
  .reduced #impacto .mc-lay { padding-bottom: calc(clamp(18px, 3vh, 30px) + 72px); }
}
#impacto .mc-lede { align-self: start; }

/* a legenda: cresce grupo a grupo; o grupo da vez leva o ponto de sol */
#impacto .mc-groups { display: grid; gap: clamp(14px, 2.4vh, 26px); align-content: start; }
#impacto .mc-group { display: grid; gap: clamp(8px, 1.2vh, 12px); }
/* título de grupo = a legenda de cena do núcleo (.lt: ponto de sol + b) */
#impacto .mc-group__h { color: var(--sun); }
#impacto .mc-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
#impacto .mc-item { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-stretch: 108%; font-weight: 700; text-transform: uppercase; font-size: calc((clamp(14px, .45vw + 10px, 18px)) * var(--ts, 1)); letter-spacing: .06em; line-height: 1.18; color: var(--sand); }
/* o chip de ícone é o mesmo do 07 (.eg-ico): tamanho, preenchimento pêssego e anel */
#impacto .mc-ico { display: grid; place-items: center; flex: none; width: clamp(38px, 3vw, 48px); aspect-ratio: 1; border-radius: 50%; background: rgba(242, 151, 109, .14); box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .5); color: var(--sun); }
#impacto .mc-ico svg { width: 58%; height: auto; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
#impacto .mc-vis { display: flex; align-items: flex-start; gap: 12px; max-width: 44ch; font-size: calc((clamp(15px, .4vw + 11px, 18px)) * var(--ts, 1)); line-height: 1.45; color: var(--text); text-wrap: pretty; }
#impacto .mc-vis .mc-ico { margin-top: 2px; }

/* rodapé em flex com wrap-reverse: a nota fica embaixo e, sem espaço na linha, o crédito sobe para a linha de cima */
#impacto .mc-footer { position: absolute; z-index: 8; left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(16px, 3vh, 28px);
  display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: flex-end; gap: 10px 24px; pointer-events: none; }
#impacto .mc-foot { max-width: min(40%, 44ch); }
/* o crédito da foto gerada vai na plaqueta do núcleo (.credit--plate): sem ela, sobre a rua clara, media 4,2:1 */
#impacto .mc-credit { margin-left: auto; display: grid; justify-items: end; text-align: right; }
#impacto .mc-credit > span { grid-area: 1 / 1; align-self: end; transition: opacity .4s; }
#impacto .mc-credit__sat { opacity: 0; }
#impacto.is-map .mc-credit__photo { opacity: 0; }
#impacto.is-map .mc-credit__sat { opacity: 1; }

/* tela baixa deitada (1280 × 720): a legenda inteira mais o rodapé pedem um pouco menos de ar em cima e entre grupos */
@media (orientation: landscape) and (max-height: 780px) {
  #impacto .mc-lay { padding-top: calc(var(--hud-h) + clamp(14px, 2.8vh, 64px)); }
  #impacto .mc-panel { gap: clamp(12px, 2vh, 30px); }
  #impacto .mc-groups { gap: clamp(12px, 1.8vh, 26px); }
}

/* ---------- tablet em pé: mapa em cima, texto embaixo ---------- */
@media (orientation: portrait) {
  #impacto .mc-scrim { background: linear-gradient(180deg, rgba(6, 14, 20, 0) 0%, rgba(6, 14, 20, 0) 30%, rgba(6, 14, 20, .7) 42%, rgba(6, 14, 20, .88) 54%, rgba(6, 14, 20, .94) 100%); }
  #impacto .mc-lay { align-items: end; padding-bottom: calc(clamp(18px, 3vh, 30px) + 96px); } /* rodapé de duas linhas (crédito sobre a nota) */
  #impacto .mc-panel { --span: 1 / -1; }
  #impacto .mc-title { font-size: min(calc((min(5.4cqi, 52px)) * var(--ts, 1)), 5.9cqi); }
  #impacto .mc-foot { flex-basis: 100%; max-width: none; } /* nota na largura toda; o crédito, na linha de cima */
}