/* One entrance: the composed scene cannot paint before its opening starts. */
.theme-epico .epic-hero :is(.stage, .hero-title, .hero-bottom, .bethlehem-star, .celestial-frame) {
  transition: opacity .4s ease;
}
html[data-scene="preparing"] .theme-epico .epic-hero :is(.stage, .hero-title, .hero-bottom, .bethlehem-star, .celestial-frame, .landscape-light, .frame-light) {
  opacity: 0;
}
.theme-epico .epic-hero :is(.logo-sheen, .logo-edge-light, .logo-glints, .landscape-light, .frame-light) {
  transition: opacity .6s ease;
}
/* Let the entrance finish before painting the moving masks and ambient effects. */
html:is([data-scene="preparing"], [data-scene="intro"]) .theme-epico .epic-hero :is(.logo-sheen, .logo-edge-light, .logo-glints, .landscape-light, .frame-light) {
  opacity: 0;
}
html:is([data-scene="preparing"], [data-scene="intro"]) .theme-epico .epic-hero :is(.celestial-art *, .edge-trace path, .light-glint, .horizon-glow, .scene-bloom, .frame-glint, .floating-seed img, .star-art, .stage-lights i),
html:is([data-scene="preparing"], [data-scene="intro"]) .theme-epico .epic-hero .logo-sheen::before {
  animation-play-state: paused;
}
@media (max-width: 700px) {
  /* Keep the approved final filters; animate only transform and opacity. */
  .theme-epico .epic-hero.intro-running .hero-title > * { animation-name: mobile-title-in; }
  .theme-epico .epic-hero.intro-running .stage-scenery { animation-name: mobile-scenery-in; }
  .theme-epico .epic-hero.intro-running :is(.hero-title > *, .stage-scenery, .stage-travelers, .stage-frieze, .bethlehem-star, .opening-drape) {
    will-change: transform, opacity;
  }
  @keyframes mobile-title-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes mobile-scenery-in {
    from { opacity: .25; transform: scale(1.08); }
    to { opacity: 1; transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-epico .epic-hero :is(.stage, .hero-title, .hero-bottom, .bethlehem-star, .celestial-frame, .logo-sheen, .logo-edge-light, .logo-glints, .landscape-light, .frame-light) { transition: none; }
}