/* ============================================
   HOME PAGE HERO V2 - Immersive Night Cruise
   A complete redesign for maximum impact
   ============================================ */

/* ─────────────────────────────────────────────
   HERO CONTAINER - Full viewport immersion
   ───────────────────────────────────────────── */
.hero-v2 {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0d10 0%, #0f1318 50%, #141a21 100%);
  border-radius: 24px;
  margin: 1rem;
  isolation: isolate;
}

/* ─────────────────────────────────────────────
   ANIMATED BACKGROUND LAYERS
   ───────────────────────────────────────────── */
.hero-v2-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Layer 1: Animated gradient orbs */
.hero-v2-orbs {
  position: absolute;
  inset: 0;
}

.hero-v2-orbs::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(24, 225, 255, 0.15) 0%, transparent 70%);
  top: -30%;
  left: -20%;
  animation: orbFloat1 15s ease-in-out infinite;
}

.hero-v2-orbs::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 106, 32, 0.12) 0%, transparent 70%);
  bottom: -20%;
  right: -10%;
  animation: orbFloat2 12s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, 30px) scale(1.1); }
  66% { transform: translate(-30px, -20px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, -30px) scale(1.15); }
}

/* Layer 2: Technical grid */
.hero-v2-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(24, 225, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 225, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  animation: gridShift 20s linear infinite;
  opacity: 0.7;
}

@keyframes gridShift {
  0% { transform: perspective(500px) rotateX(2deg) translateY(0); }
  100% { transform: perspective(500px) rotateX(2deg) translateY(60px); }
}

/* Layer 3: Container for tire tracks */
.hero-v2-speed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Layer 4: Tire tread marks - DISABLED (using canvas ghost-trails.js instead) */
.hero-v2-particles {
  display: none;
}

/* Tire track SVG container */
.hero-v2-particles .tire-tracks {
  position: absolute;
  inset: 0;
  opacity: 0.12;
}

/* Individual tire track marks */
.hero-v2-particles .track {
  position: absolute;
  opacity: 0;
  animation: trackFade 12s ease-in-out infinite;
}

/* Burnout track - parallel lines with smoke fade */
.hero-v2-particles .track.burnout {
  width: 200px;
  height: 40px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 3px,
      rgba(24, 225, 255, 0.3) 3px, rgba(24, 225, 255, 0.3) 5px,
      transparent 5px, transparent 8px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 3px,
      rgba(24, 225, 255, 0.25) 3px, rgba(24, 225, 255, 0.25) 5px,
      transparent 5px, transparent 8px
    );
  background-size: 12px 8px, 12px 8px;
  background-position: 0 0, 0 20px;
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  border-radius: 2px;
}

/* Skid mark - single curved dark streak */
.hero-v2-particles .track.skid {
  width: 180px;
  height: 12px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(24, 225, 255, 0.15) 10%,
    rgba(24, 225, 255, 0.4) 30%,
    rgba(24, 225, 255, 0.4) 70%,
    rgba(24, 225, 255, 0.15) 90%,
    transparent 100%
  );
  border-radius: 6px;
  transform-origin: left center;
}

/* Off-road / mud tread - chunky block pattern */
.hero-v2-particles .track.offroad {
  width: 160px;
  height: 50px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 6px,
      rgba(24, 225, 255, 0.25) 6px, rgba(24, 225, 255, 0.25) 18px,
      transparent 18px, transparent 24px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 10px,
      rgba(24, 225, 255, 0.2) 10px, rgba(24, 225, 255, 0.2) 20px,
      transparent 20px, transparent 30px
    );
  background-size: 30px 18px, 36px 18px;
  background-position: 0 0, 6px 26px;
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}

/* Track positions and variations */
.hero-v2-particles .track:nth-child(1) {
  left: 5%; top: 30%;
  transform: rotate(-8deg);
  animation-delay: 0s;
}
.hero-v2-particles .track:nth-child(2) {
  left: 25%; top: 65%;
  transform: rotate(5deg);
  animation-delay: -2s;
}
.hero-v2-particles .track:nth-child(3) {
  left: 45%; top: 20%;
  transform: rotate(-3deg);
  animation-delay: -4s;
}
.hero-v2-particles .track:nth-child(4) {
  right: 30%; top: 50%;
  transform: rotate(12deg);
  animation-delay: -6s;
}
.hero-v2-particles .track:nth-child(5) {
  right: 10%; top: 35%;
  transform: rotate(-15deg);
  animation-delay: -8s;
}
.hero-v2-particles .track:nth-child(6) {
  left: 15%; top: 80%;
  transform: rotate(3deg);
  animation-delay: -10s;
}
.hero-v2-particles .track:nth-child(7) {
  right: 20%; top: 75%;
  transform: rotate(-6deg);
  animation-delay: -3s;
}
.hero-v2-particles .track:nth-child(8) {
  left: 60%; top: 45%;
  transform: rotate(8deg);
  animation-delay: -7s;
}

@keyframes trackFade {
  0%, 100% { opacity: 0; transform: translateX(-20px) rotate(var(--rotation, 0deg)); }
  15% { opacity: 0.5; }
  50% { opacity: 0.3; transform: translateX(0) rotate(var(--rotation, 0deg)); }
  85% { opacity: 0.5; }
}

/* Layer 5: City skyline silhouette */
.hero-v2-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%230a0d10' d='M0,200 L0,150 L30,150 L30,120 L60,120 L60,150 L90,150 L90,80 L110,80 L110,60 L130,60 L130,80 L150,80 L150,140 L180,140 L180,100 L200,100 L200,70 L220,70 L220,100 L250,100 L250,130 L280,130 L280,90 L310,90 L310,50 L340,50 L340,90 L370,90 L370,120 L400,120 L400,80 L430,80 L430,110 L460,110 L460,60 L490,60 L490,40 L520,40 L520,60 L550,60 L550,100 L580,100 L580,70 L610,70 L610,110 L640,110 L640,85 L670,85 L670,55 L700,55 L700,85 L730,85 L730,120 L760,120 L760,75 L790,75 L790,95 L820,95 L820,65 L850,65 L850,45 L880,45 L880,65 L910,65 L910,105 L940,105 L940,80 L970,80 L970,130 L1000,130 L1000,95 L1030,95 L1030,70 L1060,70 L1060,95 L1090,95 L1090,140 L1120,140 L1120,110 L1150,110 L1150,140 L1180,140 L1180,160 L1200,160 L1200,200 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
  opacity: 0.6;
}

/* Animated window lights */
.hero-v2-skyline::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 45px 80px, rgba(255, 220, 100, 0.8), transparent),
    radial-gradient(1px 1px at 115px 45px, rgba(255, 220, 100, 0.6), transparent),
    radial-gradient(1px 1px at 205px 65px, rgba(24, 225, 255, 0.5), transparent),
    radial-gradient(1px 1px at 325px 40px, rgba(255, 220, 100, 0.7), transparent),
    radial-gradient(1px 1px at 475px 30px, rgba(255, 220, 100, 0.5), transparent),
    radial-gradient(1px 1px at 565px 55px, rgba(24, 225, 255, 0.6), transparent),
    radial-gradient(1px 1px at 685px 45px, rgba(255, 220, 100, 0.8), transparent),
    radial-gradient(1px 1px at 855px 35px, rgba(255, 220, 100, 0.6), transparent),
    radial-gradient(1px 1px at 955px 70px, rgba(255, 106, 32, 0.5), transparent),
    radial-gradient(1px 1px at 1045px 60px, rgba(255, 220, 100, 0.7), transparent),
    radial-gradient(1px 1px at 1135px 95px, rgba(24, 225, 255, 0.5), transparent);
  animation: windowTwinkle 4s ease-in-out infinite alternate;
}

@keyframes windowTwinkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Layer 6: Bottom fade (no moving road) */
.hero-v2-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #0a0d10 0%, rgba(10, 13, 16, 0.8) 50%, transparent 100%);
  z-index: 2;
}

/* ─────────────────────────────────────────────
   CONTENT LAYOUT
   ───────────────────────────────────────────── */
.hero-v2-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px 100px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
}

@media (max-width: 1100px) {
  .hero-v2-content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 24px 80px;
  }
}

/* ─────────────────────────────────────────────
   LEFT SIDE - Main copy
   ───────────────────────────────────────────── */
.hero-v2-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Badges */
.hero-v2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(24, 225, 255, 0.1);
  border: 1px solid rgba(24, 225, 255, 0.3);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(24, 225, 255, 1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-v2-badge.alt {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.hero-v2-badge .pulse {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Main headline */
.hero-v2-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  color: #fff;
}

.hero-v2-headline .word {
  display: inline-block;
  position: relative;
}

.hero-v2-headline .word-scan {
  color: #18e1ff;
  text-shadow: 0 0 30px rgba(24, 225, 255, 0.5);
  animation: wordGlow 4s ease-in-out infinite;
}

.hero-v2-headline .word-learn {
  color: #ff6a20;
  text-shadow: 0 0 30px rgba(255, 106, 32, 0.5);
  animation: wordGlow 4s ease-in-out infinite 1.3s;
}

.hero-v2-headline .word-collect {
  color: #d4af37;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
  animation: wordGlow 4s ease-in-out infinite 2.6s;
}

@keyframes wordGlow {
  0%, 100% {
    text-shadow: 0 0 20px currentColor;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 40px currentColor, 0 0 60px currentColor;
    transform: scale(1.02);
  }
}

/* Feature chips */
.hero-v2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-v2-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.9rem;
  color: #e9f3f6;
  transition: all 0.3s ease;
}

.hero-v2-chip:hover {
  background: rgba(24, 225, 255, 0.1);
  border-color: rgba(24, 225, 255, 0.3);
  transform: translateY(-2px);
}

.hero-v2-chip svg {
  width: 16px;
  height: 16px;
  color: var(--teal, #18e1ff);
}

/* Subheadline */
.hero-v2-sub {
  font-size: 1.15rem;
  color: #b8c5cc;
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}

.hero-v2-sub strong {
  color: #fff;
  font-weight: 600;
}

/* CTA buttons */
.hero-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.hero-v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hero-v2-btn-primary {
  background: linear-gradient(135deg, #18e1ff 0%, #0ea5e9 100%);
  color: #000;
  border: none;
  box-shadow: 0 4px 20px rgba(24, 225, 255, 0.4);
}

.hero-v2-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(24, 225, 255, 0.6);
}

.hero-v2-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-v2-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.hero-v2-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* ─────────────────────────────────────────────
   RIGHT SIDE - Cards
   ───────────────────────────────────────────── */
.hero-v2-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 1100px) {
  .hero-v2-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Card base style */
.hero-v2-card {
  background: rgba(17, 22, 28, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.3s ease;
}

.hero-v2-card:hover {
  border-color: rgba(24, 225, 255, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Card header */
.hero-v2-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hero-v2-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.hero-v2-card-badge {
  font-size: 0.7rem;
  padding: 4px 10px;
  background: rgba(24, 225, 255, 0.15);
  border: 1px solid rgba(24, 225, 255, 0.3);
  border-radius: 999px;
  color: #18e1ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sample Card preview */
.hero-v2-sample-card {
  width: 100%;
  max-width: 380px;
}

.sample-card-preview {
  background: linear-gradient(145deg, #141a21 0%, #0f1318 100%);
  border: 1px solid rgba(24, 225, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sample-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sample-card-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.sample-card-brand {
  display: flex;
  flex-direction: column;
}

.sample-card-brand-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #fff;
}

.sample-card-brand-type {
  font-size: 0.65rem;
  color: #18e1ff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sample-card-body {
  display: flex;
  gap: 14px;
}

.sample-card-photo {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sample-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sample-card-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sample-card-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.sample-card-row {
  display: flex;
  gap: 16px;
}

.sample-card-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sample-card-tier {
  color: #d4af37;
}

.sample-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sample-card-id {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
}

.sample-card-cta {
  font-size: 0.8rem;
  padding: 8px 16px;
  background: rgba(24, 225, 255, 0.1);
  border: 1px solid rgba(24, 225, 255, 0.3);
  border-radius: 8px;
  color: #18e1ff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sample-card-cta:hover {
  background: rgba(24, 225, 255, 0.2);
}

/* Poll Card */
.hero-v2-poll-card {
  width: 100%;
  max-width: 380px;
}

.poll-question {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px 0;
}

.poll-votes {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 8px;
}

.poll-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.poll-option::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--percent, 0%);
  background: rgba(24, 225, 255, 0.1);
  transition: width 0.5s ease;
}

.poll-option:hover {
  border-color: rgba(24, 225, 255, 0.3);
  background: rgba(24, 225, 255, 0.05);
}

.poll-option-label {
  position: relative;
  font-size: 0.85rem;
  color: #e9f3f6;
  z-index: 1;
}

.poll-option-percent {
  position: relative;
  font-size: 0.8rem;
  font-weight: 600;
  color: #18e1ff;
  z-index: 1;
}

.poll-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.poll-cta {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.poll-cta:hover {
  color: #18e1ff;
}

/* Stats bar */
.hero-v2-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-v2-stat {
  text-align: center;
}

.hero-v2-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #18e1ff;
  line-height: 1;
}

.hero-v2-stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-v2 {
    min-height: auto;
    margin: 0.5rem;
  }

  .hero-v2-content {
    padding: 32px 20px 60px;
  }

  .hero-v2-headline {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .hero-v2-cards {
    flex-direction: column;
  }

  .hero-v2-sample-card,
  .hero-v2-poll-card {
    max-width: 100%;
  }

  .hero-v2-stats {
    gap: 24px;
  }

  .hero-v2-stat-value {
    font-size: 1.2rem;
  }

  .hero-v2-skyline {
    height: 100px;
  }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-v2-orbs::before,
  .hero-v2-orbs::after,
  .hero-v2-grid,
  .speed-line,
  .v2-particle,
  .hero-v2-skyline::after,
  .hero-v2-road::before,
  .hero-v2-headline .word {
    animation: none !important;
  }
}