/* Ilustração do modo "Organizar": sistemas soltos -> Just BC + IA -> sistema sob medida */
.scene-organize { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.scene-organize svg { width: 100%; height: 100%; display: block; }
.hero-scene[data-mode="1"]:not(.media-active) .scene-organize { opacity: 1; visibility: visible; }
.hero-scene[data-mode="1"]:not(.media-active) .scene-fallback { opacity: 0; visibility: hidden; }
/* a órbita de logos pertence ao vídeo do robô; fora dele ela sai de cena */
.hero-scene:not(.media-active) .ai-orbit { display: none; }

.org-svg text { font-family: Jakarta, Arial, sans-serif; }
.org-svg .sys-label { font-size: 8.5px; font-weight: 650; letter-spacing: .1em; }
.org-svg .engrave { font-size: 8.5px; font-weight: 650; letter-spacing: .32em; fill: #00f0ff; opacity: .5; }
.org-svg .core-text { font-size: 12px; font-weight: 800; fill: #06283a; }
.org-svg .ui-h { font-size: 6.5px; font-weight: 700; letter-spacing: .12em; fill: #cfe7ff; }
.org-svg .lab-num { font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.org-svg .lab-title { font-size: 12.5px; font-weight: 650; letter-spacing: .02em; fill: #e6eefb; }
.org-svg .lab-sub { font-size: 10.5px; fill: #9aa9c1; }
.org-svg .brk { animation: org-blink 1.6s ease-in-out infinite; }
@keyframes org-blink { 50% { opacity: .25; } }
.motion-paused .org-svg .brk { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .org-svg .brk { animation: none; } }

/* celular: a cena ganha a proporção da ilustração e os textos crescem para continuar legíveis */
@media (width <= 760px) {
  .hero-scene[data-mode="1"]:not(.media-active) { aspect-ratio: 720 / 620; width: 100%; margin: 0; }
  .org-svg .lab-num { font-size: 12px; }
  .org-svg .lab-title { font-size: 13px; letter-spacing: 0; }
  .org-svg .lab-sub { font-size: 12.5px; }
  .org-svg .sys-label { font-size: 10.5px; letter-spacing: .06em; }
}

/* Ilustração do modo "Automatizar": agentes autônomos + central de controle */
.scene-automate { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.scene-automate svg { width: 100%; height: 100%; display: block; }
.hero-scene[data-mode="2"]:not(.media-active) .scene-automate { opacity: 1; visibility: visible; }
.hero-scene[data-mode="2"]:not(.media-active) .scene-fallback { opacity: 0; visibility: hidden; }
.org-svg .ui-row { font-size: 5.6px; font-weight: 650; letter-spacing: .08em; fill: #cfe0f5; }
.org-svg .ui-pill { font-size: 3.8px; font-weight: 800; letter-spacing: .06em; }
.org-svg .ui-btn { font-size: 5px; font-weight: 800; letter-spacing: .06em; fill: #1a1405; }
@media (width <= 760px) {
  .hero-scene[data-mode="2"]:not(.media-active) { aspect-ratio: 720 / 620; width: 100%; margin: 0; }
}
/* rótulos flutuantes legíveis sobre linhas e trilhas */
.org-svg .sys-label { paint-order: stroke; stroke: #0a1222; stroke-width: 3px; stroke-linejoin: round; }

/* legendas dos modos: sem o rótulo "Fluxos interativos" e sem o travessão */
@media (width >= 761px) {
  .hero-visual figcaption { flex-wrap: nowrap; align-items: flex-end; }
  .hero-visual figcaption #scene-description { flex: 1 1 auto; min-width: 0; }
  .hero-visual figcaption small { flex: none; white-space: nowrap; }
}
/* celular: o botão de pausa acompanha a altura menor dos controles */
@media (width <= 760px) {
  .hero-visual .motion-toggle { bottom: 53px; }
}