/* LU Music Portal — animated background after the glass hero */

@keyframes lumusic-page-gradient-flow {
  0%,
  100% {
    background-position: 0% 0%;
  }

  25% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 0% 100%;
  }
}

body.lumusic-portal-page {
  background: #050505;
}

/*
 * Hero-only perimeter field. One continuous four-corner color wash is cut by
 * a large, low-octave noise-displaced circular mask. Its transparent centre
 * covers the full glass orbit, preserving the original black optical backdrop.
 */
body.lumusic-portal-page .hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("../img/music/lumusic_hero_corner_gradient.svg") center / 100% 100% no-repeat;
  opacity: 0.9;
}

/*
 * Animated delivery: an SVG in a CSS background renders statically, so the
 * turbulence is injected as an <img> (SMIL runs in <img>). When present it
 * replaces the static ::before to avoid double-drawing.
 */
body.lumusic-portal-page.has-hero-gradient-anim .hero-section::before {
  display: none;
}

body.lumusic-portal-page .lumusic-hero-gradient-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

@media screen and (max-width: 50em) and (orientation: portrait) {
  body.lumusic-portal-page .hero-section::before {
    background-size: 155% 100%;
    opacity: 0.86;
  }

  body.lumusic-portal-page .lumusic-hero-gradient-anim {
    transform: scaleX(1.55);
    transform-origin: center;
    opacity: 0.86;
  }
}

@media screen and (max-width: 37.5em) and (orientation: portrait) {
  body.lumusic-portal-page .hero-section::before {
    background-size: 175% 100%;
    opacity: 0.84;
  }

  body.lumusic-portal-page .lumusic-hero-gradient-anim {
    transform: scaleX(1.75);
    transform-origin: center;
    opacity: 0.84;
  }
}

/*
 * The opaque Three.js hero intentionally keeps its original #050505 scene.
 * The gradient begins only with the rolling cylinder ("When Your Lady Like
 * Cats") and continues through the following artist statement.
 */
body.lumusic-portal-page #next,
body.lumusic-portal-page #lumusic-explore-trigger {
  background-color: #21113f;
  background-image: linear-gradient(
    135deg,
    #21113f 0%,
    #0d3754 33.333%,
    #55204b 66.667%,
    #5a371a 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 240% 240%;
  background-position: 0% 0%;
  animation: lumusic-page-gradient-flow 24s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.lumusic-portal-page #next,
  body.lumusic-portal-page #lumusic-explore-trigger {
    animation-play-state: paused;
  }
}