/* ============================================================
   PVT Schweiz – Scroll-Animationen
   Intersection Observer triggert .is-visible
   ============================================================ */

/* ── Basis: alle animierbaren Elemente starten unsichtbar ── */
[data-animate] {
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* ── Varianten ── */
[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(-50px); }
[data-animate="fade-right"] { transform: translateX(50px); }
[data-animate="fade-in"]    { transform: none; }
[data-animate="scale-up"]   { transform: scale(.92); }

/* ── Verzögerungen für gestaffelte Animationen ── */
[data-delay="100"] { transition-delay: .10s; }
[data-delay="200"] { transition-delay: .20s; }
[data-delay="300"] { transition-delay: .30s; }
[data-delay="400"] { transition-delay: .40s; }
[data-delay="500"] { transition-delay: .50s; }
[data-delay="600"] { transition-delay: .60s; }

/* ── Hero-Animationen (sofort beim Laden, kein Observer nötig) ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-label   { animation: heroFadeUp .6s ease .1s both; }
.hero h1      { animation: heroFadeUp .6s ease .25s both; }
.hero p       { animation: heroFadeUp .6s ease .40s both; }
.hero-btns    { animation: heroFadeUp .6s ease .55s both; }

/* ── Pulse-Animation für WhatsApp-Button ── */
@keyframes whatsappPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-btn { animation: whatsappPulse 2.5s ease-out 3s infinite; }

/* ── Hover-Lift für Kacheln ── */
.service-card,
.card-elevated,
.ref-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

/* ── Zähler-Animationen (Zahlen hochzählen) ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.counter-item { animation: countUp .5s ease both; }

/* ── USP-Bar Slide-in ── */
@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.usp-item:nth-child(1) { animation: slideInFromLeft .5s ease .1s both; }
.usp-item:nth-child(2) { animation: slideInFromLeft .5s ease .2s both; }
.usp-item:nth-child(3) { animation: slideInFromLeft .5s ease .3s both; }
.usp-item:nth-child(4) { animation: slideInFromLeft .5s ease .4s both; }

/* ── Smooth Nav-Underline ── */
.nav-menu a::after {
  content: '';
  display: block;
  height: 3px;
  background: var(--sky);
  transform: scaleX(0);
  transition: transform .2s ease;
  margin-top: -3px;
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
  transform: scaleX(1);
}
/* Wir lassen border-bottom aus style.css weg und nutzen ::after stattdessen */
.nav-menu a {
  border-bottom: none;
}

/* ── Page-Transition (subtil) ── */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main { animation: pageFadeIn .3s ease; }

/* ── Prefers-Reduced-Motion: alle Animationen deaktivieren ── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .hero-label, .hero h1, .hero p, .hero-btns,
  .usp-item,
  .whatsapp-btn,
  main {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}