/* Release visual of the activity statements (Max; partials/changelog/activity-statements-visual): one card that
   loops from a network operator's annual statement to its activity statements and back. The annual statement
   glides up, an amber network line draws down from it and the activity statements branch off it, each with its
   own balance sheet total and revenue; while they stand, a pulse of current runs down the line into each card.
   The window, steps, control and caption are the changelog's demo shell (.cl-demo, changelog-demos.css).

   Without script, with reduced motion and in print the activity statements stand complete; with reduced motion
   the steps switch between the two pictures. The keyframes at the end are computed from one timeline (the
   partial's $unfold / $fold, in ms of the loop) and move nothing but transform and opacity. */
.cl-as {
    --as-amber: #f59e0b;
    --as-amber-ink: #9a5b06;
    --as-wire: rgba(245, 158, 11, 0.4);
    --as-spark: #fff3d6;
    --as-glow: rgba(255, 166, 26, 0.55);
    --as-drop: 64px;
    --as-loop: 8400ms;
}
@media (prefers-color-scheme: dark) {
    .cl-as { --as-amber: #ffb84a; --as-amber-ink: #ffcf7f; --as-wire: rgba(255, 184, 74, 0.36); --as-glow: rgba(255, 170, 40, 0.6); --as-spark: #fff6e3; }
    .cl-as .cl-as-max { --as-max-ink: var(--as-amber-ink); }
}
.dark .cl-as { --as-amber: #ffb84a; --as-amber-ink: #ffcf7f; --as-wire: rgba(255, 184, 74, 0.36); --as-glow: rgba(255, 170, 40, 0.6); --as-spark: #fff6e3; }
.dark .cl-as-max { --as-max-ink: var(--as-amber-ink); }

/* Shell: the demo window, two steps, a Max chip, one control */
.cl-as .cl-demo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-as-max {
    --as-max-ink: #8a5100;
    margin-left: auto;
    padding: 0 0.42rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: color-mix(in srgb, var(--as-max-ink) 12%, transparent);
    color: var(--as-max-ink);
    font: 600 10px/1.6 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cl-as-sr {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Stage: the annual statement over the tree of activity statements. Fixed geometry: every card is 82px tall,
   a branch meets its card at the head row (19px), so the spine ends 63px above the tree's bottom. */
.cl-as-stage { position: relative; overflow: hidden; padding: 16px 16px 18px; background: var(--demo-panel); }
.cl-as-card {
    position: relative; box-sizing: border-box; height: 82px; padding: 11px 13px 12px;
    border: 1px solid var(--demo-line); border-radius: 10px; background: var(--demo-panel-soft);
}
.cl-as-head { display: flex; align-items: center; gap: 8px; min-width: 0; height: 16px; font-size: 12.5px; line-height: 16px; color: var(--demo-text); }
.cl-as-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cl-as-head span { margin-left: auto; padding-left: 8px; color: var(--demo-muted); font-size: 11px; white-space: nowrap; }
.cl-as-head .cl-demo-icon { color: var(--demo-muted); }
.cl-as-act .cl-as-head .cl-demo-icon { color: var(--as-amber-ink); }
.cl-as-rows { display: grid; gap: 2px; margin: 9px 0 0; }
.cl-as-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 17px; }
.cl-as-rows dt { color: var(--demo-muted); }
.cl-as-rows dd { margin: 0; color: var(--demo-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cl-as-tree { position: relative; display: grid; gap: 10px; margin-top: 12px; padding-left: 26px; }
/* the network line: from the annual statement down to the last activity's branch */
.cl-as-spine { position: absolute; left: 12px; top: -12px; bottom: 63px; width: 2px; overflow: hidden; border-radius: 1px; background: var(--as-wire); transform-origin: top; }
/* the pulse of current: a bright band on a layer as tall as the line, moved through it */
.cl-as-spine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 36%, var(--as-amber) 45%, var(--as-spark) 50%, var(--as-amber) 55%, transparent 64% 100%); opacity: 0; }
/* each activity's branch off the line, and the amber edge where it arrives */
.cl-as-act::before { content: ''; position: absolute; left: -15px; top: 18px; width: 14px; height: 2px; border-radius: 1px; background: var(--as-wire); transform-origin: left; }
.cl-as-act::after { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--as-amber); box-shadow: 0 0 8px var(--as-glow); opacity: 0.55; }

/* Without script and with reduced motion: either picture stands */
.cl-as[data-view="plain"]:not([data-live]) .cl-as-tree { visibility: hidden; }
.cl-as[data-view="plain"]:not([data-live]) .cl-as-main { transform: translateY(var(--as-drop)); }
.cl-as[data-view="plain"]:not([data-live]) .cl-as-max { opacity: 0; }

/* The loop (data-live: set by the script) */
.cl-as[data-live] .cl-as-main { animation: cl-as-main var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-spine { animation: cl-as-spine var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-spine::after { animation: cl-as-pulse var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-act--1 { animation: cl-as-act-1 var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-act--2 { animation: cl-as-act-2 var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-act--1::before { animation: cl-as-branch-1 var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-act--2::before { animation: cl-as-branch-2 var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-act--1::after { animation: cl-as-glow-1 var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-act--2::after { animation: cl-as-glow-2 var(--as-loop) linear infinite both; }
.cl-as[data-live] .cl-as-max { animation: cl-as-max var(--as-loop) linear infinite both; }
.cl-as[data-live] [data-as-step="0"] > i { animation: cl-as-step-0 var(--as-loop) linear infinite both; }
.cl-as[data-live] [data-as-step="1"] > i { animation: cl-as-step-1 var(--as-loop) linear infinite both; }
.cl-as[data-running="false"] *, .cl-as[data-running="false"] *::before, .cl-as[data-running="false"] *::after { animation-play-state: paused !important; }

/* Phones */
@container (max-width: 480px) {
    .cl-as-stage { padding: 14px 13px 16px; }
    .cl-as-head { font-size: 12px; }
    .cl-as-head span { font-size: 10.5px; }
    .cl-as-rows > div { font-size: 11.5px; }
}
@container (max-width: 360px) {
    .cl-as-head span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-as *, .cl-as *::before, .cl-as *::after { animation: none !important; }
}
@media print {
    .cl-as .cl-as-main, .cl-as .cl-as-tree, .cl-as .cl-as-act { transform: none !important; opacity: 1 !important; visibility: visible !important; animation: none !important; }
}

/* Keyframes (percentages of the timeline: loop 8400 ms, unfold 700-2000, fold 6900-7900, pulses at 2400, 4400) */
@keyframes cl-as-main {
    0% { transform: translateY(var(--as-drop)); }
    8.333% { transform: translateY(var(--as-drop)); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
    14.524% { transform: none; }
    89.048% { transform: none; animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    94.048% { transform: translateY(var(--as-drop)); }
    100% { transform: translateY(var(--as-drop)); }
}
@keyframes cl-as-spine {
    0% { transform: scaleY(0); }
    11.429% { transform: scaleY(0); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
    17.381% { transform: scaleY(1); }
    86.31% { transform: scaleY(1); animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    91.071% { transform: scaleY(0); }
    100% { transform: scaleY(0); }
}
@keyframes cl-as-pulse {
    0% { transform: translateY(-100%); opacity: 0; }
    28.56% { transform: translateY(-100%); opacity: 0; }
    28.571% { transform: translateY(-100%); opacity: 1; animation-timing-function: linear; }
    40.476% { transform: translateY(100%); opacity: 1; }
    40.488% { transform: translateY(100%); opacity: 0; }
    52.369% { transform: translateY(-100%); opacity: 0; }
    52.381% { transform: translateY(-100%); opacity: 1; animation-timing-function: linear; }
    64.286% { transform: translateY(100%); opacity: 1; }
    64.298% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(100%); opacity: 0; }
}
@keyframes cl-as-act-1 {
    0% { opacity: 0; transform: translateX(-10px); }
    15.476% { opacity: 0; transform: translateX(-10px); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
    20.833% { opacity: 1; transform: none; }
    83.929% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    87.5% { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 0; transform: translateX(-10px); }
}
@keyframes cl-as-branch-1 {
    0% { transform: scaleX(0); }
    14.286% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
    16.667% { transform: scaleX(1); }
    85.714% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    88.095% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}
@keyframes cl-as-glow-1 {
    0% { opacity: 0.55; }
    31.571% { opacity: 0.55; }
    33% { opacity: 1; }
    39.19% { opacity: 0.55; }
    55.381% { opacity: 0.55; }
    56.81% { opacity: 1; }
    63% { opacity: 0.55; }
    100% { opacity: 0.55; }
}
@keyframes cl-as-act-2 {
    0% { opacity: 0; transform: translateX(-10px); }
    18.452% { opacity: 0; transform: translateX(-10px); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
    23.81% { opacity: 1; transform: none; }
    82.143% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    85.714% { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 0; transform: translateX(-10px); }
}
@keyframes cl-as-branch-2 {
    0% { transform: scaleX(0); }
    17.262% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
    19.643% { transform: scaleX(1); }
    83.929% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.6, 0, 0.35, 1); }
    86.31% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}
@keyframes cl-as-glow-2 {
    0% { opacity: 0.55; }
    36.024% { opacity: 0.55; }
    37.452% { opacity: 1; }
    43.643% { opacity: 0.55; }
    59.833% { opacity: 0.55; }
    61.262% { opacity: 1; }
    67.452% { opacity: 0.55; }
    100% { opacity: 0.55; }
}
@keyframes cl-as-max {
    0% { opacity: 0; transform: scale(0.85); }
    9.524% { opacity: 0; transform: scale(0.85); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.2); }
    14.286% { opacity: 1; transform: none; }
    83.333% { opacity: 1; transform: none; }
    86.905% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(0.85); }
}
@keyframes cl-as-step-0 {
    0% { transform: scaleX(0.682); }
    8.333% { transform: scaleX(1); }
    8.34% { transform: scaleX(0); }
    82.143% { transform: scaleX(0); }
    100% { transform: scaleX(0.682); }
}
@keyframes cl-as-step-1 {
    0% { transform: scaleX(0); }
    8.34% { transform: scaleX(0); }
    82.143% { transform: scaleX(1); }
    82.15% { transform: scaleX(0); }
    100% { transform: scaleX(0); }
}