/* css/harbour.css
   Formula 1 Monaco GP Paddock & Telemetry Backdrop.
   Authentic night-race environment: deep asphalt, Rosso Corsa duotone atmosphere,
   overhead linear gantry floodlights, technical CAD telemetry markings,
   aerodynamic streamline curves, 2x2 carbon-weave texture, and FIA apex curb trims. */

.harbour {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Sky / Paddock Base Wash with Rosso Corsa Duotone ---- */
.paddock-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 95% 65% at 50% 100%, rgba(185, 28, 28, 0.16) 0%, rgba(42, 10, 16, 0.45) 45%, transparent 80%),
    radial-gradient(ellipse 65% 45% at 20% 35%, rgba(220, 38, 38, 0.09) 0%, transparent 65%),
    linear-gradient(to bottom in oklab,
      #06080B 0%,
      #0B0E14 30%,
      #130E16 65%,
      #180A10 85%,
      #090C10 100%);
}

/* ---- FIA Apex Rumble Curb Architectural Trim ---- */
.paddock-curb-top,
.paddock-curb-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    -45deg,
    #DC2626 0 14px,
    #F1F5F9 14px 28px
  );
  opacity: 0.72;
  z-index: 1;
}
.paddock-curb-top { top: var(--ses-h, 34px); }
.paddock-curb-bottom { bottom: var(--strip, 34px); }

/* ---- Overhead Pit-Gantry Luminaire Rig ----
   High-intensity linear floodlights casting focused directional light cones
   over the pit straight, replicating Monaco & Singapore night GP gantries. */
.paddock-luminaire {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 65vh;
  pointer-events: none;
}

.luminaire-beam {
  position: absolute;
  top: 0;
  height: 100%;
  transform-origin: top center;
  opacity: 0.52;
}

.beam-1 {
  left: 12%; width: 28%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 235, 235, 0.14) 0%, rgba(220, 38, 38, 0.05) 45%, transparent 75%);
  transform: perspective(600px) rotateX(15deg) skewX(-6deg);
}

.beam-2 {
  left: 36%; width: 26%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(220, 235, 255, 0.06) 50%, transparent 75%);
  transform: perspective(600px) rotateX(15deg);
}

.beam-3 {
  left: 60%; width: 26%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(220, 235, 255, 0.06) 50%, transparent 75%);
  transform: perspective(600px) rotateX(15deg);
}

.beam-4 {
  right: 8%; width: 28%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 235, 235, 0.14) 0%, rgba(220, 38, 38, 0.05) 45%, transparent 75%);
  transform: perspective(600px) rotateX(15deg) skewX(6deg);
}

/* ---- Telemetry & CAD Blueprint SVG Layer ---- */
.paddock-telemetry-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---- Ground Asphalt & Pit-Lane Tarmac ---- */
.paddock-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24%;
  pointer-events: none;
}

.ground-tarmac {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom in oklab,
    rgba(14, 10, 16, 0.72) 0%,
    rgba(8, 6, 10, 0.95) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ground-tyre-marks {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 25% 100%, rgba(0, 0, 0, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 55% 35% at 75% 100%, rgba(0, 0, 0, 0.6) 0%, transparent 70%),
    repeating-linear-gradient(90deg,
      transparent 0 48px, rgba(255, 255, 255, 0.016) 48px 50px);
  opacity: 0.75;
}

/* ---- 2x2 Twill Carbon-Fiber Weave Texture ---- */
.paddock-carbon-mesh {
  position: absolute; inset: 0;
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}

/* ---- Live Telemetry Status Ribbon ---- */
.paddock-telemetry-ribbon {
  position: absolute;
  bottom: calc(var(--strip, 34px) + 6px);
  left: clamp(16px, 2.5vw, 40px);
  right: clamp(16px, 2.5vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}

.ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-pip {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22C55E;
}

@media (max-width: 899px) {
  .ribbon-stat { display: none; }
}

/* ---- Vignette ---- */
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 45%, rgba(4, 6, 9, 0.78) 100%);
}