/* ===== Base Reset & Custom Properties ===== */
:root {
  --bg-primary: #F4F4F4;
  --text-black: #000000;
  --blue-primary: #3b82f6;
  --blue-hover: #2563eb;
  --red-accent: #ef4444;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', 'Inter', sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

img, video {
  max-width: 100%;
  display: block;
}

/* ===== Montserrat Helper ===== */
.montserrat {
  font-family: var(--font-heading);
}

/* ===== Scrollbar Hide ===== */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== Header Slide-In ===== */
.header-animate {
  opacity: 0;
  transform: translateY(-20px);
  animation: headerSlideIn 0.6s ease-out 0.2s forwards;
}

@keyframes headerSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Hero Slideshow ===== */
.hero-slideshow .hero-img {
  opacity: 0;
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
  transform: scale(1.05);
}

.hero-slideshow .hero-img.active {
  opacity: 1;
  transform: scale(1);
}

.hero-title {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

/* ===== Hero Text Fade-In ===== */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.fade-in-up-delay {
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

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

/* ===== Scroll Animations ===== */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-on-scroll[data-animation="fade-up"] {
  transform: translateY(30px);
}

.animate-on-scroll[data-animation="slide-left"] {
  transform: translateX(-40px);
}

.animate-on-scroll[data-animation="slide-right"] {
  transform: translateX(40px);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Staggered delays for nested animated elements */
.animate-on-scroll.visible[data-delay="1"] { transition-delay: 0.15s; }
.animate-on-scroll.visible[data-delay="2"] { transition-delay: 0.3s; }
.animate-on-scroll.visible[data-delay="3"] { transition-delay: 0.45s; }
.animate-on-scroll.visible[data-delay="4"] { transition-delay: 0.6s; }

/* ===== Hero Dot Active State ===== */
.hero-dot-active {
  width: 4rem;
  background-color: rgba(255, 255, 255, 0.3);
}

.hero-dot-inactive {
  width: 0.5rem;
  background-color: rgba(255, 255, 255, 0.5);
}

.hero-dot-inactive:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* ===== Sticky Nav Active State ===== */
.sticky-nav-btn {
  transition: color 0.3s ease;
}

.sticky-nav-btn.active {
  color: var(--text-black);
}

/* ===== Line Clamp ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Video Background ===== */
video {
  background: #000;
}

/* ===== Selection Color ===== */
::selection {
  background: var(--blue-primary);
  color: white;
}

/* ===== Carousel Scroll Hint ===== */
#vehiclesScroll {
  scroll-padding-left: 1rem;
  -webkit-overflow-scrolling: touch;
}

/* ===== Touch Device Hint for Carousel ===== */
@media (hover: none) and (pointer: coarse) {
  #vehiclesScroll {
    cursor: grab;
  }
  #vehiclesScroll:active {
    cursor: grabbing;
  }
}

/* ===== Prevent Layout Shift on Hero ===== */
.hero-slideshow {
  position: absolute;
  inset: 0;
}

.hero-slideshow .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Smooth Transition for Header Shadow ===== */
header {
  transition: box-shadow 0.3s ease;
}