/* ======================================================
   APHELION — FX-Layer (Scroll-Effekte)
   Wird nur aktiv, wenn <html class="fx"> gesetzt ist.
   Jeder Effekt lässt sich über html.fx-no-<name> abschalten
   (z. B. für Tests).
   ====================================================== */

html.fx body { background: #050609; }

/* ---------- Weltraum-Hintergrund ---------- */
.fx-space {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Vignette: Ränder dunkler, Inhalt bleibt im Vordergrund */
.fx-space::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(5,6,9,.15) 30%, rgba(5,6,9,.85) 100%);
}

.fx-planet {
  position: absolute; left: 0; top: 0;
  width: 400px; height: 400px;
  border-radius: 50%;
  overflow: hidden;
  will-change: transform, opacity;
  box-shadow: 0 0 90px rgba(140,170,230,.07);
  background: radial-gradient(circle at 30% 30%, #9aabc8 0%, #4f5f7d 20%, #1f2738 46%, #0a0d14 72%);
}
.fx-planet-bands {
  position: absolute; inset: -2%;
  border-radius: 50%;
  mix-blend-mode: overlay;
  opacity: .75;
  background-image: repeating-linear-gradient(-16deg,
    rgba(255,255,255,.10) 0 5px, transparent 5px 19px,
    rgba(0,0,0,.22) 19px 27px, transparent 27px 44px,
    rgba(255,255,255,.06) 44px 47px, transparent 47px 70px);
  background-size: 420px 420px;
}
.fx-planet-shade {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 50px rgba(5,7,11,.65);
}
/* Roter Atmosphären-Saum in Aphelion-Rot, ganz dezent */
.fx-planet::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset -6px -4px 18px rgba(228,38,47,.10);
}

/* Sektionen durchscheinend machen, damit der Raum sichtbar wird */
html.fx:not(.fx-no-space) .bio,
html.fx:not(.fx-no-space) .gigs,
html.fx:not(.fx-no-space) .media,
html.fx:not(.fx-no-space) .videos,
html.fx:not(.fx-no-space) .footer,
html.fx:not(.fx-no-space) .marquee { background: rgba(5,6,9,.55); }
html.fx:not(.fx-no-space) .members,
html.fx:not(.fx-no-space) .discography,
html.fx:not(.fx-no-space) .gallery,
html.fx:not(.fx-no-space) .contact,
html.fx:not(.fx-no-space) .bookus { background: rgba(12,13,18,.84); }
/* Nicht positionierte Body-Kinder über den fixen Raum heben */
html.fx .marquee, html.fx .footer { position: relative; }
html.fx-no-space .fx-space { display: none; }
html.fx-no-planet .fx-planet { display: none; }

/* ---------- Hero: Rauszoomen ins All ---------- */
html.fx .hero { border-bottom: 0; }
html.fx .hero-slider {
  transform-origin: 50% 35%;
  will-change: transform, border-radius;
}
.fx-orbit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  overflow: visible;
}
.fx-orbit text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  fill: #b9c2d2;
}
html.fx-no-orbit .fx-orbit { display: none; }

/* ---------- Hero-Zeitleiste im EKG-Stil ---------- */
html.fx:not(.fx-no-ekg) .hero-dots { display: none; }
/* Hero-Text über die Zeitleiste heben */
html.fx:not(.fx-no-ekg) .hero-slide > .hero-text { bottom: 108px; }
@media (max-width: 900px) { html.fx:not(.fx-no-ekg) .hero-slide > .hero-text { bottom: 100px; } }
.fx-ekg {
  position: absolute;
  left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px);
  bottom: 14px;
  z-index: 6;
  height: 84px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 10px;
}
.fx-ekg:focus-visible { outline: 1px solid rgba(244,244,240,.5); outline-offset: 4px; }
.fx-ekg svg { display: block; width: 100%; height: 84px; overflow: visible; }
.fx-ekg-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fx-ekg-line--dim { stroke: rgba(244,244,240,.18); }
.fx-ekg-line--on { stroke: #f4f4f0; filter: drop-shadow(0 0 4px rgba(255,255,255,.45)); }
.fx-ekg-tick { stroke: rgba(244,244,240,.28); stroke-width: 1; }
.fx-ekg-head { fill: #fff; }
.fx-ekg-halo { pointer-events: none; }
.fx-ekg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: rgba(244,244,240,.35);
  transition: fill .3s ease;
}
.fx-ekg-label.is-active { fill: var(--accent); }
/* Musiker: unsichtbar, bis der Herzschlag sie „zeichnet" */
.fx-ekg-fig * {
  fill: none;
  stroke: #f4f4f0;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .25s ease;
}
.fx-ekg-fig { opacity: .35; transition: opacity .6s ease; }
.fx-ekg-fig.is-on { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); }
.fx-ekg-fig.is-on * { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.3,.7,.2,1); }
.fx-ekg-fig.is-on circle { fill: #f4f4f0; transition: stroke-dashoffset .7s ease, fill .4s ease .4s; }
.fx-ekg:hover .fx-ekg-line--dim { stroke: rgba(244,244,240,.3); }
.fx-ekg.is-scrubbing .fx-ekg-head { r: 5; }
html.fx-no-ekg .fx-ekg { display: none; }
@media (max-width: 599px) {
  .fx-ekg { bottom: 6px; }
  .fx-ekg-label { font-size: 8px; letter-spacing: .08em; opacity: 0; transition: opacity .3s ease; }
  .fx-ekg-label.is-active { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-ekg-fig *, .fx-ekg-fig.is-on * { transition: none; }
}

/* Bandname: Buchstaben driften beim Scrollen auseinander */
.fx-ch { display: inline-block; will-change: transform, opacity; }

/* ---------- Überschriften: Wort-für-Wort aus der Maske ---------- */
.fx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Luft oben (Umlautpunkte) und unten (Kommas), damit die Maske nichts abschneidet */
  padding: .18em 0 .2em;
  margin: -.18em 0 -.2em;
}
/* Nach dem Einfahren Maske ganz aufheben — keine Kanten/Linien im Schriftbild */
.fx-done .fx-w { overflow: visible; }
.fx-wi {
  display: inline-block;
  transform: translateY(108%) rotate(5deg);
  transform-origin: 0 100%;
  transition: transform 1s cubic-bezier(.16,.84,.24,1);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.fx-in .fx-wi { transform: none; }
html.fx-no-titles .fx-wi { transform: none; transition: none; }

/* Marquee: Tempo steht jetzt direkt in styles.css (nach dem Breiten-Fix) */

/* ---------- Galerie: Parallax im Bildausschnitt + Masken-Reveal ---------- */
html.fx:not(.fx-no-gallery) .gallery-cell { overflow: hidden; }
html.fx:not(.fx-no-gallery) .gallery-cell img {
  will-change: transform;
  transform: scale(1.18);
}
html.fx:not(.fx-no-gallery) .gallery-cell.fx-clip {
  clip-path: inset(14% 8% 14% 8%);
  transition: clip-path 1.1s cubic-bezier(.16,.84,.24,1);
}
html.fx:not(.fx-no-gallery) .gallery-cell.fx-clip.fx-in { clip-path: inset(0 0 0 0); }

/* ---------- 3D-Tilt auf Karten ---------- */
html.fx:not(.fx-no-tilt) .fx-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
  position: relative;
}
html.fx:not(.fx-no-tilt) .fx-tilt.is-tilting { transition: transform .08s linear; }
html.fx:not(.fx-no-tilt) .fx-tilt::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.14), transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
}
html.fx:not(.fx-no-tilt) .fx-tilt.is-tilting::after { opacity: 1; }

/* ---------- Bio-Kopf: Titel als Pegel, größeres Foto ---------- */
html.fx:not(.fx-no-bio) .fx-bio .section-title .fx-wi {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244,244,240,.45);
  background: linear-gradient(90deg, var(--fg) var(--f, 0%), transparent var(--f, 0%));
  -webkit-background-clip: text;
  background-clip: text;
}
/* Platz über/unter der Schrift, damit Umlautpunkte und Kommas mitgefüllt werden */
html.fx:not(.fx-no-bio) .fx-bio .section-title .fx-wi { padding: .18em 0 .2em; margin: -.18em 0 -.2em; }
html.fx .fx-bio { align-items: flex-end; }

html.fx .fx-bio .bio-jubilee-img {
  width: min(46vw, 660px);
  will-change: clip-path, transform;
}
@media (max-width: 760px) { html.fx .fx-bio .bio-jubilee-img { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  html.fx .fx-bio .section-title .fx-wi { --f: 100%; }
}

/* ---------- Bio-Timeline: seitlich durch vertikales Scrollen ---------- */
html.fx-hs-on .fx-hs { position: relative; }
html.fx-hs-on .fx-hs-sticky {
  position: sticky;
  top: var(--fx-nav, 72px);
  min-height: calc(100vh - var(--fx-nav, 72px));
  min-height: calc(100svh - var(--fx-nav, 72px));
  display: flex; flex-direction: column; justify-content: center;
}
html.fx-hs-on .timeline-track { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
html.fx-hs-on .timeline-row { will-change: transform; }
html.fx-hs-on #bio .timeline-hint { display: none; }
.fx-hs-progress { display: none; }
html.fx-hs-on .fx-hs-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.fx-hs-year {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--accent);
  min-width: 2.4em;
}
.fx-hs-bar { position: relative; height: 1px; background: var(--line); }
.fx-hs-bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--accent); }

/* ---------- Diskografie-Reise ---------- */
html.fx-dj-on #discography .fx-dj { position: relative; }
html.fx-dj-on #discography .fx-dj-sticky {
  position: sticky;
  top: var(--fx-nav, 72px);
  height: calc(100vh - var(--fx-nav, 72px));
  height: calc(100svh - var(--fx-nav, 72px));
  overflow: hidden;
}
html.fx-dj-on #disco-wall {
  display: block !important;
  position: absolute; inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 40%;
}
html.fx-dj-on #disco-wall .disco-card {
  position: absolute;
  left: 50%; top: 46%;
  width: min(920px, 88vw);
  height: auto;
  display: grid !important;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  column-gap: 32px;
  align-content: start;
  padding: 18px;
  transition: border-color .25s ease !important;
  will-change: transform, opacity;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
html.fx-dj-on #disco-wall .disco-card > .disco-cover { grid-column: 1; grid-row: 1 / span 7; }
html.fx-dj-on #disco-wall .disco-card > :not(.disco-cover) { grid-column: 2; }
html.fx-dj-on #disco-wall .disco-title { font-size: clamp(30px, 3.4vw, 48px); }
html.fx-dj-on #disco-wall .disco-tracklist-inline li.empty { display: none; }
/* Kommende Karten: Inhalt abdunkeln, damit nur die vordere lesbar ist */
html.fx-dj-on #disco-wall .disco-card::before {
  content: ""; position: absolute; inset: -1px; z-index: 5; pointer-events: none;
  background: #07080b; opacity: var(--dim, 0); transition: none;
}
.fx-dj-progress { display: none; }
html.fx-dj-on #discography .fx-dj-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 4vh, 40px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 800px) {
  html.fx-dj-on #disco-wall .disco-card {
    width: min(360px, 86vw);
    display: flex !important;
    padding: 14px;
  }
  html.fx-dj-on #discography .fx-dj-progress { bottom: 28px; }
}

/* ---------- Band mobil: gleiche Reise, Mitglieder nacheinander ---------- */
html.fx-mj-on #members .fx-dj { position: relative; }
html.fx-mj-on #members .fx-dj-sticky {
  position: sticky;
  top: var(--fx-nav, 64px);
  height: calc(100vh - var(--fx-nav, 64px));
  height: calc(100svh - var(--fx-nav, 64px));
  overflow: hidden;
}
html.fx-mj-on #members-cards {
  display: block;
  position: absolute; inset: 0;
  margin: 0;
  perspective: 1100px;
  perspective-origin: 50% 40%;
}
html.fx-mj-on #members-cards .member-card {
  position: absolute;
  left: 50%; top: 45%;
  width: min(300px, 76vw);
  grid-column: auto;
  will-change: transform, opacity;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
html.fx-mj-on #members-cards .member-card .member-card-stage { aspect-ratio: 3 / 4; }
html.fx-mj-on #members-cards .member-card::before {
  content: ""; position: absolute; inset: -1px; z-index: 5; pointer-events: none;
  background: #07080b; opacity: var(--dim, 0);
}
html.fx-mj-on #members .fx-dj-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  position: absolute; left: 0; right: 0; bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
html.fx-mj-on #members .fx-hs-year { font-size: 26px; text-transform: uppercase; }

/* ---------- Filmkorn ---------- */
.fx-grain {
  position: fixed; inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fxGrain .9s steps(6) infinite;
}
@keyframes fxGrain {
  0% { transform: translate(0,0); }   20% { transform: translate(-3%,2%); }
  40% { transform: translate(2%,-4%); } 60% { transform: translate(-4%,-1%); }
  80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}
html.fx-no-grain .fx-grain { display: none; }


/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-wi { transform: none; transition: none; }
  .fx-grain { animation: none; }
  html.fx .gallery-cell.fx-clip { clip-path: none; transition: none; }
}