/* ============================================================
   Animations — scroll reveals, hover micro-interactions
   ============================================================ */

/* Page-wide entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes goldShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes drawIn {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.13s; opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.21s; opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.29s; opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.37s; opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.45s; opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.53s; opacity:1; transform:none;}
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.61s; opacity:1; transform:none;}

/* Hero specific */
.hero-left > * {
  opacity: 0;
  animation: fadeUp 1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-left > *:nth-child(1) { animation-delay: 0.05s; }
.hero-left > *:nth-child(2) { animation-delay: 0.18s; }
.hero-left > *:nth-child(3) { animation-delay: 0.30s; }
.hero-left > *:nth-child(4) { animation-delay: 0.42s; }
.hero-left > *:nth-child(5) { animation-delay: 0.54s; }
.hero-right {
  opacity: 0;
  animation: fadeUp 1.2s cubic-bezier(.2,.7,.2,1) 0.4s forwards;
}
.hero-floating {
  animation: fadeUp 0.9s cubic-bezier(.2,.7,.2,1) 1.1s both, float 4.5s ease-in-out 2s infinite;
}

/* Gold shimmer on primary buttons */
.btn-primary {
  background: linear-gradient(110deg, #f1d683 0%, #d4af37 30%, #f7e29c 50%, #d4af37 70%, #a47a18 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: all .35s cubic-bezier(.2,.7,.2,1), background-position 0.6s ease;
}
.btn-primary:hover {
  background-position: -100% 0%;
}

/* Headline gold-text shimmer */
.gold-text {
  background-size: 200% 100% !important;
  animation: goldShimmer 8s linear infinite;
}

/* Hero glow pulse */
.hero-glow {
  animation: heroGlowPulse 8s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.7; transform: scale(1.08); }
}

/* Gold corner draw-in (subtle) */
.gold-corner {
  animation: cornerFade 0.8s ease 0.5s both;
}
@keyframes cornerFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card hover lift refinements */
.vehicle-card,
.service-card,
.testimonial-card,
.how-card,
.why-card,
.pay-card,
.service-row {
  transition: all .45s cubic-bezier(.2,.7,.2,1);
}
.vehicle-card:hover,
.pay-card:hover { transform: translateY(-3px); }

/* Step transitions inside booking */
.step-pane {
  animation: stepIn 0.45s cubic-bezier(.2,.7,.2,1);
}
@keyframes stepIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* Stepper progress bar fill */
.stepper-item.is-active::after {
  animation: barIn 0.5s cubic-bezier(.2,.7,.2,1);
}
@keyframes barIn {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Price total tick animation */
.price-total .serif {
  animation: priceBounce 0.5s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes priceBounce {
  0%   { transform: scale(0.9); opacity: 0.4; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

/* Vehicle card silhouette glide on hover */
.vehicle-card:hover .vehicle-silhouette {
  transform: translateX(4px);
  transition: transform 0.5s cubic-bezier(.2,.9,.3,1);
}
.vehicle-silhouette { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.vehicle-card.is-active .vehicle-silhouette {
  animation: vehicleGlide 1.2s cubic-bezier(.2,.7,.2,1);
}
@keyframes vehicleGlide {
  0%   { transform: translateX(-12px); }
  100% { transform: translateX(0); }
}

/* Service card image zoom on hover */
.service-card-img {
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.service-card:hover .service-card-img {
  transform: scale(1.04);
}

/* Confirmation icon entrance */
.confirm-icon {
  animation: popIn 0.6s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes popIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* FAQ open animation */
.faq-a {
  animation: faqOpen 0.4s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
}
@keyframes faqOpen {
  from { opacity: 0; max-height: 0; padding-bottom: 0; }
  to   { opacity: 1; max-height: 400px; padding-bottom: 24px; }
}

/* Date / slot pill tick */
.date-pill, .slot-pill, .gallery-chip {
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}
.date-pill.is-active, .slot-pill.is-active {
  animation: pillTick 0.35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes pillTick {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Soft glow on focused inputs */
.input:focus, .select:focus {
  box-shadow: 0 0 0 4px rgba(212,175,55,0.08);
}

/* Marquee — already animated, ensure smoother */
.hero-marquee-track { will-change: transform; }

/* ============================================================
   Extra dynamic effects
   ============================================================ */

/* Floating gold particles in hero */
.hero{ position:relative; }
.hero-particles{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  overflow:hidden;
}
.hero-particles span{
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,201,113,0.85), rgba(212,175,55,0));
  opacity:0;
  animation: particleFloat 14s linear infinite;
}
.hero-particles span:nth-child(1){ left:8%;  width:4px; height:4px; animation-delay:0s;   animation-duration:18s;}
.hero-particles span:nth-child(2){ left:18%; width:8px; height:8px; animation-delay:-3s;  animation-duration:16s;}
.hero-particles span:nth-child(3){ left:32%; width:5px; height:5px; animation-delay:-7s;  animation-duration:20s;}
.hero-particles span:nth-child(4){ left:48%; width:7px; height:7px; animation-delay:-2s;  animation-duration:14s;}
.hero-particles span:nth-child(5){ left:62%; width:4px; height:4px; animation-delay:-10s; animation-duration:22s;}
.hero-particles span:nth-child(6){ left:74%; width:6px; height:6px; animation-delay:-5s;  animation-duration:17s;}
.hero-particles span:nth-child(7){ left:84%; width:5px; height:5px; animation-delay:-9s;  animation-duration:19s;}
.hero-particles span:nth-child(8){ left:92%; width:7px; height:7px; animation-delay:-1s;  animation-duration:15s;}
@keyframes particleFloat{
  0%   { transform: translateY(110vh) translateX(0)   scale(.6); opacity:0; }
  10%  { opacity:.9; }
  50%  { transform: translateY(50vh)  translateX(20px) scale(1); }
  90%  { opacity:.7; }
  100% { transform: translateY(-10vh) translateX(-10px) scale(.4); opacity:0; }
}

/* 3D tilt on service / how / why cards */
.service-card, .how-card, .why-card, .testimonial-carousel{
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .5s ease;
}
.service-card:hover{
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px var(--line-strong);
}
.how-card:hover{
  box-shadow: 0 24px 50px -20px rgba(212,175,55,0.18);
}

/* Magnetic glow trail on primary buttons */
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.35), transparent 40%);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none;
  border-radius:inherit;
}
.btn-primary:hover::after{ opacity:1; }

/* Counter pulse */
@keyframes counterPulse{
  0%   { transform: scale(.92); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.counter-pulse{ animation: counterPulse .7s cubic-bezier(.2,.9,.3,1.4) both; }

/* Service card lift glow */
.service-card{ overflow:hidden; }
.service-card::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%),
    rgba(212,175,55,0.10), transparent 40%);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none;
}
.service-card:hover::after{ opacity:1; }

/* Why-card icon float on hover */
.why-card .why-icon{
  transition: transform .5s cubic-bezier(.2,.7,.2,1), background .4s ease, color .4s ease;
}
.why-card:hover .why-icon{
  transform: translateY(-4px) rotate(-6deg);
  background: rgba(212,175,55,0.1);
}

/* Gallery tile zoom + caption rise */
.gallery-tile{
  overflow:hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.gallery-tile::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
  opacity:0; transition: opacity .4s ease;
  pointer-events:none;
}
.gallery-tile:hover{ transform: scale(1.02); }
.gallery-tile:hover::after{ opacity:1; }

/* Smooth nav shrink */
.nav{ transition: padding .3s ease, background .35s ease, border-color .35s ease; }
.nav-scrolled .nav-inner{ padding-top:10px; padding-bottom:10px; }

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}