/* RED PRO — generated-scene overview (assets/cutaway/scene-art.js) */
.sa { margin: 0; position: relative; }
.sa-scroll { border-radius: 18px; overflow: hidden; background: #FBF8F3; box-shadow: 0 30px 70px -34px rgba(15,17,21,.45); }
.sa-stage { position: relative; line-height: 0; }
.sa-img, .sa-svg { display: block; width: 100%; height: auto; }
.sa-svg { position: absolute; inset: 0; height: 100%; }
.sa-img { opacity: 0; transition: opacity .6s ease; }
.sa-img.sa-ok { opacity: 1; }
.sa-tag { position: absolute; top: 14px; left: 14px; z-index: 2; line-height: 1; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #C42424; background: rgba(255,255,255,.92); border: 1px solid rgba(196,36,36,.35); border-radius: 999px; padding: 8px 12px; }
.sa-mt { font: 700 22px/1 Inter, system-ui, sans-serif; fill: #0F1115; }
.sa-m { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.sa-key { list-style: decimal; margin: 18px 0 0; padding: 0 0 0 1.4em; columns: 2 280px; column-gap: 36px; font: 500 14px/1.7 Inter, system-ui, sans-serif; color: rgba(15,17,21,.78); }
.sa-key li::marker { color: #C42424; font-weight: 700; }
.sa-disc { margin: 14px 0 0; font: 500 12.5px/1.55 Inter, system-ui, sans-serif; color: rgba(15,17,21,.6); }
.sa-pan { display: none; }

/* motion runs only while the figure is on screen */
.sa-flow { stroke-dasharray: 14 34; animation: sa-flow 1.6s linear infinite; animation-play-state: paused; }
.sa-pulse { transform-box: fill-box; transform-origin: center; animation: sa-pulse 2.4s ease-out infinite; animation-play-state: paused; opacity: 0; }
.sa-glow { transform-box: fill-box; transform-origin: center; animation: sa-glow 3.2s ease-in-out infinite; animation-play-state: paused; opacity: .75; }
.sa-live .sa-flow, .sa-live .sa-pulse, .sa-live .sa-glow { animation-play-state: running; }
@keyframes sa-flow { to { stroke-dashoffset: -96; } }
@keyframes sa-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes sa-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sa-img { transition: none; }
  .sa-flow, .sa-pulse, .sa-glow { animation: none; }
  .sa-flow { stroke-dasharray: none; opacity: .5; }
  .sa-pulse { display: none; }
}

/* phones: a 1536-unit plate squeezed into 360px makes callouts ~4px; keep them readable and let the plate pan */
@media (max-width: 760px) {
  .sa-scroll { border-radius: 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .sa-stage { width: 960px; }
  .sa-pan { display: block; margin: 0 0 10px; font: 700 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #C42424; }
  .sa-key { columns: 1; font-size: 13.5px; }
}

/* dark pages (projects.html band) */
.scene-band .sa-key { color: rgba(255,255,255,.82); }
.scene-band .sa-disc { color: rgba(255,255,255,.58); }
.scene-band .sa-pan { color: #FF7A66; }