/* /simulator — one 3D car, three modes. Sibling of the retired tint-sim /
   wrap-sim sheets; the layout is the viewer on top, mode tabs, then the
   active mode's controls. On phones the viewer sticks under the header so
   the car stays visible while the controls scroll. */

.s3d{max-width:var(--wrap);margin:0 auto;padding:0 18px}

/* The stage owns the backdrop now, not the viewer. That is what makes the
   reveal possible: model-viewer's canvas carries alpha, so with the element
   itself transparent the car composites over whatever the stage puts behind
   it — and a light placed there is HIDDEN where the car is and visible where
   it is not. The glow rims the silhouette instead of washing over the paint,
   which is the one thing an overlay can never do. */
.s3d-stage{position:relative;overflow:hidden;border-radius:var(--radius);
  background:radial-gradient(circle at 50% 30%,#232a33,#0a0c0f)}

/* The colour arriving, as a light orbiting the car.
   Two earlier attempts sat in FRONT: a tinted fog that dimmed the thing
   being looked at, then a bright band that at least only brightened but
   still crossed the paint. Both were overlays, and an overlay cannot go
   behind. This one does: a soft blob of the arriving colour, swung a full
   turn around the centre so it passes behind the nose, the roof and the
   tail in sequence and reads as ambient light travelling around the car.
   `screen` so it only ever adds, and generously blurred because a hard edge
   behind a car looks like a mistake rather than a light. */
.s3d-halo{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0}
/* the head — the light itself, at the leading edge of the orbit */
.s3d-halo::before{content:"";position:absolute;left:50%;top:50%;
  width:52%;height:52%;margin:-26% 0 0 -26%;
  background:radial-gradient(circle, #fff 0%, var(--sweep, #fff) 26%, rgba(255,255,255,.16) 48%, transparent 72%);
  mix-blend-mode:screen;filter:blur(26px);
  transform:translateX(70%);z-index:1}
/* the tail — an arc trailing the head, so the pass has a direction instead of
   being a blob that happens to move. A conic gradient rotates with the
   container for free; the radial mask cuts the filled disc back to a ring so
   the light runs AROUND the car rather than washing across the middle of it. */
.s3d-halo::after{content:"";position:absolute;inset:6%;border-radius:50%;
  /* The last stop before the head is WHITE, not the film colour. The tail is
     tinted with whatever is arriving, and half the catalogue is black or
     near-black — on those the whole trail would render as nothing. A white
     core at the leading edge means the light is always a light, and the
     colour still washes the length of the trail behind it. */
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 236deg,
    rgba(255,255,255,.06) 288deg,
    var(--sweep, #fff) 338deg,
    rgba(255,255,255,.85) 356deg,
    transparent 360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 54%, #000 74%);
  mask:radial-gradient(closest-side, transparent 54%, #000 74%);
  mix-blend-mode:screen;filter:blur(14px)}
/* The orbit is squashed to the stage, not circular. The stage is 1144x560 —
   wide and short, like the car in it — so a circular path at a radius wide
   enough to clear the nose sends the light straight out of frame at the top
   and bottom. scaleY keeps the same sweep past the nose and tail while the
   pass over the roof stays inside the box. It flattens the glow along with
   it, which suits: a light raking around a car is a band, not a ball. */
/* Fast away, long glide: the easing is what makes it read as a light thrown
   around the car rather than a value being interpolated. It travels 460° —
   more than a full turn — so it finishes past where it started and never
   looks like it is returning to park. */
.s3d-halo.is-run{animation:s3dHalo var(--fit, 1400ms) cubic-bezier(.16,.78,.26,1)}
@keyframes s3dHalo{
  0%   {opacity:0;   transform:scaleY(.55) scale(.84) rotate(-60deg)}
  10%  {opacity:1}
  52%  {              transform:scaleY(.55) scale(1.08) rotate(215deg)}
  86%  {opacity:.5}
  100% {opacity:0;   transform:scaleY(.55) scale(.9)  rotate(400deg)}
}
/* the viewer sits over the light; its own background is gone so the car can
   composite against the stage rather than against an opaque panel */
model-viewer#s3d-viewer{position:relative;z-index:1;background:transparent}
@media (prefers-reduced-motion: reduce){
  .s3d-halo{display:none}
}

model-viewer#s3d-viewer{
  width:100%;height:56vh;min-height:320px;max-height:560px;
  border-radius:var(--radius);--poster-color:transparent;
}
.s3d-poster{display:grid;place-items:center;height:100%;color:#9aa5b1;font-size:14px}
@media(max-width:899px){
  /* On a phone the controls are longer than the screen, so the car stays put
     while you scroll them — otherwise you are choosing a colour you cannot
     see. The stick has to be on the STAGE, not on the viewer: the stage
     clips the spray pass with overflow:hidden, and an overflow ancestor
     turns itself into the scroll container, which leaves a sticky child
     nowhere to travel. */
  .s3d-stage{position:sticky;top:70px;z-index:5}
  model-viewer#s3d-viewer{height:38vh;min-height:230px}
}

/* outside / driver's seat, in tint mode */
.s3d-seat{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0 4px}
.s3d-seatbtn{appearance:none;cursor:pointer;font-family:var(--font-display);font-weight:700;
  font-size:13px;padding:11px 10px;border-radius:11px;
  color:var(--text-inv-2);background:var(--ink-800);border:1px solid var(--ink-700)}
.s3d-seatbtn[aria-pressed="true"]{color:#fff;background:var(--blue-700);border-color:var(--blue-700)}
.s3d-seatbtn:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px}
.s3d-lhd{margin-top:10px}

.s3d-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.s3d-mode{appearance:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--text-inv-2);background:var(--ink-800);border:1px solid var(--ink-700);
  padding:13px 8px;border-radius:12px;text-align:center;transition:.15s}
.s3d-mode:hover{color:#fff;border-color:var(--ink-600)}
.s3d-mode[aria-selected="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
@media(max-width:420px){.s3d-mode{font-size:12.5px;padding:11px 4px}}

.s3d-panel{margin-top:16px}
.s3d-hint{font-size:12.5px;line-height:1.6;color:var(--text-inv-2);max-width:72ch;margin:0 0 14px}

.s3d-group{margin-top:16px}
.s3d-label{display:block;font:600 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-inv-2);margin:0 0 9px}

.s3d-tabs{display:flex;flex-wrap:wrap;gap:8px}
.s3d-tab{appearance:none;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--text-inv-2);background:var(--ink-800);border:1px solid var(--ink-700);
  padding:9px 16px;border-radius:999px;transition:.15s;text-align:left}
.s3d-tab:hover{color:#fff;border-color:var(--ink-600)}
.s3d-tab[aria-pressed="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.s3d-tab small{display:block;font-weight:400;font-size:10px;opacity:.75}

.s3d-swatches{display:flex;flex-wrap:wrap;gap:9px}
.s3d-sw{width:38px;height:38px;border-radius:10px;border:2px solid rgba(255,255,255,.14);cursor:pointer;
  flex:none;padding:0;transition:border-color .15s,transform .1s}
.s3d-sw:hover{transform:scale(1.08)}
.s3d-sw[aria-pressed="true"]{border-color:#fff}

/* wraps at every width: the preset row below takes flex:1 1 100% and has to
   land on its own line, not get squeezed in beside the slider */
.s3d-slide{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.s3d-slide label{font-size:12.5px;color:var(--text-inv-2);min-width:130px}
.s3d-slide input[type=range]{flex:1;accent-color:var(--blue-500)}
.s3d-read{font-size:12px;min-width:132px;text-align:right;color:var(--text-inv-2)}
.s3d-read b{font-size:13.5px;color:#fff}
.s3d-ok{color:#5fd08a}
.s3d-no{color:#ff6b7f;font-weight:600}
@media(max-width:560px){
  .s3d-slide label{min-width:0;flex:1 1 100%}
  .s3d-read{min-width:0;margin-left:auto}
}

/* Preset VLT levels. They sit under the slider they drive, so an unlinked
   pair still reads as two independent controls rather than one row of
   buttons whose target you have to remember. */
.s3d-presets{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;margin:2px 0 4px 142px}
.s3d-preset{appearance:none;cursor:pointer;font-family:var(--font-body);font-size:12px;font-weight:600;
  color:var(--text-inv-2);background:var(--ink-800);border:1px solid var(--ink-700);
  padding:6px 12px;border-radius:999px;transition:.15s}
.s3d-preset:hover{color:#fff;border-color:var(--ink-600)}
.s3d-preset[aria-pressed="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
/* "Clear glass" is not another VLT step — it is the no-film state, so it sits
   apart from the numbers rather than reading as the lightest film */
.s3d-clear{margin-left:8px;position:relative}
.s3d-clear::before{content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:1px;background:var(--ink-600)}

.s3d-link{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-inv-2);
  cursor:pointer;margin:0 0 4px}
.s3d-link input{accent-color:var(--blue-500);width:15px;height:15px;cursor:pointer}

/* Sky is a product you add, not a preference you tick, so it gets the size
   of one — a full-width option card that names the film and its numbers,
   and lights up when it is on. */
.s3d-addon{display:flex;align-items:center;gap:14px;flex-wrap:wrap;cursor:pointer;
  margin:16px 0 0;padding:15px 18px;border-radius:var(--radius);
  background:var(--ink-800);border:1px solid var(--ink-700);transition:.15s}
.s3d-addon:hover{border-color:var(--ink-600)}
.s3d-addon.is-on{border-color:var(--blue-500);background:rgba(41,121,255,.10)}
.s3d-addon input{accent-color:var(--blue-500);width:21px;height:21px;cursor:pointer;flex:none}
.s3d-addon-t{font:600 14.5px/1.35 var(--font-body);color:#fff}
.s3d-addon-s{font-size:12px;color:var(--text-inv-2);margin-left:auto;white-space:nowrap}
@media(max-width:560px){
  .s3d-addon{gap:11px;padding:13px 14px}
  .s3d-addon-s{margin-left:35px;flex:1 1 100%}
}

@media(max-width:560px){
  .s3d-presets{margin-left:0}
  /* the row wraps on a phone, so the divider ends up hanging at the start of
     the second line with nothing to divide */
  .s3d-clear{margin-left:0}
  .s3d-clear::before{display:none}
}

.s3d-search{width:100%;max-width:420px;margin:0 0 10px;padding:9px 13px;border-radius:999px;
  font:400 13px/1.4 var(--font-body);color:#fff;background:var(--ink-800);
  border:1px solid var(--ink-700);appearance:none}
.s3d-search::placeholder{color:var(--text-inv-2)}
.s3d-search:focus{outline:none;border-color:var(--blue-500)}
/* while a query is running the finish tabs are not what is filtering the
   grid, so they step back rather than claiming to be in charge */
#s3d-finishes.is-muted{opacity:.45}
.s3d-none{font-size:12.5px;color:var(--text-inv-2);margin:4px 0 0}

.s3d-chips{display:flex;flex-wrap:wrap;gap:8px}
.s3d-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;
  background:var(--ink-800);border:1px solid var(--ink-700);border-radius:999px}
.s3d-chip.is-on{border-color:var(--blue-500)}
.s3d-chip-sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  padding:0;cursor:pointer;flex:none}
.s3d-chip-name{background:none;border:0;padding:0;cursor:pointer;font:600 12.5px var(--font-body);color:#fff}
.s3d-chip-x{background:none;border:0;padding:0 2px;cursor:pointer;font-size:15px;line-height:1;
  color:var(--text-inv-2)}
.s3d-chip-x:hover{color:#fff}

.s3d-act{appearance:none;cursor:pointer;font:600 12.5px var(--font-body);color:var(--text-inv-2);
  background:none;border:1px solid var(--ink-600);padding:8px 13px;border-radius:999px;transition:.15s}
.s3d-act:hover{color:#fff;border-color:var(--ink-500,var(--ink-600))}
.s3d-act.is-done{color:#5fd08a;border-color:#5fd08a}

/* the poster is a still of the same car at the same camera, so the swap when
   the model finishes loading is a change of medium, not of subject */
.s3d-poster{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.s3d-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.s3d-poster span{position:relative;z-index:1;font-size:12.5px;color:var(--text-inv-2);
  background:rgba(0,0,0,.45);padding:6px 14px;border-radius:999px;align-self:flex-end;margin-bottom:18px}

.s3d-read-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  padding:14px 16px;background:var(--ink-800);border-radius:var(--radius);margin-top:18px}
.s3d-picked{font-size:14px;color:var(--text-inv-2)}
.s3d-picked b{font-family:var(--font-display);color:#fff;font-size:15px}
.s3d-picked .cd{font-size:11.5px;letter-spacing:.06em;color:var(--blue-200);
  border:1px solid var(--ink-600);padding:2px 8px;border-radius:999px;margin-left:6px}
.s3d-read-row .btn{margin-left:auto;min-height:42px;padding:0 18px;font-size:13px}

.s3d-note{font-size:12px;line-height:1.6;color:var(--text-inv-2);margin:16px 0 0;max-width:78ch}