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

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

.page-transition {
    animation: fadeIn 0.6s ease forwards;
}

.page-transition nav {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.page-transition .hero-section,
.page-transition .about-section {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.page-transition .section-label,
.page-transition .section-title {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.page-transition .about-divider {
    animation: fadeIn 0.6s ease 0.3s both;
}

.page-transition .stats-grid {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.page-transition .about-description {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.page-transition .about-tags {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.page-transition .aboutus-box {
    animation: fadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.page-transition .product-card:nth-child(1) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.page-transition .product-card:nth-child(2) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.page-transition .product-card:nth-child(3) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.page-transition .product-card:nth-child(4) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.page-transition .product-card:nth-child(5) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.page-transition .product-card:nth-child(6) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }

.page-transition footer {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
.page-transition .services-section {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.page-transition .services-top {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.page-transition .section-label,
.page-transition .section-title {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.page-transition .services-top-right {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.page-transition .service-card:nth-child(1) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.page-transition .service-card:nth-child(2) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both; }
.page-transition .service-card:nth-child(3) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.54s both; }
.page-transition .service-card:nth-child(4) { animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.66s both; }

.page-transition .services-stats {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}
.page-transition {
    animation: fadeIn 0.6s ease forwards;
}

.page-transition .contact-container {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.page-transition .contact-box:nth-child(1) {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.page-transition .contact-box:nth-child(2) {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.page-transition .contact-section,
.page-transition .contact-service,
.page-transition .contact-card {
    animation: fadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.page-transition .newrelease-container,
.page-transition .carousel-item,
.page-transition .main-content,
.page-transition .nr-brand,
.page-transition .motor-image,
.page-transition .motor-subtitle,
.page-transition .font-abel,
.page-transition .btn,
.page-transition .btn-circle, {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-transition .main-content > *:nth-child(1) { animation-delay: 0.1s; }
.page-transition .main-content > *:nth-child(2) { animation-delay: 0.2s; }
.page-transition .main-content > *:nth-child(3) { animation-delay: 0.3s; }
.page-transition .main-content > *:nth-child(4) { animation-delay: 0.4s; }
.page-transition .main-content > *:nth-child(5) { animation-delay: 0.5s; }
.page-transition .main-content > *:nth-child(6) { animation-delay: 0.6s; }

.page-transition .carousel-item {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-transition .carousel-item:nth-child(1) { animation-delay: 0s; }
.page-transition .carousel-item:nth-child(2) { animation-delay: 0.1s; }
.page-transition .carousel-item:nth-child(3) { animation-delay: 0.2s; }
.page-transition .carousel-item:nth-child(4) { animation-delay: 0.3s; }
.page-transition .carousel-item:nth-child(5) { animation-delay: 0.4s; }
.page-transition .carousel-item:nth-child(6) { animation-delay: 0.5s; }
.page-transition .carousel-item:nth-child(7) { animation-delay: 0.6s; }
.page-transition .carousel-item:nth-child(8) { animation-delay: 0.7s; }
.page-transition .carousel-item:nth-child(9) { animation-delay: 0.8s; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

.page-transition {
    animation: fadeIn 0.6s ease forwards;
}

.carousel-item {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-item:target {
    opacity: 1;
    transform: translateY(0);
}

.carousel-item:first-child {
    opacity: 1;
    transform: translateY(0);
}

.carousel-item .hero-subtext {
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.1s;
}

.carousel-item .text-gradient {
    opacity: 0;
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

.carousel-item .homemotor-image,
.carousel-item .adjusted,
.carousel-item .bigger {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.98);
    animation: imageIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.25s;
    will-change: transform, opacity;
}

@keyframes imageIn {
    from {
        opacity: 0;
        transform: translate(-50%, 10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.carousel-item .motor-desc {
    opacity: 0;
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.35s;
}

.carousel-item .explore-wrapper {
    opacity: 0;
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.45s;
}

.btn-primary {
    transition: 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
}

.dots .dot {
    opacity: 0.5;
    transform: scale(0.9);
    transition: 0.3s ease;
}

.dots .dot:hover {
    opacity: 1;
    transform: scale(1.1);
}

body {
    animation: fadeIn 0.5s ease;
}