/* Imersões SuperMentes — cenas guiadas em SVG (tempestade, ciclo da água) e páginas de imersão.
 *
 * Estados da cena vêm de atributos/classes que o imersoes.js coloca em [data-imersao]:
 * data-etapa, .tem-campo, .is-raio, .anima-raio, .is-trovao e .movimento-reduzido.
 * Sem JS a cena fica estática (cargas e raio visíveis) e todas as etapas aparecem em lista.
 */

/* ---------------------------------------------------------------- 1. Catálogo */

.imersao-tampa-fisica-dos-raios { background: radial-gradient(circle at 70% 20%, #3b4ea8, #0b1030 70%); }
.imersao-tampa-ciclo-da-agua { background: linear-gradient(180deg, #7cc4ff, #2f8cff); }
.imersao-tampa-sistema-solar { background: radial-gradient(circle at 30% 40%, #5a3fb8, #0b0a26 70%); }
.imersao-tampa-corpo-humano-circulacao { background: linear-gradient(160deg, #ff8fae, #b4233f); }
.imersao-caixa.is-em-desenho .deck-caixa-tampa { filter: saturate(.55); }

/* ---------------------------------------------------------------- 2. Palco */

.imersao {
  --palco-bg: #0b1030;
  --palco-ink: #eef2ff;
  display: grid; gap: var(--space-4);
  padding: clamp(12px, 2.5vw, 24px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--palco-bg), #17245e);
  color: var(--palco-ink);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(15, 26, 69, .25));
}
.imersao-agua { --palco-bg: #0d3a7a; }
.imersao .eyebrow, .imersao .muted { color: #c6cff5; }
.imersao h3 { color: #fff; }
.imersao kbd { color: var(--color-ink-900); }

.imersao-palco { position: relative; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; }
.imersao-palco { background: #070b24; }
.cena { display: block; width: 100%; height: auto; max-height: 70vh; margin-inline: auto; }
.imersao-selo {
  position: absolute; top: 10px; left: 10px; margin: 0; padding: 4px 10px; border-radius: 999px;
  background: rgba(7, 11, 36, .7); color: #fff; font-size: var(--text-sm); font-weight: 800;
}
.imersao-status {
  margin: 0; padding: 10px 14px; min-height: 3.2em;
  border-radius: 0 0 14px 14px; background: rgba(7, 11, 36, .85); color: #fff; font-weight: 800;
  font-size: clamp(.95rem, 1.8vw, 1.2rem);
}

.imersao-medidores { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.imersao-medidor { display: grid; gap: 6px; align-content: start; }
.imersao-medidor-rot { font-weight: 800; font-size: var(--text-sm); }
.imersao-bar { background: rgba(255, 255, 255, .18); }
.imersao-bar > span { background: linear-gradient(90deg, #7fe3ff, #fffbe0); }
.imersao-bar-som > span { background: linear-gradient(90deg, #ffc53d, #ff8a3d); transition-duration: .9s; }
.imersao-contagem { font-variant-numeric: tabular-nums; }

.imersao-controles { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.imersao-controles .btn-ghost { --b-ink: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.imersao-controles [aria-pressed="true"] { outline: 3px solid var(--color-sun-400); outline-offset: 2px; }

.imersao-trilha ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.imersao-ponto {
  width: 100%; display: flex; gap: 8px; align-items: center; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: var(--text-sm); font-weight: 700;
}
.imersao-ponto-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); font-weight: 900; }
.imersao-ponto[aria-current="step"] { border-color: var(--color-sun-400); background: rgba(255, 197, 61, .16); }
.imersao-ponto[aria-current="step"] .imersao-ponto-n { background: var(--color-sun-400); color: var(--color-navy-900); }

.imersao-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.imersao-etapa { padding: var(--space-4) var(--space-5); border-radius: 18px; background: rgba(255, 255, 255, .07);
  border: 2px solid rgba(255, 255, 255, .12); }
.imersao-etapa p { max-width: 75ch; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.imersao-etapa-titulo { margin: 4px 0 8px; font-size: clamp(1.25rem, 2.6vw, 1.8rem); }
.imersao-pergunta { padding: 10px 14px; border-radius: 12px; background: rgba(255, 197, 61, .14); }
.js .imersao.is-pronto .imersao-etapa:not(.is-atual) { display: none; }
.imersao-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.imersao-nav .btn-ghost { --b-ink: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.imersao-nav .btn[disabled] { opacity: .45; cursor: not-allowed; }

.imersao-marcar { border-top-color: rgba(255, 255, 255, .25); }
.imersao-marcar .btn-ghost { --b-ink: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.imersao-marcar .live-reg[aria-pressed="true"] { --b: var(--color-sun-400); --b-ink: var(--color-navy-900); border-color: var(--color-sun-400); }
.imersao-marca-revisar-seguranca[aria-pressed="true"] { --b: #ff8fae !important; border-color: #ff8fae !important; }

/* Tela cheia (API nativa ou classe de reserva) */
.imersao:fullscreen { overflow: auto; border-radius: 0; align-content: start; }
.imersao.is-tela-cheia { position: fixed; inset: 0; z-index: 1000; overflow: auto; border-radius: 0; align-content: start; }
.imersao:fullscreen .cena, .imersao.is-tela-cheia .cena { max-height: 62vh; margin-inline: auto; }

/* ---------------------------------------------------------------- 3. Cena: A Física dos Raios */

.cena-raios .raios-correntes { opacity: 0; transition: opacity .6s; stroke-dasharray: 12 14; }
[data-etapa="1"] .raios-correntes { opacity: .8; animation: imersao-subir 1.6s linear infinite; }

.cena-raios .raios-nuvem { transform-origin: 400px 200px; transition: transform 1.2s var(--ease-out, ease-out); }
[data-etapa="1"] .raios-nuvem { animation: imersao-crescer 3s var(--ease-out, ease-out) both; }
.nuvem-camada { animation: imersao-derivar 9s ease-in-out infinite alternate; }
.nuvem-meio { animation-duration: 12s; animation-direction: alternate-reverse; }
.nuvem-frente { animation-duration: 7s; }

.carga { opacity: 0; transition: opacity .5s; }
.carga.is-on { opacity: 1; }
.no-js .carga { opacity: 1; }
.carga-pos circle { fill: #ff5c8a; stroke: #ffd1de; stroke-width: 2; }
.carga-neg circle { fill: #2f8cff; stroke: #cfe4ff; stroke-width: 2; }
.carga text { fill: #fff; }
.carga.is-on circle, .carga.is-on text { animation: imersao-tremer 1.4s ease-in-out infinite alternate; }
[data-carga="5"] .carga.is-on circle, [data-carga="5"] .carga.is-on text { animation-duration: .5s; }

.cena-raios .raios-campo { opacity: 0; transition: opacity .6s; }
.tem-campo .raios-campo { opacity: .75; animation: imersao-fluxo .8s linear infinite; }

.cena-raios .raios-chuva { opacity: 0; transition: opacity .8s; }
[data-etapa="3"] .raios-chuva, [data-etapa="4"] .raios-chuva, [data-etapa="5"] .raios-chuva,
[data-etapa="6"] .raios-chuva { opacity: .55; animation: imersao-chover .7s linear infinite; }

.raios-raio { opacity: 0; transition: opacity .3s; }
.is-raio .raios-raio, .no-js .raios-raio { opacity: 1; }
.raio-tronco, .raio-galho { fill: none; stroke: #fffbe0; stroke-linejoin: round; stroke-linecap: round; }
.raio-tronco { stroke-width: 6; }
.raio-galho { stroke-width: 3; opacity: .8; }
.raio-brilho { opacity: .35; }
.anima-raio .raio-tronco, .anima-raio .raio-galho { stroke-dasharray: 260; animation: imersao-lider .45s steps(7, end) both; }
.anima-raio .raio-brilho { animation: imersao-brilho 1.2s ease-out both; }

/* Clarão suave e único (sem piscar repetido: cuidado com fotossensibilidade). */
.raios-clarao { opacity: 0; pointer-events: none; }
.anima-raio .raios-clarao { animation: imersao-clarao 1s ease-out both; }

.raios-som .onda { opacity: 0; transform-box: view-box; transform-origin: 445px 300px; }
[data-etapa="5"].is-raio .onda { animation: imersao-onda 3s linear infinite; }
[data-etapa="5"].is-raio .onda-2 { animation-delay: 1s; }
[data-etapa="5"].is-raio .onda-3 { animation-delay: 2s; }
.raios-trovao-txt { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s; }
.is-trovao .raios-trovao-txt { opacity: 1; animation: imersao-pop .5s var(--ease-out, ease-out) both; }

.raios-abrigo { opacity: 0; transition: opacity .6s; }
[data-etapa="6"] .raios-abrigo { opacity: 1; animation: imersao-pulsar 1.6s ease-in-out infinite alternate; }
[data-etapa="6"] .raios-janela { fill: #fff3b0; }

/* ---------------------------------------------------------------- 4. Cena: A Viagem da Gota */

.agua-nuvem { fill: #ffffff; transform-origin: 470px 110px; transition: fill .8s, transform 1s var(--ease-out, ease-out); }
[data-etapa="2"] .agua-nuvem { transform: scale(1.12); }
[data-etapa="3"] .agua-nuvem { fill: #8b97b5; transform: scale(1.15); }
[data-etapa="1"] .agua-sol { animation: imersao-pulsar 1.4s ease-in-out infinite alternate; }
.agua-vapor { opacity: 0; transition: opacity .6s; stroke-dasharray: 10 8; }
[data-etapa="1"] .agua-vapor { opacity: .9; animation: imersao-subir 1.4s linear infinite; }
.agua-chuva { opacity: 0; transition: opacity .6s; }
[data-etapa="3"] .agua-chuva { opacity: 1; animation: imersao-chover .6s linear infinite; }
.agua-rio { stroke-dasharray: 18 10; }
[data-etapa="4"] .agua-rio { animation: imersao-fluxo .9s linear infinite reverse; }
.agua-gota { transform: translate(230px, 380px); transition: transform 1.4s var(--ease-out, ease-out); }
[data-etapa="1"] .agua-gota { animation: imersao-flutuar 1.6s ease-in-out infinite alternate; }
[data-etapa="2"] .agua-gota { transform: translate(470px, 112px); }
[data-etapa="3"] .agua-gota { transform: translate(560px, 236px); }
[data-etapa="4"] .agua-gota { transform: translate(420px, 440px); }

/* ---------------------------------------------------------------- 5. Animações */

@keyframes imersao-subir { to { stroke-dashoffset: -52; } }
@keyframes imersao-fluxo { to { stroke-dashoffset: -32; } }
@keyframes imersao-crescer { from { transform: scale(.55); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes imersao-derivar { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes imersao-tremer { from { transform: translate(-1.5px, 1px); } to { transform: translate(1.5px, -1px); } }
@keyframes imersao-chover { from { transform: translateY(-12px); } to { transform: translateY(12px); } }
@keyframes imersao-lider { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes imersao-brilho { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .35; } }
@keyframes imersao-clarao { 0% { opacity: 0; } 30% { opacity: .4; } 100% { opacity: 0; } }
@keyframes imersao-onda { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(9); } }
@keyframes imersao-pop { from { transform: scale(.6); } to { transform: scale(1); } }
@keyframes imersao-pulsar { from { opacity: .55; } to { opacity: 1; } }
@keyframes imersao-flutuar { from { transform: translate(230px, 380px); } to { transform: translate(230px, 300px); } }

/* Movimento reduzido: botão manual (.movimento-reduzido) ou preferência do sistema.
   A cena continua mudando de estado, mas sem animação nem clarão. */
.imersao.movimento-reduzido *, .imersao.movimento-reduzido *::before, .imersao.movimento-reduzido *::after {
  animation: none !important; transition: none !important;
}
.imersao.movimento-reduzido .raios-clarao { display: none; }
.imersao.movimento-reduzido[data-etapa="5"].is-raio .onda-1 { opacity: .8; transform: scale(2); }
.imersao.movimento-reduzido[data-etapa="5"].is-raio .onda-2 { opacity: .55; transform: scale(4.5); }
.imersao.movimento-reduzido[data-etapa="5"].is-raio .onda-3 { opacity: .3; transform: scale(7); }
@media (prefers-reduced-motion: reduce) {
  .imersao *, .imersao *::before, .imersao *::after { animation: none !important; transition: none !important; }
  .raios-clarao { display: none; }
}

/* ---------------------------------------------------------------- 6. Ficha pedagógica */

.imersao-seguranca { border: 3px solid transparent; transition: border-color .4s, box-shadow .4s; }
.imersao-seguranca.is-destaque { border-color: var(--color-success); box-shadow: 0 0 0 6px var(--color-success-soft); }
.imersao-cuidados { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.imersao-cuidados li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px;
  background: var(--color-success-soft); font-weight: 700; }
.imersao-cuidado-ico { font-size: 1.5rem; line-height: 1; }

.imersao-desafio-pergunta { font-size: 1.15rem; font-weight: 800; }
.imersao-opcoes { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.imersao-opcao { border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.imersao-opcao summary { cursor: pointer; padding: 12px 16px; font-weight: 800; }
.imersao-opcao p { margin: 0; padding: 0 16px 14px; }
.imersao-opcao.is-certa[open] { border-color: var(--color-success); background: var(--color-success-soft); }
.imersao-opcao.is-quase[open] { border-color: var(--color-warn); background: var(--color-warn-soft); }

.imersao-vocab { margin: 0; display: grid; gap: 6px; }
.imersao-vocab dt { font-weight: 900; color: var(--color-navy-900); }
.imersao-vocab dd { margin: 0 0 8px; }
.imersao-casa { --accent: var(--color-mint-500); }
.imersao-roteiro { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }

[data-contrast="high"] .imersao { background: #000; }
[data-contrast="high"] .imersao-etapa, [data-contrast="high"] .imersao-ponto { border-color: #fff; }

@media print {
  .imersao { background: #fff; color: #000; box-shadow: none; }
  .imersao-controles, .imersao-trilha, .imersao-nav, .imersao-marcar, .imersao-status { display: none !important; }
  .imersao-etapa { display: block !important; background: none; border-color: #999; }
  .imersao h3, .imersao .eyebrow, .imersao .muted { color: #000; }
}