/* =========================================================
   Service bundle frame animations (Clinic / Platform / Revenue)
   A frame animates only while it carries .is-playing
   (added by service-anim.js when the frame becomes visible).
   Without the class every frame shows its finished drawing,
   so nothing disappears if the script never runs.
   ========================================================= */

.sv-frame .sva-pop,
.sv-frame .sva-ring,
.sv-frame .sva-halo,
.sv-frame .sva-chip {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- shared building blocks ---------- */

@keyframes sva-draw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  4%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes sva-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sva-pop {
  0%   { opacity: 0; transform: scale(.4); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.sv-frame.is-playing .sva-draw {
  stroke-dasharray: 1 1;
  animation: sva-draw var(--dur, .6s) var(--ease, cubic-bezier(.65, 0, .35, 1)) var(--d, 0s) both;
}
.sv-frame.is-playing .sva-fade {
  animation: sva-fade .45s ease-out var(--d, 0s) both;
}
.sv-frame.is-playing .sva-pop {
  animation: sva-pop .45s cubic-bezier(.34, 1.4, .64, 1) var(--d, 0s) both;
}

/* ---------- 01 Clinic: supervision pulse ---------- */

.sv-frame .sva-pulse { fill: var(--cyan); opacity: 0; }
.sv-frame .sva-ring  { fill: none; stroke: var(--cyan); stroke-width: 1.6; opacity: 0; }

@keyframes sva-pulse {
  0%        { opacity: 0; transform: translate(0, 0); }
  5%        { opacity: 1; }
  22%       { transform: translate(0, 16px); }
  40%       { transform: translate(var(--tx), 16px); }
  48%       { opacity: 1; transform: translate(var(--tx), 21px); }
  55%, 100% { opacity: 0; transform: translate(var(--tx), 21px); }
}
@keyframes sva-ring {
  0%, 47%   { opacity: 0; transform: scale(1); }
  50%       { opacity: .85; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(2.1); }
}
@keyframes sva-tint {
  0%, 44%   { stroke: var(--ink); }
  50%, 64%  { stroke: var(--cyan); }
  80%, 100% { stroke: var(--ink); }
}

/* the finished MD + pharmacist pyramid collapses into the centre of the clinic
   circle and becomes the Scriptify mark. Base state = collapsed and hidden,
   so the static drawing is the final composition (logo in circle + pharmacies) */
.sv-frame .sva-shrink {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(93.5px, 36.2px) scale(.15);
  opacity: 0;
}
@keyframes sva-shrink {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  75%  { transform: translate(93.5px, 36.2px) scale(.15); opacity: 1; }
  100% { transform: translate(93.5px, 36.2px) scale(.15); opacity: 0; }
}
.sv-frame.is-playing .sva-shrink { animation: sva-shrink .8s cubic-bezier(.65, 0, .35, 1) 2.4s both; }

.sv-frame .sva-clinic-ring { fill: none; stroke: var(--cyan); stroke-width: 1.6; }
.sv-frame .sva-cring { fill: none; stroke: var(--cyan); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sv-frame .sva-pharm .mi-ink { stroke-width: 1.6; }
.sv-frame .sva-rx-badge { fill: var(--bg); stroke: var(--cyan); stroke-width: 1.3; }
.sv-frame .sva-rx { fill: var(--cyan); stroke: none; font-family: Figtree, sans-serif; font-weight: 700; font-size: 6.2px; }
.sv-frame .sva-plabel { fill: var(--ink-muted); stroke: none; opacity: .6; font-family: Figtree, sans-serif; font-weight: 400; font-size: 7.5px; letter-spacing: .5px; }
.sv-frame .sva-out { fill: var(--cyan); opacity: 0; }

/* loop: the mark blinks, the clinic ring ripples, then a pulse travels
   down each line and the pharmacy it reaches lights up */
@keyframes sva-out {
  0%, 10%   { opacity: 0; transform: translate(0, 0); }
  16%       { opacity: 1; }
  45%       { opacity: 1; transform: translate(var(--tx), var(--ty)); }
  52%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); }
}
@keyframes sva-tint2 {
  0%, 42%   { stroke: var(--ink); }
  48%, 62%  { stroke: var(--cyan); }
  78%, 100% { stroke: var(--ink); }
}
@keyframes sva-cring {
  0%   { opacity: .6; transform: scale(1); }
  30%, 100% { opacity: 0; transform: scale(1.14); }
}
@keyframes sva-blink2 {
  0%, 100% { opacity: 1; }
  6%       { opacity: .2; }
  14%      { opacity: 1; }
}
.sv-frame.is-playing .sva-out    { animation: sva-out 3s cubic-bezier(.45, 0, .55, 1) 4.4s infinite; }
.sv-frame.is-playing .sva-tint2  { animation: sva-tint2 3s ease-in-out 4.4s infinite; }
.sv-frame.is-playing .sva-cring  { animation: sva-cring 3s ease-out 4.4s infinite; }
.sv-frame.is-playing .sva-blink2 { animation: sva-blink2 3s ease-out 4.4s infinite; }

/* ---------- 02 Platform: panel -> patient -> record -> panel ---------- */

/* shared */
@keyframes sva-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv-frame .sva-grow { transform-box: fill-box; transform-origin: left center; }
.sv-frame.is-playing .sva-grow { animation: sva-grow .4s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) both; }

.sv-frame .sva-fdot { fill: var(--ink); opacity: .28; }
.sv-frame .sva-fdot.cy { fill: var(--cyan); opacity: 1; }
.sv-frame .sva-card { fill: var(--bg); stroke: var(--ink); stroke-opacity: .22; stroke-width: 1.2; }
.sv-frame .sva-avatar { fill: var(--cyan); }
.sv-frame .sva-avatar-b { stroke: var(--cyan); stroke-width: 1.3; stroke-linecap: round; }
.sv-frame .sva-name { fill: var(--ink); opacity: .8; }
.sv-frame .sva-note { fill: var(--ink); opacity: .22; }
.sv-frame .sva-div { stroke: var(--ink); stroke-opacity: .12; stroke-width: 1; }
.sv-frame .sva-base { stroke: var(--ink); stroke-opacity: .14; stroke-width: 1; stroke-dasharray: 2 3; }
.sv-frame .sva-fill { fill: var(--ink); opacity: .75; }
.sv-frame .sva-fill.cy { fill: var(--cyan); opacity: 1; }
.sv-frame .sva-tl { fill: var(--ink-muted); stroke: none; font-family: Figtree, sans-serif; font-size: 5.6px; letter-spacing: .2px; }
.sv-frame .sva-tl.cy { fill: var(--cyan); } .sv-frame .sva-tl.b { font-weight: 700; }
.sv-frame .sva-chip2 { fill: var(--bg); stroke: var(--ink); stroke-opacity: .35; stroke-width: 1; }
.sv-frame .sva-chip2 + .sva-tl { font-size: 4.4px; }
.sv-frame .sva-arrow { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.1; stroke-linecap: round; }
.sv-frame .sva-md { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.sv-frame .sva-md-x { stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.sv-frame .sva-ok { fill: var(--cyan); }
.sv-frame .sva-ok-t { stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sv-frame .sva-end { fill: var(--cyan); }
.sv-frame .sva-live { fill: var(--cyan); }
.sv-frame .sva-scan { stroke: var(--cyan); stroke-width: 1.2; opacity: 0; }

.sv-frame .sva-gcard { fill: var(--bg); stroke: var(--ink); stroke-opacity: .2; stroke-width: 1.4; }
.sv-frame .sva-gbar { fill: var(--ink); opacity: .2; }
.sv-frame .sva-gline { stroke: var(--ink); stroke-opacity: .15; stroke-width: 2.2; stroke-linecap: round; }
.sv-frame .sva-gspark { stroke: var(--cyan); stroke-opacity: .5; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

/* act 1: the panel. Zoom through it into the one cyan patient.
   Base = gone, so the static frame is the finished profile. */
.sv-frame .sva-field { transform-box: view-box; transform-origin: 110px 64px; opacity: 0; }
@keyframes sva-field {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(7); opacity: 0; }
}
.sv-frame.is-playing .sva-field { animation: sva-field 1s cubic-bezier(.7, 0, .84, 0) 1.3s both; }

/* the cyan dot opens into the profile card */
.sv-frame .sva-cardin { transform-box: view-box; transform-origin: 110px 64px; }
@keyframes sva-cardin {
  0%   { transform: scale(.035); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sv-frame.is-playing .sva-cardin { animation: sva-cardin .9s cubic-bezier(.16, 1, .3, 1) 1.75s both; }

/* act 2: the scan line fills the record left to right */
@keyframes sva-scan {
  0%   { opacity: 0; transform: translateX(0); }
  6%   { opacity: .6; }
  94%  { opacity: .6; transform: translateX(124px); }
  100% { opacity: 0; transform: translateX(124px); }
}
.sv-frame.is-playing .sva-scan { animation: sva-scan 2.4s linear 2.5s both; }

@keyframes sva-live { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sv-frame.is-playing .sva-live { animation: sva-live 1.6s ease-in-out 2.6s infinite; }

/* act 3: a 12s loop
   pull out to everyone else's profile -> they collapse into one chat screen ->
   a question is typed and sent, the answer comes back -> the screen folds back into the profile */
.sv-frame .sva-cam { transform-box: view-box; transform-origin: 0 0; }
@keyframes sva-cam {
  0%, 8%    { transform: translate(0, 0) scale(1); opacity: 1; }
  18%, 26%  { transform: translate(49.5px, 28.8px) scale(.55); opacity: 1; }
  33%       { transform: translate(88px, 51.2px) scale(.2); opacity: 0; }
  89%       { transform: translate(88px, 51.2px) scale(.2); opacity: 0; }
  92%       { transform: translate(88px, 51.2px) scale(.2); opacity: 1; }
  100%      { transform: translate(0, 0) scale(1); opacity: 1; }
}
.sv-frame.is-playing .sva-cam { animation: sva-cam 12s cubic-bezier(.65, 0, .35, 1) 5.4s infinite; }

.sv-frame .sva-ghosts { opacity: 0; }
@keyframes sva-ghosts { 0%, 9% { opacity: 0; } 18%, 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
.sv-frame.is-playing .sva-ghosts { animation: sva-ghosts 12s ease-in-out 5.4s infinite; }

/* the chat screen grows out of the collapsed profiles */
.sv-frame .sva-chat { transform-box: view-box; transform-origin: 110px 64px; opacity: 0; }
@keyframes sva-chat {
  0%, 28%   { opacity: 0; transform: scale(.25); }
  36%, 86%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.25); }
}
.sv-frame.is-playing .sva-chat { animation: sva-chat 12s cubic-bezier(.65, 0, .35, 1) 5.4s infinite; }

.sv-frame .sva-scr { fill: var(--bg); stroke: var(--ink); stroke-opacity: .22; stroke-width: 1.2; }
.sv-frame .sva-in { fill: var(--bg); stroke: var(--ink); stroke-opacity: .25; stroke-width: 1; }
.sv-frame .sva-q { fill: var(--ink); stroke: none; font-family: Figtree, sans-serif; font-size: 4.2px; }
.sv-frame .sva-q.ph { fill: var(--ink-muted); opacity: .7; }
.sv-frame .sva-cover { fill: var(--bg); transform-box: fill-box; transform-origin: right center; }
.sv-frame .sva-caret { stroke: var(--cyan); stroke-width: .7; opacity: 0; }
.sv-frame .sva-send { fill: var(--cyan); }
.sv-frame .sva-send-a { stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sv-frame .sva-sendring { fill: none; stroke: var(--cyan); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sv-frame .sva-qbub { fill: var(--cyan); }
.sv-frame .sva-qt { fill: #fff; stroke: none; font-family: Figtree, sans-serif; font-size: 4.7px; }
.sv-frame .sva-abub { fill: var(--bg); stroke: var(--ink); stroke-opacity: .18; stroke-width: 1; }
.sv-frame .sva-dot { fill: var(--ink-muted); opacity: 0; }
.sv-frame .sva-at { fill: var(--ink); stroke: none; font-family: Figtree, sans-serif; font-size: 4.4px; }
.sv-frame .sva-at.b { font-weight: 700; }
.sv-frame .sva-at.mut { fill: var(--ink-muted); }
.sv-frame .sva-at.fine { fill: var(--ink-muted); opacity: .6; font-size: 3.6px; letter-spacing: .3px; }
.sv-frame .sva-abar { fill: var(--cyan); transform-box: fill-box; transform-origin: left center; }
.sv-frame .sva-abar.s { opacity: .55; } .sv-frame .sva-abar.t { opacity: .3; }
.sv-frame .sva-qb, .sv-frame .sva-ab { transform-box: fill-box; }
.sv-frame .sva-qb { transform-origin: right bottom; } .sv-frame .sva-ab { transform-origin: left top; }

@keyframes sva-ph    { 0%, 39% { opacity: .7; } 41%, 94% { opacity: 0; } 97%, 100% { opacity: .7; } }
@keyframes sva-typed { 0%, 56% { opacity: 1; } 57.5%, 100% { opacity: 0; } }
@keyframes sva-type  {
  0%, 41%   { transform: scaleX(1); animation-timing-function: steps(64, end); }
  55%, 93%  { transform: scaleX(0); }
  96%, 100% { transform: scaleX(1); }
}
@keyframes sva-caret {
  0%, 40%   { opacity: 0; transform: translateX(0); }
  41%       { opacity: 1; transform: translateX(0); animation-timing-function: steps(64, end); }
  55%       { opacity: 1; transform: translateX(118px); }
  57%, 100% { opacity: 0; transform: translateX(118px); }
}
@keyframes sva-send     { 0%, 55.5% { transform: scale(1); } 56.5% { transform: scale(.8); } 58%, 100% { transform: scale(1); } }
@keyframes sva-sendring { 0%, 56% { opacity: 0; transform: scale(1); } 57% { opacity: .9; } 62%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes sva-qb { 0%, 57% { opacity: 0; transform: translateY(6px) scale(.85); } 60%, 88% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes sva-ab { 0%, 61% { opacity: 0; transform: scale(.85); } 63.5%, 88% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes sva-dot { 0%, 63% { opacity: 0; transform: translateY(0); } 64% { opacity: .8; } 65.5% { transform: translateY(-1.4px); } 67% { transform: translateY(0); } 68.5% { transform: translateY(-1.4px); } 70% { opacity: .8; transform: translateY(0); } 71%, 100% { opacity: 0; } }
@keyframes sva-ans { 0%, 70.5% { opacity: 0; } 72.5%, 100% { opacity: 1; } }
@keyframes sva-abar { 0%, 72% { transform: scaleX(0); } 77%, 100% { transform: scaleX(1); } }
@keyframes sva-think { 0%, 62% { opacity: 1; } 64%, 68% { opacity: .2; } 66%, 70% { opacity: 1; } 100% { opacity: 1; } }

.sv-frame.is-playing .sva-q.ph     { animation: sva-ph 12s linear 5.4s infinite; }
.sv-frame.is-playing .sva-q.typed  { animation: sva-typed 12s linear 5.4s infinite; }
.sv-frame.is-playing .sva-cover    { animation: sva-type 12s linear 5.4s infinite; }
.sv-frame.is-playing .sva-caret    { animation: sva-caret 12s linear 5.4s infinite; }
.sv-frame.is-playing .sva-send     { transform-box: fill-box; transform-origin: center; animation: sva-send 12s ease-out 5.4s infinite; }
.sv-frame.is-playing .sva-sendring { animation: sva-sendring 12s ease-out 5.4s infinite; }
.sv-frame.is-playing .sva-qb       { animation: sva-qb 12s cubic-bezier(.34, 1.3, .64, 1) 5.4s infinite; }
.sv-frame.is-playing .sva-ab       { animation: sva-ab 12s cubic-bezier(.34, 1.3, .64, 1) 5.4s infinite; }
.sv-frame.is-playing .sva-dot      { animation: sva-dot 12s ease-in-out calc(5.4s + var(--k) * .12s) infinite; }
.sv-frame.is-playing .sva-ans      { animation: sva-ans 12s ease-out 5.4s infinite; }
.sv-frame.is-playing .sva-abar     { animation: sva-abar 12s cubic-bezier(.3, .7, .3, 1) calc(5.4s + var(--k) * .12s) infinite; }
.sv-frame.is-playing .sva-think    { animation: sva-think 12s ease-in-out 5.4s infinite; }

/* ---------- reduced motion: finished drawings, no movement ---------- */

@media (prefers-reduced-motion: reduce) {
  .sv-frame.is-playing [class*="sva-"] { animation: none !important; }
}

/* ---------- 01 Clinic: pharmacy badges and lockups ---------- */
.sv-frame .sva-rx circle { fill: var(--bg); stroke: var(--cyan); stroke-width: 1.4; }
.sv-frame .sva-rx text {
  fill: var(--cyan); stroke: none;
  font: 700 5.6px Figtree, sans-serif; letter-spacing: -.1px;
}
.sv-frame .sva-lockup text {
  fill: var(--ink-muted); stroke: none; opacity: .75;
  font: 300 7px Figtree, sans-serif; letter-spacing: .3px;
}