.dots {
    position: fixed;
}
@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); }
}

.will-animate {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.will-animate.did-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.homemotor-image.will-animate {
    transform: translateX(-50%) translate3d(0, 30px, 0);
}

.homemotor-image.will-animate.did-animate {
    transform: translateX(-50%) translate3d(0, 0, 0);
}
.bigger.will-animate {
    transform: translateX(-50%) translate3d(0, 30px, 0);
}

.bigger.will-animate.did-animate {
    transform: translateX(-50%) translate3d(0, 0, 0);
}
.adjusted.will-animate {
    transform: translateX(-50%) translate3d(0, 30px, 0);
}

.adjusted.will-animate.did-animate {
    transform: translateX(-50%) translate3d(0, 0, 0);
}

.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 .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 .services-top-right{ animation: fadeUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.3s  both; }
.page-transition .services-stats    { animation: fadeUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.75s both; }

.page-transition .service-card:nth-child(1) { animation: fadeUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.30s 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 .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 .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; }

.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); }

.alert-overlay {
  animation: overlayFadeIn 0.3s ease forwards;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.alert-card {
  animation: cardPopUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardPopUp {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.alert-icon-ring {
  animation: ringPulse 0.4s ease 0.3s both;
}

@keyframes ringPulse {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.alert-checkmark polyline {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: drawCheck 0.4s ease 0.55s forwards;
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.alert-badge {
  animation: slideFadeDown 0.3s ease 0.65s both;
}

.alert-title {
  animation: slideFadeDown 0.3s ease 0.75s both;
}

.alert-subtitle {
  animation: slideFadeDown 0.3s ease 0.82s both;
}

.alert-detail {
  animation: slideFadeDown 0.3s ease 0.88s both;
}

.alert-divider {
  animation: expandWidth 0.4s ease 0.9s both;
  transform-origin: left;
}

@keyframes expandWidth {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.alert-btn-primary {
  animation: slideFadeUp 0.3s ease 0.95s both;
}

.alert-btn-secondary {
  animation: slideFadeUp 0.3s ease 1.05s both;
}

@keyframes slideFadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

body { animation: fadeIn 0.5s ease; }