/* =====================================================================
   Scriptify: page animations (shared by the For pharmacies and
   For clinicians pages)
     1. .pa-activate  For pharmacies hero: pharmacy activation
     2. .ns-api       For pharmacies, "No new software to buy"
     3. .rp-remote    For clinicians hero: pharmacist at home
     4. .cg-grid      Home page: condition grid
   All of them share the palettes below.

   1. Pharmacy activation (hero)
   One 8s loop: wordmark -> its pill moves into a grey pharmacy and its
   patients -> everything activates in cyan -> fade -> repeat.

   Colours: edit the two palettes below. Light is the default. Dark
   applies when <html data-theme="dark"> (what the site sets), or when the
   visitor's system is dark and the page hasn't forced data-theme="light".

   The resting state (no JS, or reduced motion) is the finished,
   activated picture.
   ===================================================================== */

/* ---------- palettes ---------- */
.pa-activate, .ns-api, .rp-remote, .cg-grid {
  --pa-bg:        var(--bg, #FFFFFF);       /* page background (the clinician desks are filled with it) */
  --pa-ink:       #0A0D12;                  /* wordmark letters and pill */
  --pa-cyan:      #22B8E8;                  /* brand cyan: lines, dots, box */
  --pa-cyan-text: #0E9CCB;                  /* cyan used for text (a touch deeper, to read on white) */
  --pa-grey:      #8893A3;                  /* the "not yet activated" lines and dots */
  --pa-grey-text: #5B6678;                  /* grey label and first caption */
  --pa-grey-fill: rgba(136, 147, 163, .08); /* grey box tint */
  --pa-cyan-fill: rgba(34, 184, 232, .10);  /* cyan box tint */
  --pa-glow:      rgba(34, 184, 232, .65);  /* glow around the activated dots */
}
[data-theme="dark"] .pa-activate, [data-theme="dark"] .ns-api, [data-theme="dark"] .rp-remote, [data-theme="dark"] .cg-grid {
  --pa-bg:        var(--bg, #0A0D12);
  --pa-ink:       #EEF2F7;
  --pa-cyan:      #22B8E8;
  --pa-cyan-text: #3CC6F0;
  --pa-grey:      #6E7888;
  --pa-grey-text: #A3ADBB;
  --pa-grey-fill: rgba(136, 147, 163, .10);
  --pa-cyan-fill: rgba(34, 184, 232, .12);
  --pa-glow:      rgba(34, 184, 232, .75);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-activate, :root:not([data-theme="light"]) .ns-api, :root:not([data-theme="light"]) .rp-remote, :root:not([data-theme="light"]) .cg-grid {
    --pa-bg:        var(--bg, #0A0D12);
    --pa-ink:       #EEF2F7;
    --pa-cyan:      #22B8E8;
    --pa-cyan-text: #3CC6F0;
    --pa-grey:      #6E7888;
    --pa-grey-text: #A3ADBB;
    --pa-grey-fill: rgba(136, 147, 163, .10);
    --pa-cyan-fill: rgba(34, 184, 232, .12);
    --pa-glow:      rgba(34, 184, 232, .75);
  }
}

/* ---------- layout ---------- */
.pa-activate { width: 100%; max-width: 560px; margin: 0 auto; }
.pa-activate > svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ---------- resting state = finished, activated picture ---------- */
.pa-activate .pa-wm-ink { fill: var(--pa-ink); }
.pa-activate .pa-wm-cy  { fill: var(--pa-cyan); }

.pa-activate .pa-word { opacity: 0; }
.pa-activate .pa-pill {
  transform-box: view-box; transform-origin: 0 0;
  transform: translate(230px, 149px) scale(.6);
}

.pa-activate .pa-box {
  stroke: var(--pa-cyan); stroke-width: 2.2; fill: var(--pa-cyan-fill);
  filter: drop-shadow(0 0 10px var(--pa-glow));
}
.pa-activate .pa-label {
  font-family: 'Figtree', system-ui, sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 1.4px;
  fill: var(--pa-cyan-text);
}
.pa-activate .pa-sub {
  font-family: 'Figtree', system-ui, sans-serif; font-size: 10.5px; font-weight: 600;
  fill: var(--pa-cyan-text);
}
.pa-activate .pa-spoke { stroke: var(--pa-cyan); stroke-width: 1.5; stroke-dasharray: 3 6; }
.pa-activate .pa-node  { fill: var(--pa-cyan); stroke: var(--pa-cyan); stroke-width: 2; filter: drop-shadow(0 0 7px var(--pa-glow)); }

.pa-activate .pa-foot { font-family: 'Figtree', system-ui, sans-serif; font-size: 11px; font-weight: 600; }
.pa-activate .pa-foot-1 { fill: var(--pa-grey-text); opacity: 0; }
.pa-activate .pa-foot-2 { fill: var(--pa-cyan-text); }

/* ---------- the loop (only while on screen) ---------- */
.pa-activate.is-on .pa-word  { animation: pa-word 8s ease-in-out infinite; }
.pa-activate.is-on .pa-pill  { animation: pa-pill 8s ease-in-out infinite; }
.pa-activate.is-on .pa-box   { animation: pa-box 8s ease infinite; }
.pa-activate.is-on .pa-label { animation: pa-label 8s ease infinite; }
.pa-activate.is-on .pa-sub   { animation: pa-sub 8s ease infinite; }
.pa-activate.is-on .pa-spoke {
  animation: pa-spoke 8s ease infinite, pa-march 1.1s linear infinite;
  animation-delay: calc(var(--i) * .04s), 0s;
}
.pa-activate.is-on .pa-node  { animation: pa-node 8s ease infinite; animation-delay: calc(var(--i) * .04s); animation-fill-mode: both; }
.pa-activate.is-on .pa-foot-1 { animation: pa-foot-1 8s ease infinite; }
.pa-activate.is-on .pa-foot-2 { animation: pa-foot-2 8s ease infinite; }

/* 1. the wordmark shows, fades as its pill takes over, returns at the end */
@keyframes pa-word {
  0%, 15%  { opacity: 1; }
  23%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}
/* 2. the pill leaves the wordmark and settles into the pharmacy */
@keyframes pa-pill {
  0%, 14%   { opacity: 0; transform: translate(166.7px, 170px) scale(1); }
  18%       { opacity: 1; transform: translate(166.7px, 170px) scale(1); }
  36%, 88%  { opacity: 1; transform: translate(230px, 149px) scale(.6); }
  95%, 100% { opacity: 0; transform: translate(230px, 149px) scale(.6); }
}
/* 3. the pharmacy appears grey, then activates */
@keyframes pa-box {
  0%, 28%   { opacity: 0; stroke: var(--pa-grey); fill: var(--pa-grey-fill); filter: none; }
  36%, 52%  { opacity: 1; stroke: var(--pa-grey); fill: var(--pa-grey-fill); filter: none; }
  58%       { opacity: 1; stroke: var(--pa-cyan); fill: var(--pa-cyan-fill); filter: drop-shadow(0 0 16px var(--pa-glow)); }
  64%, 88%  { opacity: 1; stroke: var(--pa-cyan); fill: var(--pa-cyan-fill); filter: drop-shadow(0 0 10px var(--pa-glow)); }
  95%, 100% { opacity: 0; stroke: var(--pa-cyan); fill: var(--pa-cyan-fill); filter: none; }
}
@keyframes pa-label {
  0%, 32%   { opacity: 0; fill: var(--pa-grey-text); }
  40%, 52%  { opacity: 1; fill: var(--pa-grey-text); }
  62%, 88%  { opacity: 1; fill: var(--pa-cyan-text); }
  95%, 100% { opacity: 0; fill: var(--pa-cyan-text); }
}
@keyframes pa-sub {
  0%, 54%   { opacity: 0; }
  62%, 88%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
/* 4. the patients: grey connections, then live */
@keyframes pa-spoke {
  0%, 28%   { opacity: 0;   stroke: var(--pa-grey); }
  36%, 52%  { opacity: .65; stroke: var(--pa-grey); }
  62%, 88%  { opacity: 1;   stroke: var(--pa-cyan); }
  95%, 100% { opacity: 0;   stroke: var(--pa-cyan); }
}
@keyframes pa-march { to { stroke-dashoffset: -18; } }
@keyframes pa-node {
  0%, 28%   { opacity: 0;   fill: var(--pa-grey); stroke: var(--pa-grey); filter: none; }
  36%, 52%  { opacity: .75; fill: var(--pa-grey); stroke: var(--pa-grey); filter: none; }
  58%       { opacity: 1;   fill: var(--pa-cyan); stroke: var(--pa-cyan); filter: drop-shadow(0 0 10px var(--pa-glow)); }
  64%, 88%  { opacity: 1;   fill: var(--pa-cyan); stroke: var(--pa-cyan); filter: drop-shadow(0 0 7px var(--pa-glow)); }
  95%, 100% { opacity: 0;   fill: var(--pa-cyan); stroke: var(--pa-cyan); filter: none; }
}
/* 5. the caption changes with the network */
@keyframes pa-foot-1 { 0%, 32% { opacity: 0; } 37%, 53% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes pa-foot-2 { 0%, 59% { opacity: 0; } 64%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---------- reduced motion: the finished picture, still ---------- */
@media (prefers-reduced-motion: reduce) {
  .pa-activate.is-on [class*="pa-"] { animation: none !important; }
}


/* =====================================================================
   2. "No new software to buy": your system -> API -> Scriptify cloud
   Draws in when it scrolls into view, then data keeps moving both ways
   along the API. Resting state (no JS, reduced motion) = finished drawing.
   ===================================================================== */
.ns-api { width: 100%; max-width: 560px; margin: 0 auto; }
.ns-api > svg { width: 100%; height: auto; display: block; overflow: visible; }

.ns-api .ns-box, .ns-api .ns-cloud {
  stroke: var(--pa-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.ns-api .ns-lbl { font-family: 'Figtree', system-ui, sans-serif; font-size: 11px; font-weight: 600; fill: var(--pa-grey-text); }
.ns-api .ns-lbl.big { font-size: 13px; font-weight: 800; fill: var(--pa-ink); }
.ns-api .ns-lbl.cy { fill: var(--pa-cyan-text); font-weight: 700; }
.ns-api .ns-wire { stroke: var(--pa-cyan); stroke-width: 2.4; stroke-linecap: round; opacity: .25; }
.ns-api .ns-flow { stroke: var(--pa-cyan); stroke-width: 2.4; stroke-dasharray: 6 5; }
.ns-api .ns-end  { fill: var(--pa-cyan); }
.ns-api .ns-packet { fill: var(--pa-cyan); opacity: 0; filter: drop-shadow(0 0 4px var(--pa-glow)); }
.ns-api .ns-ink-fill { fill: var(--pa-ink); }
.ns-api .ns-pill-dot { fill: var(--pa-cyan); }
.ns-api .ns-pop, .ns-api .ns-pill-dot { transform-box: fill-box; transform-origin: center; }

/* draw-in */
@keyframes ns-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ns-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ns-pop  { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ns-show { from { opacity: 0; } to { opacity: 1; } }

.ns-api.is-on .ns-draw { stroke-dasharray: 1 1; animation: ns-draw .9s cubic-bezier(.65, 0, .35, 1) both; }
.ns-api.is-on .ns-cloud.ns-draw { animation-delay: .35s; animation-duration: 1.1s; }
.ns-api.is-on .ns-wire.ns-draw  { animation-delay: .95s; animation-duration: .4s; }
.ns-api.is-on .ns-fade { animation: ns-fade .45s ease-out var(--d, 0s) both; }
.ns-api.is-on .ns-pop  { animation: ns-pop .45s cubic-bezier(.34, 1.4, .64, 1) var(--d, 0s) both; }

/* the API keeps flowing */
@keyframes ns-march { to { stroke-dashoffset: -11; } }
.ns-api.is-on .ns-flow { animation: ns-show .4s ease 1.3s both, ns-march 1.1s linear 1.3s infinite; }

/* a packet goes out to the cloud, the pill's dot lights up, an answer comes back */
@keyframes ns-out  { 0% { opacity: 0; transform: translateX(0); } 6% { opacity: 1; } 40% { opacity: 1; transform: translateX(81.5px); } 46%, 100% { opacity: 0; transform: translateX(81.5px); } }
@keyframes ns-back { 0%, 50% { opacity: 0; transform: translateX(0); } 56% { opacity: 1; } 90% { opacity: 1; transform: translateX(-81.5px); } 96%, 100% { opacity: 0; transform: translateX(-81.5px); } }
@keyframes ns-blink { 0%, 38%, 60%, 100% { transform: scale(1); } 44% { transform: scale(1.45); } }
.ns-api.is-on .ns-out      { animation: ns-out 3s ease-in-out 1.8s infinite; }
.ns-api.is-on .ns-back     { animation: ns-back 3s ease-in-out 1.8s infinite; }
.ns-api.is-on .ns-pill-dot { animation: ns-blink 3s ease-in-out 1.8s infinite; }

@media (prefers-reduced-motion: reduce) {
  .ns-api.is-on [class*="ns-"] { animation: none !important; }
}


/* =====================================================================
   3. For clinicians hero: pharmacist at home
   The pharmacist walks past the pharmacy, the camera pans to two homes,
   and the Scriptify pill connects them. 12s loop.
   Resting state (no JS, reduced motion) = the connected picture.
   ===================================================================== */
.rp-remote { width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; }
.rp-remote > svg { width: 100%; height: auto; display: block; overflow: hidden; }

.rp-remote .rp-ink { fill: none; stroke: var(--pa-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rp-remote .rp-cy  { fill: none; stroke: var(--pa-cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rp-remote .rp-ground { fill: none; stroke: var(--pa-grey); stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; }
.rp-remote .rp-desk { fill: var(--pa-bg); } /* the desk hides what sits behind it */
.rp-remote .rp-lbl { font-family: 'Figtree', system-ui, sans-serif; font-size: 11px; font-weight: 600; fill: var(--pa-grey-text); }
.rp-remote .rp-lbl.cy { fill: var(--pa-cyan-text); }
.rp-remote .rp-pill-ink { fill: var(--pa-ink); }
.rp-remote .rp-pill-cy  { fill: var(--pa-cyan); }

/* resting state: panned to the two homes, connected */
.rp-remote .rp-pan  { transform: translateX(-166px); }
.rp-remote .rp-walk { opacity: 0; }
.rp-remote .rp-link { stroke-dasharray: 6 7; }
.rp-remote .rp-pill { transform-box: fill-box; transform-origin: center; }

/* the loop */
.rp-remote.is-on .rp-pan  { animation: rp-pan 12s cubic-bezier(.45, 0, .2, 1) infinite; }
.rp-remote.is-on .rp-walk { animation: rp-walk 12s cubic-bezier(.4, 0, .5, 1) infinite; }
.rp-remote.is-on .rp-seated { animation: rp-in 12s ease infinite; }
.rp-remote.is-on .rp-cap    { animation: rp-in 12s ease .3s infinite both; }
.rp-remote.is-on .rp-link   { animation: rp-link 12s ease infinite, rp-march 1.3s linear infinite; }
.rp-remote.is-on .rp-pill   { animation: rp-pill 12s ease infinite; }
.rp-remote.is-on .rp-pill-cy { transform-box: fill-box; transform-origin: center; animation: rp-blink 12s ease-in-out infinite; }

@keyframes rp-pan {
  0%, 14%  { transform: translateX(0); }
  30%, 92% { transform: translateX(-166px); }
  100%     { transform: translateX(0); }
}
@keyframes rp-walk {
  0%   { opacity: 1; transform: translateX(0); }
  16%  { opacity: 1; transform: translateX(108px); }
  22%  { opacity: 0; transform: translateX(118px); }
  96%  { opacity: 0; transform: translateX(118px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes rp-in   { 0%, 26% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rp-link { 0%, 38% { opacity: 0; } 46%, 92% { opacity: .95; } 100% { opacity: 0; } }
@keyframes rp-march { to { stroke-dashoffset: -13; } }
@keyframes rp-pill {
  0%, 42%  { opacity: 0; transform: translateY(-10px) scale(.85); }
  50%      { opacity: 1; transform: translateY(0) scale(1.06); }
  54%, 92% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: none; }
}
/* the pill's cyan dot pulses while the two are connected */
@keyframes rp-blink {
  0%, 56%, 64%, 72%, 80%, 88%, 100% { transform: scale(1); }
  60%, 76% { transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .rp-remote.is-on [class*="rp-"] { animation: none !important; }
}


/* =====================================================================
   4. Home page: condition grid ("We're condition agnostic")
   Eight conditions around "Any condition". The tiles assemble as the
   visitor scrolls the grid into view (sfy-animations.js sets --t on each
   tile, 0 = scattered, 1 = in place). Hover, keyboard focus or a tap shows
   the condition; the middle tile switches to "Your condition(s)".
   Without JS, or with reduced motion, the grid simply sits in place.
   ===================================================================== */
.cg-grid {
  --cg-gap: clamp(8px, 2.2vw, 14px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cg-gap);
  width: 100%; max-width: 540px; margin: 8px auto 0;
}
.cg-tile {
  --t: 1;                          /* assembly progress, set by JS */
  --lift: 0px;
  position: relative; aspect-ratio: 1 / 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 18px; cursor: default;
  font: inherit; text-align: center; color: var(--pa-ink);
  background: var(--pa-bg); border: 1px solid var(--cg-line);
  opacity: calc(.1 + .9 * var(--t));
  transform:
    translate(calc(var(--dx) * (1 - var(--t)) * 70px), calc(var(--dy) * (1 - var(--t)) * 70px + var(--lift)))
    rotate(calc((var(--dx) - var(--dy)) * (1 - var(--t)) * 9deg))
    scale(calc(.78 + .22 * var(--t)));
  transition: transform .25s ease-out, opacity .25s, border-color .25s, box-shadow .25s, background-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.cg-grid { --cg-line: rgba(10, 13, 18, .12); }
[data-theme="dark"] .cg-grid { --cg-line: rgba(238, 242, 247, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cg-grid { --cg-line: rgba(238, 242, 247, .14); } }

.cg-icon { display: block; width: 46%; max-width: 64px; color: var(--pa-ink); transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), color .25s; }
.cg-icon svg { display: block; width: 100%; height: auto; }

/* labels: hidden until hover / focus / tap; name and subtitle stack so they never collide */
.cg-text {
  position: absolute; left: 8px; right: 8px; bottom: 11%;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.cg-name, .cg-sub {
  display: block; max-width: 100%; line-height: 1.18;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s;
}
.cg-name { font-size: clamp(.74rem, 2.3vw, .95rem); font-weight: 700; letter-spacing: -.01em; }
.cg-sub  { font-size: clamp(.6rem, 1.8vw, .76rem); font-weight: 500; color: var(--pa-grey-text); }

.cg-tile:hover, .cg-tile:focus-visible, .cg-tile.is-open {
  border-color: var(--pa-cyan); --lift: -4px;
  box-shadow: 0 10px 28px -12px var(--pa-glow);
  outline: none;
}
.cg-tile:hover .cg-icon, .cg-tile:focus-visible .cg-icon, .cg-tile.is-open .cg-icon { color: var(--pa-cyan); transform: translateY(-40%) scale(.68); }
.cg-tile:hover .cg-name, .cg-tile:focus-visible .cg-name, .cg-tile.is-open .cg-name,
.cg-tile:hover .cg-sub,  .cg-tile:focus-visible .cg-sub,  .cg-tile.is-open .cg-sub { opacity: 1; transform: none; }
.cg-tile .cg-sub { transition-delay: 0s; }
.cg-tile:hover .cg-sub, .cg-tile:focus-visible .cg-sub, .cg-tile.is-open .cg-sub { transition-delay: .06s; }

/* the middle tile: always labelled, cyan */
.cg-center { border: 1.5px dashed var(--pa-cyan); background: var(--pa-cyan-fill); }
.cg-center .cg-icon { color: var(--pa-cyan); transform: translateY(-18%) scale(.86); }
.cg-center .cg-name { color: var(--pa-cyan-text); }
.cg-center .cg-rest { position: absolute; left: 8px; right: 8px; bottom: 20%; opacity: 1; transform: none; }
.cg-center:hover .cg-rest, .cg-center:focus-visible .cg-rest, .cg-center.is-open .cg-rest { opacity: 0; transform: translateY(-6px); }
.cg-center:hover, .cg-center:focus-visible, .cg-center.is-open { border-style: solid; }
/* hovering any other tile makes the middle answer to it */
.cg-grid:has(.cg-tile:not(.cg-center):hover) .cg-center { border-style: solid; box-shadow: 0 0 0 4px var(--pa-cyan-fill); }

/* phones: names only, and more room in the middle tile */
@media (max-width: 480px) {
  .cg-sub { display: none; }
  .cg-text { bottom: 10%; }
  .cg-name { font-size: .72rem; }
  .cg-tile:hover .cg-icon, .cg-tile:focus-visible .cg-icon, .cg-tile.is-open .cg-icon { transform: translateY(-30%) scale(.7); }
  .cg-center .cg-icon { transform: translateY(-30%) scale(.75); }
  .cg-center .cg-rest { bottom: 10%; font-size: .72rem; }
}

/* once assembled, the middle tile pulses once */
@keyframes cg-pulse { 0% { box-shadow: 0 0 0 0 var(--pa-glow); } 100% { box-shadow: 0 0 0 18px rgba(34, 184, 232, 0); } }
.cg-grid.is-set .cg-center { animation: cg-pulse .9s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .cg-tile { --t: 1 !important; transition: border-color .2s, background-color .2s; }
  .cg-grid.is-set .cg-center { animation: none; }
}