/* ==========================================================================
   Questia MC – animations.css
   Alle @keyframes sowie Lade-, Dauer-, Hover- und Scroll-Animationen
   (Ausnahme: Animationen der Nachtlandschaft stehen in landscape.css).
   Bewegung läuft nur bei „prefers-reduced-motion: no-preference“.
   Scroll-Animationen nutzen CSS Scroll-driven Animations (kein JavaScript);
   Browser ohne Unterstützung zeigen die Inhalte einfach statisch an.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Animierbare Custom Properties
   -------------------------------------------------------------------------- */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* --------------------------------------------------------------------------
   2. Keyframes
   -------------------------------------------------------------------------- */

/* Einblenden von unten */
@keyframes fade-up {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Neonröhre springt flackernd an */
@keyframes neon-on {
  0%      { opacity: 0; }
  8%      { opacity: 0.9; }
  10%     { opacity: 0.1; }
  18%     { opacity: 1; }
  20%     { opacity: 0.3; }
  26%,
  100%    { opacity: 1; }
}

/* Gleichmäßiges „Atmen“ des Leuchtens */
@keyframes neon-pulse {
  0%,
  100% {
    text-shadow: var(--glow-text);
  }
  50% {
    text-shadow:
      0 0 6px rgb(var(--c-questia-rgb) / 1),
      0 0 22px rgb(var(--c-questia-rgb) / 0.75),
      0 0 60px rgb(var(--c-questia-rgb) / 0.5);
  }
}

/* Glitch – kurzer Ausschlag alle paar Sekunden */
@keyframes glitch-idle {
  0%, 89%, 97%, 100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    translate: 0 0;
  }
  90% {
    opacity: 0.85;
    clip-path: inset(12% 0 58% 0);
    translate: calc(var(--glitch-dir) * 4px) 0;
  }
  92% {
    clip-path: inset(62% 0 14% 0);
    translate: calc(var(--glitch-dir) * -5px) 0;
  }
  94% {
    clip-path: inset(38% 0 40% 0);
    translate: calc(var(--glitch-dir) * 3px) 0;
  }
  96% {
    clip-path: inset(80% 0 4% 0);
    translate: calc(var(--glitch-dir) * -2px) 0;
  }
}

/* Glitch – Dauerschleife beim Hover */
@keyframes glitch-burst {
  0%   { clip-path: inset(10% 0 60% 0); translate: calc(var(--glitch-dir) * 4px) 0; }
  20%  { clip-path: inset(55% 0 25% 0); translate: calc(var(--glitch-dir) * -4px) 0; }
  40%  { clip-path: inset(30% 0 50% 0); translate: calc(var(--glitch-dir) * 2px) 0; }
  60%  { clip-path: inset(75% 0 5% 0);  translate: calc(var(--glitch-dir) * -3px) 0; }
  80%  { clip-path: inset(0 0 80% 0);   translate: calc(var(--glitch-dir) * 3px) 0; }
  100% { clip-path: inset(45% 0 35% 0); translate: calc(var(--glitch-dir) * -2px) 0; }
}

/* Sanftes Schweben */
@keyframes logo-float {
  0%,
  100% { translate: 0 0; }
  50%  { translate: 0 -0.6rem; }
}

/* Neon-Linien: Farbverlauf wandert langsam durch (genau eine Kachel → nahtlose Schleife) */
/* Kartenhintergrund gleitet langsam, wie beim Verschieben einer Karte */
@keyframes map-pan {
  from { transform: translate(-3%, -2%); }
  to   { transform: translate(3%, 2%); }
}

@keyframes line-flow {
  to { background-position: 200% 0; }
}

@keyframes line-flow-vertical {
  to { background-position: 0 200%; }
}

@keyframes line-flow-footer {
  to { background-position: 0 0, 200% 0; }
}

/* Pulsierender Ring um den Status-Punkt */
@keyframes dot-pulse {
  from {
    box-shadow: 0 0 8px var(--dot), 0 0 0 0 rgb(var(--dot-rgb) / 0.6);
  }
  to {
    box-shadow: 0 0 8px var(--dot), 0 0 0 0.5rem rgb(var(--dot-rgb) / 0);
  }
}

/* Runen fliegen wie am Zaubertisch zum Hebel */
@keyframes rune-fall {
  0%   { opacity: 0; translate: var(--x) var(--y); scale: 1; }
  25%  { opacity: 1; }
  100% { opacity: 0; translate: 0 0; scale: 0.4; }
}

/* Rotation für Neon-Rahmen (Karten, Avatare) */
@keyframes spin-angle {
  to {
    --angle: 360deg;
  }
}

/* Scroll: Element erscheint */
@keyframes reveal-up {
  from {
    opacity: 0;
    translate: 0 2.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Scroll: Überschrift wird von der Mitte aus „entschlüsselt“ */
@keyframes title-reveal {
  from {
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(-50% 50%);
  }
  to {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(-50% -20%);
  }
}

/* Scroll: Linie wächst */
@keyframes line-grow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* Scroll: Fortschrittsbalken */
@keyframes grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Scroll: Hero-Inhalt tritt zurück */
@keyframes hero-out {
  to {
    opacity: 0;
    translate: 0 -4rem;
  }
}

/* Scroll: Header wird beim Scrollen solide (Startzustand: transparent) */
@keyframes header-solidify {
  from {
    background-color: transparent;
    border-bottom-color: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
}

/* --------------------------------------------------------------------------
   3. Glitch-Effekt (Hero-Titel)
   -------------------------------------------------------------------------- */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  text-shadow: none;
  pointer-events: none;
}

.glitch::before {
  --glitch-dir: 1;
  color: var(--c-accent);
}

.glitch::after {
  --glitch-dir: -1;
  color: var(--c-questia);
}

/* --------------------------------------------------------------------------
   4. Lade- und Dauer-Animationen
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero-Inhalte erscheinen nacheinander */
  .hero__content > * {
    animation: fade-up var(--t-slow) var(--ease-out) both;
  }

  .hero__content > :nth-child(2) { animation-delay: 0.2s; }
  .hero__content > :nth-child(4) { animation-delay: 0.9s; }
  .hero__content > :nth-child(5) { animation-delay: 1.1s; }
  .hero__content > :nth-child(6) { animation-delay: 1.25s; }
  .hero__content > :nth-child(7) { animation-delay: 1.4s; }

  /* Logo schwebt nach dem Einblenden sanft */
  .hero__logo {
    animation:
      fade-up var(--t-slow) var(--ease-out) 0.1s both,
      logo-float 6s ease-in-out 1s infinite;
  }

  .hero__title {
    animation:
      neon-on 1.6s linear 0.3s both,
      neon-pulse 5s ease-in-out 2.5s infinite;
  }

  .glitch::before,
  .glitch::after {
    animation: glitch-idle 6s steps(1, end) 3s infinite;
  }

  .glitch::after {
    animation-delay: 3.05s;
  }

  .glitch:hover::before,
  .glitch:hover::after {
    opacity: 0.85;
    animation: glitch-burst 0.7s steps(1, end) infinite;
  }

  .glitch:hover::after {
    animation-direction: reverse;
  }

  /* Neon-Linien (Scroll-Balken und Titel-Linie kombiniert im Scroll-Block unten) */
  .section__title::after {
    animation: line-flow 5.3s linear infinite;
  }

  .map-section__bg {
    animation: map-pan 40s ease-in-out infinite alternate;
  }

  .pillar::before {
    animation: line-flow-vertical 5.3s linear infinite;
  }

  .site-footer::before {
    animation: line-flow-footer 8s linear infinite;
  }

  .badge__dot {
    animation: dot-pulse 1.6s ease-out infinite;
  }

  /* Runen fliegen dauerhaft zum Hebel (Hebel selbst schaltet nur bei Hover, siehe components.css) */
  .runes > span {
    animation: rune-fall 3.4s ease-in infinite;
  }

  /* Startpunkte weit gefächert: Runen kommen aus unterschiedlichen Winkeln */
  .runes > :nth-child(1)  { --x: -4.5rem; --y: -2.5rem; animation-delay: 1.5s; }
  .runes > :nth-child(2)  { --x: 3.8rem;  --y: -4rem;   animation-delay: 1.82s; }
  .runes > :nth-child(3)  { --x: -1.5rem; --y: -5rem;   animation-delay: 2.14s; }
  .runes > :nth-child(4)  { --x: 2.4rem;  --y: -2.2rem; animation-delay: 2.46s; }
  .runes > :nth-child(5)  { --x: -3.2rem; --y: -4.5rem; animation-delay: 2.78s; }
  .runes > :nth-child(6)  { --x: 4.6rem;  --y: -3rem;   animation-delay: 3.1s; }
  .runes > :nth-child(7)  { --x: -2.4rem; --y: -3.2rem; animation-delay: 3.42s; }
  .runes > :nth-child(8)  { --x: 1.2rem;  --y: -5.2rem; animation-delay: 3.74s; }
  .runes > :nth-child(9)  { --x: -4.8rem; --y: -4rem;   animation-delay: 4.06s; }
  .runes > :nth-child(10) { --x: 3rem;    --y: -4.8rem; animation-delay: 4.38s; }

  /* Rotierende Neon-Rahmen – laufen nur beim Hover/Fokus */
  .card::before {
    animation: spin-angle 4s linear infinite paused;
  }

  .card:hover::before,
  .card:has(.card__link:focus-visible)::before {
    animation-play-state: running;
  }

  .member__avatar {
    animation: spin-angle 5s linear infinite paused;
  }

  .member:hover .member__avatar {
    animation-play-state: running;
  }
}

/* --------------------------------------------------------------------------
   5. Scroll-Animationen (Scroll-driven Animations)
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  /* Fortschrittsbalken am oberen Rand */
  .scroll-progress {
    display: block;
    animation: grow-x linear both;
    animation-timeline: scroll(root);
  }

  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: grow-x linear both, line-flow 5.3s linear infinite;
      animation-timeline: scroll(root), auto;
    }
  }

  /* Header über dem Hero transparent, ab ~8rem Scrollweg solide */
  .site-header {
    animation: header-solidify linear both;
    animation-timeline: scroll(root);
    animation-range: 0 8rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Elemente erscheinen beim Hineinscrollen */
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }

    /* Sektions-Überschriften */
    .section__title {
      view-timeline: --title block;
      animation: title-reveal linear both;
      animation-timeline: --title;
      animation-range: entry 10% cover 35%;
    }

    .section__title::after {
      animation: line-grow linear both, line-flow 5.3s linear infinite;
      animation-timeline: --title, auto;
      animation-range: entry 30% cover 45%, normal;
    }

    /* Hero tritt beim Wegscrollen zurück */
    .hero__content {
      animation: hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85svh;
    }
  }
}

/* --------------------------------------------------------------------------
   6. Reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}