/* ------------------------------------------------------------------
   TM-1377 rounds scene — paper vs Tragget, two columns on one clock.
   Shared by index.html and motion-proof.html; driven by js/rounds-scene.js.
   Zero dependencies: no GSAP, no Lottie, no WebGL, no video files.
   Everything is scoped under .rounds-scene so the generic names below
   (.col, .art, .steps, .stage) cannot collide with css/style.css.
   Colours are the existing site palette only:
     #43abdb / #2891c0 blue, #1c2b39 / #1a1b1f ink, #68696d grey,
     #ffd600 / #fff8b8 tape yellow, #eef7fc / #d3e6f1 tints, #ff8e09 orange.
   Corner radius 5px per the UI guidelines.
------------------------------------------------------------------- */
.rounds-scene{
  --blue:#43abdb; --blue-dark:#2891c0; --ink:#1c2b39; --ink-2:#1a1b1f;
  --grey:#68696d; --tape:#ffd600; --tape-soft:#fff8b8;
  --tint:#eef7fc; --tint-2:#d3e6f1; --orange:#ff8e09; --r:5px;
  --sand:#e6d9c4; --sand-2:#c9b795; --sand-tint:#fdf6ec;
  color:var(--ink);
  font-family:'Gilroy','Inter',system-ui,sans-serif;
}
.rounds-scene *{box-sizing:border-box}

/* ---- the side-by-side scene ----
   Risto, 2026-09-16: "I was hoping to get these side by side, at least on
   desktop, so user can see the difference. We should demonstrate the speed of
   getting proper invoice out as an example."
   One scroll timeline, one clock, two columns moving against it. The paper
   column spends the whole timeline getting to an invoice; the Tragget column
   is finished at the first mark and then just sits there being finished. */
.rounds-scene .scene{position:relative}
.rounds-scene .scene[data-steps="6"]{height:560vh}
/* --rs-top: whatever a host page has fixed across the top of the viewport.
   The homepage's floating nav is 70px; the proof page has none. */
.rounds-scene .stage{
  position:sticky; top:var(--rs-top,0px); height:calc(100vh - var(--rs-top,0px)); min-height:620px;
  display:flex; align-items:center; overflow:hidden;
}
.rounds-scene .stage-inner{width:100%; max-width:1240px; margin:0 auto; padding:18px 24px;
  display:flex; flex-direction:column; gap:14px; height:100%; justify-content:center}

/* the shared clock — the whole point of putting the two columns on one axis */
.rounds-scene .clock{
  display:flex; align-items:baseline; justify-content:center; gap:14px;
  flex:0 0 auto;
}
.rounds-scene .clock .lbl{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); font-weight:700;
}
.rounds-scene .clock .v{
  font-size:clamp(20px,2.4vw,28px); font-weight:700; letter-spacing:-.01em;
  color:var(--ink); transition:color .4s ease;
}
.rounds-scene .clock .track{
  flex:0 1 320px; height:4px; border-radius:var(--r);
  background:var(--tint-2); overflow:hidden; align-self:center;
}
.rounds-scene .clock .track i{
  display:block; height:100%; width:0; background:var(--blue);
  transition:width .55s cubic-bezier(.4,0,.2,1);
}

.rounds-scene .duo{display:grid; grid-template-columns:1fr 1fr; gap:34px; flex:1 1 auto; min-height:0}
.rounds-scene .col{display:flex; flex-direction:column; gap:10px; min-width:0}

.rounds-scene .col-head{display:flex; align-items:baseline; gap:10px; flex:0 0 auto}
.rounds-scene .col-tag{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:4px 8px; border-radius:var(--r); flex:0 0 auto;
}
.rounds-scene .col.warn .col-tag{background:var(--sand-tint); color:var(--ink); border:1px solid #f0c48c}
.rounds-scene .col.good .col-tag{background:var(--tint); color:var(--blue-dark); border:1px solid var(--tint-2)}
.rounds-scene .scene-title{font-size:clamp(16px,1.6vw,20px); line-height:1.25; margin:0; letter-spacing:-.01em; color:var(--ink)}

/* the art panel */
.rounds-scene .art{
  position:relative; width:100%; aspect-ratio:4/3; max-height:42vh; min-height:180px;
  background:var(--tint); border-radius:var(--r); overflow:hidden; flex:0 1 auto;
  box-shadow:0 1px 0 rgba(28,43,57,.06), 0 18px 40px -28px rgba(28,43,57,.5);
}
.rounds-scene .col.warn .art{background:var(--sand-tint)}
.rounds-scene .art svg{position:absolute; inset:0; width:100%; height:100%}

/* the live verdict under each column — this is the speed comparison in words */
.rounds-scene .verdict-line{
  flex:0 0 auto; font-size:14px; line-height:1.4; font-weight:700; margin:0;
  padding:9px 12px; border-radius:var(--r); border:1px solid transparent;
  transition:color .4s ease, background .4s ease, border-color .4s ease;
}
.rounds-scene .col.warn .verdict-line{background:var(--sand-tint); border-color:#f0c48c; color:var(--ink)}
.rounds-scene .col.good .verdict-line{background:var(--tint); border-color:var(--tint-2); color:var(--blue-dark)}

.rounds-scene .steps{list-style:none; margin:0; padding:0; flex:1 1 auto; min-height:0; overflow:hidden}
.rounds-scene .steps li{
  padding:7px 10px 7px 16px; border-left:2px solid var(--tint-2);
  border-radius:0 var(--r) var(--r) 0; background:transparent;
  color:#a9b2ba; font-size:14px; line-height:1.35;
  transition:color .45s ease, border-color .45s ease, background .45s ease, transform .45s ease;
  transform:translateX(0);
}
.rounds-scene .steps li .n{
  display:inline-block; min-width:20px; font-weight:700; font-size:12px;
  color:inherit; opacity:.75;
}
/* Risto, 2026-10-02: "make the text that is selected bold or add some
   background highlight to make it pop-out more, so it is like subtitle for
   the image." Both: bold ink on the column's own tint, so the line reads as
   the caption of whatever the art is showing right now. */
.rounds-scene .steps li.on{
  color:var(--ink); font-weight:700; background:var(--tint);
  border-left-color:var(--blue); transform:translateX(4px);
}
.rounds-scene .steps li.done{color:var(--grey); border-left-color:var(--tint-2)}
.rounds-scene .col.warn .steps li.on{background:var(--tape-soft); border-left-color:var(--orange)}

/* animated pieces (driven by [data-step] on .scene) */
.rounds-scene .piece{transition:transform .75s cubic-bezier(.4,0,.2,1), opacity .5s ease}
.rounds-scene .fade{transition:opacity .55s ease}

/* road dashes */
.rounds-scene .dash{stroke-dasharray:14 12; animation:rs-roll 1.1s linear infinite}
@keyframes rs-roll{to{stroke-dashoffset:-26}}

/* ---- the round, and how far through it you are ----
   Risto, 2026-09-13: "we should demonstrate how rounds are going, how the data
   is collected... we could just have arrows making rounds in circle", and
   2026-09-16: "I already saw circle there to show the rounds and how that went."
   So the ring is not just a loop any more — it is a progress dial. The track is
   the day's round target, the filled arc is the rounds actually banked, and the
   number in the middle is that count. pathLength="100" makes the arc a literal
   percentage, so the JS sets one attribute and nothing has to know the radius. */
.rounds-scene .prog{transition:stroke-dasharray .9s cubic-bezier(.4,0,.2,1), opacity .5s ease}

/* the load going round: a group spun about the circle's centre.
   Risto, 2026-10-01: the dump site "is at least 30 min drive away, back and
   forth, it takes time" — so a lap is slow, not a spin. */
.rounds-scene .orbit{transform-box:view-box; transform-origin:146px 186px;
       animation:rs-orbit 9s linear infinite}
@keyframes rs-orbit{to{transform:rotate(360deg)}}

/* the paper scene "goes dark for days/weeks" — his words. The rounds keep
   running underneath it; you simply cannot see them. */
.rounds-scene .blackout{transition:opacity .7s ease}

/* pulsing ring for "office sees it now" */
.rounds-scene .ring{transform-origin:center; animation:rs-ping 1.9s ease-out infinite}
@keyframes rs-ping{
  0%{transform:scale(.55);opacity:.85}
  70%{transform:scale(1.6);opacity:0}
  100%{opacity:0}
}

/* Side by side is the desktop ask. Below this width two full columns of art
   would be two postage stamps, so they stack — and the six-line step list
   under each is what made a stack long. Risto, 2026-10-04: "showing on one row,
   first 01, then 02 replacing it, but like subtitles in a movie. Then when text
   is basically just one block, the Tragget way will show below." So each list
   is one slot: every line sits in the same grid cell (the slot is as tall as
   the longest line, so nothing below jumps) and only the current one shows.
   js/rounds-scene.js advances both columns on a timer. */
@media (max-width:980px){
  .rounds-scene .duo{grid-template-columns:1fr; gap:38px}
  .rounds-scene .steps{display:grid; overflow:visible}
  /* the outgoing line goes at once; the incoming one fades up, like a subtitle */
  .rounds-scene .steps li{
    grid-area:1 / 1; opacity:0; visibility:hidden; transform:none; transition:none;
    font-size:15px; padding:9px 10px 9px 18px;
  }
  .rounds-scene .steps li.on{opacity:1; visibility:visible; transform:none; transition:opacity .45s ease}
  /* top:auto — the sticky offset (--rs-top) would otherwise become a relative
     nudge and push the stage 70px down over the next section. */
  .rounds-scene .stage{height:auto; min-height:0; position:relative; top:auto; padding:48px 0}
  .rounds-scene .scene[data-steps="6"]{height:auto}
  .rounds-scene .stage-inner{height:auto; padding:0 24px}
  .rounds-scene .clock{display:none}
  .rounds-scene .art{max-height:none; aspect-ratio:16/11}
}
@media (prefers-reduced-motion:reduce){
  .rounds-scene *{animation:none !important; transition:none !important}
}