/* ============================================================================
   ORCA Connect — the service scenes
   One small animated picture per practice, built from the brand's own doctor
   and a few interface pieces, all in CSS. Every scene runs on one 8-second
   loop: it builds, holds, and clears back to the start. Sizes are in
   container units (cqmin) so a scene reads the same in a wide desktop card
   and a short phone one. Nothing moves while the deck is off screen
   (.deck:not(.is-on)) or under reduced motion.
   ============================================================================ */
@property --sc-p { syntax:'<number>'; inherits:false; initial-value:0 }
@property --sc-n { syntax:'<integer>'; inherits:false; initial-value:0 }

.scene{
  --T:8s; --blue:var(--c-accent,#204289); --ink2:#0E2861; --soft:#EAF0FB; --wa:#25D366;
  position:relative; display:block; width:100%; height:100%; overflow:hidden;
  container-type:size;
  background:
    radial-gradient(120% 90% at 78% 12%, #fff 0%, transparent 60%),
    linear-gradient(160deg, #F4F7FD 0%, #E4ECFA 60%, #D5E1F7 100%);
  color:var(--ink2); font-family:var(--font-text);
}
.scene *{ box-sizing:border-box }
.scene svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
/* soft floor under the doctor */
.scene::after{
  content:''; position:absolute; left:55%; bottom:3.5%; width:36%; height:6%;
  background:radial-gradient(closest-side, rgba(14,40,97,.28), transparent); border-radius:50%;
  animation:sc-shadow 4s ease-in-out infinite;
}
.sc-av{
  position:absolute; bottom:6%; left:60%; height:78%; width:auto; z-index:3;
  filter:drop-shadow(0 2cqmin 3cqmin rgba(14,40,97,.22));
  animation:sc-bob 3.6s ease-in-out infinite; transform-origin:50% 100%;
}
/* the newer poses have an arm out to the side, so the picture is twice as
   wide as the standing one: it is placed by the body's centre (where the
   standing doctor's centre is) and a touch smaller, so the hand stays in */
.sc-av--wide{ left:48%; height:72%; bottom:6.5% }
/* standing, the doctor's head is where the progress card sits, so in the
   learning scene the card goes under the leaderboard */
.scene--lms .sc-prog{ left:5%; top:40%; width:34% }
/* he breathes, sways, and every few seconds gives a little hop */
@keyframes sc-bob{
  0%,100%{ transform:translateY(0) rotate(0) }
  25%{ transform:translateY(-2%) rotate(-1.4deg) }
  50%{ transform:translateY(0) rotate(0) }
  62%{ transform:translateY(-5%) scaleY(1.02) rotate(1deg) }
  70%{ transform:translateY(0) scaleY(.985) }
  78%{ transform:translateY(-1%) rotate(1.2deg) }
}
@keyframes sc-shadow{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.9); opacity:.75 } }

.sc-card{
  position:absolute; z-index:2; background:#fff; border-radius:2.6cqmin;
  box-shadow:0 2.4cqmin 5cqmin -2cqmin rgba(14,40,97,.28), 0 0 0 1px rgba(14,40,97,.06);
}
.sc-dot{ display:block; width:9cqmin; height:9cqmin; border-radius:50%; flex:none;
         background:linear-gradient(135deg,#5B8DEF,var(--blue)) }
.sc-lines{ display:grid; gap:1.4cqmin; flex:1 }
.sc-lines b{ display:block; height:1.8cqmin; border-radius:1cqmin; background:#D7E0F2 }
.sc-lines b:first-child{ width:80%; background:var(--ink2) } .sc-lines b:last-child{ width:55% }
.sc-tag{
  position:absolute; z-index:4; padding:1.4cqmin 2.4cqmin; border-radius:99px;
  font:600 3cqmin/1 var(--font-text); color:#fff; background:var(--blue);
  box-shadow:0 1.6cqmin 3cqmin -1cqmin rgba(14,40,97,.4);
}

/* ---- 01 · omnichannel: four channels score one profile ------------------- */
.sc-prof{ left:6%; top:9%; width:56%; padding:3.4cqmin }
.sc-prof__hd{ display:flex; align-items:center; gap:2.6cqmin }
.sc-ring{
  flex:none; width:13cqmin; height:13cqmin; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--blue) calc(var(--sc-p) * 1%), #E3EAF7 0);
  animation:sc-ring var(--T) linear infinite;
}
.sc-ring em{
  width:10cqmin; height:10cqmin; border-radius:50%; background:#fff; display:grid; place-items:center;
  font:700 3.6cqmin/1 var(--font-display); font-style:normal; color:var(--blue);
  counter-reset:n var(--sc-n); animation:sc-num var(--T) linear infinite;
}
.sc-ring em::after{ content:counter(n) }
@keyframes sc-ring{
  0%,8%{ --sc-p:0 } 12%,28%{ --sc-p:8 } 32%,48%{ --sc-p:40 } 52%,68%{ --sc-p:60 } 72%,90%{ --sc-p:100 } 100%{ --sc-p:0 }
}
@keyframes sc-num{
  0%,10%{ --sc-n:0 } 11%,30%{ --sc-n:2 } 31%,50%{ --sc-n:10 } 51%,70%{ --sc-n:15 } 71%,94%{ --sc-n:25 } 95%,100%{ --sc-n:0 }
}
.sc-bars{ display:grid; gap:1.6cqmin; margin-top:3cqmin }
.sc-bars i{ display:block; height:2cqmin; border-radius:1cqmin; background:#E3EAF7; position:relative; overflow:hidden }
.sc-bars i::after{ content:''; position:absolute; inset:0; background:var(--blue); transform-origin:0 50%;
                   transform:scaleX(0); animation:sc-fill var(--T) var(--ease-out,ease-out) infinite }
.sc-bars i:nth-child(1)::after{ --w:.7;  animation-name:sc-bar1 }
.sc-bars i:nth-child(2)::after{ --w:.45; animation-name:sc-bar2; background:var(--wa) }
.sc-bars i:nth-child(3)::after{ --w:.6;  animation-name:sc-bar3 }
.sc-bars i:nth-child(4)::after{ --w:.9;  animation-name:sc-bar4 }
@keyframes sc-bar1{ 0%,10%{ transform:scaleX(0) } 16%,92%{ transform:scaleX(.7) } 100%{ transform:scaleX(0) } }
@keyframes sc-bar2{ 0%,30%{ transform:scaleX(0) } 36%,92%{ transform:scaleX(.45) } 100%{ transform:scaleX(0) } }
@keyframes sc-bar3{ 0%,50%{ transform:scaleX(0) } 56%,92%{ transform:scaleX(.6) } 100%{ transform:scaleX(0) } }
@keyframes sc-bar4{ 0%,70%{ transform:scaleX(0) } 76%,92%{ transform:scaleX(.9) } 100%{ transform:scaleX(0) } }

.sc-chip{
  position:absolute; z-index:4; display:inline-flex; align-items:center; gap:1.4cqmin;
  padding:1.8cqmin 2.6cqmin; border-radius:99px; background:#fff; white-space:nowrap;
  font:600 3.2cqmin/1 var(--font-text); color:var(--ink2);
  box-shadow:0 1.8cqmin 3.4cqmin -1.2cqmin rgba(14,40,97,.35);
  opacity:0; animation:var(--T) cubic-bezier(.2,1.4,.4,1) infinite;
}
.sc-chip svg{ width:3.8cqmin; height:3.8cqmin; color:var(--blue) }
.sc-chip--wa svg{ color:var(--wa) }
.sc-chip u{
  position:absolute; right:-1cqmin; top:-1cqmin; text-decoration:none;
  font:700 3cqmin/1 var(--font-display); color:#fff; background:var(--blue);
  padding:1cqmin 1.4cqmin; border-radius:99px; opacity:0; animation:inherit; animation-name:sc-plus;
}
.sc-chip--wa u{ background:var(--wa) }
.sc-chip--1{ left:5%;  top:52%; animation-name:sc-chip1 }
.sc-chip--2{ left:22%; top:64%; animation-name:sc-chip2 }
.sc-chip--3{ left:4%;  top:76%; animation-name:sc-chip3 }
.sc-chip--4{ left:24%; top:87%; animation-name:sc-chip4 }
.sc-chip--1 u{ animation-name:sc-plus1 } .sc-chip--2 u{ animation-name:sc-plus2 }
.sc-chip--3 u{ animation-name:sc-plus3 } .sc-chip--4 u{ animation-name:sc-plus4 }
@keyframes sc-chip1{ 0%,4%{ opacity:0; transform:translateY(3cqmin) scale(.7) } 9%,92%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-2cqmin) } }
@keyframes sc-chip2{ 0%,24%{ opacity:0; transform:translateY(3cqmin) scale(.7) } 29%,92%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-2cqmin) } }
@keyframes sc-chip3{ 0%,44%{ opacity:0; transform:translateY(3cqmin) scale(.7) } 49%,92%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-2cqmin) } }
@keyframes sc-chip4{ 0%,64%{ opacity:0; transform:translateY(3cqmin) scale(.7) } 69%,92%{ opacity:1; transform:none } 100%{ opacity:0; transform:translateY(-2cqmin) } }
@keyframes sc-plus1{ 0%,8%{ opacity:0; transform:none } 11%{ opacity:1 } 20%,100%{ opacity:0; transform:translateY(-8cqmin) } }
@keyframes sc-plus2{ 0%,28%{ opacity:0; transform:none } 31%{ opacity:1 } 40%,100%{ opacity:0; transform:translateY(-8cqmin) } }
@keyframes sc-plus3{ 0%,48%{ opacity:0; transform:none } 51%{ opacity:1 } 60%,100%{ opacity:0; transform:translateY(-8cqmin) } }
@keyframes sc-plus4{ 0%,68%{ opacity:0; transform:none } 71%{ opacity:1 } 80%,100%{ opacity:0; transform:translateY(-8cqmin) } }

/* ---- 02 · web development: a page builds itself ------------------------- */
.sc-win{ left:5%; top:9%; width:66%; height:60%; overflow:hidden; padding:0 }
.sc-win__bar{ display:flex; align-items:center; gap:1.2cqmin; height:7cqmin; padding:0 2.4cqmin; background:#F1F4FA; border-bottom:1px solid #E3EAF7 }
.sc-win__bar i{ width:1.8cqmin; height:1.8cqmin; border-radius:50%; background:#D0D9EA }
.sc-win__bar i:first-child{ background:#F07167 } .sc-win__bar i:nth-child(2){ background:#F2B233 } .sc-win__bar i:nth-child(3){ background:#4CC38A }
.sc-win__bar span{ flex:1; height:3cqmin; margin-left:2cqmin; border-radius:99px; background:#fff }
.sc-win__body{ position:relative; height:calc(100% - 7cqmin); padding:3.6cqmin;
               display:grid; grid-template-columns:1fr .9fr; grid-template-rows:1fr auto; gap:3cqmin }
.sc-win__copy{ display:grid; align-content:center; gap:1.8cqmin }
.sc-win__copy > *{ display:block; border-radius:1cqmin; transform-origin:0 50%; animation:var(--T) var(--ease-out,ease-out) infinite }
.sc-win__copy b{ height:3.4cqmin; background:var(--ink2); animation-name:sc-grow1 }
.sc-win__copy b + b{ width:70%; animation-name:sc-grow2 }
.sc-win__copy i{ height:1.8cqmin; background:#D7E0F2; animation-name:sc-grow3 }
.sc-win__copy i + i{ width:80%; animation-name:sc-grow4 }
.sc-win__copy em{ width:45%; height:5.4cqmin; border-radius:99px; background:var(--blue); margin-top:1cqmin; animation-name:sc-btn }
.sc-win__pic{ border-radius:2cqmin; background:
  radial-gradient(circle at 70% 30%, #fff 0 12%, transparent 13%),
  linear-gradient(150deg,#5B8DEF,var(--blue)); animation:sc-pic var(--T) var(--ease-out,ease-out) infinite }
.sc-win__row{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:2cqmin }
.sc-win__row i{ height:8cqmin; border-radius:1.6cqmin; background:#EEF2FA; animation:var(--T) cubic-bezier(.2,1.4,.4,1) infinite }
.sc-win__row i:nth-child(1){ animation-name:sc-pop1 } .sc-win__row i:nth-child(2){ animation-name:sc-pop2 } .sc-win__row i:nth-child(3){ animation-name:sc-pop3 }
@keyframes sc-grow1{ 0%,4%{ transform:scaleX(0) } 12%,92%{ transform:scaleX(1) } 100%{ transform:scaleX(0) } }
@keyframes sc-grow2{ 0%,9%{ transform:scaleX(0) } 17%,92%{ transform:scaleX(1) } 100%{ transform:scaleX(0) } }
@keyframes sc-grow3{ 0%,15%{ transform:scaleX(0) } 22%,92%{ transform:scaleX(1) } 100%{ transform:scaleX(0) } }
@keyframes sc-grow4{ 0%,19%{ transform:scaleX(0) } 26%,92%{ transform:scaleX(1) } 100%{ transform:scaleX(0) } }
@keyframes sc-btn{ 0%,26%{ transform:scale(0) } 31%{ transform:scale(1.1) } 33%,55%{ transform:scale(1) } 57%{ transform:scale(.9); filter:brightness(1.3) } 60%,92%{ transform:scale(1); filter:none } 100%{ transform:scale(0) } }
@keyframes sc-pic{ 0%,20%{ opacity:0; transform:scale(.8) } 30%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes sc-pop1{ 0%,34%{ opacity:0; transform:translateY(3cqmin) } 40%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes sc-pop2{ 0%,38%{ opacity:0; transform:translateY(3cqmin) } 44%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes sc-pop3{ 0%,42%{ opacity:0; transform:translateY(3cqmin) } 48%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
.sc-tag--1, .sc-tag--2, .sc-tag--3{ opacity:0; animation:var(--T) cubic-bezier(.2,1.4,.4,1) infinite }
.sc-tag--1{ left:6%;  top:74%; animation-name:sc-tag1 }
.sc-tag--2{ left:24%; top:83%; animation-name:sc-tag2; background:#0E2861 }
.sc-tag--3{ left:9%;  top:90%; animation-name:sc-tag3; background:#2A5BC0 }
@keyframes sc-tag1{ 0%,50%{ opacity:0; transform:scale(.5) } 55%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes sc-tag2{ 0%,56%{ opacity:0; transform:scale(.5) } 61%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes sc-tag3{ 0%,62%{ opacity:0; transform:scale(.5) } 67%,92%{ opacity:1; transform:none } 100%{ opacity:0 } }
.sc-code{
  position:absolute; right:6%; top:6%; z-index:4; display:grid; place-items:center;
  width:12cqmin; height:12cqmin; border-radius:3cqmin; background:var(--ink2); color:#fff;
  font:700 4.2cqmin/1 var(--font-display); animation:sc-float 4s ease-in-out infinite;
  box-shadow:0 2cqmin 4cqmin -1.5cqmin rgba(14,40,97,.5);
}
@keyframes sc-float{ 0%,100%{ transform:translateY(0) rotate(-6deg) } 50%{ transform:translateY(-2.4cqmin) rotate(4deg) } }
.sc-cursor{ position:absolute; z-index:5; left:0; top:0; width:6cqmin; height:6cqmin;
            fill:#0E2861 !important; stroke:#fff !important; stroke-width:1.4 !important;
            animation:sc-cursor var(--T) cubic-bezier(.6,0,.3,1) infinite }
@keyframes sc-cursor{
  0%,24%{ transform:translate(60cqw,70cqh) } 34%,56%{ transform:translate(14cqw,50cqh) }
  58%{ transform:translate(14cqw,50cqh) scale(.8) } 60%{ transform:translate(14cqw,50cqh) scale(1) }
  80%,100%{ transform:translate(60cqw,70cqh) }
}

/* ---- 03 · events: the badge is scanned, the door counts ----------------- */
.sc-lanyard{ position:absolute; left:26%; top:-2%; width:1.4cqmin; height:12%; z-index:1;
             background:linear-gradient(var(--blue),#2A5BC0); border-radius:1cqmin; transform-origin:50% 0;
             animation:sc-swing 4s ease-in-out infinite }
.sc-badge{ left:8%; top:9%; width:38%; padding:3cqmin; display:grid; gap:2.4cqmin; justify-items:center;
           transform-origin:50% -10%; animation:sc-swing 4s ease-in-out infinite }
.sc-badge__hole{ width:9cqmin; height:1.8cqmin; border-radius:99px; background:#E3EAF7 }
.sc-badge .sc-lines{ width:100%; justify-items:center }
.sc-badge .sc-lines b{ margin-inline:auto }
.sc-qr{
  /* a real code: it opens inteligencia.me */
  position:relative; width:22cqmin; height:22cqmin; border-radius:1.4cqmin; overflow:hidden;
  background:#fff url(assets/brand/qr-intelligencia.svg) center / 84% no-repeat;
  box-shadow:inset 0 0 0 1px #DCE3F1;
}
.sc-qr__scan{ position:absolute; left:0; right:0; height:3cqmin; top:0;
              background:linear-gradient(transparent,rgba(37,211,102,.85),transparent);
              animation:sc-scan var(--T) linear infinite; opacity:0 }
@keyframes sc-scan{ 0%,14%{ opacity:0; transform:translateY(0) } 16%{ opacity:1 } 36%{ opacity:1; transform:translateY(20cqmin) } 38%,100%{ opacity:0; transform:translateY(20cqmin) } }
.sc-badge__ok{ position:absolute; right:-3cqmin; top:-3cqmin; width:10cqmin; height:10cqmin; border-radius:50%;
               display:grid; place-items:center; background:var(--wa); color:#fff; opacity:0;
               box-shadow:0 1.6cqmin 3cqmin -1cqmin rgba(20,120,60,.5);
               animation:sc-ok var(--T) cubic-bezier(.2,1.6,.4,1) infinite }
.sc-badge__ok svg{ width:6cqmin; height:6cqmin; stroke-width:2.4 }
@keyframes sc-ok{ 0%,38%{ opacity:0; transform:scale(.3) } 43%,90%{ opacity:1; transform:none } 100%{ opacity:0 } }
@keyframes sc-swing{ 0%,100%{ transform:rotate(-2deg) } 50%{ transform:rotate(2deg) } }
.sc-count{ left:8%; top:74%; padding:2.4cqmin 3.4cqmin; display:grid; gap:.8cqmin }
.sc-count small{ font:500 2.8cqmin/1 var(--font-text); color:#6B7A99 }
.sc-count b{ font:700 6cqmin/1 var(--font-display); color:var(--ink2); counter-reset:n var(--sc-n); animation:sc-door var(--T) steps(1,end) infinite }
.sc-count b::after{ content:counter(n) }
@keyframes sc-door{ 0%{ --sc-n:246 } 42%{ --sc-n:247 } 60%{ --sc-n:248 } 80%{ --sc-n:249 } 100%{ --sc-n:246 } }
.sc-confetti{ position:absolute; inset:0; z-index:4; pointer-events:none }
.sc-confetti i{ position:absolute; left:var(--x); top:-4%; width:2cqmin; height:3cqmin; border-radius:.5cqmin;
                background:var(--c); opacity:0; animation:sc-confetti var(--T) ease-in infinite; animation-delay:var(--t) }
@keyframes sc-confetti{
  0%,42%{ opacity:0; transform:translateY(0) rotate(0) }
  44%{ opacity:1 }
  75%{ opacity:1; transform:translateY(95cqh) rotate(var(--r)) }
  76%,100%{ opacity:0; transform:translateY(95cqh) rotate(var(--r)) }
}

/* ---- 04 · learning: a climb, milestone by milestone --------------------- */
.sc-path{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1 }
.sc-path path{ fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-width:.9cqmin }
.sc-path__base{ stroke:#C9D6EE; stroke-dasharray:1.4cqmin 1.4cqmin }
.sc-path__live{ stroke:var(--blue); stroke-dasharray:1; stroke-dashoffset:1; animation:sc-path var(--T) linear infinite }
@keyframes sc-path{ 0%,6%{ stroke-dashoffset:1 } 18%{ stroke-dashoffset:.66 } 22%{ stroke-dashoffset:.66 } 34%{ stroke-dashoffset:.33 } 38%{ stroke-dashoffset:.33 } 50%,92%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:1 } }
.sc-ms{
  position:absolute; z-index:2; width:10cqmin; height:10cqmin; margin:-5cqmin 0 0 -5cqmin; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:#fff; border:.8cqmin solid #C9D6EE;
  animation:var(--T) cubic-bezier(.2,1.5,.4,1) infinite;
}
.sc-ms svg{ width:5.6cqmin; height:5.6cqmin; stroke-width:2.4 }
.sc-ms--1{ left:9%; top:90%; animation-name:sc-ms1 }
.sc-ms--2{ left:22%; top:74%; animation-name:sc-ms2 }
.sc-ms--3{ left:35%; top:58%; animation-name:sc-ms3 }
.sc-ms--4{ left:47%; top:41%; width:14cqmin; height:14cqmin; margin:-7cqmin 0 0 -7cqmin; animation-name:sc-ms4 }
.sc-star svg{ width:8cqmin; height:8cqmin; fill:currentColor; stroke-width:1 }
@keyframes sc-ms1{ 0%,2%{ background:#fff; border-color:#C9D6EE; transform:none } 5%{ transform:scale(1.25) } 8%,92%{ background:var(--blue); border-color:var(--blue); transform:none } 100%{ background:#fff; border-color:#C9D6EE } }
@keyframes sc-ms2{ 0%,18%{ background:#fff; border-color:#C9D6EE; transform:none } 21%{ transform:scale(1.25) } 24%,92%{ background:var(--blue); border-color:var(--blue); transform:none } 100%{ background:#fff; border-color:#C9D6EE } }
@keyframes sc-ms3{ 0%,34%{ background:#fff; border-color:#C9D6EE; transform:none } 37%{ transform:scale(1.25) } 40%,92%{ background:var(--blue); border-color:var(--blue); transform:none } 100%{ background:#fff; border-color:#C9D6EE } }
@keyframes sc-ms4{ 0%,50%{ background:#fff; border-color:#C9D6EE; transform:none } 54%{ transform:scale(1.4) rotate(20deg) } 58%,92%{ background:#F2B233; border-color:#F2B233; transform:none; box-shadow:0 0 0 2cqmin rgba(242,178,51,.25) } 100%{ background:#fff; border-color:#C9D6EE } }
.sc-board{ left:5%; top:7%; width:44%; padding:2.6cqmin 3cqmin }
.sc-board small, .sc-prog small{ display:block; font:600 2.6cqmin/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:#6B7A99; margin-bottom:2cqmin }
.sc-board__rows{ position:relative; height:21cqmin }
.sc-board__rows i{
  position:absolute; left:0; right:0; height:6cqmin; display:flex; align-items:center; gap:2cqmin;
  padding:0 1.6cqmin; border-radius:1.4cqmin; background:#F1F4FA; font-style:normal;
  animation:var(--T) cubic-bezier(.6,0,.3,1) infinite;
}
.sc-board__rows b{ font:700 3cqmin/1 var(--font-display); color:#6B7A99; width:3cqmin }
.sc-board__rows span{ flex:1; height:1.8cqmin; border-radius:1cqmin; background:#D7E0F2 }
.sc-board__rows .you{ background:var(--blue) }
.sc-board__rows .you b{ color:#fff }
.sc-board__rows .you span{ height:auto; background:none; font:600 3cqmin/1 var(--font-text); color:#fff }
.sc-board__rows .r1{ animation-name:sc-row1 } .sc-board__rows .r2{ animation-name:sc-row2 } .sc-board__rows .you{ animation-name:sc-rowy }
/* the ranks change with the rows: You climbs from 3 to 1, the others step down */
.sc-board__rows b{ counter-reset:n var(--sc-n); animation:var(--T) steps(1,end) infinite }
.sc-board__rows b::after{ content:counter(n) }
.sc-board__rows .r1 b{ --sc-n:1; animation-name:sc-rank1 }
.sc-board__rows .r2 b{ --sc-n:2; animation-name:sc-rank2 }
.sc-board__rows .you b{ --sc-n:3; animation-name:sc-ranky }
@keyframes sc-rank1{ 0%{ --sc-n:1 } 57%{ --sc-n:2 } 96%{ --sc-n:1 } 100%{ --sc-n:1 } }
@keyframes sc-rank2{ 0%{ --sc-n:2 } 57%{ --sc-n:3 } 96%{ --sc-n:2 } 100%{ --sc-n:2 } }
@keyframes sc-ranky{ 0%{ --sc-n:3 } 57%{ --sc-n:1 } 96%{ --sc-n:3 } 100%{ --sc-n:3 } }
@keyframes sc-row1{ 0%,54%{ transform:translateY(0) } 60%,92%{ transform:translateY(7.5cqmin) } 100%{ transform:translateY(0) } }
@keyframes sc-row2{ 0%,54%{ transform:translateY(7.5cqmin) } 60%,92%{ transform:translateY(15cqmin) } 100%{ transform:translateY(7.5cqmin) } }
@keyframes sc-rowy{ 0%,54%{ transform:translateY(15cqmin) } 60%,92%{ transform:translateY(0) } 100%{ transform:translateY(15cqmin) } }
.sc-prog{ left:54%; top:7%; width:41%; padding:2.6cqmin 3cqmin; z-index:4 }
.sc-prog span{ display:block; height:2.4cqmin; border-radius:99px; background:#E3EAF7; overflow:hidden }
.sc-prog i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2A5BC0,var(--blue));
            transform-origin:0 50%; animation:sc-prog var(--T) linear infinite }
@keyframes sc-prog{ 0%,4%{ transform:scaleX(.05) } 50%,92%{ transform:scaleX(1) } 100%{ transform:scaleX(.05) } }

/* ---- 05 · detail aids: the deck swipes on the tablet -------------------- */
.sc-tab{ position:absolute; left:4%; top:12%; width:74%; aspect-ratio:4/3; max-height:64%; z-index:2;
         padding:2.4cqmin; border-radius:4cqmin; background:#0E1B3A;
         box-shadow:0 3cqmin 6cqmin -2cqmin rgba(14,40,97,.5); transform:rotate(-3deg) }
.sc-tab__screen{ position:relative; height:calc(100% - 4cqmin); border-radius:2cqmin; overflow:hidden; background:#fff }
.sc-slides{ display:flex; width:300%; height:100%; animation:sc-slides var(--T) cubic-bezier(.7,0,.2,1) infinite }
.sc-slide{ flex:1; display:grid; grid-template-rows:auto 1fr; gap:2.4cqmin; padding:3.4cqmin }
.sc-slide > b{ display:block; width:55%; height:3cqmin; border-radius:1cqmin; background:var(--ink2) }
@keyframes sc-slides{ 0%,26%{ transform:translateX(0) } 33%,59%{ transform:translateX(-33.333%) } 66%,92%{ transform:translateX(-66.666%) } 100%{ transform:translateX(0) } }
.sc-slide--chart div{ display:flex; align-items:flex-end; gap:3cqmin; padding:0 2cqmin; border-bottom:.5cqmin solid #E3EAF7 }
.sc-slide--chart i{ flex:1; border-radius:1cqmin 1cqmin 0 0; background:var(--blue); transform-origin:50% 100%; animation:sc-barup var(--T) var(--ease-out,ease-out) infinite }
.sc-slide--chart i:nth-child(1){ height:40% } .sc-slide--chart i:nth-child(2){ height:62%; background:#2A5BC0 }
.sc-slide--chart i:nth-child(3){ height:78% } .sc-slide--chart i:nth-child(4){ height:95%; background:#25D366 }
@keyframes sc-barup{ 0%,3%{ transform:scaleY(0) } 14%,92%{ transform:scaleY(1) } 100%{ transform:scaleY(0) } }
.sc-moa{ position:relative; justify-self:center; align-self:center; width:24cqmin; height:24cqmin; border-radius:50%;
         border:.6cqmin dashed #C9D6EE; animation:sc-spin 6s linear infinite }
.sc-moa::before{ content:''; position:absolute; inset:28%; border-radius:50%; background:linear-gradient(135deg,#5B8DEF,var(--blue)) }
.sc-moa i{ position:absolute; width:5cqmin; height:5cqmin; margin:-2.5cqmin; border-radius:50%; background:#F2B233 }
.sc-moa i:nth-child(1){ left:50%; top:0 } .sc-moa i:nth-child(2){ left:93%; top:75%; background:#25D366 } .sc-moa i:nth-child(3){ left:7%; top:75%; background:#E5484D }
@keyframes sc-spin{ to{ transform:rotate(360deg) } }
.sc-slide--dose div{ display:grid; gap:1.8cqmin; align-content:start }
.sc-slide--dose i{ display:block; height:4.4cqmin; border-radius:1.2cqmin; background:#F1F4FA; position:relative }
.sc-slide--dose i::after{ content:''; position:absolute; left:2cqmin; top:1.4cqmin; height:1.6cqmin; width:40%; border-radius:1cqmin; background:#C9D6EE }
.sc-slide--dose i:nth-child(2){ background:#EAF0FB } .sc-slide--dose i:nth-child(2)::after{ background:var(--blue); width:58% }
.sc-swipe{ position:absolute; z-index:3; right:12%; top:48%; width:7cqmin; height:7cqmin; border-radius:50%;
           background:rgba(14,40,97,.18); border:.5cqmin solid rgba(255,255,255,.9); opacity:0;
           animation:sc-swipe var(--T) cubic-bezier(.7,0,.2,1) infinite }
@keyframes sc-swipe{
  0%,22%{ opacity:0; transform:translateX(0) } 24%{ opacity:1 } 32%{ opacity:1; transform:translateX(-40cqmin) } 34%,48%{ opacity:0; transform:translateX(0) }
  50%{ opacity:1 } 58%{ opacity:1; transform:translateX(-40cqmin) } 60%,100%{ opacity:0; transform:translateX(0) }
}
.sc-tab__dots{ display:flex; justify-content:center; gap:1.4cqmin; height:4cqmin; align-items:center }
.sc-tab__dots i{ width:1.6cqmin; height:1.6cqmin; border-radius:50%; background:#3A4B73; animation:var(--T) steps(1,end) infinite }
.sc-tab__dots i:nth-child(1){ animation-name:sc-dot1 } .sc-tab__dots i:nth-child(2){ animation-name:sc-dot2 } .sc-tab__dots i:nth-child(3){ animation-name:sc-dot3 }
@keyframes sc-dot1{ 0%{ background:#fff } 30%{ background:#3A4B73 } 96%{ background:#fff } }
@keyframes sc-dot2{ 0%{ background:#3A4B73 } 30%{ background:#fff } 62%{ background:#3A4B73 } }
@keyframes sc-dot3{ 0%{ background:#3A4B73 } 62%{ background:#fff } 96%{ background:#3A4B73 } }
.sc-tag--veeva, .sc-tag--iqvia, .sc-tag--platforce{ left:6%; opacity:0; animation:var(--T) cubic-bezier(.2,1.6,.4,1) infinite }
.sc-tag--veeva{ top:65%; left:31%; rotate:7deg; background:#F2A900; color:#1B1B1B; animation-name:sc-pf1 }
/* scattered, each at its own angle, rather than a stacked list */
.sc-tag--iqvia{ top:76%; left:4%; rotate:-9deg; background:#0F7BB9; animation-name:sc-pf2 }
.sc-tag--platforce{ top:90%; left:24%; rotate:4deg; background:#5B3FD6; animation-name:sc-pf3 }
/* the three platforms appear out of nothing, one after another */
@keyframes sc-pf1{ 0%,6%{ opacity:0; transform:scale(0) } 11%,92%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(.6) } }
@keyframes sc-pf2{ 0%,16%{ opacity:0; transform:scale(0) } 21%,92%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(.6) } }
@keyframes sc-pf3{ 0%,26%{ opacity:0; transform:scale(0) } 31%,92%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(.6) } }

/* ---- nothing runs unless the deck is on screen ------------------------- */
.deck:not(.is-on) .scene *, .deck:not(.is-on) .scene::after{ animation-play-state:paused !important }
@media (prefers-reduced-motion:reduce){
  .scene *, .scene::after{ animation:none !important }
  .sc-chip, .sc-chip u, .sc-tag, .sc-win__row i, .sc-win__pic, .sc-badge__ok{ opacity:1 !important }
}