/* Bounded, cached artwork moves on the compositor. No full-screen filter,
   animated SVG paths, dynamic clip or JavaScript animation clock. */
.hero-chaos::before {
  content:"";
  position:absolute;
  left:14%;
  top:37%;
  width:min(82vw,1100px);
  height:260px;
  background:radial-gradient(ellipse at 35% 50%,#a6a39132,transparent 65%),radial-gradient(ellipse at 75% 62%,#8d331c38,transparent 59%);
  opacity:.55;
  animation:dreadFog calc(19s * var(--motion-tempo,2)) ease-in-out calc(-9s * var(--motion-tempo,2)) infinite alternate;
}
.hero-chaos::after {
  content:"";
  position:absolute;
  right:6%;
  top:18%;
  width:min(60vw,720px);
  height:28px;
  background:linear-gradient(90deg,transparent 7%,#a6a39188 7% 24%,transparent 24% 36%,#9c6a5080 36% 91%,transparent 91%) 0 6px / 100% 1px no-repeat,linear-gradient(90deg,transparent 19%,#82897870 19% 74%,transparent 74%) 0 18px / 100% 2px no-repeat;
  opacity:.2;
  animation:backgroundFault calc(12.7s * var(--motion-tempo,2)) linear calc(-2s * var(--motion-tempo,2)) infinite;
}
@keyframes dreadFog {
  0% { transform:translate(-70px,16px) rotate(-5deg); opacity:.45; }
  38% { transform:translate(35px,-35px) rotate(2deg); opacity:.85; }
  72% { transform:translate(-20px,28px) rotate(-2deg); opacity:.4; }
  100% { transform:translate(90px,-26px) rotate(4deg); opacity:.8; }
}
@keyframes backgroundFault {
  0%,12%,42%,100% { opacity:0; transform:translate(-280px,0) scaleX(.12); }
  17% { opacity:.55; transform:translate(-80px,24px) scaleX(.6); }
  23% { opacity:.35; transform:translate(170px,56px) scaleX(1); }
  29% { opacity:0; transform:translate(410px,82px) scaleX(.2); }
  62% { opacity:0; transform:translate(-240px,150px) scaleX(.1); }
  67% { opacity:.45; transform:translate(0,170px) scaleX(.7); }
  73% { opacity:.2; transform:translate(260px,190px) scaleX(1); }
  79% { opacity:0; transform:translate(440px,206px) scaleX(.12); }
}

/* Varied motion reuses the 21 original cached drawings. */
.album-universe .motif-fanal { animation:apparitionSlip calc(9.7s * var(--motion-tempo,2)) steps(1,end) calc(-3s * var(--motion-tempo,2)) infinite; }
.album-universe .motif-morgue { animation:apparitionSlip calc(13.1s * var(--motion-tempo,2)) steps(1,end) calc(-7s * var(--motion-tempo,2)) infinite; }
.album-universe .motif-relaborat { animation:apparitionSlip calc(11.3s * var(--motion-tempo,2)) steps(1,end) calc(-5s * var(--motion-tempo,2)) infinite; }
.album-universe .motif-lava { animation:apparitionSlip calc(14.9s * var(--motion-tempo,2)) steps(1,end) calc(-1s * var(--motion-tempo,2)) infinite; }
@keyframes apparitionSlip {
  0%,27%,54%,88%,100% { translate:0 0; opacity:var(--motif-opacity); }
  18% { translate:-12px 5px; opacity:calc(var(--motif-opacity) * .45); }
  22% { translate:17px -4px; opacity:var(--motif-opacity); }
  46% { translate:8px 7px; opacity:calc(var(--motif-opacity) * .7); }
  49% { translate:-19px -2px; opacity:var(--motif-opacity); }
  75% { translate:-10px 3px; opacity:calc(var(--motif-opacity) * .38); }
  80% { translate:14px -6px; opacity:var(--motif-opacity); }
}
.horror-field { position:absolute; inset:0; z-index:4; overflow:hidden; pointer-events:none; }
.horror-field > * { position:absolute; left:var(--horror-x); top:var(--horror-y); pointer-events:none; }
.horror-apparition {
  width:min(var(--horror-size),340px);
  height:auto;
  aspect-ratio:320 / 380;
  opacity:.12;
  transform-origin:50% 55%;
  animation:hauntPass calc(var(--horror-duration,14s) * var(--motion-tempo,2)) linear calc(var(--horror-delay,-4s) * var(--motion-tempo,2)) infinite;
}
@keyframes hauntPass {
  0%,100% { transform:translate(-50%,-50%) translate(24px,-16px) scaleX(var(--haunt-flip,1)) scale(.91); opacity:.06; }
  25% { transform:translate(-50%,-50%) translate(-32px,22px) scaleX(var(--haunt-flip,1)) scale(1.03); opacity:.32; }
  47% { transform:translate(-50%,-50%) translate(-12px,-10px) scaleX(var(--haunt-flip,1)) scale(.95); opacity:.12; animation-timing-function:steps(1,end); }
  50% { transform:translate(-50%,-50%) translate(28px,8px) scaleX(var(--haunt-flip,1)) scale(1.08); opacity:.5; animation-timing-function:steps(1,end); }
  54% { transform:translate(-50%,-50%) translate(-18px,-7px) scaleX(var(--haunt-flip,1)) scale(.98); opacity:.16; }
  78% { transform:translate(-50%,-50%) translate(-35px,14px) scaleX(var(--haunt-flip,1)) scale(1.02); opacity:.34; }
}
.horror-wire {
  width:min(var(--horror-size),560px);
  height:auto;
  aspect-ratio:512 / 112;
  transform:translate(-50%,-50%) rotate(var(--wire-angle,0deg));
  opacity:.6;
  animation:wireCreep calc(var(--horror-duration,17s) * var(--motion-tempo,2)) ease-in-out calc(var(--horror-delay,-5s) * var(--motion-tempo,2)) infinite;
}
@keyframes wireCreep {
  0%,100% { translate:-22px 9px; rotate:-7deg; scale:.94; opacity:.4; }
  19% { translate:18px -24px; rotate:14deg; scale:1.035; opacity:.75; }
  39% { translate:42px 12px; rotate:28deg; scale:.98; opacity:.6; }
  61% { translate:-9px 33px; rotate:-18deg; scale:1.04; opacity:.85; }
  81% { translate:-38px -12px; rotate:-32deg; scale:.96; opacity:.55; }
}
.horror-seal {
  width:min(var(--horror-size),280px);
  height:auto;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:.4;
  animation:sealDistort calc(var(--horror-duration,19s) * var(--motion-tempo,2)) linear calc(var(--horror-delay,-6s) * var(--motion-tempo,2)) infinite;
}
@keyframes sealDistort {
  0% { rotate:0deg; scale:.94; opacity:.35; }
  28% { rotate:95deg; scale:1.06; opacity:.65; }
  53% { rotate:186deg; scale:1.01; opacity:.4; animation-timing-function:steps(1,end); }
  55% { rotate:170deg; scale:.85; opacity:.8; animation-timing-function:steps(1,end); }
  59% { rotate:218deg; scale:1.04; opacity:.55; }
  100% { rotate:360deg; scale:.94; opacity:.35; }
}
.horror-slice {
  width:min(var(--horror-size),620px);
  height:7px;
  background:linear-gradient(90deg,transparent,#8d372b05 12%,#8d372b35 45%,#b54c3b99 78%,#c5ccacd9 95%,transparent);
  transform-origin:95% 50%;
  transform:translate(-50%,-50%) rotate(var(--wire-angle,0deg));
  opacity:0;
  animation:sceneBolt calc(var(--horror-duration,8s) * var(--motion-tempo,2)) linear calc(var(--horror-delay,-2s) * var(--motion-tempo,2)) infinite;
}
@keyframes sceneBolt {
  0%,14%,40%,100% { translate:-330px 0; scale:.12 1; opacity:0; }
  18% { translate:-110px -3px; scale:.55 1; opacity:.85; }
  24% { translate:150px -8px; scale:1 1; opacity:.5; }
  30% { translate:350px -12px; scale:.15 1; opacity:0; }
  59% { translate:-280px 22px; scale:.08 1; opacity:0; }
  63% { translate:-40px 18px; scale:.7 1; opacity:.65; }
  69% { translate:230px 12px; scale:.95 1; opacity:.35; }
  75% { translate:390px 8px; scale:.1 1; opacity:0; }
}
.spatial-field-hero .spatial-body { animation-duration:calc(calc(var(--space-speed) * .7) * var(--motion-tempo,2)); }

.fanal h2::after { animation:fanalSignal calc(6.7s * var(--motion-tempo,2)) steps(1,end) calc(-2s * var(--motion-tempo,2)) infinite; }
@keyframes fanalSignal {
  0%,29%,58%,100% { transform:translate(3px,1px); opacity:.55; }
  18% { transform:translate(20px,-4px) skewX(-5deg); opacity:.9; }
  23% { transform:translate(-14px,5px) scaleX(1.025); opacity:.4; }
  47% { transform:translate(-22px,2px); opacity:.8; }
  52% { transform:translate(12px,-4px) skewX(4deg); opacity:.55; }
  83% { transform:translate(17px,3px); opacity:.75; }
}
.fanal-original-cover { animation:coverApparition calc(13s * var(--motion-tempo,2)) ease-in-out calc(-5s * var(--motion-tempo,2)) infinite alternate; }
@keyframes coverApparition {
  from { transform:translate(0,12px) rotate(12deg); opacity:.13; }
  to { transform:translate(-22px,-16px) rotate(-4deg); opacity:.35; }
}
.section-heading h2 { position:relative; }
.section-heading h2::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width:min(65%,280px);
  height:7px;
  background:linear-gradient(90deg,#b43d29 0 27%,transparent 27% 34%,#a4aa9190 34% 69%,transparent 69% 78%,#b43d29 78%);
  transform-origin:left;
  opacity:.3;
  pointer-events:none;
  animation:headingSignal calc(9.7s * var(--motion-tempo,2)) steps(1,end) calc(-3s * var(--motion-tempo,2)) infinite;
}
.archive .section-heading h2::after { animation-delay:calc(-5s * var(--motion-tempo,2)); }
.listen .section-heading h2::after { animation-delay:calc(-1s * var(--motion-tempo,2)); }
@keyframes headingSignal {
  0%,28%,57%,100% { opacity:.25; transform:scaleX(.6); }
  18% { opacity:.8; transform:translateX(12px) scaleX(.85); }
  23% { opacity:.45; transform:translateX(-18px) scaleX(1.05); }
  45% { opacity:.7; transform:translateX(7px) scaleX(.35); }
  51% { opacity:.5; transform:translateX(-9px) scaleX(.9); }
  83% { opacity:.75; transform:translateX(20px) scaleX(.5); }
}
.release-card .release-art::after {
  content:"";
  position:absolute;
  z-index:2;
  left:-3%;
  right:-3%;
  top:38%;
  height:34px;
  background:url("../assets/effects/signal-grain.webp") repeat,repeating-linear-gradient(0deg,transparent 0 3px,#afb39a70 3px 4px,transparent 4px 7px,#8b352740 7px 9px);
  opacity:.15;
  pointer-events:none;
  animation:cardSignal calc(var(--art-signal-duration,10.3s) * var(--motion-tempo,2)) steps(1,end) calc(var(--art-signal-delay,-3s) * var(--motion-tempo,2)) infinite;
}
@keyframes cardSignal {
  0%,33%,71%,100% { opacity:.1; transform:translate(-2px,0); }
  24% { opacity:.35; transform:translate(-9px,-32px); }
  28% { opacity:.22; transform:translate(7px,40px); }
  62% { opacity:.3; transform:translate(-6px,18px); }
  67% { opacity:.18; transform:translate(4px,60px); }
}
.release-card:hover .release-art::after, .release-card:focus-within .release-art::after { animation:cardTracking calc(1.7s * var(--motion-tempo,2)) steps(1,end) infinite; }
@keyframes cardTracking {
  0%,100% { opacity:.2; transform:translate(-3px,0); }
  15% { opacity:.8; transform:translate(-12px,-32px) scaleX(1.02); }
  32% { opacity:.4; transform:translate(10px,40px); }
  53% { opacity:.65; transform:translate(-8px,12px); }
  76% { opacity:.3; transform:translate(6px,68px); }
}
@media(max-width:700px) {
  .hero-chaos::before { left:0; width:100%; height:180px; }
  .horror-apparition { width:min(var(--horror-size),240px); }
  .horror-wire { width:min(var(--horror-size),340px); }
  .horror-seal { width:min(var(--horror-size),190px); }
  .horror-wire:nth-of-type(5), .horror-slice:nth-last-child(-n+2) { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .experience:not([data-motion="on"]) .hero-chaos::before,
  .experience:not([data-motion="on"]) .hero-chaos::after,
  .experience:not([data-motion="on"]) .horror-field > *,
  .experience:not([data-motion="on"]) .album-universe .album-motif,
  .experience:not([data-motion="on"]) .fanal h2::after,
  .experience:not([data-motion="on"]) .fanal-original-cover,
  .experience:not([data-motion="on"]) .section-heading h2::after,
  .experience:not([data-motion="on"]) .release-card .release-art::after { animation:none; }
}