/* Option A · Torch Route · navy-900 ground
   The route draws itself, the torch travels while the clock runs, and parks
   under the arena lights when the sessions are live. */
.ca-ev--a {
  --ev-bg: var(--ca-navy-900);
  --ev-fg: var(--ca-paper); /* 17.4 on navy-900 */
  --ev-muted: var(--ca-navy-300); /* 6.72 */
  --ev-eyebrow: var(--ca-gold-500); /* 7.09 */
  --ev-rule: rgba(138, 156, 196, 0.28);
  --ev-btn1-bg: var(
    --ca-gold-500
  ); /* on navy the primary is gold with a navy-900 label · 7.09 */
  --ev-btn1-fg: var(--ca-navy-900);
  --ev-btn1-hover: var(--ca-gold-300);
  --ev-btn2-fg: var(--ca-paper);
  --ev-btn2-hover: rgba(255, 255, 255, 0.08);
  --ev-link: var(--ca-paper);
  --ev-link-hover: var(--ca-gold-300);
  --ev-focus: var(--ca-gold-500);
  --ev-num: var(--ca-gold-500);
  --ev-live-bg: var(--ca-red-500); /* red on navy only with the white keyline */
  --ev-live-fg: var(--ca-white);
  --ev-live-ring: var(--ca-white);
  background:
    radial-gradient(
      90% 60% at 85% 100%,
      rgba(30, 66, 120, 0.45),
      transparent 65%
    ),
    radial-gradient(
      60% 40% at 10% 0%,
      rgba(30, 66, 120, 0.25),
      transparent 60%
    ),
    var(--ca-navy-900);
}
.ca-ev--a .ca-ev-lead {
  color: var(--ink-inverse-2);
}
.ca-ev--a .ca-ev-video-frame {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.ca-ev--a .ca-ev-notes-list strong {
  color: var(--ca-white);
}

/* Stage */
/* The route is wide and shallow beside a tall column of copy, so at desktop
   widths it floated in empty navy. Its height is its width over three, so the
   only way to make it bigger is to give it more of the row. */
.ca-ev--a .ca-ev-wrap {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
/* The stage runs into the page margin the wrap is not using, up to the gutter.
   Taking it off the copy column instead cost more than it gave: the eyebrow
   broke to two lines and the run-of-show gained three. */
@media (min-width: 1200px) {
  .ca-ev--a .ca-ev-a-stage {
    margin-right: min(0px, calc(var(--wrap) / 2 - 50vw));
  }
}
/* On a phone the route belongs between the buttons and the countdown. It is a
   sibling of the copy column and the countdown is inside it, so no order
   reaches it -- the copy's box dissolves instead and its children join the
   wrap's own grid. */
@media (max-width: 899px) {
  .ca-ev--a .ca-ev-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
  .ca-ev--a .ca-ev-copy {
    display: contents;
  }
  .ca-ev--a .ca-ev-a-stage {
    margin-block: var(--s-6);
  }
  .ca-ev--a .ca-ev-cd {
    order: 1;
  }
  .ca-ev--a .ca-ev-nights {
    order: 2;
  }
  .ca-ev--a .ca-ev-copy > .ca-ev-fine {
    order: 3;
  }
}
.ca-ev-a-stage {
  display: grid;
  gap: var(--s-3);
}
.ca-ev-a-map {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.ca-ev-a-map text {
  font: 600 var(--t-1) var(--font-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ca-navy-300);
}
.ca-ev-a-map .ca-ev-a-city {
  font-size: var(--t-3);
  fill: var(--ca-paper);
  font-weight: 700;
}
.ca-ev-a-ground {
  stroke: var(--ca-navy-500);
  stroke-width: 1.5;
}
.ca-ev-a-sky {
  fill: var(--ca-navy-700);
}
.ca-ev-a-win rect {
  fill: var(--ca-gold-500);
  opacity: 0.18;
  transition: opacity 1.2s var(--ca-ease);
}
.ca-ev-a-tick {
  fill: var(--ca-navy-900);
  stroke: var(--ca-gold-500);
  stroke-width: 2;
}
.ca-ev-a-route-bg {
  fill: none;
  stroke: var(--ca-navy-500);
  stroke-width: 1.5;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.ca-ev-a-route {
  fill: none;
  stroke: var(--ca-gold-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ca-ev-a-draw 2.6s var(--ca-ease) 0.3s forwards;
}
@keyframes ca-ev-a-draw {
  to {
    stroke-dashoffset: 0;
  }
}
/* Set as the route's own labels are: Barlow Condensed 600, tracked 0.12em. It
   was the one sentence-case line in a drawing of tracked caps, which made it
   read as a caption stuck underneath. */
.ca-ev-a-legend {
  margin: var(--s-2) 0 0;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--t-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-muted);
  text-align: center;
}

/* The traveler · origin is the torch base, so it stands on the path */
.ca-ev-a-torch {
  offset-path: path("M150 310 Q360 90 570 310");
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: ca-ev-a-travel 12s var(--ca-ease) 2.4s infinite;
}
@keyframes ca-ev-a-travel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  82% {
    offset-distance: 100%;
    opacity: 1;
  }
  90% {
    offset-distance: 100%;
    opacity: 0;
  }
  100% {
    offset-distance: 0%;
    opacity: 0;
  }
}
.ca-ev-a-torch--static {
  display: none;
}
@supports not (offset-path: path("M0 0 L1 1")) {
  .ca-ev-a-torch {
    display: none;
  }
  .ca-ev-a-torch--static {
    display: block;
  }
}
.ca-ev-a-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 1;
  transition: scale 0.8s var(--ca-ease);
  animation: ca-ev-a-flicker 0.9s ease-in-out infinite alternate;
}
@keyframes ca-ev-a-flicker {
  from {
    transform: scale(1, 1) rotate(-2deg);
  }
  to {
    transform: scale(0.9, 1.1) rotate(2.5deg);
  }
}
.ca-ev-a-glow {
  fill: var(--ca-gold-500);
  opacity: 0.28;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ca-ev-a-breathe 1.8s ease-in-out infinite alternate;
}
@keyframes ca-ev-a-breathe {
  from {
    transform: scale(0.85);
    opacity: 0.2;
  }
  to {
    transform: scale(1.15);
    opacity: 0.38;
  }
}
/* Built like the hero's pin rays: sixteen spokes every 22.5deg, standing off
   the flame in a ring rather than fanning up. In SVG that is sixteen short
   lines from r=15 to r=25 about the flame centre. */
.ca-ev-a-rays {
  stroke: var(--ca-gold-500);
  /* a 5.5deg wedge at this radius measures 1.9px across */
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.34;
  transition: opacity 0.8s var(--ca-ease);
  transform-box: fill-box;
  /* the fan is symmetric about the flame now, so it scales from its middle */
  transform-origin: 50% 50%;
  animation: ca-ev-a-rays-breathe 1.8s ease-in-out infinite alternate;
}
@keyframes ca-ev-a-rays-breathe {
  from {
    transform: scale(0.94);
  }
  to {
    transform: scale(1.06);
  }
}

/* Live · the torch parks in Dallas, the arena lights come up */
.ca-ev--a[data-state="live"] .ca-ev-a-route {
  animation: none;
  stroke-dashoffset: 0;
}
.ca-ev--a[data-state="live"] .ca-ev-a-torch {
  animation: none;
  offset-distance: 100%;
  opacity: 1;
}
.ca-ev--a[data-state="live"] .ca-ev-a-flame {
  scale: 1.45;
}
.ca-ev--a[data-state="live"] .ca-ev-a-rays {
  opacity: 0.9;
}
.ca-ev--a[data-state="live"] .ca-ev-a-win--dal rect {
  opacity: 0.95;
  animation: ca-ev-a-twinkle 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.41s);
}
@keyframes ca-ev-a-twinkle {
  0%,
  100% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.35;
  }
}

/* Recap · home again, Nashville lit, the road left as a dotted trail */
.ca-ev--a[data-state="post"] .ca-ev-a-route {
  animation: none;
  stroke-dashoffset: 0;
  stroke-dasharray: 4 10;
}
.ca-ev--a[data-state="post"] .ca-ev-a-torch {
  animation: none;
  offset-distance: 0%;
  opacity: 1;
}
.ca-ev--a[data-state="post"] .ca-ev-a-win--nsh rect {
  opacity: 0.9;
}
.ca-ev--a[data-state="post"] .ca-ev-a-win--dal rect {
  opacity: 0.45;
}

/* Before · home lights on, Dallas still dark */
.ca-ev--a[data-state="pre"] .ca-ev-a-win--nsh rect {
  opacity: 0.7;
}

/* Odometer roll */
.ca-ev--a .ca-ev-dg-b {
  transform: translateY(100%);
  opacity: 0;
}
.ca-ev--a .is-changing .ca-ev-dg-a {
  animation: ca-ev-a-out 0.42s var(--ca-ease) forwards;
}
.ca-ev--a .is-changing .ca-ev-dg-b {
  animation: ca-ev-a-in 0.42s var(--ca-ease) forwards;
}
@keyframes ca-ev-a-out {
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes ca-ev-a-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Resting states when motion is off: road drawn, torch home, lights steady */
@media (prefers-reduced-motion: reduce) {
  .ca-ev--a .ca-ev-a-route {
    stroke-dashoffset: 0;
  }
  .ca-ev--a[data-state="pre"] .ca-ev-a-torch {
    opacity: 1;
    offset-distance: 0%;
  }
  .ca-ev--a .ca-ev-a-win--dal rect {
    animation: none;
  }
  .ca-ev--a .ca-ev-a-rays,
  .ca-ev--a .ca-ev-a-glow {
    animation: none;
  }
}

/* Both crossing labels sit on one line above the arc's crown. The arc peaks at
   y=200, so a baseline above that cannot meet it anywhere -- which the old
   per-tick placement could not promise, and the arc climbed through the far
   end of the words. */
.ca-ev-a-leader{stroke:var(--ca-navy-500);stroke-width:1;stroke-dasharray:2 3}