/* ═══════════════════════════════════════════════════════════════════
   KV-FX (Phase 46.X) — CSS-Layer für Reveals, Magnetic, Marquee
   Requires: kv-design.css (Tokens)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Scroll-Reveal Base */
.kv-reveal {
  opacity: 0;
  transition: opacity .7s var(--kv-ease-out, cubic-bezier(.22,1,.36,1)), transform .7s var(--kv-ease-out, cubic-bezier(.22,1,.36,1));
  will-change: opacity, transform;
}
.kv-reveal.kv-fade-up    { transform: translateY(24px); }
.kv-reveal.kv-fade-in    { transform: none; }
.kv-reveal.kv-scale-in   { transform: scale(.95); }
.kv-reveal.kv-slide-l    { transform: translateX(-40px); }
.kv-reveal.kv-slide-r    { transform: translateX(40px); }
.kv-reveal.kv-blur-in    { filter: blur(8px); }
.kv-reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: kv-reveal-in .01s; /* trigger für kvFx sound */
}
@keyframes kv-reveal-in { from { opacity: 1; } to { opacity: 1; } }

/* 2. Magnetic-Button Base */
.kv-magnetic {
  transition: transform .15s var(--kv-ease-out, cubic-bezier(.22,1,.36,1));
  will-change: transform;
}

/* 3. Glow-Reveal (für Hero-Akzent) */
.kv-glow-reveal {
  position: relative;
  display: inline-block;
}
.kv-glow-reveal::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side, var(--kv-green, #00ff9c) 0%, transparent 70%);
  opacity: 0;
  filter: blur(40px);
  transition: opacity .8s var(--kv-ease-out, cubic-bezier(.22,1,.36,1));
  z-index: -1;
}
.kv-reveal.kv-glow-reveal.is-in::before {
  opacity: 0.4;
}

/* 4. Particle Background */
.kv-bg-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
@keyframes kvBgFloat {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50%  { transform: translate(40px, -60px) scale(1.4); opacity: 1; }
  100% { transform: translate(0, -120px) scale(.8); opacity: 0; }
}

/* 5. Marquee */
.kv-marquee {
  display: flex;
  gap: 2rem;
}
@keyframes kvMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* 6. Floating Hero-Shapes (CSS-WebGL-Ersatz, kein Video nötig) */
.kv-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.kv-hero-bg::before,
.kv-hero-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  animation: kvHeroBlob 18s ease-in-out infinite alternate;
}
.kv-hero-bg::before {
  top: -10%; left: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, var(--kv-green, #00ff9c) 0%, transparent 70%);
}
.kv-hero-bg::after {
  bottom: -15%; right: -10%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, var(--kv-cyan, #22d3ee) 0%, transparent 65%);
  animation-delay: -9s;
}
@keyframes kvHeroBlob {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, 20px) scale(1.1); }
  100% { transform: translate(-20px, -30px) scale(.95); }
}

/* 7. Page-Transition (Slide+Fade beim Wechsel) */
.kv-page-transition {
  animation: kvPageIn .55s var(--kv-ease-out, cubic-bezier(.22,1,.36,1));
}
@keyframes kvPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* prefers-reduced-motion override */
@media (prefers-reduced-motion: reduce) {
  .kv-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .kv-bg-particles span { animation: none !important; opacity: 0.3 !important; }
  .kv-hero-bg::before, .kv-hero-bg::after { animation: none !important; }
  .kv-magnetic { transition: none !important; }
}