/* ============================================================
   MINIMAL LIVING — animations.css
   Alle Keyframes, Transitions und Animations-Klassen
   ============================================================ */


/* ── KEYFRAMES ── */

/* Ken Burns — langsamer Zoom für Hero-Hintergrund */
@keyframes kenBurns {
    from { transform: scale(1) translateX(0); }
    to   { transform: scale(1.08) translateX(-1%); }
}

/* Shimmer — Gold-Glimmer durch den primären CTA */
@keyframes shimmer {
    0%   { left: -100%; opacity: 0; }
    20%  { opacity: 1; }
    50%  { left: 120%; opacity: 0; }
    100% { left: 120%; opacity: 0; }
}

/* Pulse — CTA-Aufmerksamkeits-Puls alle 3 Sekunden */
@keyframes ctaPulse {
    0%, 100%  { box-shadow: 0 4px 24px rgba(201,168,76,0.35); }
    50%       { box-shadow: 0 4px 40px rgba(201,168,76,0.7), 0 0 0 8px rgba(201,168,76,0.12); }
}

/* Spinner — Lade-Indikator */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* FadeIn — allgemein */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* FadeInDown — von oben */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* FadeInUp — von unten */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* FadeInLeft */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* FadeInRight */
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ScaleIn */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Navbar — einfahren von oben */
@keyframes navbarSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Trust Bar — horizontales Einlaufen */
@keyframes trustBarReveal {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Counter — Zahlen-Highlight beim Beenden */
@keyframes counterFlash {
    0%, 100% { color: var(--color-accent-light); }
    50%      { color: var(--color-white); }
}

/* Card 3D-Hover (Tilt) — wird per JS ergänzt */
@keyframes cardLift {
    to {
        transform: translateY(-6px);
        box-shadow: 0 12px 40px rgba(13,27,42,0.25);
    }
}


/* ── ANIMATIONS-KLASSEN (werden per GSAP/JS gesetzt) ── */

/* Initiale Unsichtbarkeit für ScrollTrigger-Elemente */
.js-reveal {
    opacity: 0;
    transform: translateY(50px);
}
.js-reveal-left {
    opacity: 0;
    transform: translateX(-50px);
}
.js-reveal-right {
    opacity: 0;
    transform: translateX(50px);
}
.js-reveal-scale {
    opacity: 0;
    transform: scale(0.92);
}
.js-reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
}

/* Eingeblendet — GSAP setzt diese Klasse oder manipuliert opacity/transform direkt */
.is-animated {
    opacity: 1 !important;
    transform: none !important;
}


/* ── CTA PULSE ── */
.btn--pulse {
    animation: ctaPulse 3s ease-in-out infinite;
}
.btn--pulse:hover {
    animation: none;
    box-shadow: 0 8px 40px rgba(201,168,76,0.6);
}


/* ── 3D TILT — Hover-Effekt für Cards ── */
.js-tilt {
    transform-style: preserve-3d;
    perspective: 800px;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}


/* ── HERO SPEZIFISCH ── */
.hero__label.is-animated {
    animation: fadeInDown 0.5s ease 0.2s both;
}

/* Nach GSAP werden hero__word-Elemente direkt animiert */
.hero__word {
    will-change: opacity, transform;
}

/* Sub und Stats/CTAs — werden per GSAP gesteuert */
.hero__sub,
.hero__stats,
.hero__ctas {
    will-change: opacity, transform;
}


/* ── TRUST BAR ITEMS ── */
.trust-bar__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.trust-bar__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Staggered delay für Trust-Bar-Items */
.trust-bar__item:nth-child(1) { transition-delay: 0.0s; }
.trust-bar__item:nth-child(2) { transition-delay: 0.08s; }
.trust-bar__item:nth-child(3) { transition-delay: 0.16s; }
.trust-bar__item:nth-child(4) { transition-delay: 0.24s; }
.trust-bar__item:nth-child(5) { transition-delay: 0.32s; }


/* ── FAQ ANIMATION ── */
.faq__answer {
    will-change: max-height, padding;
}

/* GSAP animiert die FAQ-Antworten via maxHeight, daher die transition in styles.css */


/* ── FORM FOCUS EFFECTS ── */
.form__input,
.form__select {
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
}
.form__input:focus,
.form__select:focus {
    transform: translateY(-1px);
}


/* ── PAGE LOAD ANIMATION ── */
/* Body erscheint sanft beim ersten Load */
body {
    animation: fadeIn 0.3s ease both;
}


/* ── SECTION TRANSITIONS (für ScrollTrigger-Fallback ohne GSAP) ── */
@media (prefers-reduced-motion: no-preference) {
    /* Nur wenn User keine reduzierte Bewegung bevorzugt */

    .project__card,
    .advantages__card,
    .references__card,
    .faq__item {
        will-change: transform, opacity;
    }

    /* Image Slider — sanftes Über-blenden */
    .slider__slide img {
        will-change: transform;
    }
}


/* ── PREFERS REDUCED MOTION ── */
/* Barrierefreiheit: Animationen deaktivieren wenn User es eingestellt hat */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn--pulse { animation: none; }
    .hero__bg-img { animation: none; }
    .shimmer { display: none; }
}