/* =====================================================
   8 EIGHT MOTOR OIL - STAGGERED ENTRANCE ANIMATIONS
   Clean, fast sequential animations for page elements
   No preloader - instant page load with animated content
   ===================================================== */

/* ===== DESIGN SYSTEM VARIABLES ===== */
:root {
  /* Brand Colors */
  --color-primary: #f39c12;
  --color-primary-dark: #d68910;
  --color-secondary: #1a1a2e;
  --color-secondary-light: #16213e;
  --color-accent: #e74c3c;
  
  /* Neutral Colors */
  --color-dark: #0f0f23;
  --color-gray-900: #1a1a2e;
  --color-gray-700: #333;
  --color-gray-500: #666;
  --color-white: #fff;
  
  /* Animation Timing */
  --anim-duration: 0.5s;
  --anim-stagger: 0.08s;
  --anim-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== HIDE LEGACY PRELOADER (if any remains) ===== */
.loader-wrap,
.preloader,
.handle-preloader {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ===== BASE ANIMATION CLASSES ===== */

/* Elements start invisible */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--anim-duration) var(--anim-easing) forwards;
}

/* Staggered delays for sequential entrance */
.animate-in:nth-child(1) { animation-delay: calc(var(--anim-stagger) * 1); }
.animate-in:nth-child(2) { animation-delay: calc(var(--anim-stagger) * 2); }
.animate-in:nth-child(3) { animation-delay: calc(var(--anim-stagger) * 3); }
.animate-in:nth-child(4) { animation-delay: calc(var(--anim-stagger) * 4); }
.animate-in:nth-child(5) { animation-delay: calc(var(--anim-stagger) * 5); }
.animate-in:nth-child(6) { animation-delay: calc(var(--anim-stagger) * 6); }
.animate-in:nth-child(7) { animation-delay: calc(var(--anim-stagger) * 7); }
.animate-in:nth-child(8) { animation-delay: calc(var(--anim-stagger) * 8); }

/* Main animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

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

/* ===== HEADER ANIMATION ===== */
.main-header {
  animation: slideDown 0.4s var(--anim-easing) forwards;
}

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

/* ===== MAIN SLIDER / BANNER ===== */
.main-slider {
  animation: fadeIn 0.3s ease-out forwards;
}

.main-slider .content-column {
  animation: fadeInUp 0.6s var(--anim-easing) 0.1s forwards;
  opacity: 0;
}

.main-slider .inner-column h1 {
  animation: fadeInUp 0.5s var(--anim-easing) 0.15s forwards;
  opacity: 0;
}

.main-slider .text-slider {
  animation: fadeInUp 0.5s var(--anim-easing) 0.25s forwards;
  opacity: 0;
}

.main-slider .slider-button {
  animation: fadeInUp 0.5s var(--anim-easing) 0.35s forwards;
  opacity: 0;
}

/* ===== SECTIONS ENTRANCE ===== */
.services-section,
.categories-section,
.about-section,
.product-section,
.cta-section,
.faq-section,
.blog-section,
.contact-section {
  animation: fadeInUp 0.5s var(--anim-easing) forwards;
}

/* Section titles */
.sec-title {
  animation: fadeInUp 0.5s var(--anim-easing) forwards;
}

.sec-title .sub-title {
  animation: slideInLeft 0.4s var(--anim-easing) 0.1s forwards;
  opacity: 0;
}

.sec-title h2 {
  animation: fadeInUp 0.4s var(--anim-easing) 0.15s forwards;
  opacity: 0;
}

/* ===== PRODUCT CARDS ===== */
.service-block,
.product-block,
.news-block,
.team-block {
  animation: scaleIn 0.4s var(--anim-easing) forwards;
  opacity: 0;
}

/* Stagger product cards */
.service-block:nth-child(1),
.product-block:nth-child(1) { animation-delay: 0.1s; }
.service-block:nth-child(2),
.product-block:nth-child(2) { animation-delay: 0.15s; }
.service-block:nth-child(3),
.product-block:nth-child(3) { animation-delay: 0.2s; }
.service-block:nth-child(4),
.product-block:nth-child(4) { animation-delay: 0.25s; }
.service-block:nth-child(5),
.product-block:nth-child(5) { animation-delay: 0.3s; }
.service-block:nth-child(6),
.product-block:nth-child(6) { animation-delay: 0.35s; }

/* ===== FOOTER ANIMATION ===== */
.main-footer {
  animation: fadeIn 0.5s var(--anim-easing) forwards;
}

/* ===== DISABLE WOW.js LEGACY ANIMATIONS ===== */
/* Override ALL slow WOW.js/animate.css animations with instant visibility + fast CSS */

/* Make all animated elements visible immediately */
.wow,
.animated,
.fadeIn,
.fadeInUp,
.fadeInDown,
.fadeInLeft,
.fadeInRight,
.fadeInUpBig,
.fadeInDownBig,
.slideInUp,
.slideInDown,
.slideInLeft,
.slideInRight,
.zoomIn,
.zoomInUp,
.bounceIn {
  visibility: visible !important;
  opacity: 1 !important;
  animation-duration: 0.4s !important;
  animation-delay: 0s !important;
  animation-name: quickFadeIn !important;
}

/* Quick fade in for all previously animated elements */
@keyframes quickFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger child elements for natural flow */
.wow:nth-child(1) { animation-delay: 0.05s !important; }
.wow:nth-child(2) { animation-delay: 0.1s !important; }
.wow:nth-child(3) { animation-delay: 0.15s !important; }
.wow:nth-child(4) { animation-delay: 0.2s !important; }
.wow:nth-child(5) { animation-delay: 0.25s !important; }
.wow:nth-child(6) { animation-delay: 0.3s !important; }

/* ===== PAGE CONTENT ===== */
.page-wrapper {
  opacity: 1;
  /* No fade transition - instant visibility */
}

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