/* =========================================================
   CBCoding.de — animations.css
   Keyframes, Glow-Pulse, Reveal- und Hover-Animationen
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Fade / Slide In on scroll ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

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

  .reveal-delay-1 { transition-delay: 0.08s; }
  .reveal-delay-2 { transition-delay: 0.16s; }
  .reveal-delay-3 { transition-delay: 0.24s; }

  /* ---------- Hero logo float ---------- */
  .hero-logo-wrap img {
    animation: float 6s ease-in-out infinite;
  }

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

  /* ---------- Neon pulse for glow accents ---------- */
  .pulse-blue { animation: pulseBlue 3.2s ease-in-out infinite; }
  .pulse-red { animation: pulseRed 3.2s ease-in-out infinite; }

  @keyframes pulseBlue {
    0%, 100% { box-shadow: 0 0 8px rgba(47, 215, 255, 0.35), 0 0 20px rgba(47, 215, 255, 0.12); }
    50% { box-shadow: 0 0 16px rgba(47, 215, 255, 0.65), 0 0 36px rgba(47, 215, 255, 0.28); }
  }

  @keyframes pulseRed {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 45, 85, 0.35), 0 0 20px rgba(255, 45, 85, 0.12); }
    50% { box-shadow: 0 0 16px rgba(255, 45, 85, 0.65), 0 0 36px rgba(255, 45, 85, 0.28); }
  }

  /* ---------- Ambient background drift ---------- */
  .bg-glow {
    background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100%;
    animation: drift 22s ease-in-out infinite;
  }

  @keyframes drift {
    0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
    50% { background-position: 8% 12%, 92% 10%, 46% 92%, 0 0; }
  }

  /* ---------- Blinking cursor for typing effect ---------- */
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  /* ---------- Nav underline / link glow already handled via transition in style.css ---------- */

  /* ---------- Icon micro-bounce on card hover ---------- */
  .card:hover .icon {
    animation: iconBounce 0.6s ease;
  }

  @keyframes iconBounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
    60% { transform: translateY(1px); }
    100% { transform: translateY(0); }
  }

  /* ---------- Button glow sweep ---------- */
  .btn {
    position: relative;
    overflow: hidden;
  }

  .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
  }

  .btn:hover::after {
    left: 130%;
  }

  /* ---------- Mobile menu slide ---------- */
  .nav-links.is-open {
    animation: slideDown 0.35s ease forwards;
  }

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

/* Respect reduced motion: disable non-essential animation, keep instant states */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}