/* ==========================================================================
   animations.css – Keyframes und Reveal-Klassen
   ========================================================================== */

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes nodePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.4);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.4;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.3);
    }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes scrollDown {
    0%   { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    20% { opacity: 1; }
    50% {
        transform: translate(20px, -30px) scale(1);
    }
    80% { opacity: 0.6; }
    100% {
        opacity: 0;
        transform: translate(40px, -60px) scale(0.5);
    }
}

@keyframes ctaRingPulse {
    0%, 100% {
        opacity: 0.15;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes workflowPulse {
    0%   { left: 0; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes orbitRotate {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(180px); }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(180px); }
}

/* ----------------------------------------------------------
   HERO LOGO STROKE-ANIMATION
   42 Linien insgesamt: Octagon (1) + Herz (2) + Primärfacetten (3-18) + Sekundärfacetten (19-42)
   ---------------------------------------------------------- */
.hero-logo-svg .hero-logo-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 2.2s var(--ease-out-quint) forwards;
}

/* Octagon zuerst */
.hero-logo-svg .hero-logo-line-1  { animation-delay: 0.4s; animation-duration: 2.4s; }

/* Herz danach */
.hero-logo-svg .hero-logo-line-2  { animation-delay: 1.0s; animation-duration: 2.0s; }

/* Primäre Diamant-Facetten (lines 3-18) – schnellere Sequenz */
.hero-logo-svg .hero-logo-line-3,
.hero-logo-svg .hero-logo-line-4,
.hero-logo-svg .hero-logo-line-5,
.hero-logo-svg .hero-logo-line-6,
.hero-logo-svg .hero-logo-line-7,
.hero-logo-svg .hero-logo-line-8,
.hero-logo-svg .hero-logo-line-9,
.hero-logo-svg .hero-logo-line-10,
.hero-logo-svg .hero-logo-line-11,
.hero-logo-svg .hero-logo-line-12,
.hero-logo-svg .hero-logo-line-13,
.hero-logo-svg .hero-logo-line-14,
.hero-logo-svg .hero-logo-line-15,
.hero-logo-svg .hero-logo-line-16,
.hero-logo-svg .hero-logo-line-17,
.hero-logo-svg .hero-logo-line-18 { animation-delay: 1.5s; animation-duration: 1.4s; }

/* Sekundäre Facetten (lines 19-42) – kommen zum Schluss als feiner Schliff */
.hero-logo-svg .hero-logo-line-19,
.hero-logo-svg .hero-logo-line-20,
.hero-logo-svg .hero-logo-line-21,
.hero-logo-svg .hero-logo-line-22,
.hero-logo-svg .hero-logo-line-23,
.hero-logo-svg .hero-logo-line-24,
.hero-logo-svg .hero-logo-line-25,
.hero-logo-svg .hero-logo-line-26,
.hero-logo-svg .hero-logo-line-27,
.hero-logo-svg .hero-logo-line-28,
.hero-logo-svg .hero-logo-line-29,
.hero-logo-svg .hero-logo-line-30,
.hero-logo-svg .hero-logo-line-31,
.hero-logo-svg .hero-logo-line-32,
.hero-logo-svg .hero-logo-line-33,
.hero-logo-svg .hero-logo-line-34,
.hero-logo-svg .hero-logo-line-35,
.hero-logo-svg .hero-logo-line-36,
.hero-logo-svg .hero-logo-line-37,
.hero-logo-svg .hero-logo-line-38,
.hero-logo-svg .hero-logo-line-39,
.hero-logo-svg .hero-logo-line-40,
.hero-logo-svg .hero-logo-line-41,
.hero-logo-svg .hero-logo-line-42 { animation-delay: 2.1s; animation-duration: 1.2s; }

.hero-logo-svg .hero-logo-node {
    transform-origin: center;
    transform-box: fill-box;
    animation: nodePop 0.6s var(--ease-out-quint) forwards;
    opacity: 0;
}

.hero-logo-svg .hero-logo-node:nth-child(1)  { animation-delay: 0.5s; }
.hero-logo-svg .hero-logo-node:nth-child(2)  { animation-delay: 0.7s; }
.hero-logo-svg .hero-logo-node:nth-child(3)  { animation-delay: 0.9s; }
.hero-logo-svg .hero-logo-node:nth-child(4)  { animation-delay: 1.1s; }
.hero-logo-svg .hero-logo-node:nth-child(5)  { animation-delay: 1.3s; }
.hero-logo-svg .hero-logo-node:nth-child(6)  { animation-delay: 1.5s; }
.hero-logo-svg .hero-logo-node:nth-child(7)  { animation-delay: 1.7s; }
.hero-logo-svg .hero-logo-node:nth-child(8)  { animation-delay: 1.9s; }
.hero-logo-svg .hero-logo-node:nth-child(9)  { animation-delay: 2.1s; }
.hero-logo-svg .hero-logo-node:nth-child(10) { animation-delay: 2.3s; }

.hero-logo-glow {
    opacity: 0;
    animation: fadeIn 1.5s ease 2.5s forwards, glowPulse 5s ease-in-out 4s infinite;
}

/* ----------------------------------------------------------
   SCROLL REVEAL KLASSEN
   ---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out-quint),
                transform 0.8s var(--ease-out-quint);
}

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

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-quint),
                transform 0.8s var(--ease-out-quint);
}

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

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s var(--ease-out-quint),
                transform 0.8s var(--ease-out-quint);
}

.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s var(--ease-out-quint),
                transform 0.8s var(--ease-out-quint);
}

.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s var(--ease-out-quint),
                transform 0.8s var(--ease-out-quint);
}

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

/* Stagger-Delays für Listenanimationen */
.reveal[data-delay="100"]  { transition-delay: 0.1s; }
.reveal[data-delay="200"]  { transition-delay: 0.2s; }
.reveal[data-delay="300"]  { transition-delay: 0.3s; }
.reveal[data-delay="400"]  { transition-delay: 0.4s; }
.reveal[data-delay="500"]  { transition-delay: 0.5s; }
.reveal[data-delay="600"]  { transition-delay: 0.6s; }

/* Auto-stagger über CSS-Variable */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out-quint),
                transform 0.7s var(--ease-out-quint);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.0s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.48s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.56s; opacity: 1; transform: none; }

/* ----------------------------------------------------------
   REDUCED MOTION (PFLICHT)
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-logo-svg .hero-logo-line,
    .hero-logo-svg .hero-logo-node,
    .hero-content .eyebrow,
    .hero-content h1,
    .hero-content > p,
    .hero-actions,
    .hero-meta,
    .hero-logo-glow,
    .scroll-indicator {
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }

    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}