/* ─────────────────────────────────────────────────────────────
   feinschliff.css, Autowelt Trier, Vorschau "vorschau-design"
   Sitegerechte Polier-Schicht: Button-Feedback, Scroll-Reveal-
   Bausteine, Reduced-Motion-Schalter. Rein additiv, ändert keine
   bestehenden Klassen, nur neue Regeln und gezielte Ergänzungen.

   Regel für alle Animationen hier: ausschliesslich transform und
   opacity (keine Layout-Eigenschaften), Bedienungs-Feedback unter
   300ms, prefers-reduced-motion schaltet alles ab.
   ───────────────────────────────────────────────────────────── */

/* ── 1) Button-Feedback: alle Buttons/Links mit Button-Optik ───────── */

.hero-btn,
.hero-secondary-btn,
.nav-contact-btn,
.car-btn,
.anfrage-btn,
.btn-submit,
.filter-search-btn,
.filter-reset-btn,
.bento-tile-link,
.lb-btn,
.lb-modal-close,
.ankauf-step-btn,
.ankauf-step-btn-next,
.ankauf-step-btn-prev {
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1),
                background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.hero-btn:active,
.hero-secondary-btn:active,
.nav-contact-btn:active,
.car-btn:active,
.anfrage-btn:active,
.btn-submit:active,
.filter-search-btn:active,
.filter-reset-btn:active,
.bento-tile-link:active,
.lb-btn:active,
.lb-modal-close:active,
.ankauf-step-btn:active,
.ankauf-step-btn-next:active,
.ankauf-step-btn-prev:active {
    transform: scale(0.97);
}

/* ── 2) Gestaffeltes Einblenden (70ms-Schritte) ─────────────────────
   Wiederverwendbare Klassen für Text-/Button-Gruppen, die beim Laden
   oder beim Reinscrollen nacheinander erscheinen sollen. */

@keyframes fsFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fs-stagger {
    opacity: 0;
    animation: fsFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fs-stagger:nth-child(1) { animation-delay: 0ms;   }
.fs-stagger:nth-child(2) { animation-delay: 70ms;  }
.fs-stagger:nth-child(3) { animation-delay: 140ms; }
.fs-stagger:nth-child(4) { animation-delay: 210ms; }
.fs-stagger:nth-child(5) { animation-delay: 280ms; }

/* ── 3) Scroll-Reveal per clip-path (Fotos "bauen sich von unten auf") ──
   clip-path zählt, anders als z. B. width/height, zu den günstig
   animierbaren Eigenschaften (kein Layout-Reflow), daher hier bewusst
   zusätzlich zu transform/opacity verwendet.

   Ohne JavaScript, oder solange js/feinschliff.js noch nicht gelaufen
   ist, hat .fs-clip-reveal KEINE Wirkung – die Fotos sind ganz normal
   sichtbar. Erst wenn das Skript bestätigt hat, dass ein
   IntersectionObserver vorhanden ist, setzt es "fs-ready" am
   <html>-Element, und erst dann greift die Versteckung hier. */

html.fs-ready .fs-clip-reveal {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s ease;
}

html.fs-ready .fs-clip-reveal.fs-in-view {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* ── 4) Reduced Motion: alles abschalten ────────────────────────────
   Greift zuletzt und am spezifischsten genug, um alle Animationen
   und Übergänge auf dieser Seite zu neutralisieren. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .fs-stagger,
    .fs-clip-reveal {
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
    }
}