/* Order:-Fonts → Global → Hero → Cards → Reveals → Section-specific  */



/* ------FONTS----------------------  */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap");


/* GLOBAL FLOAT  */

@keyframes floatSlow {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-25px); }
  100% { transform: translateY(0px); }
}

.bg-float { animation: floatSlow 12s ease-in-out infinite; }


/* HERO IMAGE SLIDER  */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.8s ease-in-out, transform 8s ease-in-out;
}

/* Active image — visible + zoom */
.hero-img.active {
  opacity: 1;
  transform: scale(1.15);
}


/* HOME HERO TEXT  */
/* Heading drops from top */
.car-hero-top {
  opacity: 0;
  transform: translateY(-40px);
  animation: carDropTop 1s ease forwards;
  animation-delay: 0.2s;
}

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

/* Subheading slides from left */
.car-hero-side {
  opacity: 0;
  transform: translateX(-60px);
  animation: carSlideSide 1s ease forwards;
  animation-delay: 0.5s;
}

@keyframes carSlideSide {
  to { opacity: 1; transform: translateX(0); }
}

/* CTA buttons rise from below */
.car-hero-bottom {
  opacity: 0;
  transform: translateY(40px);
  animation: carRiseUp 1s ease forwards;
  animation-delay: 0.9s;
}

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

/* Hero stat items slide up (staggered via inline animation-delay) */
.hero-stat-item {
  opacity: 0;
  transform: translateY(28px);
  animation: statReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-stat-item:nth-child(1) { animation-delay: 0.55s; }
.hero-stat-item:nth-child(2) { animation-delay: 0.70s; }
.hero-stat-item:nth-child(3) { animation-delay: 0.85s; }
.hero-stat-item:nth-child(4) { animation-delay: 1.00s; }

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


/* SECTION HEADING REVEAL */

.section-label {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.section-title {
  opacity: 0;
  transform: translateY(-36px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.section-underline {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}

/* JS adds .heading-revealed when element enters viewport */
.heading-revealed .section-label,
.heading-revealed .section-title {
  opacity: 1;
  transform: translate(0);
}

.heading-revealed .section-underline { transform: scaleX(1); }


/* SCROLL REVEAL SYSTEM  */
/* Base: mobile-first (fade-up) */
.reveal {
  --x: 0;
  --y: 60px;
  --scale: 0.96;

  opacity: 0;
  transform: translate(var(--x), var(--y)) scale(var(--scale));

  transition: transform 0.8s cubic-bezier(.16,1,.3,1),
              opacity 0.8s cubic-bezier(.16,1,.3,1);

  will-change: transform, opacity;
}

.reveal.active {
  --x: 0;
  --y: 0;
  --scale: 1;
  opacity: 1;
}


/* DESKTOP DIRECTION VARIANTS */

@media (min-width: 768px) {
  .reveal-left  { --x: -80px; --y: 0; }
  .reveal-right { --x: 80px;  --y: 0; }
}

/* Optional explicit class (same as default) */
.reveal-up { --y: 60px; }


/* STAGGER (ONLY WORKS IF CHILDREN ARE INSIDE SAME REVEAL) */

.reveal.active > * {
  opacity: 1;
  transform: translateY(0);

  transition: transform 0.6s ease,
              opacity 0.6s ease;
}

.reveal.active > *:nth-child(1) { transition-delay: 0.05s; }
.reveal.active > *:nth-child(2) { transition-delay: 0.10s; }
.reveal.active > *:nth-child(3) { transition-delay: 0.15s; }
.reveal.active > *:nth-child(4) { transition-delay: 0.20s; }
.reveal.active > *:nth-child(5) { transition-delay: 0.25s; }


/*  ACCESSIBILITY  */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* FAQ OPEN ANIMATION  */

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

details[open] p { animation: fadeIn 0.25s ease; }



/* FAQ */

/* Hide default browser arrow */
summary::-webkit-details-marker { display: none; }

details[open] p {
  animation: fadeIn 0.25s ease;
}







/* LOGO CAROUSEL SCROLL  */

@keyframes scrollLogos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/*  WHY US - BACKGROUND GRADIENT DRIFT */

@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientMove 12s ease infinite;
}


/* WHATSAPP FLOAT PULSE RING  */

@keyframes waPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

.wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.5);
  animation: waPulse 2s infinite;
  z-index: -1;
}


/* CAR IMAGE and about image  FLOAT (after reveal)  */

.car-image {
  max-width: 380px;
  transition: 0.5s ease;
}

.car-image.active { animation: floatCar 4s ease-in-out infinite; }

@keyframes floatCar {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


/* DESTINATION PAGE HERO (goldentriangle etc) */

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

@keyframes zoomSlow {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1.2); }
}


/* BTN SHINE EFFECT  */

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: shineSlide 3s ease infinite;
}

@keyframes shineSlide {
  to { transform: translateX(300%); }
}