/* Motion values generated from brand/logos.json. Do not edit this block. */
:root {
  --loop-logo-easing: cubic-bezier(0.2, 0, 0, 1);
  --loop-logo-letter-duration: 520ms;
  --loop-logo-swoop-beat: 150ms;
  --loop-logo-swoop-duration: 360ms;
  --loop-logo-duration: 1030ms;
  --loop-logo-loading-duration: 1300ms;
  --loop-logo-loading-stagger: 140ms;
  --loop-logo-loading-hold: 800ms;
  --loop-logo-loading-cycle: 2520ms;
  --loop-logo-ghost-opacity: 0.25;
  --loop-logo-train-spacing-strokes: 4;
}

/* Shared reactive metro device; size, placement and the label belong to the consumer. */
.brand-metro {
  display: block;
  /* A finger may point at the map; the page still scrolls through it. */
  touch-action: pan-y;
  /* How far a stop swells as the dot reaches it. The module fills in the two
     colours from the drawing itself, so a map keeps its own palette. */
  --loop-metro-pulse-scale: 1.18;
  /* Live activity arrives on the beat and leaves over the swoop draw: quick to
     answer, unhurried to let go, so both directions read as a fade. */
  --loop-metro-fade-in: var(--loop-logo-swoop-beat);
  --loop-metro-fade-out: var(--loop-logo-swoop-duration);
}
.brand-metro svg { display: block; width: 100%; height: auto; }

/* The wordmark's rule read as a map: the line draws first, and the stops arrive
   after the beat. Only the enhanced device animates, so the static SVG that
   ships in the page is complete without this stylesheet or its script. */
.brand-metro.is-drawing [data-metro="line"] {
  stroke-dasharray: 1;
  animation: brand-metro-draw var(--loop-logo-letter-duration) var(--loop-logo-easing) both;
}

.brand-metro.is-drawing :is(
  [data-metro="station"],
  [data-metro="you"],
  [data-metro="end"],
  [data-metro="label"]
) {
  animation: brand-metro-arrive var(--loop-logo-swoop-duration) var(--loop-logo-easing)
    calc(var(--loop-logo-letter-duration) + var(--loop-logo-swoop-beat)) both;
}

/* Accent is live activity only. The route never lights by itself: the track the
   dot is on, and the stop it is heading for, light while it travels and fade
   within a beat of it stopping. */
.brand-metro [data-metro="segment"] {
  opacity: 0;
  transition: opacity var(--loop-metro-fade-out) var(--loop-logo-easing);
}

.brand-metro [data-metro="segment"][data-metro-lit] {
  opacity: 1;
  transition-duration: var(--loop-metro-fade-in);
}

.brand-metro [data-metro="station"] {
  transition: stroke var(--loop-metro-fade-out) var(--loop-logo-easing);
}

.brand-metro [data-metro="station"][data-metro-next] {
  stroke: var(--loop-metro-accent);
  transition-duration: var(--loop-metro-fade-in);
}

/* A stop is an event: it reacts once as the dot reaches it, then settles back
   to paper. The ring grows about its own centre, never about the drawing. */
.brand-metro [data-metro="station"][data-metro-pulse] {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    brand-metro-pulse-size var(--loop-logo-swoop-beat) var(--loop-logo-easing),
    brand-metro-pulse-colour var(--loop-logo-swoop-duration) var(--loop-logo-easing);
}

@keyframes brand-metro-pulse-size {
  from { transform: scale(1); }
  50% { transform: scale(var(--loop-metro-pulse-scale)); }
  to { transform: scale(1); }
}

@keyframes brand-metro-pulse-colour {
  from { stroke: var(--loop-metro-accent); }
  40% { stroke: var(--loop-metro-accent); }
  to { stroke: var(--loop-metro-route); }
}

.brand-metro:focus-visible {
  outline: var(--loop-focus-width) solid var(--loop-color-interactive-focus);
  outline-offset: var(--loop-focus-offset);
}

@keyframes brand-metro-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes brand-metro-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-metro *, .brand-metro *::before, .brand-metro *::after {
    transition: none !important;
    animation: none !important;
  }
}