/* Selbst gehostete Schriften - keine Requests an Google Fonts (DSGVO). */
@import '@fontsource-variable/inter/index.css';
@import '@fontsource/archivo-black/latin.css';
@import 'tailwindcss';

@theme {
  --font-sans: 'Inter Variable', system-ui, -apple-system, sans-serif;
  --font-display: 'Archivo Black', 'Inter Variable', system-ui, sans-serif;

  /* Markenpalette, abgeleitet aus dem DJ-NIZZ-Artwork */
  --color-ink-950: #05070f;
  --color-ink-900: #0b1020;
  --color-ink-850: #0f1526;
  --color-ink-800: #151d33;
  --color-ink-700: #1f2a45;

  --color-gold-300: #f7d78a;
  --color-gold-400: #f0bf58;
  --color-gold-500: #e0a326;
  --color-gold-600: #b47c14;

  --color-laser-cyan: #2ee6d6;
  --color-laser-magenta: #e879f9;
  --color-laser-violet: #8b7bfb;
  --color-laser-lime: #a3e635;

  --animate-marquee: marquee 32s linear infinite;
  --animate-sweep: sweep 9s ease-in-out infinite;
  --animate-drift: drift 24s ease-in-out infinite alternate;
  --animate-cue: cue 2.2s ease-in-out infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes sweep {
  0%, 100% { transform: translateX(-50%) rotate(var(--beam-from)); opacity: 0.25; }
  50%      { transform: translateX(-50%) rotate(var(--beam-to)); opacity: 0.7; }
}

@keyframes drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@layer base {
  html {
    scroll-behavior: smooth;
    /* Fixierter Header darf verlinkte Sektionen nicht ueberdecken */
    scroll-padding-top: 5rem;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    background-color: var(--color-ink-950);
    color: --alpha(var(--color-white) / 90%);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background-color: var(--color-gold-400);
    color: var(--color-ink-950);
  }

  :focus-visible {
    outline: 2px solid var(--color-gold-400);
    outline-offset: 3px;
    border-radius: 2px;
  }
}

@utility text-balance-pretty {
  text-wrap: pretty;
}

/* Sanft einblenden, sobald ein Abschnitt in den Viewport scrollt.
   Ohne JS sichtbar - das Skript setzt data-reveal erst, wenn es laeuft. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal='pending'] {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  [data-reveal='shown'] {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
