/*
 * Soulyfe production roof upgrade.
 * Scope: the celestial hero only. All production structure and controls remain intact.
 */

@media (min-width: 901px) and (orientation: landscape) {
  :root {
    --earth: clamp(390px, 37vw, 505px);
  }

  .hero-stage {
    left: 64.5% !important;
    top: 43.5% !important;
    width: min(940px, 69vw, 104vh) !important;
    height: min(940px, 69vw, 104vh) !important;
  }

  .earth {
    opacity: .98 !important;
    filter:
      brightness(calc(.88 + (var(--beat) * .08) + (var(--kick) * .08)))
      contrast(calc(1.06 + (var(--beat) * .025)))
      saturate(calc(.94 + (var(--beat) * .14) + (var(--kick) * .12)))
      sepia(.055)
      drop-shadow(0 0 calc(28px + (var(--bass) * 17px)) rgba(var(--track-rgb-b), .19))
      drop-shadow(0 0 calc(58px + (var(--beat) * 24px)) rgba(var(--track-rgb), .17)) !important;
  }

  .moon-front-img,
  .moon-back-img {
    filter:
      brightness(calc(.98 + (var(--beat) * .14)))
      contrast(1.06)
      saturate(calc(.72 + (var(--beat) * .15)))
      sepia(.055)
      drop-shadow(0 0 12px rgba(var(--track-rgb-b), .18)) !important;
  }

  .ls-hero {
    top: 15.5% !important;
  }
}

@media (min-width: 901px) and (orientation: landscape) and (max-height: 780px) {
  :root {
    --earth: clamp(330px, 49vh, 395px);
  }

  .hero-stage {
    left: 65% !important;
    top: 42.5% !important;
    width: min(820px, 64vw, 98vh) !important;
    height: min(820px, 64vw, 98vh) !important;
  }

  .ls-hero {
    top: 14% !important;
  }
}

@media (min-width: 901px) and (orientation: portrait) {
  :root {
    --earth: clamp(300px, 36vw, 365px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .earth,
  .ring.front,
  .ring.back {
    animation: none !important;
  }
}