/* Global Page Transitions & Smooth Loading Animations */

/* Smooth page entry animation */
html {
    scroll-behavior: smooth;
}

body {
    animation: pageEnter 0.5s ease-out;
}

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

/* Main content smooth fade in */
main {
    animation: contentFadeIn 0.6s ease-out 0.15s both;
}

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

/* Navbar smooth slide down */
.main-nav,
nav {
    animation: navSlideDown 0.5s ease-out;
}

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

/* Footer smooth fade in */
footer {
    animation: footerFadeIn 0.6s ease-out 0.3s both;
}

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

/* Section animations - stagger effect */
section {
    animation: sectionFadeUp 0.6s ease-out both;
}

section:nth-child(1) { animation-delay: 0.2s; }
section:nth-child(2) { animation-delay: 0.3s; }
section:nth-child(3) { animation-delay: 0.4s; }
section:nth-child(4) { animation-delay: 0.5s; }
section:nth-child(5) { animation-delay: 0.6s; }

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

/* Product card animations */
.product-card,
.hero-card,
.feature-card {
    animation: cardSlideUp 0.5s ease-out both;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(n+5) { animation-delay: 0.5s; }

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

/* Smooth link transitions */
a {
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Button smooth transitions */
button,
.cta,
.btn {
    transition: all 0.2s ease;
}

/* Image smooth fade in */
img {
    animation: fadeIn 0.6s ease-out;
}

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

/* Heading animations */
h1,
h2,
h3,
h4,
h5,
h6 {
    animation: headingFadeIn 0.5s ease-out both;
}

h1 { animation-delay: 0.1s; }
h2 { animation-delay: 0.15s; }
h3 { animation-delay: 0.2s; }
h4 { animation-delay: 0.25s; }
h5 { animation-delay: 0.3s; }
h6 { animation-delay: 0.35s; }

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

/* Form elements smooth entry */
.field,
input,
select,
textarea {
    animation: formElementFadeIn 0.4s ease-out both;
}

.field:nth-child(1) { animation-delay: 0.1s; }
.field:nth-child(2) { animation-delay: 0.2s; }
.field:nth-child(3) { animation-delay: 0.3s; }
.field:nth-child(4) { animation-delay: 0.4s; }
.field:nth-child(n+5) { animation-delay: 0.5s; }

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

/* Dashboard content animations */
.dashboard-section,
.dashboard-card,
.stats-card {
    animation: dashboardCardFadeIn 0.5s ease-out both;
}

.dashboard-section:nth-child(1) { animation-delay: 0.1s; }
.dashboard-section:nth-child(2) { animation-delay: 0.2s; }
.dashboard-section:nth-child(3) { animation-delay: 0.3s; }

/* Page transition during navigation */
@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
        /* text-align: center;
        justify-content: center;
        align-items: center; */
    }
}

/* Fast appearing content */
.fast-load {
    animation: quickFadeIn 0.3s ease-out;
}

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

/* Lazy loaded content */
img[loading="lazy"] {
    animation: imageLoad 0.6s ease-out;
}

@keyframes imageLoad {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Smooth scroll on navigation */
html {
    scroll-behavior: smooth;
}

/* Prevent layout shift on page load */
html, body {
    width: 100%;
    overflow-x: hidden;
}

/* Optimize animation performance */
@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;
    }
}

/* Loading state for async content */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Smooth page exit animation (for navigation) */
body.page-exit {
    animation: pageExit 0.3s ease-in forwards;
}

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