/* ============================================================
   NICKINO TEMPLATE – ANIMATIONS
   Neon Glow, Pulse, Slide, Fade, Gradient Move
   ============================================================ */


/* ============================================================
   01) NEON PULSE (Buttons, Icons, Sticky)
   ============================================================ */
@keyframes neonPulse {
    0%   { box-shadow: 0 0 4px var(--neon-green); }
    50%  { box-shadow: 0 0 12px var(--neon-green-soft); }
    100% { box-shadow: 0 0 4px var(--neon-green); }
}


/* ============================================================
   02) LOGO PULSE (Mini-Logo, Header-Logo optional)
   ============================================================ */
@keyframes logoPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* ============================================================
   03) CYBER GLOW (Theme Toggle, Icons)
   ============================================================ */
@keyframes cyberGlow {
    0%   { filter: drop-shadow(0 0 2px var(--neon-green)); }
    50%  { filter: drop-shadow(0 0 8px var(--neon-green-soft)); }
    100% { filter: drop-shadow(0 0 2px var(--neon-green)); }
}


/* ============================================================
   04) MEGA-MENÜ GLOW BORDER
   ============================================================ */
@keyframes megaGlowBorder {
    0%   { box-shadow: 0 0 4px var(--neon-green); }
    50%  { box-shadow: 0 0 12px var(--neon-green-soft); }
    100% { box-shadow: 0 0 4px var(--neon-green); }
}


/* ============================================================
   05) STICKY NAV SLIDE-IN
   ============================================================ */
@keyframes stickySlideDown {
    0%   { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}


/* ============================================================
   06) FADE-IN (für Content, Bilder, Boxen)
   ============================================================ */
@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


/* ============================================================
   07) FADE-UP (für Scroll-Animationen)
   ============================================================ */
@keyframes fadeUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   08) GRADIENT MOVE (für Hover-Linien)
   ============================================================ */
@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}


/* ============================================================
   09) SMOOTH ROTATION (Icons)
   ============================================================ */
@keyframes rotateSmooth {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ============================================================
   10) WIGGLE (kleiner Bounce-Effekt)
   ============================================================ */
@keyframes wiggle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(3deg); }
    50%  { transform: rotate(-3deg); }
    75%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}


/* ============================================================
   11) UTILITY CLASSES (einfach nutzbar)
   ============================================================ */

.animate-neon {
    animation: neonPulse 2.8s ease-in-out infinite;
}

.animate-logo {
    animation: logoPulse 3.5s ease-in-out infinite;
}

.animate-cyber {
    animation: cyberGlow 3s linear infinite;
}

.animate-fade {
    animation: fadeIn .6s ease forwards;
}

.animate-fade-up {
    animation: fadeUp .6s ease forwards;
}

.animate-slide-down {
    animation: stickySlideDown .45s ease forwards;
}

.animate-rotate {
    animation: rotateSmooth 2s linear infinite;
}

.animate-wiggle:hover {
    animation: wiggle .4s ease;
}

.animate-gradient {
    animation: gradientMove 3s linear infinite;
    background-size: 200% 200%;
}