/* ============================================================
   EIFEL-KURIER – animations.css
   Intersection-Observer-Klassen, Hover-Effekte, Counter
   ============================================================ */

/* --- Basis: Elemente beginnen unsichtbar ------------------- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger-item {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal         { transform: translateY(30px); }
.reveal-left    { transform: translateX(-40px); }
.reveal-right   { transform: translateX(40px); }
.reveal-scale   { transform: scale(0.9); }
.stagger-item   { transform: translateY(24px); }

/* --- Sichtbar-Zustand (JS fügt .visible hinzu) ------------ */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.stagger-item.visible {
  opacity: 1;
  transform: none;
}

/* --- Stagger-Verzögerungen --------------------------------- */
.stagger-item:nth-child(1) { transition-delay: 0ms; }
.stagger-item:nth-child(2) { transition-delay: 100ms; }
.stagger-item:nth-child(3) { transition-delay: 200ms; }
.stagger-item:nth-child(4) { transition-delay: 300ms; }
.stagger-item:nth-child(5) { transition-delay: 400ms; }
.stagger-item:nth-child(6) { transition-delay: 500ms; }
.stagger-item:nth-child(7) { transition-delay: 600ms; }
.stagger-item:nth-child(8) { transition-delay: 700ms; }
.stagger-item:nth-child(9) { transition-delay: 800ms; }

/* --- Hero-Logo Einblendung --------------------------------- */
.hero-logo-wrap {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.hero-logo-wrap.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Hero-Inhalt ------------------------------------------- */
.hero-content .hero-badge,
.hero-content h1,
.hero-content .hero-sub,
.hero-content .hero-slogan,
.hero-content .hero-btns,
.hero-content .hero-phone {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero-content.loaded .hero-badge    { opacity: 1; transform: none; transition-delay: 0.2s; }
.hero-content.loaded h1             { opacity: 1; transform: none; transition-delay: 0.35s; }
.hero-content.loaded .hero-sub      { opacity: 1; transform: none; transition-delay: 0.5s; }
.hero-content.loaded .hero-slogan   { opacity: 1; transform: none; transition-delay: 0.6s; }
.hero-content.loaded .hero-btns     { opacity: 1; transform: none; transition-delay: 0.7s; }
.hero-content.loaded .hero-phone    { opacity: 1; transform: none; transition-delay: 0.85s; }
.hero-content.loaded .hero-logo-wrap {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.1s;
}

/* --- Kennzahlen-Counter ------------------------------------ */
.stat-number {
  transition: color 0.3s ease;
}

/* --- Motorsport-Diagonalstreifen --------------------------- */
.diagonal-stripe {
  position: relative;
  overflow: hidden;
}

.diagonal-stripe::after {
  content: '';
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  width: 80px;
  background: var(--color-light-green);
  transform: skewX(-8deg);
  opacity: 0.08;
  pointer-events: none;
}

/* --- Pulsierender Punkt (Live-Indikator) ------------------- */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

.pulse-indicator {
  position: relative;
  display: inline-block;
}

.pulse-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-light-green);
  animation: pulse-ring 1.5s ease-out infinite;
}

/* --- Glanz-Effekt auf Cards ------------------------------- */
@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(200%) skewX(-20deg); }
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );
  transition: none;
}

.service-card:hover::after {
  animation: shimmer 0.6s ease forwards;
}

/* --- Loading-Linie am Seitenanfang ------------------------- */
@keyframes loading-bar {
  from { width: 0; }
  to   { width: 100%; }
}

.page-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-light-green);
  z-index: 9999;
  animation: loading-bar 0.4s ease forwards;
}

/* --- Prefers-reduced-motion Override ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-item,
  .hero-logo-wrap,
  .hero-content .hero-badge,
  .hero-content h1,
  .hero-content .hero-sub,
  .hero-content .hero-slogan,
  .hero-content .hero-btns,
  .hero-content .hero-phone {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-content.loaded .hero-badge,
  .hero-content.loaded h1,
  .hero-content.loaded .hero-sub,
  .hero-content.loaded .hero-slogan,
  .hero-content.loaded .hero-btns,
  .hero-content.loaded .hero-phone,
  .hero-content.loaded .hero-logo-wrap {
    transition-delay: 0ms !important;
  }
}