/* css/track-map.css */
/* Pinned bottom-right, above the strip. The car's travel is a scroll timeline:
   offset-distance from 0% to 100% across the whole document, so the dot's
   position on the lap IS the read position. No JavaScript drives it. */
.tm {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 300 / 190;
  pointer-events: auto;
}

.tm-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tm-track { fill: none; stroke: var(--line); stroke-width: 7.5; stroke-linejoin: round; stroke-linecap: round; }
/* Marbles: rubber picked off the tyres and swept off the racing line. Drawn as
   a dotted stroke just outside the line, appearing only over the part of the lap
   that has actually been driven -- so the track dirties behind the reader, the
   way it does over a stint. Same dash geometry as the driven lap, offset. */
.tm-marbles {
  fill: none;
  stroke: #6B5A46;
  stroke-width: 5.6;
  stroke-linecap: round;
  stroke-dasharray: 0.5 7;
  opacity: calc(var(--lap-d, 0) / 100 * .5);
  transform: translate(0.9px, 1.6px);
}

/* How much of the lap has been driven. Soft Rosso Corsa under-glow on the tarmac,
   serving as the base illumination for the 4 luminous red trailing lines. */
.tm-done {
  fill: none;
  stroke: #DC2626;
  stroke-width: 3.2;
  stroke-dasharray: var(--lap-len, 1000);
  stroke-dashoffset: calc(var(--lap-len, 1000) * (1 - var(--lap-d, 0) / 100));
  opacity: .28;
}

.tm-line  { fill: none; stroke: var(--slate); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; }

/* Three.js 3D WebGL Ferrari Car & 4 Red Trailing Lines Canvas */
.tm-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Realistic Circuit Overlays */
.tm-sectors text {
  font-family: var(--font-mono);
  font-size: 3.2px;
  letter-spacing: .06em;
}
.tm-drs text {
  font-family: var(--font-mono);
  letter-spacing: .1em;
}
.tm-pit-lane {
  stroke-dasharray: 2 3;
}
.tm-kerbs polyline {
  stroke-linecap: butt;
}

/* The car lives inside the SVG, so offset-path resolves in the lap's own user
   units and it follows the circuit exactly as drawn. As an HTML element it
   resolved in CSS pixels instead, tracing a miniature of the path in the
   corner of the panel. cx/cy are 0 because offset-distance does the placing. */
.tm-car {
  /* Amber under braking, bone off it. color-mix blends it, so the car shifts
     through a corner rather than switching at a threshold. Not a glow: a halo
     on a map marker is decoration, and this build has exactly two of those,
     both actual light sources. */
  fill: color-mix(in oklab, var(--amber) calc(var(--brake, 0) * 100%), var(--bone));
  /* Without this an SVG element's transform-origin resolves against the whole
     viewBox, not its own box, so offset-path drops the car a fixed distance off
     the circuit no matter what offset-distance says. */
  transform-box: fill-box;
  transform-origin: center;
  /* A ring, not a halo: the car is a marker on a map and needs to separate from
     grey asphalt, not glow. A chromatic halo here would be decoration, unlike
     the start lights and the floodlights, which are actual light sources. */
  stroke: var(--asphalt);
  stroke-width: 1.6;
  paint-order: stroke;
  offset-distance: calc(var(--lap-d, 0) * 1%);
  offset-path: path("M 34 150 L 96 150 C 112 150 120 145 122 136 C 125 122 116 112 112 100 C 108 88 114 76 128 73 C 142 70 152 76 155 87 C 158 97 165 101 173 100 C 184 98 190 104 186 110 C 182 116 172 114 172 107 C 172 100 182 97 192 100 C 204 104 210 114 218 124 C 230 138 248 145 264 141 C 276 138 274 129 265 130 C 256 131 258 140 249 144 C 238 149 226 152 214 155 C 203 158 200 150 190 152 C 180 154 182 162 171 163 C 160 164 152 160 147 153 C 141 145 128 144 116 146 C 92 150 60 150 34 150 Z");
  offset-rotate: 0deg;
}
/* How far round the lap the car is, 0 to 100.

   This is animated on .lap-track, an HTML element, and inherits down into the
   SVG. It cannot be animated on the car itself: a scroll timeline attached to
   an SVG element reports a null currentTime in Chrome, so the animation is
   created, reports "running", and never advances. Animating a custom property
   on an HTML ancestor is the same mechanism the hero's descent already uses,
   and it demonstrably ticks. js/track-map.js writes the keyframes. */
@property --lap-d {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* 0 off the brakes, 1 on them. Drives a colour mix on the car, nothing else. */
@property --brake {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Lap progress (--lap-d) and brakes (--brake) are driven frame-synchronously
   by onScrollRunway() in js/circuit.js to stay in 100% lockstep with the
   horizontal placards across all browsers (including Safari and Firefox). */


/* The button IS the dot. The name hangs off it absolutely, so it can sit on
   either side without ever moving the dot: centring a flex row on the corner
   put the dot half a label's width away from the circuit, and reversing the row
   for right-hand corners moved it again by a different amount. */
.tm-corner {
  --dot: 13px;
  position: absolute;
  width: var(--dot); height: var(--dot);
  transform: translate(-50%, -50%);
  padding: 0; background: none; border: 0; cursor: pointer;
}
.tm-dot {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--asphalt); border: 1.5px solid var(--line);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.tm-name {
  position: absolute; top: 50%; left: calc(100% + 8px);
  transform: translateY(-50%);
  font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em;
  color: var(--slate); white-space: nowrap;
  transition: color 180ms ease, opacity 260ms ease;
}
.tm-flip .tm-name { left: auto; right: calc(100% + 8px); }

/* A marshal at every corner. There is one at every corner of a real circuit,
   which is the whole reason the post is small and always there rather than a
   decoration that appears on hover: the flag is what moves, not the marshal.
   Green flag, because green means the track is clear. */
.tm-post {
  position: absolute; left: 50%; bottom: calc(100% + 3px);
  width: 1px; height: 9px; background: var(--slate); opacity: .45;
  transform: translateX(-50%); transform-origin: bottom center;
  transition: opacity 200ms ease;
}
.tm-flag {
  position: absolute; left: 1px; top: 0;
  width: 6px; height: 4px; background: var(--green);
  transform-origin: left center;
  opacity: .55; transition: opacity 200ms ease;
}
.tm-corner:hover .tm-post,
.tm-corner:focus-visible .tm-post { opacity: .9; }
.tm-corner:hover .tm-flag,
.tm-corner:focus-visible .tm-flag { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .tm-corner:hover .tm-flag,
  .tm-corner:focus-visible .tm-flag { animation: flag-wave 700ms ease-in-out infinite; }
  @keyframes flag-wave {
    0%, 100% { transform: rotate(0deg)   scaleX(1);   }
    35%      { transform: rotate(-16deg) scaleX(.82); }
    70%      { transform: rotate(11deg)  scaleX(.94); }
  }
}

/* A corner that holds nothing still has a marshal, just a quieter one. */
.tm-corner--plain .tm-post { height: 6px; opacity: .3; }
.tm-corner--plain .tm-flag { width: 4px; height: 3px; opacity: .35; }

/* A corner that holds nothing is still a corner: drawn, unnamed, not a target. */
.tm-corner--plain { --dot: 8px; cursor: default; }
.tm-corner--plain .tm-dot { opacity: .5; }
.tm-corner--plain .tm-name { display: none; }
.tm-corner--plain .tm-name { display: none; }
.tm-corner:hover .tm-dot, .tm-corner:focus-visible .tm-dot {
  border-color: var(--bone); transform: scale(1.25);
}
.tm-corner:hover .tm-name, .tm-corner:focus-visible .tm-name { color: var(--bone); }
.tm-corner.is-here .tm-dot { background: #DC2626; border-color: #FF3B30; }
.tm-corner.is-here .tm-name { color: var(--bone); }

/* Touch: the map is a tap target, and fingers need a bigger one. */
@media (hover: none) { .tm-corner { --dot: 16px; } }

/* Below the two-column layout the map is a short strip across the top, and the
   corner names hang off it and push the page sideways. Drop them, keep the
   dots: the strip already says which corner you are at, so only the labels are
   lost. 899px is deliberate -- it is exactly where css/stage.css stops putting
   the circuit beside the content. */
@media (max-width: 899px) {
  .tm-name { display: none; }
  .tm-corner.is-here .tm-name {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(100% + 4px);
    transform: translateY(-50%);
    background: rgba(15, 20, 28, 0.96);
    border: 1px solid rgba(220, 38, 38, 0.7);
    color: #ffffff;
    font-size: 7.5px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    z-index: 10;
  }
  .tm-flip.is-here .tm-name {
    left: auto;
    right: calc(100% + 4px);
  }
  .tm {
    position: sticky !important;
    top: var(--ses-h, 28px);
    z-index: 40;
    width: 100%;
    max-width: min(230px, 74vw);
    margin: 0 auto;
    background: rgba(8, 11, 16, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    padding: 2px 6px 2px;
    box-sizing: border-box;
    pointer-events: none;
  }
  .tm .tm-corner {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) { .tm-car { offset-distance: 0%; } }