/* =========================================================
   Grrxie – animations.css
   ========================================================= */

/* ========== Keyframes ========== */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(31, 214, 156, 0));
    }
    50% {
        transform: scale(1.025);
        filter: drop-shadow(0 0 18px rgba(31, 214, 156, 0.4));
    }
}

@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

@keyframes scrollWheel {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(10px); }
}

/* ========== Background ========== */
.bg {
    animation: fadeIn 2.5s ease-out both;
}

/* ========== Hero ========== */
.hero-inner {
    animation: fadeInUp 1.4s ease-out 0.2s both;
}

.hero-logo {
    animation: floatLogo 6s ease-in-out infinite;
}

.hero h1 .gradient-text {
    display: inline-block;
    animation:
        subtlePulse 8s ease-in-out infinite,
        gradientMove 14s ease-in-out infinite;
}

/* ========== Scroll Reveal ==========
   Nur aktiv, wenn JS läuft (Klasse .js am <html>),
   damit ohne JS alle Inhalte sichtbar bleiben. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--reveal-delay, 0s);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ========== Performance Hints ========== */
.tags .tag {
    will-change: transform;
}

/* ========== Motion Accessibility ========== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}