/* ═══════════════════════════════════════════════════════════
   AIM WebEngine — Animations v2
   Scroll Reveals, Stagger, Keyframes
   ═══════════════════════════════════════════════════════════ */

@layer animations {

/* ── Scroll Animation Base ───────────────────────────── */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower) var(--ease-smooth),
              transform var(--duration-slower) var(--ease-out);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Animation Variants ──────────────────────────────── */

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(24px);
}

[data-animate="fade-down"] {
  opacity: 0;
  transform: translateY(-24px);
}

[data-animate="fade-left"] {
  opacity: 0;
  transform: translateX(-24px);
}

[data-animate="fade-right"] {
  opacity: 0;
  transform: translateX(24px);
}

[data-animate="fade-in"] {
  opacity: 0;
  transform: none;
}

[data-animate="scale-up"] {
  opacity: 0;
  transform: scale(0.95);
}

[data-animate="clip-reveal"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1s var(--ease-out);
}

[data-animate="clip-reveal"].is-visible {
  clip-path: inset(0 0 0 0);
}

[data-animate="clip-reveal-up"] {
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1s var(--ease-out);
}

[data-animate="clip-reveal-up"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* Visible States für alle transform-basierten */
[data-animate="fade-up"].is-visible,
[data-animate="fade-down"].is-visible,
[data-animate="fade-left"].is-visible,
[data-animate="fade-right"].is-visible,
[data-animate="fade-in"].is-visible,
[data-animate="scale-up"].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Fibonacci Stagger Delays ────────────────────────── */
/* 80, 130, 210, 340, 450, 580, 720, 900ms            */

[data-stagger="1"] { transition-delay: 80ms; }
[data-stagger="2"] { transition-delay: 130ms; }
[data-stagger="3"] { transition-delay: 210ms; }
[data-stagger="4"] { transition-delay: 340ms; }
[data-stagger="5"] { transition-delay: 450ms; }
[data-stagger="6"] { transition-delay: 580ms; }
[data-stagger="7"] { transition-delay: 720ms; }
[data-stagger="8"] { transition-delay: 900ms; }

/* ── Text Reveal ─────────────────────────────────────── */

.text-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(80%);
  transition: opacity 0.5s var(--ease-smooth),
              transform 0.6s var(--ease-out);
}

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

/* ── Accent Text — statisch, keine Animation ─────────── */

.gradient-text {
  color: var(--color-primary);
}

/* ── Keyframe Animations ─────────────────────────────── */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.2);
  }
  50% {
    box-shadow: 0 0 24px rgba(var(--color-primary-rgb), 0.4),
                0 0 48px rgba(var(--color-primary-rgb), 0.1);
  }
}

@keyframes pulse-border {
  0%, 100% {
    border-color: rgba(var(--color-secondary-rgb), 0.2);
  }
  50% {
    border-color: rgba(var(--color-secondary-rgb), 0.6);
  }
}

@keyframes counter-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

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

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dash-draw {
  to { stroke-dashoffset: 0; }
}

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

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Hero Blob Float Animations — organic, slow, non-repeating feel */
@keyframes float-blob-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-10px, 15px) scale(0.97); }
  75% { transform: translate(20px, 10px) scale(1.02); }
}

@keyframes float-blob-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(-25px, 15px) scale(1.03); }
  60% { transform: translate(15px, -20px) scale(0.98); }
  80% { transform: translate(-10px, -5px) scale(1.01); }
}

@keyframes float-blob-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(15px, 20px) scale(1.06); }
  45% { transform: translate(-20px, -10px) scale(0.96); }
  70% { transform: translate(10px, -15px) scale(1.04); }
}

/* ── CSS Scroll-driven Animations (Progressive) ────── */

@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    will-change: transform, opacity;
  }
}

/* ── Logo Marquee ────────────────────────────────────── */

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* ── Timeline Animation ──────────────────────────────── */

.timeline-line {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s var(--ease-out);
}

.timeline-line.is-visible {
  transform: scaleY(1);
}

.timeline-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s var(--ease-smooth),
              transform 0.6s var(--ease-spring);
}

.timeline-node.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Glow Effects ────────────────────────────────────── */

.glow-pulse {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ── Reduced Motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
    clip-path: none;
  }

  .text-reveal .word {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marquee-track {
    animation: none;
  }

  .glow-pulse {
    animation: none;
  }

  .hero__blob {
    animation: none;
  }

  .scroll-progress {
    display: none;
  }
}

/* ── Motion Profile: Subtle (dezent, professionell) ───── */

[data-motion="subtle"] [data-animate] {
  transform: translateY(12px);
  transition-duration: 400ms;
}
[data-motion="subtle"] [data-animate="fade-up"] {
  transform: translateY(12px);
}
[data-motion="subtle"] [data-animate="fade-down"] {
  transform: translateY(-12px);
}
[data-motion="subtle"] [data-animate="fade-left"] {
  transform: translateX(-12px);
}
[data-motion="subtle"] [data-animate="fade-right"] {
  transform: translateX(12px);
}

/* ── Motion Profile: Bold (auffällig, dynamisch) ──────── */

[data-motion="bold"] [data-animate] {
  transform: translateY(40px);
  transition-duration: 1s;
}
[data-motion="bold"] [data-animate="fade-up"] {
  transform: translateY(40px);
}
[data-motion="bold"] [data-animate="fade-down"] {
  transform: translateY(-40px);
}
[data-motion="bold"] [data-animate="fade-left"] {
  transform: translateX(-40px);
}
[data-motion="bold"] [data-animate="fade-right"] {
  transform: translateX(40px);
}

/* ── Motion Profile: Minimal (fast keine Bewegung) ────── */

[data-motion="minimal"] [data-animate] {
  transform: none !important;
  transition: opacity 300ms ease;
}

} /* end @layer animations */