/* Velocité - Luxury Car Website Styles */
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: #0a0a0a; color: #fff; }
.font-display { font-family: 'Playfair Display', serif; }

/* 3D Card effect */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-3d:hover { transform: rotateY(-8deg) rotateX(5deg) translateY(-10px); }
.card-3d-inner {
  transform: translateZ(40px);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-3d:hover .card-3d-inner { transform: translateZ(60px); }

/* Glow effects */
.glow-amber { box-shadow: 0 0 60px rgba(251, 191, 36, 0.3); }
.glow-amber-hover:hover { box-shadow: 0 25px 60px -10px rgba(251, 191, 36, 0.4); }

/* Animated gradient text */
.gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
.float { animation: float 6s ease-in-out infinite; }

/* Fade-in scroll animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fbbf24, #d97706); border-radius: 10px; }

/* Grid background */
.grid-bg {
  background-image:
    linear-gradient(rgba(251, 191, 36, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Spotlight effect */
.spotlight {
  background: radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.15), transparent 50%);
}

/* Car card image hover */
.car-img {
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.car-card:hover .car-img { transform: scale(1.15) rotate(-2deg); }

/* Button shine */
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s;
}
.btn-shine:hover::before { left: 100%; }

/* Pulse ring */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.pulse-ring { animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee { animation: marquee 30s linear infinite; }

/* Hero slider - cross fade */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1), transform 8s linear;
}
.slide.active { opacity: 1; }
.slide.active img { transform: scale(1.1); }
.slide img { transition: transform 8s ease-out; }

/* Slide indicator dots */
.slide-dot {
  width: 30px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.slide-dot.active { background: rgba(255,255,255,0.2); width: 60px; }
.slide-dot.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  animation: progress 6s linear;
  transform-origin: left;
}
@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Particles */
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.8) 0%, transparent 70%);
  pointer-events: none;
  animation: particle-float linear infinite;
}
@keyframes particle-float {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(50px); opacity: 0; }
}

/* Mouse parallax */
.parallax-layer {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* Live ticker */
@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.ticker { animation: ticker 25s linear infinite; }

/* Cars slider auto */
.cars-slider {
  display: flex;
  gap: 24px;
  animation: slide-cars 40s linear infinite;
}
.cars-slider:hover { animation-play-state: paused; }
@keyframes slide-cars {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Reveal scale */
@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.9) translateY(40px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.reveal-scale { animation: reveal-scale 1s cubic-bezier(0.23, 1, 0.32, 1); }

/* Glow text on hover */
.glow-text:hover {
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}

/* Speedometer rotation */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate-slow { animation: rotate-slow 20s linear infinite; }

/* Live pulse dot */
.live-dot {
  position: relative;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #ef4444;
  opacity: 0.5;
  animation: live-pulse 1.5s ease-out infinite;
}
@keyframes live-pulse {
  0% { transform: scale(0.5); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}