/* Darlington Grand Prix holding page.

   Colours sampled from Graham's mock, not guessed:
     page ground #030C29, plate navy #0A1942, tab blue #0A2DE2.
   Lettering is live text in Anton, skewed 12 degrees. Anton is the face the
   real National Series identity is built on (Form, via Creative Boom), so this
   is a close match set in real type rather than a picture of type.

   MOTION, all CSS, no JavaScript, no scroll listeners: the lockup pieces load
   in diagonally from the top left, staggered, then the headline sweeps across.
   About 1.8s in total. With prefers-reduced-motion the finished page is simply
   there. */

:root{
  --ground:#030C29;
  --plate:#0A1942;
  --tab:#1D1EEC;   /* the blue of the discipline word in the official lockup, sampled from it */
  --ink:#FFFFFF;
  --muted:#8FA0C8;
  --display:"Anton","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --skew:-12deg;
  --pad:clamp(16px,5vw,64px);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100svh;background:var(--ground);color:var(--ink);font:16px/1.5 var(--body);display:flex;flex-direction:column;overflow-x:hidden}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,7vw,72px);padding:clamp(40px,10vw,96px) var(--pad)}

/* ---------- the lockup ---------- */
.lockup{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vw,14px);width:min(760px,100%)}
/* The official Lloyds and British Cycling National Series lockup, supplied by
   Kyle, used as given: partner strip and plate in one piece. The discipline
   word that came under it ("DOWNHILL") was cropped off at the measured gap
   (y=236 of 320), and DARLINGTON is set here as live text in Anton, in the
   blue sampled from that word (#1D1EEC). The marks belong to Lloyds and
   British Cycling; neither has been asked. */
/* The supplied artwork is 497px wide and there is no larger copy, so every
   rendered width above that is an upscale: 1.21x here, and 2.41x on a retina
   screen. Held at 600px because beyond it the softness starts to show. */
.lockup-art{width:min(600px,90vw);height:auto;display:block}

/* DARLINGTON: white italic text in the official blue box, with a white outline
   that the rider draws as it goes round. All one SVG so nothing drifts apart. */
/* Measured from the lockup PNG, not judged by eye: the Lloyds and British
   Cycling strip is 355px of the image's 497px, so 71.4 per cent. The box is
   set to the same fraction of the artwork above it, so the two line up. */
.tab{width:min(429px,64.3vw);height:auto;display:block;overflow:visible}
.tab-fill{fill:var(--tab)}
.tab-word text{font-family:var(--display);font-size:52px;fill:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.tab-line{stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.tab-rider{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tab-rider-head{fill:var(--ink);stroke:none}

/* ---------- the headline ---------- */
/* The headline travels in from the left, so its own box clips the movement.
   Without this the travel widens the page and a phone scrolls sideways. */
.headline{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.96;text-align:center;
  font-size:clamp(36px,11vw,148px);letter-spacing:.01em;
  max-width:100%;overflow:hidden;padding-block:.06em;padding-inline:.12em}
.sweep{display:inline-block;transform:skewX(var(--skew))}

/* ---------- footer ---------- */
.foot{--credit-gap:var(--ground);padding:0 var(--pad) clamp(20px,4vw,34px);color:var(--muted);text-align:center}

/* ---------- motion ----------
   Pieces travel in from the top left and land; the headline is then wiped in
   from left to right. Only transform, opacity and clip-path are animated. */
/* The order, and why: the lockup arrives, the blue box and DARLINGTON land,
   then a rider sets off round the box leaving the white outline behind it, and
   the headline sweeps in as the rider finishes. About 2.6s end to end. */
@media (prefers-reduced-motion:no-preference){
  .piece{opacity:0;animation:dropIn .52s cubic-bezier(.2,.65,.3,1) forwards}
  .lockup-art{animation-delay:.05s}
  .tab{animation-delay:.34s}

  /* The box and the word arrive first; the outline is not there yet. */
  .tab-line{stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine 1.9s linear .95s forwards}

  /* The rider carries the line: same path, same clock, so the white always
     ends exactly where the rider is. */
  .tab-rider{
    offset-path:path("M18 8 H342 A10 10 0 0 1 352 18 V86 A10 10 0 0 1 342 96 H18 A10 10 0 0 1 8 86 V18 A10 10 0 0 1 18 8 Z");
    offset-rotate:auto;offset-distance:0%;opacity:0;
    /* Rides the lap, appears as it sets off, and is gone as the line closes:
       parked on the corner afterwards it read as a smudge, not a finish. */
    animation:ride 1.9s linear .95s forwards,
              riderIn .14s linear .95s forwards,
              riderOut .22s linear 2.63s forwards;
  }
  /* The headline scrolls out from the left: it travels in from off the left
     edge while the reveal runs with it, so the words appear to ride across
     rather than simply fade up. The stage clips it, so the travel cannot make
     the page scroll sideways on a phone. */
  .sweep{clip-path:inset(0 100% 0 0);transform:translate3d(-18%,0,0) skewX(var(--skew));
    animation:sweepIn .78s cubic-bezier(.22,.7,.28,1) 2.6s forwards,
              scrollIn .78s cubic-bezier(.22,.7,.28,1) 2.6s forwards}

  @keyframes dropIn{
    from{opacity:0;transform:translate3d(-7vw,-7vw,0) rotate(-1.5deg)}
    to{opacity:1;transform:none}
  }
  @keyframes drawLine{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes ride{from{offset-distance:0%}to{offset-distance:100%}}
  @keyframes riderIn{from{opacity:0}to{opacity:1}}
  @keyframes riderOut{from{opacity:1}to{opacity:0}}
  @keyframes sweepIn{
    from{clip-path:inset(0 100% 0 0)}
    to{clip-path:inset(0 0 0 0)}
  }
  /* Travels in from the left as it is revealed. The skew is repeated in both
     states, or the headline would straighten up as it moves. */
  @keyframes scrollIn{
    from{transform:translate3d(-18%,0,0) skewX(var(--skew))}
    to{transform:translate3d(0,0,0) skewX(var(--skew))}
  }
}

/* Reduced motion: the finished page, outline complete, and no rider at all
   (a stationary cyclist parked on a corner would just look like a mistake). */
@media (prefers-reduced-motion:reduce){
  .tab-rider{display:none}
}
.back{font-family:var(--body);font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid var(--tab);padding-bottom:2px}
.back:hover{color:var(--ink)}