/* Approach plate (homepage section 01). Sits between the headline and the two
   roads, centered on the gutter between them. Generated by js/lg-approach.js. */

.home-statement .ap-plate{
  position:relative;
  margin-top:clamp(40px,5vw,72px);
  color:var(--ivory);
  pointer-events:none;
}
/* If the script never runs, the plate stays empty (zero height, no margin) and the roads keep
   their original spacing. Do not use display:none here: the script measures this box. */
.home-statement .ap-plate:empty{margin:0}
.home-statement .ap-plate:not(:empty) + .roads{margin-top:0}
.ap-plate svg{display:block;width:100%;height:auto;overflow:visible}

/* Draw-on. pathLength is 1, so one dash covers the whole stroke. */
.ap-plate .ap-d{
  fill:none;
  stroke:url(#ap-fade);
  stroke-width:.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1 2;
  stroke-dashoffset:1.02;
  transition:stroke-dashoffset var(--t,1.2s) var(--e,ease) var(--d,0s);
}
.ap-plate.is-drawn .ap-d{stroke-dashoffset:0}
/* The hand presses harder than the ruler */
.ap-plate .ap-d.ap-l{stroke-width:1}
.ap-plate .ap-d.ap-s{stroke-width:.65;stroke-linecap:butt}
.ap-plate .ap-d.ap-c{stroke:var(--champ);stroke-width:1.15}

/* Things that fade in instead of drawing */
.ap-plate .ap-f{opacity:0;transition:opacity 1s ease var(--d,0s)}
.ap-plate.is-drawn .ap-f{opacity:1}

/* The question */
.ap-plate .ap-q circle{fill:none;stroke:var(--champ);stroke-width:1}
.ap-plate .ap-q .ap-dot{fill:var(--champ);stroke:none}

/* Drafting furniture */
.ap-plate .ap-k{
  fill:none;
  stroke:var(--ivory);
  stroke-width:.8;
  stroke-dasharray:1.5 5;
  stroke-linecap:round;
}
.ap-plate .ap-arm path{
  fill:none;
  stroke:var(--champ);
  stroke-width:.9;
  vector-effect:non-scaling-stroke;
  opacity:.85;
}
.ap-plate .ap-arm{transform:rotate(var(--a0,-30deg))}

/* Hover or focus on a road wakes its half */
@keyframes ap-swell{
  0%,100%{stroke-width:1px}
  35%{stroke-width:2.1px}
}
@keyframes ap-sweep{
  0%,100%{transform:rotate(var(--a0))}
  50%{transform:rotate(var(--a1))}
}
.ap-plate.is-drawn[data-hot="a"] .ap-left .ap-l{
  animation:ap-swell 1.5s ease-in-out calc(var(--k) * 70ms) 1;
}
.ap-plate.is-drawn[data-hot="b"] .ap-arm{
  animation:ap-sweep 2.4s cubic-bezier(.5,0,.2,1) 1;
}

/* A plate that was already drawn and got rebuilt (resize) shows finished */
.ap-plate.is-still .ap-d,
.ap-plate.is-still .ap-f{transition:none}

@media (prefers-reduced-motion:reduce){
  .ap-plate .ap-d,
  .ap-plate .ap-f{transition:none}
  .ap-plate.is-drawn[data-hot] .ap-left .ap-l,
  .ap-plate.is-drawn[data-hot] .ap-arm{animation:none}
}