/* 70 Transport (#transport). At rest the SVG is final; behind .ar-motion the figure's
   --ar-progress slides the platform in over 0.12-0.38, then the dimensions draw. */

@property --ar-transport-fit { syntax: "<number>"; inherits: true; initial-value: 1; }

.ar-transport__grid { display: grid; gap: var(--wp--preset--spacing--60); }
.ar-transport__facts { max-width: 16rem; margin-block-start: var(--wp--preset--spacing--40); }
.ar-transport__fig { padding: clamp(1rem, 3vw, 2rem); background-color: var(--wp--preset--color--ink); }
.ar-transport__fig .ar-caption { margin-block-start: 0.75rem; text-align: end; }

@media (min-width: 1024px) {
  .ar-transport__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); }
}

/* Label size: viewBox units, against the scale (about 12 px on screen). */
.ar-transport__svg { --ar-transport-label: clamp(12px, 47px - 5.8vw, 26px); width: 100%; height: auto; }

@media (min-width: 1024px) {
  .ar-transport__svg { --ar-transport-label: clamp(13px, 33px - 1.56vw, 17px); }
}

.ar-transport__svg :where(path, rect, circle) { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Fade mask: white stops, so luminance and alpha both read the stop opacity. */
.ar-transport__svg stop { stop-color: var(--wp--preset--color--white); }
.ar-transport__fade { fill: url(#ar-transport-fade-g); }

/* Pickup: steel outline, iron detail, fading out towards the cab. */
.ar-transport__body, .ar-transport__shell, .ar-transport__arch, .ar-transport__gate { fill: var(--wp--preset--color--ink); }
.ar-transport__body, .ar-transport__wall { stroke-width: 2; }
.ar-transport__body, .ar-transport__wall, .ar-transport__arch, .ar-transport__gate, .ar-transport__ext { stroke: var(--wp--preset--color--steel); }
.ar-transport__detail, .ar-transport__axis, .ar-transport__tire, .ar-transport__bay { stroke: var(--wp--preset--color--iron); }
.ar-transport__floor { fill: color-mix(in srgb, var(--wp--preset--color--graphite) 55%, transparent); }
.ar-transport__tire { fill: var(--wp--preset--color--graphite); }
.ar-transport__bay { stroke-dasharray: 4 4; }
.ar-transport__axis { stroke-dasharray: 14 5 2 5; }

/* Platform: the subject, in mist. */
.ar-transport__deck { fill: var(--wp--preset--color--graphite); stroke: var(--wp--preset--color--mist); stroke-width: 2; }
.ar-transport__wheel, .ar-transport__mast { fill: var(--wp--preset--color--graphite); }
.ar-transport__wheel, .ar-transport__mast, .ar-transport__lens, .ar-transport__axle { stroke: var(--wp--preset--color--silver); }
.ar-transport__svg .ar-transport__led { fill: var(--wp--preset--color--chartreuse); stroke: none; }

/* Dimensions. */
.ar-transport__ext { stroke-dasharray: 2 4; }
.ar-transport__dim { stroke: var(--wp--preset--color--silver); stroke-linecap: butt; }

.ar-transport__label {
  fill: var(--wp--custom--color--text-inverse);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--ar-transport-label);
  font-weight: 700;
  letter-spacing: var(--wp--custom--tracking--wide);
}

/* The platform eases (smoothstep) over 0.12-0.38. The fit, a registered number, steps to 1 at 0.38
   and eases there in time: the dimensions draw once the platform has seated, and are complete
   before the figure is centred (progress about 0.47-0.5). Going back is instant. */
.ar-motion .ar-transport__svg {
  --ar-transport-t: clamp(0, (var(--ar-progress, 1) - 0.12) / 0.26, 1);
  --ar-transport-go: clamp(0, (var(--ar-progress, 1) - 0.38) * 1000, 1);
  --ar-transport-fit: var(--ar-transport-go);
  transition: --ar-transport-fit calc(var(--ar-transport-go) * var(--ar-dur-long)) var(--ar-ease-expo);
}

.ar-motion .ar-transport__platform {
  transform: translateX(calc((1 - var(--ar-transport-t) * var(--ar-transport-t) * (3 - 2 * var(--ar-transport-t))) * 232px));
}

.ar-motion .ar-transport__svg .ar-transport__dim {
  stroke-dashoffset: calc(1000 * (1 - var(--ar-transport-fit)));
  transition: none;
}

.ar-motion .ar-transport__svg :is(.ar-transport__ext, .ar-transport__label) { opacity: var(--ar-transport-fit); }