/* ============================================
   animations.css – Keyframes & Transitions
   Liesenfeld GmbH & Co. KG
   ============================================ */

/* ─── Keyframes ──────────────────────────────── */

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

@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes fadeRight {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1);    }
}

@keyframes lineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ─── Hero Entrance Animations ───────────────── */

.hero-animate {
    animation: fadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hero-animate--delay-1 { animation-delay: 0.18s; }
.hero-animate--delay-2 { animation-delay: 0.34s; }
.hero-animate--delay-3 { animation-delay: 0.50s; }

.hero-image-animate {
    animation: fadeLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s both;
}

/* ─── Scroll Reveal – Initial States ─────────── */

.reveal {
    opacity: 0;
    transition:
        opacity  0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--up    { transform: translateY(55px);  }
.reveal--left  { transform: translateX(-55px); }
.reveal--right { transform: translateX(55px);  }
.reveal--scale { transform: scale(0.93);        }

.reveal.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ─── Staggered Children ─────────────────────── */

.stagger-children > * {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity   0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.20s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.30s; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.40s; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.50s; }

.stagger-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Header Scroll Transition ───────────────── */

.site-header {
    transition:
        background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow       0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        padding-top      0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        padding-bottom   0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-header.is-scrolled {
    background-color: rgba(247, 244, 238, 0.96) !important;
    box-shadow: 0 1px 0 #E7DFD5;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ─── Nav Link Hover ─────────────────────────── */

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav__link:hover::after { transform: scaleX(1); }

/* ─── Product Card Hover ─────────────────────── */

.product-card {
    transition:
        transform   0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow  0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 36px 72px rgba(36, 36, 36, 0.13);
}

.product-card__image {
    transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-card__image {
    transform: scale(1.07);
}

/* ─── Button Hover ───────────────────────────── */

.btn {
    transition:
        color            0.3s ease,
        background-color 0.3s ease,
        border-color     0.3s ease,
        transform        0.2s ease,
        box-shadow       0.3s ease;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0);    }

/* ─── Product Card Link Arrow ────────────────── */

.product-card__link .arrow,
.btn .btn__arrow {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-card__link .arrow,
.btn:hover .btn__arrow {
    transform: translateX(5px);
}

/* ─── Quality Feature Icon Hover ─────────────── */

.quality-feature__icon {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quality-feature:hover .quality-feature__icon {
    transform: scale(1.12);
}

/* ─── Mobile Menu Bars ───────────────────────── */

.nav__toggle-bar {
    transition:
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity   0.25s ease;
}

/* ─── Parallax ───────────────────────────────── */

.parallax-element { will-change: transform; }

/* ─── Reduced Motion ─────────────────────────── */

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

    .reveal,
    .reveal--up, .reveal--left, .reveal--right, .reveal--scale,
    .stagger-children > * {
        opacity: 1;
        transform: none;
    }
}