:root {
  --surface: #131313;
  --surfaceContainerLowest: #0e0e0e;
  --surfaceContainerLow: #1b1c1c;
  --surfaceContainerHigh: #2a2a2a;
  --surfaceContainerHighest: #353535;
  --primary: #fda9ff;
  --primaryContainer: #782182;
  --onSurface: #e4e2e1;
  --onSurfaceVariant: #d4c1d0;
  --onPrimaryContainer: #f795fc;
  --outlineVariant: #50434e;
}

html,
body {
  background: var(--surface);
}

body {
  font-size: 21px;
}

.hero-section {
  /* Mobile best practice: avoid full-screen heroes; keep enough room to scroll */
  min-height: 70svh;
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 860px;
  }
}

/* Subtle “tread-like” background: alternating faint diagonal lines + a soft purple tint */
.hero-pattern {
  background-image: repeating-linear-gradient(
      135deg,
      rgba(120, 33, 130, 0.12) 0px,
      rgba(120, 33, 130, 0.12) 1px,
      transparent 1px,
      transparent 18px
    ),
    radial-gradient(circle at 10% 20%, rgba(253, 169, 255, 0.08), transparent 55%),
    radial-gradient(circle at 80% 60%, rgba(120, 33, 130, 0.1), transparent 45%);
}

.hero-video {
  z-index: 0;
}

.hero-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.05);
}

.hero-video-overlay {
  z-index: 1;
  background: radial-gradient(circle at 50% 30%, rgba(120, 33, 130, 0.45), rgba(19, 19, 19, 0.7) 55%),
    linear-gradient(to bottom right, rgba(253, 169, 255, 0.16), rgba(120, 33, 130, 0.22));
}

.glass-panel {
  background: rgba(42, 42, 42, 0.6);
  backdrop-filter: blur(20px);
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-link svg {
  width: 22px;
  height: 22px;
}

@keyframes pulse-purple {
  0%,
  100% {
    color: #fda9ff;
    text-shadow: 0 0 20px rgba(253, 169, 255, 0.4);
  }
  50% {
    color: #f795fc;
    text-shadow: 0 0 40px rgba(120, 33, 130, 0.8);
  }
}

.animate-pulse-purple {
  animation: pulse-purple 3s infinite ease-in-out;
}

/* Keep the car photo visually centered inside the bento box */
.car-hero-image {
  object-position: 50% 50%;
}

/* Make hover feel premium without borders (ghost lift) */
.group:hover .rounded-lg {
  /* no-op: keep specificity low */
}

/* Ensure icons match the design vibe */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse-purple {
    animation: none;
  }
  .group:hover img {
    transition: none;
  }
}