body:has(#loading:not([hidden])){background:#061b10 url('/assets/loading-background.jpg') center top / 100% auto no-repeat}
#loading .fairy-twinkles{display:none}
#loading-cycle-phrase{top:440px}
.gold-waveform{position:absolute;left:160px;top:605px;width:760px;height:230px;pointer-events:none;z-index:4;isolation:isolate}
.wave-line{position:absolute;top:50%;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#dca553 12%,#fff1c0 36%,#fffde6 50%,#ffd788 65%,#dca553 88%,transparent);box-shadow:0 0 13px 2px #ffbc6480}
.wave-halo{position:absolute;inset:22% -8%;background:radial-gradient(ellipse,#ffb84f25,transparent 68%);animation:wave-halo 2.8s ease-in-out infinite alternate}
.gold-waveform img{position:absolute;left:var(--x);top:50%;height:var(--h);width:auto;max-width:none;transform:translate(-50%,-50%);mix-blend-mode:screen;filter:drop-shadow(0 0 8px #ffca6d70);animation:gold-wave var(--duration) ease-in-out var(--delay) infinite}
@keyframes gold-wave{0%,100%{transform:translate(-50%,-50%) scale(.65,.32);opacity:.3}45%{transform:translate(-50%,-50%) scale(1,1);opacity:1}72%{transform:translate(-50%,-50%) scale(.8,.55);opacity:.62}}
@keyframes wave-halo{from{opacity:.35;transform:scaleX(.85)}to{opacity:1;transform:scaleX(1.08)}}
@media(prefers-reduced-motion:reduce){.gold-waveform img,.wave-halo{animation:none}}
/* Place the animated sparkle line within the background's gold wave. */
.gold-waveform{top:950px}
.gold-waveform img{height:calc(var(--h) * 2)}
/* Enlarge the complete waveform, centered within the clipped loading frame. */
.gold-waveform{transform:scale(2);transform-origin:center}
/* Additional vertical stretch; blend the entire effect into the gold background. */
.gold-waveform{transform:scale(2,3);isolation:auto;mix-blend-mode:screen}
@supports (mix-blend-mode:plus-lighter){.gold-waveform{mix-blend-mode:plus-lighter}}
/* Home preview: use the new art, with the animated wave behind the note. */
.music-hero-art{overflow:hidden;background:#061b10}
.music-hero-background{left:0;top:0;width:1080px;height:966px;transform:none;object-fit:cover;object-position:center}
.music-hero-art .gold-waveform{top:517px;z-index:2}
.music-hero-note{z-index:3}
.music-hero-title{z-index:5}
.music-hero-art .fairy-twinkles{display:none}

/* Sprite settings live in CSS to comply with the production security policy. */
.gold-waveform img:nth-of-type(1){--x:0.00%;--h:38.0px;--delay:0.00s;--duration:1.80s}
.gold-waveform img:nth-of-type(2){--x:4.55%;--h:41.9px;--delay:-0.13s;--duration:1.97s}
.gold-waveform img:nth-of-type(3){--x:9.09%;--h:54.8px;--delay:-0.26s;--duration:2.14s}
.gold-waveform img:nth-of-type(4){--x:13.64%;--h:61.8px;--delay:-0.39s;--duration:2.31s}
.gold-waveform img:nth-of-type(5){--x:18.18%;--h:69.2px;--delay:-0.52s;--duration:2.48s}
.gold-waveform img:nth-of-type(6){--x:22.73%;--h:106.9px;--delay:-0.65s;--duration:1.80s}
.gold-waveform img:nth-of-type(7){--x:27.27%;--h:132.8px;--delay:-0.78s;--duration:1.97s}
.gold-waveform img:nth-of-type(8){--x:31.82%;--h:112.4px;--delay:-0.91s;--duration:2.14s}
.gold-waveform img:nth-of-type(9){--x:36.36%;--h:126.3px;--delay:-1.04s;--duration:2.31s}
.gold-waveform img:nth-of-type(10){--x:40.91%;--h:185.9px;--delay:-1.17s;--duration:2.48s}
.gold-waveform img:nth-of-type(11){--x:45.45%;--h:179.3px;--delay:-1.30s;--duration:1.80s}
.gold-waveform img:nth-of-type(12){--x:50.00%;--h:130.8px;--delay:-1.43s;--duration:1.97s}
.gold-waveform img:nth-of-type(13){--x:54.55%;--h:155.5px;--delay:-1.56s;--duration:2.14s}
.gold-waveform img:nth-of-type(14){--x:59.09%;--h:191.0px;--delay:-1.69s;--duration:2.31s}
.gold-waveform img:nth-of-type(15){--x:63.64%;--h:145.7px;--delay:-1.82s;--duration:2.48s}
.gold-waveform img:nth-of-type(16){--x:68.18%;--h:104.7px;--delay:-1.95s;--duration:1.80s}
.gold-waveform img:nth-of-type(17){--x:72.73%;--h:120.3px;--delay:-2.08s;--duration:1.97s}
.gold-waveform img:nth-of-type(18){--x:77.27%;--h:114.0px;--delay:-2.21s;--duration:2.14s}
.gold-waveform img:nth-of-type(19){--x:81.82%;--h:74.9px;--delay:-2.34s;--duration:2.31s}
.gold-waveform img:nth-of-type(20){--x:86.36%;--h:57.9px;--delay:-2.47s;--duration:2.48s}
.gold-waveform img:nth-of-type(21){--x:90.91%;--h:53.5px;--delay:-2.60s;--duration:1.80s}
.gold-waveform img:nth-of-type(22){--x:95.45%;--h:42.6px;--delay:-2.73s;--duration:1.97s}
.gold-waveform img:nth-of-type(23){--x:100.00%;--h:38.0px;--delay:-2.86s;--duration:2.14s}

/* Give the loading wave a backdrop inside its transformed stacking context,
   matching the home hero so additive blending removes dark sprite edges. */
#loading .loading-source-canvas{background:#061b10 url('/assets/loading-background.jpg') left top / 1080px 1920px no-repeat}