/* ============================================================
   Animations — Keyframes + wiederverwendbare Animations-Klassen
   Konsumenten: alle Seiten

   Keyframes (verwendet in mehreren Komponenten):
   fade-up, fade-in, ken-burns, line-grow, float-slow

   Klassen:
   .stagger        Kinder zeitversetzt einblenden (bis zu 7 Items)
   .reveal         Scroll-Reveal (JS-getriggert via page.js)
   .kinetic-word   Wort-Reveal (JS-getriggert, Buchstaben-/Wort-Slide)
   .is-magnetic    Cursor-Following Buttons (JS in page.js)
   .is-tilt        Subtle 3D-Hover auf Cards
   ============================================================ */

/* ----- Keyframes ----- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@keyframes line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(2.5deg); }
  50%      { transform: translateY(-6px) rotate(2.5deg); }
}

/* ----- Stagger ----- */

.stagger > * {
  opacity: 0;
  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.10s; }
.stagger > *:nth-child(2) { animation-delay: 0.22s; }
.stagger > *:nth-child(3) { animation-delay: 0.34s; }
.stagger > *:nth-child(4) { animation-delay: 0.46s; }
.stagger > *:nth-child(5) { animation-delay: 0.58s; }
.stagger > *:nth-child(6) { animation-delay: 0.70s; }
.stagger > *:nth-child(7) { animation-delay: 0.82s; }

/* ----- Scroll-Reveal (JS-getriggert in page.js) ----- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Kinetic Typography ----- */

.kinetic-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
.kinetic-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
[data-kinetic].is-visible .kinetic-inner {
  transform: translateY(0);
}

/* ----- Magnetic Buttons (JS-Followup in page.js) ----- */

.is-magnetic {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ----- Tilt Cards ----- */

.is-tilt {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
@media (hover: hover) {
  .is-tilt:hover {
    transform: perspective(900px) rotateX(1.5deg) rotateY(-1.5deg) translateY(-4px);
  }
}

/* ----- Reduced Motion ----- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .stagger > * { opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .kinetic-inner { transform: none !important; }
  [data-parallax] { transform: none !important; }
}