/*
 * Volunteers On Track | VOT 01 race livery
 * Additive layer over GRID Evolution. All other sections remain unchanged.
 * Responsive assets derive from the exact approved car image.
 */
.home-page .hero {
  background: #030404;
}
.home-page .hero-visual {
  inset: 0;
}
.home-page .hero-car {
  object-fit: cover;
  object-position: 50% 50%;
}
.home-page .hero-shade {
  background:
    linear-gradient(90deg, #03040470 0%, #03040438 25%, transparent 48%),
    linear-gradient(0deg, #08090b 0%, #08090b18 18%, transparent 35%);
}
/* These positions are calculated from the source photo by race.js.
   The fallback coordinates match the desktop composition. */
.home-page .headlight-glow {
  left: var(--lamp-x, 42%);
  top: var(--lamp-y, 60%);
  width: var(--lamp-width, 100px);
  height: var(--lamp-height, 46px);
  transform: translate(-50%, -50%) rotate(-14deg);
  background: radial-gradient(ellipse, #ffffff96 0%, #dfedff54 16%, #adcff51a 45%, transparent 73%);
  filter: blur(2px);
}
.home-page .floor-reflection {
  inset: 70% 3% 7% 35%;
  background: radial-gradient(ellipse at 35% 45%, #dbeaff18, transparent 66%);
}
.home-page .hero-caption {
  bottom: 164px;
}
.home-page .hero-controls {
  bottom: 82px;
}
.home-page .hero-scene-label {
  color: #c7c6c2;
}

/* On smaller laptops, contain the wide scene to keep the rear wing in frame. */
@media (min-width: 1101px) and (max-width: 1350px) {
  .home-page .hero-car { object-fit: contain; }
}

/* Tablet and phone: the full car occupies its own visual band.
   Content remains real selectable HTML, with real buttons and links. */
@media (min-width: 701px) and (max-width: 1100px) {
  .home-page .hero,
  .home-page .hero-content {
    min-height: 970px;
  }
  .home-page .hero-content {
    padding-top: 56px;
  }
  .home-page .hero-visual {
    inset: auto 0 68px;
    height: auto;
    aspect-ratio: 1550 / 744;
  }
  .home-page .hero-car {
    object-fit: contain;
  }
  .home-page .hero-shade {
    background:
      linear-gradient(180deg, #030404 0%, transparent 16%),
      linear-gradient(0deg, #08090b 0%, transparent 21%);
  }
  .home-page .hero-controls {
    bottom: 85px;
  }
  .home-page .hero-copy {
    width: 600px;
    max-width: 100%;
  }
  .home-page .hero h1 {
    font-size: clamp(72px, 8.5vw, 90px);
  }
  .home-page .hero-lead {
    max-width: 550px;
  }
  .home-page .hero-caption {
    display: none;
  }
}
@media (max-width: 900px) and (min-width: 701px) {
  .home-page .hero,
  .home-page .hero-content {
    min-height: 900px;
  }
}
@media (max-width: 700px) {
  .home-page .hero-visual {
    inset: auto 0 65px;
    height: auto;
    aspect-ratio: 1550 / 744;
  }
  .home-page .hero-car {
    object-fit: contain;
  }
  .home-page .hero-shade {
    background:
      linear-gradient(180deg, #030404 0%, transparent 14%),
      linear-gradient(0deg, #08090b 0%, transparent 21%);
  }
  .home-page .hero-controls {
    left: 0;
    right: auto;
    bottom: 73px;
  }
  .home-page .floor-reflection {
    inset: 65% 4% 4% 4%;
  }
  .home-page .hero-scene-label {
    display: none;
  }
}
@media (max-width: 370px) {
  .home-page .hero-visual {
    bottom: 91px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-car {
    animation: none !important;
  }
  .home-page .headlight-glow,
  .home-page .floor-reflection {
    transition: none;
  }
}