/* =======================================================================
 * 🎬 ANIMATIONS — Alle @keyframes und zugehörige Utility-Klassen
 * =======================================================================
 * DRY: Alle Animations-Definitionen an einem Ort.
 * ======================================================================= */

/* -----------------------------------------------------------------------
 * ⚡ GLITCH — Text "wackelt" wie ein Matrix-Fehler
 * ----------------------------------------------------------------------- */
@keyframes glitch {
    0%   { transform: translate(0); }
    20%  { transform: translate(-2px, 2px); }
    40%  { transform: translate(-2px, -2px); }
    60%  { transform: translate(2px, 2px); }
    80%  { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: var(--color-neon-blue);
    text-shadow: 2px 2px var(--color-neon-purple);
}

/* -----------------------------------------------------------------------
 * 🌊 GRID MOVE — Das Hintergrund-Gitter fährt nach unten
 * ----------------------------------------------------------------------- */
@keyframes grid-move {
    0%   { transform: rotateX(45deg) translate3d(0, 0, 0); }
    100% { transform: rotateX(45deg) translate3d(0, 40px, 0); }
}

/* -----------------------------------------------------------------------
 * 🔄 SPIN SLOW — Langsame Drehung (z.B. Vinyl-Icon)
 * ----------------------------------------------------------------------- */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

/* -----------------------------------------------------------------------
 * 📊 EQUALIZE — Audio-Visualizer Balken
 * ----------------------------------------------------------------------- */
@keyframes equalize {
    0%   { transform: scaleY(1); }
    50%  { transform: scaleY(3); }
    100% { transform: scaleY(1); }
}

/* -----------------------------------------------------------------------
 * 🔄 MARQUEE — Laufschrift für Song-Titel
 * ----------------------------------------------------------------------- */
@keyframes scroll-marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-marquee {
    display: inline-block;
    animation: scroll-marquee 10s linear infinite;
    padding-left: 100%;
}

/* -----------------------------------------------------------------------
 * 🎉 CONFETTI FALL — Konfetti fällt vom Himmel
 * ----------------------------------------------------------------------- */
@keyframes fall {
    to {
        transform: translateY(100vh) rotate(720deg);
    }
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #f00;
    animation: fall linear forwards;
    z-index: 9999;
    pointer-events: none;
}

/* -----------------------------------------------------------------------
 * 💡 BLINK — Cursor blinken im Terminal
 * ----------------------------------------------------------------------- */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.cursor-blink {
    animation: blink 1s step-end infinite;
}

/* -----------------------------------------------------------------------
 * ✨ FADE IN UP — Scroll-Reveal Animation (NEU)
 * ----------------------------------------------------------------------- */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staffelung für Kinder-Elemente */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* -----------------------------------------------------------------------
 * 🌈 HERO GRADIENT — Animierter Farbverlauf im Titel (NEU)
 * ----------------------------------------------------------------------- */
.hero-gradient-text {
    position: relative;
    background: linear-gradient(
        90deg,
        var(--color-neon-blue),
        var(--color-neon-purple),
        var(--color-neon-blue),
        var(--color-neon-purple),
        var(--color-neon-blue)
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-gradient 6s linear infinite;
}

@keyframes hero-gradient {
    0%   { background-position: 0% 50%; }
    100% { background-position: -300% 50%; }
}

/* -----------------------------------------------------------------------
 * 🚀 LOADING SCREEN — Boot Sequence (NEU)
 * ----------------------------------------------------------------------- */
@keyframes loading-fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    animation: loading-fade 0.5s ease-out 1.5s forwards;
    pointer-events: none;
}

.loading-screen__text {
    font-family: var(--font-mono);
    color: var(--color-neon-blue);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.loading-screen__bar {
    width: 200px;
    height: 2px;
    background: var(--border-default);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.loading-screen__bar-fill {
    width: 100%;
    height: 100%;
    background: var(--color-neon-blue);
    transform: scaleX(0);
    transform-origin: left;
    animation: load-fill 1.2s ease-out forwards;
}

@keyframes load-fill {
    to { transform: scaleX(1); }
}

/* -----------------------------------------------------------------------
 * 🫧 PULSE GLOW — Pulsierendes Leuchten (Avatar etc.)
 * ----------------------------------------------------------------------- */
@keyframes pulse-glow {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

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