/* ============================================================
   BASE — reset, fonts, stage layout
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%; height:100%;
  background: var(--mea-bg);
  overflow: hidden;
}

body{
  font-family: var(--font-body);
  color: var(--mea-text-primary);
}

/* The stage is a fixed 16:9 frame so screen-recording is predictable. */
#stage{
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--mea-bg);
  overflow: hidden;
}

/* Subtle vignette so scenes never feel flat-black-on-flat-black */
#stage::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* Each scene occupies the full stage, stacked, shown one at a time. */
.scene{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.scene.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Utility: simple fade used by the orchestrator when a scene doesn't
   define its own enter/exit animation. */
.scene{
  transition: opacity 0.6s ease;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   AUDIO TOGGLE — small mute/unmute button, bottom-right corner
   ============================================================ */
#audio-toggle{
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 10;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mea-border-strong);
  background: rgba(22, 22, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--mea-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#audio-toggle:hover{
  color: var(--mea-text-primary);
  border-color: var(--mea-border-strong);
}

#audio-toggle.is-on{
  color: var(--mea-accent-text);
  border-color: var(--mea-accent);
}