/* ============================
   Page Load Transition
   ============================ */
.page-transition {
    position: fixed;
    inset: 0;
    background-color: var(--bg-page);
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.page-transition.is-done {
    opacity: 0;
}

/* ============================
   Navbar Animation (on .navbar only — transform on .site-header breaks sticky)
   ============================ */
.navbar {
    animation: slideDown 0.6s ease both;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Navbar link underline animation */
.navbar__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.35s ease;
}

.navbar__link:hover::after,
.navbar__link--active::after {
    width: 100%;
}

/* Navbar CTA pulse on load */
.navbar__cta {
    animation: ctaPulse 2s ease 1s;
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(164, 215, 66, 0); }
    50% { box-shadow: 0 0 0 10px rgba(164, 215, 66, 0.25); }
}

/* ============================
   Hero Entrance Animations
   ============================ */
.hero__badge {
    animation: fadeInUp 0.6s ease 0.2s both;
}

.hero__title {
    animation: fadeInUp 0.7s ease 0.35s both;
}

.hero__description {
    animation: fadeInUp 0.7s ease 0.5s both;
}

.hero__actions {
    animation: fadeInUp 0.7s ease 0.65s both;
}

.hero__stats {
    animation: fadeInUp 0.7s ease 0.8s both;
}

.hero__visual {
    animation: fadeInScale 0.9s ease 0.4s both;
}

.hero__quality-card {
    animation: slideInCard 0.7s ease 1s both;
}

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInCard {
    from {
        opacity: 0;
        transform: translateX(-30px) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Hero badge dot pulse */
.hero__badge-dot {
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.4);
    }
}

/* Hero stat number count-up feel */
.hero__stat-number {
    animation: fadeInUp 0.6s ease 1s both;
}

.hero__stat:nth-child(2) .hero__stat-number {
    animation-delay: 1.15s;
}

.hero__stat:nth-child(3) .hero__stat-number {
    animation-delay: 1.3s;
}

/* ============================
   Scroll Reveal System
   ============================ */
[data-animate] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-down"] {
    transform: translateY(-40px);
}

[data-animate="fade-right"] {
    transform: translateX(-40px);
}

[data-animate="fade-left"] {
    transform: translateX(40px);
}

[data-animate="fade-in"] {
    transform: none;
}

[data-animate="scale-up"] {
    transform: scale(0.9);
}

[data-animate="zoom-in"] {
    transform: scale(0.85);
}

/* Revealed state */
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ============================
   Stagger Delays for Grid Items
   ============================ */
[data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 0.3s; }
[data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 0.35s; }
[data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 0.4s; }
[data-animate-stagger].is-visible > *:nth-child(7) { transition-delay: 0.45s; }
[data-animate-stagger].is-visible > *:nth-child(8) { transition-delay: 0.5s; }

[data-animate-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================
   Enhanced Card Hover Effects
   ============================ */

/* Product cards - lift + glow */
.product-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.product-card__media img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-card__media img {
    transform: scale(1.08);
}

/* Collection cards - smooth overlay */
.collection-card {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.collection-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.collection-card__arrow {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.collection-card:hover .collection-card__arrow {
    transform: translateX(-6px);
    background-color: var(--primary-color);
}

/* Premium cards */
.premium-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

/* Desk, chair, sofa, storage cards */
.desk-card,
.chair-card,
.sofa-card,
.storage-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease;
}

.desk-card:hover,
.chair-card:hover,
.sofa-card:hover,
.storage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* CTA buttons inside cards - slide arrow effect */
.desk-card__cta,
.sofa-card__cta,
.storage-card__cta,
.chair-card__cta {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                gap 0.3s ease,
                transform 0.3s ease;
}

.desk-card:hover .desk-card__cta,
.sofa-card:hover .sofa-card__cta {
    transform: translateX(-4px);
}

/* ============================
   Button Hover Enhancements
   ============================ */
.btn {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease,
                background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

/* Load more buttons */
.office-desks__load-btn,
.office-chairs__load-btn,
.sofas-seating__load-btn,
.storage-solutions__load-btn {
    transition: border-color 0.3s ease,
                background-color 0.3s ease,
                color 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
}

.office-desks__load-btn:hover,
.office-chairs__load-btn:hover,
.sofas-seating__load-btn:hover,
.storage-solutions__load-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* ============================
   Footer Animations
   ============================ */
.site-footer__socials a {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-footer__socials a:hover {
    transform: translateY(-4px) scale(1.05);
}

.site-footer__links a {
    transition: color 0.3s ease, padding-right 0.3s ease;
}

/* ============================
   Mobile Menu Transition
   ============================ */
@media (max-width: 880px) {
    .navbar__menu {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .navbar__menu.is-open {
        animation: menuSlideDown 0.35s ease both;
    }

    @keyframes menuSlideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hamburger animation */
    .navbar__toggle span {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .navbar__toggle.is-active span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }

    .navbar__toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .navbar__toggle.is-active span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }
}

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

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }

    [data-animate-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}