/* ════════════════════════════════════════════════════════
   DIANZU · Electric Nocturne
   Plain CSS, mobile-first, kein Framework
   ════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --void-black:     #080510;
  --voltage-pink:   #FF3D9A;
  --plasma-cyan:    #46E0FF;
  --spectral-white: #F4F6FF;

  /* Aliase */
  --base:    var(--void-black);
  --primary: var(--voltage-pink);
  --accent:  var(--plasma-cyan);
  --text:    var(--spectral-white);

  /* Abgeleitet */
  --muted:  rgba(244, 246, 255, .58);
  --border: rgba(70, 224, 255, .14);

  /* Fonts */
  --font-display: 'Sora', sans-serif;
  --font-body:    'Sora', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Layout */
  --nav-h: 64px;
  --maxw: 1080px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Logo-Aura (Winkel, Intensität & Dicke per JS gesetzt) */
  --glow-angle:      0deg;
  --glow-intensity:  0;
  --glow-spread:     0.12;   /* 0 = schmal (nah am Logo), 1 = breit (Maus weit weg) */
  --glow-brightness: 1.15;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--base);
  scroll-behavior: auto;         /* JS übernimmt die easing-Animation */
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--base);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dezenter Aurora-Hintergrund über die ganze Seite */
body::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  background:
    radial-gradient(40vmax 40vmax at 15% 8%, rgba(255, 61, 154, .10), transparent 60%),
    radial-gradient(46vmax 46vmax at 88% 22%, rgba(70, 224, 255, .10), transparent 62%),
    radial-gradient(50vmax 50vmax at 50% 110%, rgba(255, 61, 154, .06), transparent 60%);
  pointer-events: none;
}

img, svg, iframe { display: block; max-width: 100%; }

::selection { background: var(--voltage-pink); color: var(--spectral-white); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--plasma-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─────────────── Wiederverwendbar ─────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.section {
  padding: clamp(72px, 12vh, 140px) var(--gutter);
}

.section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.08;
  font-size: clamp(2rem, 7vw, 3.4rem);
  margin: 14px 0 0;
}

.section__lead {
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  max-width: 46ch;
  margin-top: 18px;
}

/* ════════════════ NAVIGATION ════════════════ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter);
  background: rgba(8, 5, 16, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
  /* erscheint nach Hero-Animation, per JS .is-ready */
  opacity: 0;
  transform: translateY(-100%);
}
.nav.is-ready {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .25s, transform .5s ease .25s, background .3s ease, border-color .3s ease;
}
.nav.is-scrolled {
  background: rgba(8, 5, 16, .82);
  border-bottom-color: var(--border);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.nav__logo {
  height: 26px;
  width: auto;
  aspect-ratio: 572 / 976;
  color: var(--spectral-white);
}
.nav__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
}

.nav__links {
  display: flex;
  gap: clamp(14px, 2.4vw, 30px);
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 2px;
  position: relative;
  transition: color .2s ease;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--voltage-pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav__links a:hover { color: var(--text); }
.nav__links a.is-active { color: var(--voltage-pink); }
.nav__links a.is-active::after { transform: scaleX(1); }

.nav__lang {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-btn {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  background: none;
  border: none;
  color: rgba(244, 246, 255, .4);
  cursor: pointer;
  padding: 4px 2px;
  transition: color .2s ease;
}
.lang-btn:hover { color: var(--muted); }
.lang-btn.is-active { color: var(--spectral-white); }
.nav__lang-sep { color: rgba(244, 246, 255, .25); font-size: .65rem; }

/* ════════════════ HERO ════════════════ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 80px;
  position: relative;
}

.hero__logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 34vw, 260px);
  aspect-ratio: 572 / 976;
  margin-bottom: clamp(24px, 5vh, 48px);
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) both;
}

.hero__logo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: var(--spectral-white);
  filter: drop-shadow(0 0 22px rgba(70, 224, 255, .18));
}

/* Regenbogen-Bogen UM das Logo herum (nie im Logo), folgt der Maus */
.hero__glow {
  position: absolute;
  z-index: 1;
  /* Großer Kreis, damit der Bogen klar außerhalb der hohen Logo-Kontur liegt */
  width: 360%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Einzelner Bogen, 162°–198° = 36° = max. 10 % des Umfangs — nie ein voller Kreis */
  /* Fester Bogen unten (180°), Ausrichtung kommt aus transform:rotate → GPU-glatt */
  /* Diffuser Verlauf: Spectral White → Voltage Pink → Plasma Cyan, weiche Enden */
  background: conic-gradient(
    from 0deg,
    transparent              0deg,
    transparent            156deg,
    rgba(244, 246, 255, 0) 158deg,
    rgba(244, 246, 255, .5)171deg,
    rgba(255, 61, 154, .6) 180deg,
    rgba(70, 224, 255, .5) 189deg,
    rgba(70, 224, 255, 0)  202deg,
    transparent            204deg,
    transparent            360deg
  );
  opacity: var(--glow-intensity);
  filter: blur(38px) brightness(var(--glow-brightness));
  transform: rotate(var(--glow-angle));
  transform-origin: center;
  /* Schnittmenge zweier Masken:
     1) kreisförmiger Ring (closest-side) → gekrümmte Innen-/Außenkante, folgt dem Kreis;
        Dicke wächst mit --glow-spread (Maus-Distanz)
     2) breite Ellipse → begrenzt die Bogenlänge und lässt die Enden weich/dünn auslaufen
     Ergebnis: gekrümmter, mittig dicker Bogen mit spitzen Enden (kein gerader Strich). */
  -webkit-mask:
    radial-gradient(closest-side,
      transparent     0%,
      transparent     calc(79% - var(--glow-spread) * 5%),
      rgba(0,0,0, .95)84%,
      transparent     calc(89% + var(--glow-spread) * 5%)),
    radial-gradient(14% 22% at 50% 84%,
      #000        0%,
      #000       32%,
      transparent 100%);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(closest-side,
      transparent     0%,
      transparent     calc(79% - var(--glow-spread) * 5%),
      rgba(0,0,0, .95)84%,
      transparent     calc(89% + var(--glow-spread) * 5%)),
    radial-gradient(14% 22% at 50% 84%,
      #000        0%,
      #000       32%,
      transparent 100%);
          mask-composite: intersect;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero__word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  font-size: clamp(2.6rem, 13vw, 6rem);
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) .12s both;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(.62rem, 2.4vw, .76rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 18px;
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) .24s both;
}

.hero__tag {
  color: var(--muted);
  font-size: clamp(.95rem, 3vw, 1.15rem);
  margin-top: 14px;
  animation: rise 1s cubic-bezier(.2, .7, .2, 1) .34s both;
}

.hero__cue {
  position: absolute;
  bottom: clamp(18px, 4vh, 34px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  animation: fade 1s ease 1s both;
}
.hero__cue-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.hero__cue-arrow {
  width: 18px; height: 18px;
  border-right: 2px solid var(--plasma-cyan);
  border-bottom: 2px solid var(--plasma-cyan);
  transform: rotate(45deg);
  animation: bob 1.8s ease-in-out infinite;
}

/* ════════════════ MUSIC ════════════════ */

/* ── Swipebares Cover-Karussell ── */
.carousel {
  position: relative;
  margin: clamp(32px, 6vh, 52px) auto 0;
  max-width: 420px;
}
.carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 18px;
  /* Scrollbar dezent ausblenden */
  scrollbar-width: none;
  cursor: grab;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }

.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
}
.carousel__slide iframe {
  width: 100%;
  border: 0;
  border-radius: 14px;
  display: block;
  background: #110c24;
}

.carousel__btn {
  position: absolute;
  top: calc(50% - 9px);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .02);
  color: var(--spectral-white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, opacity .2s ease, box-shadow .3s ease;
}
.carousel__btn:hover,
.carousel__btn:focus-visible {
  background: rgba(255, 61, 154, .06);
  box-shadow:
    0 0 18px rgba(255, 61, 154, .42),
    0 0 32px rgba(255, 61, 154, .20);
}
.carousel__btn:active { transform: translateY(-50%) scale(.94); }
.carousel__btn--prev { left: -64px; }
.carousel__btn--next { right: -64px; }
.carousel__btn[disabled] { opacity: 0; pointer-events: none; }

/* Touch-Geräte: keine Pfeile, nur Swipe */
@media (hover: none), (pointer: coarse) {
  .carousel__btn { display: none; }
}

.music__platforms-label { margin-top: clamp(40px, 7vh, 64px); }

.platforms {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.platforms a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .02);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.platforms svg { width: 20px; height: 20px; fill: currentColor; }
.platforms a:hover,
.platforms a:focus-visible {
  color: var(--text);
  background: rgba(70, 224, 255, .06);
  transform: translateY(-2px);
  /* blauer Glow statt Rahmen */
  box-shadow: 0 0 22px rgba(70, 224, 255, .35), 0 8px 26px rgba(70, 224, 255, .22);
}

/* ════════════════ COLLABS ════════════════ */

.collab-list {
  list-style: none;
  margin-top: clamp(36px, 7vh, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 8vh, 88px);
}

.collab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
}
.collab:nth-child(even) { grid-template-columns: 1fr auto; }
.collab:nth-child(even) .collab__portrait { order: 2; }

.collab__portrait {
  width: clamp(116px, 24vw, 156px);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 22px;
  /* rahmenlos: weiche Kanten, fließt in den Hintergrund */
  -webkit-mask: radial-gradient(125% 125% at 50% 42%, #000 60%, transparent 100%);
          mask: radial-gradient(125% 125% at 50% 42%, #000 60%, transparent 100%);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .55s ease;
}
.collab__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.03);
}
.collab:hover .collab__portrait {
  transform: scale(1.05);
  /* Rainbow-Glow: Plasma Cyan → Spectral White → Voltage Pink, folgt der Maskenform */
  filter:
    drop-shadow(0 0  5px rgba( 70, 224, 255, .68))
    drop-shadow(0 0 13px rgba(244, 246, 255, .50))
    drop-shadow(0 0 24px rgba(255,  61, 154, .60));
}

.collab__body {
  /* Einheitliche fixe Breite für alle Collab-Textblöcke */
  max-width: 660px;
  min-width: 0;
}
/* Gerade Items: Portrait rechts → Body an die rechte Kante der 1fr-Spalte schieben,
   damit Text direkt vor dem Portrait endet (kein loser Abstand links) */
.collab:nth-child(even) .collab__body {
  margin-left: auto;
}

/* dezent-coole Inline-Track-Links: Text bleibt weiß, minimaler Glow nach unten bei Hover */
.t-link {
  color: var(--spectral-white);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: text-shadow .2s ease;
}
.t-link:hover,
.t-link:focus-visible {
  color: var(--spectral-white);
  /* subtiler Rainbow-Glow: Plasma Cyan → Spectral White → Voltage Pink */
  text-shadow:
    0 0  5px rgba( 70, 224, 255, .42),
    0 3px 9px rgba(244, 246, 255, .28),
    0 5px 16px rgba(255,  61, 154, .34);
}

.collab__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  margin-bottom: 12px;
}
/* Rhythmischer Wechsel: jede zweite Kollaboration in Voltage Pink */
.collab:nth-child(even) .collab__tag {
  color: var(--voltage-pink);
  border-color: rgba(255, 61, 154, .32);
}

/* Pink-Variante der Eyebrow für einen bewussten Akzentwechsel */
.eyebrow--pink { color: var(--voltage-pink); }
.collab__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 2.6rem);
  line-height: 1.1;
}
.collab__text {
  color: var(--muted);
  margin-top: 12px;
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
}

/* ════════════════ ABOUT ════════════════ */

.about__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}
.about__portrait {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  width: 100%;
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  /* rahmenlos: weiche Kanten, fügt sich nicht kantig ein */
  -webkit-mask: radial-gradient(130% 130% at 50% 40%, #000 56%, transparent 100%);
          mask: radial-gradient(130% 130% at 50% 40%, #000 56%, transparent 100%);
}
.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(1.05) contrast(1.02);
}
.about__text {
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  color: rgba(244, 246, 255, .82);
  margin-top: 20px;
}
.about__text + .about__text { margin-top: 16px; }

.about__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 12px 20px;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .02);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--text);
  transition: transform .2s ease, background .2s ease, box-shadow .3s ease;
}
.about__social svg { width: 22px; height: 22px; fill: var(--spectral-white); }
/* Originales Instagram-Gradient-Logo */
.about__social .ig-logo { fill: none; }
.about__social .ig-logo path { fill: url(#ig-grad); }
.about__social:hover,
.about__social:focus-visible {
  background: rgba(255, 255, 255, .04);
  transform: translateY(-2px);
  /* Glow folgt der Pill-Form des Buttons, kein elliptischer Blur-Ring */
  box-shadow:
    0 0 22px rgba(70, 224, 255, .30),
    0 8px 26px rgba(255, 61, 154, .22);
}

/* ════════════════ FOOTER ════════════════ */

.footer {
  padding: clamp(48px, 8vh, 80px) var(--gutter) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: rgba(8, 5, 16, .6);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .04em;
}
.footer__logo {
  height: 24px;
  aspect-ratio: 572 / 976;
  color: var(--spectral-white);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.footer__links a {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .2s ease;
}
.footer__links a:hover { color: var(--plasma-cyan); }
.footer__copy {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(244, 246, 255, .4);
  width: 100%;
}

/* ════════════════ CURSOR-TOGGLE · CANVAS · TOAST ════════════════ */

/* Toggle-Button — sitzt zwischen DE|EN und dem Cursor-Icon */
.cursor-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: rgba(244, 246, 255, .4);
  cursor: pointer;
  padding: 4px 2px;
  opacity: 0;           /* JS zeigt ihn nur auf non-touch */
  transition: color .25s ease, filter .25s ease, opacity .35s ease;
}
.cursor-toggle.is-active {
  color: var(--plasma-cyan);
  filter: drop-shadow(0 0 6px rgba(70, 224, 255, .52));
}
.cursor-toggle:not(.is-active):hover { color: var(--muted); }

/* Gruppe: Toggle + Label, Bezugsrahmen für den bündigen Tooltip */
.cursor-toggle-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Label rechts neben dem Toggle (wird per JS eingefügt) */
.cursor-toggle-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 246, 255, .4);
  white-space: nowrap;
  transition: color .25s ease;
}
.cursor-toggle.is-active + .cursor-toggle-label { color: var(--plasma-cyan); }

/* Tooltip: dark glass, bündig mit Toggle (links) und Label (rechts), kein Rand/Glow */
.cursor-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 200;
  padding: 9px 13px;
  background: rgba(8, 5, 16, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* sichtbare Box im Corporate-Style: feiner Rahmen + neutraler (farbloser) Schatten */
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  /* langsam ein- und ausblenden */
  transition: opacity .5s ease;
}
.cursor-toggle-group:hover .cursor-tip,
.cursor-toggle-group:focus-within .cursor-tip,
.cursor-tip.is-hint {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cursor-toggle { display: none !important; }
  .cursor-toggle-label { display: none !important; }
}
@media (max-width: 720px) {
  .cursor-toggle-label { display: none; }
}

/* Canvas läuft als unsichtbare fixed-Ebene über allem (außer Nav) */
#cursorCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

/* Onboarding-Toast: kein Rahmen, blurred dark glass */
.cursor-toast {
  position: fixed;
  top: calc(var(--nav-h) + 14px);
  right: var(--gutter);
  z-index: 200;
  padding: 11px 18px;
  background: rgba(8, 5, 16, .86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  white-space: nowrap;
}
.cursor-toast.is-visible {
  opacity: 1;
  transform: none;
}

/* ════════════════ SCROLL-REVEAL ════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
/* Langsames Ausblenden nur für untere Elemente beim Hochscrollen */
.reveal.is-leaving {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.35s cubic-bezier(.2, .7, .2, 1), transform 1.35s cubic-bezier(.2, .7, .2, 1);
}

/* ════════════════ KEYFRAMES ════════════════ */

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .9; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: .4; }
}

/* ════════════════ RESPONSIVE ════════════════ */

@media (max-width: 720px) {
  :root { --nav-h: 58px; }

  .nav__name { display: none; }

  .collab,
  .collab:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: start;
  }
  .collab:nth-child(even) .collab__portrait { order: 0; }
  .collab__portrait { width: clamp(104px, 30vw, 132px); }

  .about__inner { grid-template-columns: 1fr; }
  .about__portrait {
    position: static;
    width: clamp(160px, 52vw, 240px);
    justify-self: start;
  }

  .platforms a { padding: 11px 15px; font-size: .68rem; }
}

@media (max-width: 420px) {
  .platforms { gap: 9px; }
  .platforms a { flex: 1 1 calc(50% - 9px); justify-content: center; }
}

/* Touch / coarse pointer: statischer Bogen oben am Logo, keine Bewegung */
@media (hover: none), (pointer: coarse) {
  .hero__glow {
    --glow-angle: 180deg; /* Bogen zeigt nach oben */
    --glow-brightness: 1.5;
    opacity: .6;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Kein bewegter Effekt: statischer Bogen oben am Logo */
  .hero__glow { --glow-angle: 180deg; --glow-intensity: .5; }
}