/* Desktop only: the six Growth drawings sit side by side, so they rest on their final frame instead of all playing at once.
   "See the process" plays them one at a time while a beam of light travels from card to card and down into the economics. */
.ga { position: relative; }
.g-side { display: grid; justify-items: start; gap: 22px; }

.g-play { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: var(--milk); background: rgba(250, 250, 248, 0.04); box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: box-shadow .3s, background .3s; }
.g-play:hover { background: rgba(122, 244, 208, 0.06); box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.45); }
.g-play:focus-visible { outline: 2px solid var(--growth); outline-offset: 3px; }
.g-play:disabled { cursor: default; }
.g-play-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #9af8dc, #5fdcb8);
  box-shadow: 0 0 18px -4px rgba(122, 244, 208, 0.7); }
.g-play-ic svg { width: 11px; height: 11px; margin-left: 2px; }
.g-play:disabled .g-play-ic { animation: gPulse 1.6s ease-in-out infinite; }
@keyframes gPulse { 50% { box-shadow: 0 0 26px 0 rgba(122, 244, 208, 0.75); } }

/* a resting drawing: already played, frozen on its last frame */
.art.rest, .art.rest::before, .art.rest::after, .art.rest *, .art.rest *::before, .art.rest *::after { animation-delay: -60s !important; }

/* while the process plays, the card in focus stays bright and the rest step back */
.ga .pil, .ga .econ { transition: opacity .6s ease, box-shadow .6s ease; }
.ga.running .pil, .ga.running .econ { opacity: .42; }
.ga.running .pil.is-on, .ga.running .econ.is-on { opacity: 1; box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.45), 0 0 60px -24px rgba(122, 244, 208, 0.55); }
.ga.running .pil.is-on::before { opacity: 1; }

/* the beam: a rail along the foot of the pillars, the lit part that follows the light, and the drop into the economics */
.flow { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; }
.flow > span { position: absolute; display: block; opacity: 0; transition: opacity .5s ease; }
.flow-rail { height: 1px; background: rgba(122, 244, 208, 0.16); }
.flow-fill { height: 1px; width: 0; background: linear-gradient(90deg, rgba(122, 244, 208, 0.15), var(--growth)); box-shadow: 0 0 10px rgba(122, 244, 208, 0.6);
  transition: opacity .5s ease, width .95s cubic-bezier(.65, 0, .35, 1); }
.flow-drop { width: 1px; height: 0; background: linear-gradient(180deg, var(--growth), rgba(122, 244, 208, 0.4)); box-shadow: 0 0 10px rgba(122, 244, 208, 0.6);
  transition: opacity .5s ease, height .95s cubic-bezier(.65, 0, .35, 1); }
.flow-dot { left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--growth);
  box-shadow: 0 0 0 4px rgba(122, 244, 208, 0.16), 0 0 20px 3px rgba(122, 244, 208, 0.7);
  transition: opacity .5s ease, transform .95s cubic-bezier(.65, 0, .35, 1); }
.flow.no-tr > span { transition: none; }
.ga.running .flow-dot, .ga.running .flow-fill, .ga.running .flow-drop { opacity: 1; }
.ga.running .flow-rail.on { opacity: 1; }

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .g-play, .flow { display: none; }
}
/* while playing, the script moves the beam every frame, so only the fade in and out stays animated */
.flow.live > span { transition: opacity .5s ease; }