/* ============================================================
   motion.css — Effekte (Glitch / Print-Offset) + Reduced Motion
   ------------------------------------------------------------
   Dark Mode  -> digitaler Glitch (RGB-Split)
   Light Mode -> Print-Offset (Xerox-Misregister)
   Beide Effekte triggern nur auf Hover/Focus, nie als
   Daueranimation.
   ============================================================ */

/* ---------- Fade-In on scroll (Intersection Observer Hook) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Glitch (Dark Mode default) ---------- */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch:hover,
.glitch:focus-visible {
  animation: glitch-shake 240ms steps(2, end) 1;
  text-shadow:
    2px 0 var(--accent),
    -2px 0 var(--accent-secondary);
}

@keyframes glitch-shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-1px, 0); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Print-Offset (Light Mode override) ---------- */
:root[data-theme="light"] .glitch:hover,
:root[data-theme="light"] .glitch:focus-visible {
  animation: none;
  text-shadow:
    1px 1px 0 var(--accent),
    -1px -1px 0 var(--accent-secondary);
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .glitch:hover,
  .glitch:focus-visible {
    animation: none;
    text-shadow: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}