/* ============================================================
   QRENA Animations – Warm Ember Micro-Interactions
   Lädt als letztes CSS (nach qrena-components.css)
   Stand: 2026-03
============================================================ */

/* ── ORANGE GLOW PULSE (Hero CTA) ─────────────
   3s sanfter Loop – stoppt beim Hover
   Einladend, nicht aufdringlich
─────────────────────────────────────────────── */
@keyframes qrena-glow-pulse {
  0%, 100% {
    box-shadow: 0 4px 24px rgba(249, 115, 22, 0.30);
  }
  50% {
    box-shadow:
      0 4px 36px rgba(249, 115, 22, 0.55),
      0 0 0 4px rgba(249, 115, 22, 0.10);
  }
}

.hero-cta-primary {
  animation: qrena-glow-pulse 3s ease-in-out infinite;
}

.hero-cta-primary:hover {
  animation: none;
}

/* ── SCROLL REVEAL ─────────────────────────────
   Cards und Sections sanft einblenden
   cubic-bezier(0.22, 1, 0.36, 1) = spring-ähnlich
─────────────────────────────────────────────── */
@keyframes qrena-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-reveal] {
  opacity: 0;
}

[data-reveal].revealed {
  animation: qrena-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger: Grid-Kinder erscheinen versetzt */
[data-reveal]:nth-child(2).revealed { animation-delay: 0.08s; }
[data-reveal]:nth-child(3).revealed { animation-delay: 0.16s; }
[data-reveal]:nth-child(4).revealed { animation-delay: 0.24s; }
[data-reveal]:nth-child(5).revealed { animation-delay: 0.32s; }

/* ── CARD HOVER ────────────────────────────────
   Nur border + shadow – KEIN translateY
─────────────────────────────────────────────── */
.card {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* ── PRICING: Nicht-Featured leichter Lift ───── */
.pricing-card:not(.featured) {
  transition:
    transform 0.2s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.pricing-card:not(.featured):hover {
  transform: translateY(-2px);
}

/* Featured bleibt stabil (ist schon hervorgehoben) */
.pricing-card.featured {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* ── BUTTON PRESS FEEDBACK ──────────────────── */
.btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}

/* ── NAV LINK UNDERLINE SLIDE ────────────────── */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--orange-500);
  border-radius: 1px;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ── SECTION REVEAL ─────────────────────────── */
@keyframes qrena-section-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── REDUCED MOTION ─────────────────────────────
   Respektiert Systemeinstellung – WCAG 2.1 2.3.3
─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Alle Animationen deaktivieren */
  [data-reveal] {
    opacity: 1 !important;
    animation: none !important;
  }

  .hero-cta-primary {
    animation: none !important;
  }

  .nav-link::after {
    transition: none !important;
  }

  .pricing-card:not(.featured):hover {
    transform: none !important;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}