/* ============================================================
   Animations — Cinematic Stack
   Reveals, Splits, Tickers, Tilts, Glow, Marquee
   ============================================================ */
@keyframes hero-zoom {
  0% { transform: scale(1.18); filter: blur(8px) brightness(0.4); }
  100% { transform: scale(1); filter: blur(0) brightness(0.5); }
}
@keyframes flicker-in {
  0%   { opacity: 0; }
  10%  { opacity: 0.4; }
  20%  { opacity: 0; }
  30%  { opacity: 0.7; }
  40%  { opacity: 0.2; }
  100% { opacity: 1; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,6,0,0.45), 0 0 24px rgba(225,6,0,0.25); }
  50%      { box-shadow: 0 0 0 14px rgba(225,6,0,0), 0 0 40px rgba(225,6,0,0.55); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes wipe-in-left {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes wipe-in-right {
  0%   { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes slide-up-stagger {
  0%   { transform: translateY(60px); opacity: 0; filter: blur(8px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes blink {
  0%,49%  { opacity: 1; }
  50%,100%{ opacity: 0; }
}
@keyframes shake-x {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

/* Scroll-Reveal — JS attaches .is-visible */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* Letter-Splitting — JS adds .word/.char
   white-space:nowrap auf .word damit Buchstaben innerhalb eines Wortes
   nicht einzeln umbrechen auf kleinen Screens */
.split .word {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.04em;
  white-space: nowrap;
}
.split .char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 700ms var(--ease-out);
}
.split.is-visible .char { transform: translateY(0); }
.split.is-visible .word .char:nth-child(2) { transition-delay: 30ms; }
.split.is-visible .word .char:nth-child(3) { transition-delay: 60ms; }
.split.is-visible .word .char:nth-child(4) { transition-delay: 90ms; }
.split.is-visible .word .char:nth-child(5) { transition-delay: 120ms; }
.split.is-visible .word .char:nth-child(6) { transition-delay: 150ms; }
.split.is-visible .word .char:nth-child(7) { transition-delay: 180ms; }

/* Magnetic-Hover via JS */
.magnet { will-change: transform; transition: transform var(--t-base) var(--ease-out); }

/* === Tilt-Cards (3D-Hover) === */
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--ease-out);
  will-change: transform;
}
.tilt > * { transform: translateZ(20px); }

/* === Glow-Pulse für CTA === */
.btn--pulse { animation: glow-pulse 2.4s var(--ease-out) infinite; }

/* === Float für Akzent-Elemente === */
.float { animation: float 3.6s var(--ease-out) infinite; }

/* === Cinematic Hero-Background === */
.hero__bg { animation: hero-zoom 1800ms var(--ease-out) both; }

/* === Wipe-Reveal === */
.wipe-l { animation: wipe-in-left 900ms var(--ease-out) both; }
.wipe-r { animation: wipe-in-right 900ms var(--ease-out) both; }

/* === Number-Beat (counter-style) === */
.beat { display: inline-block; transition: transform 200ms var(--ease-out); }
.beat.is-beat { transform: scale(1.18); }

/* === Section-Cinema-Reveal — Sections "kommen rein" beim Scrollen === */
.cinema {
  opacity: 0; transform: translateY(40px) scale(0.985);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
.cinema.is-visible { opacity: 1; transform: none; }

/* === Parallax-Layer === */
.parallax { will-change: transform; transition: transform 0.05s linear; }

/* === Hover-Glow auf Karten === */
.card--glow { position: relative; }
.card--glow::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  background: linear-gradient(135deg, var(--c-accent), transparent 60%);
  z-index: -1; opacity: 0; transition: opacity var(--t-base);
}
.card--glow:hover::after { opacity: 0.85; }

/* === BG-Grid-Pattern === */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* === Spotlight-Cursor (folgt der Maus) === */
.spotlight {
  position: relative; isolation: isolate;
}
.spotlight::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(225,6,0,0.18), transparent 40%);
  pointer-events: none; opacity: 0; transition: opacity var(--t-base);
  z-index: 0;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* Marquee fallback */
.marquee {
  display: flex; gap: var(--sp-7); white-space: nowrap;
  animation: ticker 32s linear infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > *, .split .char { opacity: 1; transform: none; }
  .ticker__track, .sponsors-strip__track, .marquee { animation: none; }
}