/* PFALLER – Animationen (gemeinsam für alle Seiten). 2026-06
   Bewusst additiv & über eigene Klassen, um bestehende Styles nicht zu stören. */
@media (prefers-reduced-motion: no-preference) {

  /* ── Scroll-Reveal (JS vergibt .pf-reveal nur an Below-the-fold-Elemente) ── */
  .pf-reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
  .pf-reveal.pf-in { opacity: 1; transform: none; }
  .pf-reveal.pf-zoom { transform: translateY(24px) scale(.97); }
  .pf-reveal.pf-zoom.pf-in { transform: none; }
  .pf-d1 { transition-delay: .07s; }
  .pf-d2 { transition-delay: .14s; }
  .pf-d3 { transition-delay: .21s; }
  .pf-d4 { transition-delay: .28s; }
  .pf-d5 { transition-delay: .35s; }

  /* ── Karten: dezentes Anheben bei Hover ── */
  .home-service-card, .lp-card, .why-card, .svc-card, .wfl-card, .wfl-feature-card,
  .about-network-card, .sidebar-card, .step, .rv-slide, .tm-card {
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease !important;
  }
  .home-service-card:hover, .lp-card:hover, .why-card:hover, .svc-card:hover,
  .wfl-card:hover, .wfl-feature-card:hover, .about-network-card:hover, .sidebar-card:hover, .tm-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 44px -12px rgba(11,21,36,.28) !important;
  }

  /* ── Bilder: langsamer Zoom bei Hover (nur in Containern mit overflow) ── */
  .svc-media, .tm-photo, .hero-visual, .visual-collage > *, .lp-card-media, .about-network-card {
    overflow: hidden;
  }
  .svc-media img, .tm-photo img, .hero-visual > img, .visual-collage img {
    transition: transform 1s cubic-bezier(.22,1,.36,1);
  }
  .svc-media:hover img, .tm-photo:hover img, .hero-visual:hover > img, .visual-collage > *:hover img {
    transform: scale(1.07);
  }

  /* ── Parallax-Hero (JS setzt --pf-par) ── */
  .pf-parallax { transform: translate3d(0, var(--pf-par, 0), 0); will-change: transform; }

  /* ── Animierte Gold-Akzente: schimmernde Trenn-/Akzentlinien ── */
  .pf-shimmer {
    background-image: linear-gradient(100deg, transparent 20%, rgba(212,174,120,.85) 50%, transparent 80%) !important;
    background-size: 220% 100% !important;
    background-repeat: no-repeat !important;
    animation: pfShimmer 5.5s ease-in-out infinite;
  }
  @keyframes pfShimmer { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }

  /* ── Gold-CTAs: feiner Glanz-Sweep bei Hover ── */
  .btn-gold, .btn-nav, .tb-cta1, .submit, .btn.gold, .qf-btn { position: relative; overflow: hidden; }
  .pf-shine::before {
    content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-20deg); pointer-events: none; transition: left .6s cubic-bezier(.22,1,.36,1);
  }
  .pf-shine:hover::before { left: 135%; }

  /* ── Sanftes Einblenden der Hero-Inhalte beim Laden ── */
  .pf-hero-in > * { opacity: 0; transform: translateY(18px); animation: pfHeroUp .8s cubic-bezier(.22,1,.36,1) forwards; }
  .pf-hero-in > *:nth-child(2) { animation-delay: .1s; }
  .pf-hero-in > *:nth-child(3) { animation-delay: .2s; }
  .pf-hero-in > *:nth-child(4) { animation-delay: .3s; }
  .pf-hero-in > *:nth-child(5) { animation-delay: .4s; }
  @keyframes pfHeroUp { to { opacity: 1; transform: none; } }

  /* ── Scroll-Progress-Bar (JS injiziert #pf-progress) ── */
  #pf-progress {
    position: fixed; top: 0; left: 0; height: 2.5px; width: 0;
    background: linear-gradient(90deg, var(--gold, #b8935a), var(--gold2, #d4ae78));
    box-shadow: 0 0 8px rgba(212, 174, 120, .55);
    z-index: 100001; pointer-events: none;
    opacity: 0; transition: opacity .35s ease;
  }
  #pf-progress.pf-visible { opacity: 1; }

  /* ── Ken-Burns: Hero-Bild schwebt beim Laden sanft heran ── */
  .pf-kenburns { animation: pfKenBurns 1.5s cubic-bezier(.22,1,.36,1) backwards; }
  @keyframes pfKenBurns { from { transform: scale(1.07); opacity: .5; } to { transform: scale(1); opacity: 1; } }

  /* ── Dezenter Gold-Puls auf dem Haupt-CTA (3×, dann Ruhe) ── */
  .pf-pulse { animation: pfPulse 2.2s ease-out .9s 3; }
  @keyframes pfPulse {
    0%   { box-shadow: 0 0 0 0 rgba(184, 147, 90, .45); }
    60%  { box-shadow: 0 0 0 13px rgba(184, 147, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(184, 147, 90, 0); }
  }

  /* ── Sanftes Scrollen bei Anker-Sprüngen ── */
  html { scroll-behavior: smooth; }
}