/* 04 · Beira-Mar de São José — descida orbital: globo → satélite real → planta ilustrativa.
   Todas as camadas de mapa ficam fora da grade (sangram na tela); o texto fica na coluna da esquerda
   com véu. Posições de mapa vêm do JS (transform), medidas no refresh. */
#satelite .st-stage { background: radial-gradient(120% 90% at 62% 50%, #0d2230 0%, #07121a 60%, #040a0f 100%); }
#satelite .st-globe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 1; }
#satelite .st-sat { position: absolute; inset: 0; z-index: 2; opacity: 0; overflow: hidden; }
#satelite .st-sat img { position: absolute; left: 0; top: 0; width: 2880px; height: 1620px; max-width: none; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; }
/* tablet: só os níveis na tela ganham camada (o JS liga o will-change deles); os escondidos não seguram memória de GPU */
.is-tablet #satelite .st-sat img { will-change: auto; }
/* tom de mapa nas escalas médias (z6–z15 = os 10 primeiros níveis): o mosaico Esri junta aquisições de datas
   diferentes e a água vira blocos verde-água × escuros; menos saturação e um pouco mais de luz calam a costura.
   Os níveis de perto (a orla, o gramado, a planta) ficam na cor real. */
#satelite .st-sat img:nth-child(-n+10) { filter: saturate(.78) brightness(1.08); }
#satelite .st-sat::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at var(--cx, 60%) var(--cy, 52%), transparent 40%, rgba(4, 10, 15, var(--vig, .35)) 100%); }

/* planta: SVG em metros, posicionado e escalado pelo JS no ponto da arena */
#satelite .st-plan { position: absolute; left: 0; top: 0; width: 80px; height: 80px; max-width: none; z-index: 3; overflow: visible; transform-origin: 0 0; opacity: 0; pointer-events: none; }
#satelite .st-plan * { vector-effect: non-scaling-stroke; }
#satelite .st-plan__area { fill: rgba(244, 239, 229, .06); stroke: var(--sun); stroke-width: 1.6; stroke-dasharray: 5 4; }
#satelite .st-plan__sand { fill: rgba(236, 222, 196, .92); stroke: #fff; stroke-width: 1.2; }
#satelite .st-plan__court { fill: none; stroke: #fff; stroke-width: 1.4; }
#satelite .st-plan__net { stroke: var(--navy); stroke-width: 2; }
#satelite .st-plan__stand rect { fill: rgba(16, 38, 51, .95); stroke: rgba(244, 239, 229, .85); stroke-width: 1.1; }
#satelite .st-plan__stand path { fill: none; stroke: rgba(242, 151, 109, .75); stroke-width: 1; }
#satelite .st-plan__tents rect { fill: rgba(250, 248, 243, .95); stroke: var(--navy); stroke-width: 1; }

/* rótulos de mapa — UMA cápsula para todos (países, lugares, avenida, planta): navy .8, display 108 %,
   areia, fio claro. A água leva itálico com halo, sem cápsula (é o mar, não um lugar). */
#satelite .st-labels { position: absolute; inset: 0; z-index: 7; pointer-events: none; } /* acima do véu: cada rótulo tem a própria cápsula; o texto (.st-wrap, depois no DOM) fica por cima */
#satelite .st-lab { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
#satelite .st-lab__in, #satelite .st-plab > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 5px; border-radius: 999px; background: rgba(10, 24, 34, .8); box-shadow: 0 4px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(244, 239, 229, .16); font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc(15px * var(--ts, 1)); letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; color: var(--sand); }
#satelite .st-lab__in { transform: translate(-50%, -50%); }
#satelite .st-lab--big .st-lab__in { font-size: calc(18px * var(--ts, 1)); font-weight: 800; letter-spacing: .12em; padding: 7px 15px 6px; }
#satelite .st-lab--water .st-lab__in { padding: 0; background: none; box-shadow: none; font-style: italic; font-weight: 600; letter-spacing: .2em; color: var(--mist); text-shadow: 0 0 2px rgba(4, 10, 15, .95), 0 1px 3px rgba(4, 10, 15, .9), 0 0 16px rgba(4, 10, 15, .8); }
#satelite .st-lab--country .st-lab__in { transform: translate(-50%, calc(-100% - 10px)); padding-left: 6px; font-weight: 800; }
#satelite .st-lab--below .st-lab__in { transform: translate(-50%, 12px); }
#satelite .st-lab--country img { width: 22px; height: 22px; border-radius: 50%; }
/* seta de borda: a baía fica fora do quadro final; o rótulo encosta na borda e aponta para ela */
#satelite .st-lab--edge .st-lab__in { padding: 7px 15px 6px 9px; background: rgba(10, 24, 34, .8); box-shadow: 0 4px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(244, 239, 229, .16); text-shadow: none; }
#satelite .st-lab--edge svg { width: 18px; height: 18px; max-width: none; flex: none; fill: none; stroke: var(--sun); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* o ponto da arena: pino pulsando no lugar exato */
#satelite .st-pin { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; opacity: 0; will-change: transform, opacity; }
#satelite .st-pin i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--flare); box-shadow: 0 0 0 4px rgba(242, 151, 109, .35), 0 0 22px rgba(255, 200, 138, .9); }
#satelite .st-pin b { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 200, 138, .8); animation: st-ping 2.2s var(--ease-out) infinite; }
@keyframes st-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.reduced #satelite .st-pin b { animation: none; opacity: .5; }
#satelite .st-pin span { position: absolute; left: 0; top: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 7px 15px 6px; border-radius: 16px; background: var(--sun); color: var(--navy); font-family: var(--f-display); font-stretch: 108%; font-weight: 800; font-size: calc(15px * var(--ts, 1)); line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
#satelite .st-pin small { font-family: var(--f-mono); font-weight: 700; font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; }
/* rótulos da planta (mesma cápsula, com o ponto de sol) */
#satelite .st-plab { position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
#satelite .st-plab > span { background: rgba(10, 24, 34, .86); }
#satelite .st-plab > span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }

#satelite .st-scrim { z-index: 6; background: linear-gradient(90deg, rgba(4, 10, 15, .9) 0%, rgba(4, 10, 15, .74) 24%, rgba(4, 10, 15, .34) 44%, rgba(4, 10, 15, 0) 60%); }
#satelite .scrim--t { z-index: 6; }
#satelite .st-wrap { position: relative; z-index: 7; }
#satelite .st-lay { height: 100%; align-items: center; }
/* letra medida pela coluna (cqi), com teto: "SANTA CATARINA" e "BEIRA-MAR DE" cabem numa linha */
#satelite .st-panel { display: grid; container-type: inline-size; }
@media (orientation: landscape) and (min-width: 1800px) {
  #satelite .st-panel { --span: 1 / 7; }
  /* coluna mais larga (left-6): o véu acompanha — o título ia até ~47 % da tela, sobre a cidade clara */
  #satelite .st-scrim { background: linear-gradient(90deg, rgba(4, 10, 15, .92) 0%, rgba(4, 10, 15, .82) 30%, rgba(4, 10, 15, .64) 46%, rgba(4, 10, 15, .3) 58%, rgba(4, 10, 15, 0) 70%); }
}
#satelite .st-step { grid-area: 1 / 1; align-self: center; opacity: 0; }
#satelite .st-step .h2 { font-size: min(calc(7.8cqi * var(--ts, 1)), 8.6cqi); }
#satelite .st-title { font-size: min(calc(9.45cqi * var(--ts, 1)), 10.4cqi); }
/* medida do texto de apoio: a coluna cresce no 1920/2560 (left-6), mas o globo e o pino não saem do lugar —
   com a coluna cheia, a 1ª linha corria até o rótulo "Chile" do globo (1920 e 2560, parada 0,13) */
@media (orientation: landscape) { #satelite .st-step .body { max-width: 25em; } }
#satelite .st-ill { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#satelite .st-ill__t { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }

#satelite .st-instr { position: absolute; z-index: 7; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(26px, 5vh, 52px); display: grid; justify-items: end; gap: 8px; }
#satelite .st-scale { display: inline-flex; align-items: center; gap: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(4, 10, 15, .7); font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .08em; color: var(--sand); }
#satelite .st-scale i { display: block; width: 100px; height: 8px; border: 2px solid var(--sand); border-top: 0; transform-origin: 0 50%; }
#satelite .st-coord { padding: 7px 12px; border-radius: 999px; background: rgba(4, 10, 15, .7); font-size: calc(12px * var(--ts, 1)); letter-spacing: .06em; color: var(--text-2); }
#satelite .st-credit { position: absolute; z-index: 7; left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(18px, 3vh, 30px); display: grid; }
#satelite .st-credit > span { grid-area: 1 / 1; justify-self: start; transition: opacity .4s; } /* plaqueta do núcleo: o crédito cai sobre estrada e telhado claros */
#satelite .st-credit__sat { opacity: 0; }
#satelite.is-flat .st-credit__globe { opacity: 0; }
#satelite.is-flat .st-credit__sat { opacity: 1; }

@media (orientation: portrait) {
  #satelite .st-scrim { background: linear-gradient(180deg, rgba(4, 10, 15, .1) 0%, rgba(4, 10, 15, 0) 40%, rgba(4, 10, 15, .8) 64%, rgba(4, 10, 15, .94) 100%); }
  #satelite .st-lay { align-items: end; padding-bottom: 12vh; }
  #satelite .st-panel { --span: 1 / -1; }
  #satelite .st-step .h2 { font-size: min(calc(4cqi * var(--ts, 1)), 4.4cqi); }
  #satelite .st-title { font-size: min(calc(5cqi * var(--ts, 1)), 5.5cqi); }
}