.hero.album-hero {
  --hero-travel:clamp(1150px,148svh,1900px);
  height:148svh;
  min-height:1150px;
  max-height:1900px;
  perspective:none;
  isolation:isolate;
  background:radial-gradient(ellipse at 66% 34%,#23130e 0,#0d0a08 40%,#070605 76%);
}
.album-hero .hero-copy { left:4%; top:min(40svh,410px); bottom:auto; max-width:54%; }
.album-hero .hero-copy h1 { font-size:clamp(120px,17vw,270px); mix-blend-mode:normal; text-shadow:0 2px 35px #0009; }
.album-hero .hero-copy h1 span { -webkit-text-stroke-color:#d0bc9f; }
.album-hero .hero-kicker { color:#e2c3a2; }
.album-hero .eyebrow { color:#ad8c73; }
.album-hero .micro { color:#c0aa94; }
.album-hero .scroll-mark { bottom:5%; color:#ab8065; }
.album-hero .vertical-code { color:#765641; }
/* Only opacity changes on these bounded, stationary background planes. */
.hero-backdrops { position:absolute; inset:0 0 auto; height:min(100%,1100px); z-index:0; overflow:hidden; contain:paint; pointer-events:none; --backdrop-strength:.32; }
.hero-backdrops img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 45%; opacity:0; animation:backdropFade 60s linear infinite; }
.hero-backdrops img:first-child { opacity:var(--backdrop-strength); }
.hero-backdrops img:nth-child(2) { animation-delay:-40s; }
.hero-backdrops img:nth-child(3) { animation-delay:-20s; }
.hero-backdrops::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#0d0a08,transparent 30%,transparent 84%,#07060580),linear-gradient(90deg,#07060550,transparent 45%); }
@keyframes backdropFade {
  0%,25%,100% { opacity:var(--backdrop-strength); }
  33.333333%,91.666667% { opacity:0; }
}
@media(max-width:700px) { .hero-backdrops { --backdrop-strength:.28; height:1000px; } }
@media(prefers-reduced-motion:reduce) {
  .experience:not([data-motion="on"]) .hero-backdrops img { animation:none; opacity:0; }
  .experience:not([data-motion="on"]) .hero-backdrops img:first-child { opacity:var(--backdrop-strength); }
}
.album-universe { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.album-motif {
  position:absolute;
  left:var(--motif-x);
  top:var(--motif-y);
  width:var(--motif-size);
  opacity:var(--motif-opacity);
  transform:translate(-50%,-50%);
}
.motif-lava { color:#a76849; }
.motif-propheten { color:#ba895f; }
.motif-fanal { color:#b78a60; }
.motif-egodram { color:#b79f86; }
.motif-relaborat { color:#aa9384; }
.motif-dantes { color:#bca890; }
.motif-relikt { color:#a28d72; }
.motif-addendum { color:#b09a7d; }
.motif-rekapitulation { color:#ad9c86; }
.motif-hand { color:#b99575; }
.album-veil { position:absolute; z-index:2; inset:0; background:radial-gradient(ellipse at 21% 45%,#070605bd 0,transparent 39%),linear-gradient(0deg,#080605 0,transparent 14%,transparent 90%,#08060570 100%); }

@media (min-width:1800px) {
  .album-hero .hero-copy { left:6%; top:390px; }
  .album-motif { width:calc(var(--motif-size) * .85); }
}
@media (max-width:1100px) and (min-width:701px) {
  .hero.album-hero { --hero-travel:clamp(1250px,155svh,1900px); height:155svh; min-height:1250px; }
  .album-hero .hero-copy { left:4%; max-width:58%; top:380px; }
  .album-hero .hero-copy h1 { font-size:19vw; }
  .motif-propheten { --motif-x:25%!important; --motif-size:27%!important; }
  .motif-fanal { --motif-size:29%!important; }
  .motif-lava { --motif-size:31%!important; }
  .motif-staub { --motif-y:46%!important; --motif-size:28%!important; }
  .motif-cabaret { --motif-x:66%!important; --motif-size:25%!important; }
  .motif-egodram { --motif-size:27%!important; }
}
@media (max-width:700px) {
  .hero.album-hero { --hero-travel:1680px; height:1680px; min-height:1680px; max-height:none; }
  .album-hero .hero-copy { left:24px; right:24px; top:clamp(325px,52svh,470px); max-width:100%; }
  .album-hero .hero-copy h1 { font-size:clamp(106px,27vw,178px); line-height:.78; }
  .album-hero .hero-copy h1 span { margin-left:15%; }
  .album-hero .micro, .album-hero .descend { margin-left:16%; }
  .album-hero .hero-kicker { font-size:10px; }
  .album-hero .eyebrow { margin-bottom:24px; font-size:9px; }
  .album-hero .micro { margin-top:28px; font-size:10px; }
  .album-hero .descend { font-size:9px; }
  .album-hero .scroll-mark { right:28px; bottom:55px; }
  .motif-fanal { --motif-x:61%!important; --motif-y:13%!important; --motif-size:47%!important; }
  .motif-propheten { --motif-x:24%!important; --motif-y:21%!important; --motif-size:49%!important; }
  .motif-lava { --motif-x:80%!important; --motif-y:28%!important; --motif-size:52%!important; }
  .motif-staub { --motif-x:77%!important; --motif-y:50%!important; --motif-size:49%!important; }
  .motif-feuer { --motif-x:29%!important; --motif-y:75%!important; --motif-size:37%!important; }
  .motif-inner { --motif-x:26%!important; --motif-y:61%!important; --motif-size:47%!important; }
  .motif-egodram { --motif-x:80%!important; --motif-y:85%!important; --motif-size:48%!important; }
  .motif-morgue { --motif-x:16%!important; --motif-y:87%!important; --motif-size:36%!important; }
  .motif-relaborat { --motif-x:10%!important; --motif-y:11%!important; --motif-size:33%!important; }
  .motif-antichrist { --motif-x:90%!important; --motif-y:58%!important; --motif-size:29%!important; }
  .motif-cabaret { --motif-x:63%!important; --motif-y:66%!important; --motif-size:45%!important; }
  .motif-liebe { --motif-x:15%!important; --motif-y:43%!important; --motif-size:31%!important; }
  .motif-relikt { --motif-x:9%!important; --motif-y:54%!important; --motif-size:33%!important; }
  .motif-addendum { --motif-x:34%!important; --motif-y:92%!important; --motif-size:29%!important; }
  .motif-rekapitulation { --motif-x:58%!important; --motif-y:92%!important; --motif-size:34%!important; }
  .motif-momentum { --motif-x:45%!important; --motif-y:54%!important; --motif-size:27%!important; }
  .motif-dantes { --motif-x:29%!important; --motif-y:5%!important; --motif-size:29%!important; }
  .motif-brutus { --motif-x:38%!important; --motif-y:39%!important; --motif-size:34%!important; }
  .motif-kannibale { --motif-x:59%!important; --motif-y:79%!important; --motif-size:25%!important; }
  .motif-kindgott { --motif-x:91%!important; --motif-y:95%!important; --motif-size:24%!important; }
  .motif-hand { --motif-x:48%!important; --motif-y:84%!important; --motif-size:23%!important; }
  .album-veil { background:radial-gradient(ellipse at 35% 34%,#070605b3 0,transparent 29%),linear-gradient(0deg,#080605,transparent 11%,transparent 95%,#08060555); }
}
@media (max-width:420px) {
  .album-hero .hero-copy { left:20px; right:20px; top:clamp(325px,51svh,445px); }
  .album-hero .hero-copy h1 { font-size:29vw; }
  .album-hero .hero-copy h1 span { margin-left:15%; }
  .album-hero .micro, .album-hero .descend { margin-left:15%; }
}
@media (max-width:700px) and (max-height:600px) {
  .album-hero .hero-copy { top:270px; }
  .album-hero .hero-copy h1 { font-size:clamp(92px,23vw,150px); }
}
/* The drawing is a cached image; only the outer image plane moves. */
.album-universe { overflow:visible; }
.album-motif { max-width:520px; }
.motif-image { width:100%; height:auto; aspect-ratio:320 / 380; pointer-events:none; animation:motifFloat calc(var(--motif-duration,13s) * var(--motion-tempo,2)) cubic-bezier(.45,0,.55,1) calc(var(--motif-delay,-4s) * var(--motion-tempo,2)) infinite; }
/* Closed routes: no ping-pong reversal at the end of a cycle. */
@keyframes motifFloat {
  0%,100% { transform:translate(-18px,0) rotate(-8deg); }
  14% { transform:translate(5px,-42px) rotate(-25deg); }
  31% { transform:translate(52px,-12px) rotate(18deg); }
  47% { transform:translate(17px,38px) rotate(72deg); }
  66% { transform:translate(-40px,28px) rotate(4deg); }
  83% { transform:translate(-35px,-28px) rotate(-36deg); }
}
@keyframes motifLoop {
  0%,100% { transform:translate(0,-25px) rotate(12deg) scale(.96); }
  17% { transform:translate(47px,8px) rotate(48deg) scale(1.03); }
  34% { transform:translate(-8px,39px) rotate(-13deg) scale(.93); }
  52% { transform:translate(-48px,-9px) rotate(-62deg) scale(1.04); }
  73% { transform:translate(22px,-38px) rotate(26deg) scale(.97); }
  88% { transform:translate(31px,23px) rotate(5deg) scale(1.02); }
}
@keyframes motifSpiral {
  0% { transform:translate(-16px,0) rotate(0deg) scale(.94); }
  19% { transform:translate(32px,-34px) rotate(58deg) scale(1.05); }
  37% { transform:translate(48px,18px) rotate(147deg) scale(.96); }
  56% { transform:translate(-12px,43px) rotate(205deg) scale(1.04); }
  78% { transform:translate(-43px,-18px) rotate(294deg) scale(.93); }
  100% { transform:translate(-16px,0) rotate(360deg) scale(.94); }
}
@keyframes motifTurn {
  0% { transform:perspective(1200px) translate3d(0,14px,0) rotateX(0deg) rotateY(-15deg) rotateZ(5deg); }
  21% { transform:perspective(1200px) translate3d(-35px,-28px,32px) rotateX(82deg) rotateY(43deg) rotateZ(-33deg); }
  43% { transform:perspective(1200px) translate3d(26px,-37px,-28px) rotateX(165deg) rotateY(-44deg) rotateZ(17deg); }
  64% { transform:perspective(1200px) translate3d(44px,24px,20px) rotateX(242deg) rotateY(28deg) rotateZ(62deg); }
  84% { transform:perspective(1200px) translate3d(-28px,32px,-20px) rotateX(305deg) rotateY(-36deg) rotateZ(-12deg); }
  100% { transform:perspective(1200px) translate3d(0,14px,0) rotateX(360deg) rotateY(-15deg) rotateZ(5deg); }
}
@keyframes motifFloat3d {
  0% { transform:perspective(1400px) translate3d(-20px,26px,-30px) rotateX(-14deg) rotateY(-28deg) rotateZ(-9deg); }
  16% { transform:perspective(1400px) translate3d(27px,-39px,35px) rotateX(32deg) rotateY(53deg) rotateZ(34deg); }
  35% { transform:perspective(1400px) translate3d(51px,14px,-10px) rotateX(-38deg) rotateY(112deg) rotateZ(-28deg); }
  54% { transform:perspective(1400px) translate3d(-8px,43px,42px) rotateX(47deg) rotateY(184deg) rotateZ(51deg); }
  73% { transform:perspective(1400px) translate3d(-47px,-18px,-25px) rotateX(-29deg) rotateY(246deg) rotateZ(-42deg); }
  88% { transform:perspective(1400px) translate3d(17px,-32px,20px) rotateX(26deg) rotateY(297deg) rotateZ(23deg); }
  100% { transform:perspective(1400px) translate3d(-20px,26px,-30px) rotateX(-14deg) rotateY(332deg) rotateZ(-9deg); }
}
.album-universe :is(.motif-propheten,.motif-fanal,.motif-inner,.motif-hand) .motif-image { animation-name:motifFloat3d; }
.album-universe :is(.motif-lava,.motif-morgue,.motif-brutus,.motif-relikt) .motif-image { animation-name:motifTurn; }
.album-universe :is(.motif-egodram,.motif-antichrist,.motif-feuer,.motif-addendum,.motif-kindgott) .motif-image { animation-name:motifSpiral; }
.album-universe :is(.motif-staub,.motif-cabaret,.motif-liebe,.motif-dantes,.motif-momentum) .motif-image { animation-name:motifLoop; }
.album-universe :is(.motif-staub,.motif-lava,.motif-egodram,.motif-morgue,.motif-addendum,.motif-momentum,.motif-kannibale) .motif-image { animation-direction:reverse; }