/* MagicPod hero animation -------------------------------------------------
   The SVG scales from its viewBox, so the width comes from the parent. */
#mp-scene {
  display: block;
  width: 100%;
  height: auto;
  /* Hide until JS sets the opening state. If GSAP or the script fails to
     load, this reveals the SVG after 2s so the hero is never left blank -
     the SVG reads fine as a still image on its own. */
  opacity: 0;
  animation: mp-scene-fallback 0s 2s forwards;
}
@keyframes mp-scene-fallback { to { opacity: 1; } }

/* Fill the hero slot. The width itself is controlled by .l-animation
   in top_css_sec1.css. */
.mp-hero { width: 100%; }

/* Small screens keep the animation rather than swapping in a still:
   checked at iPhone SE width (375px) and the detail holds up. */