/* Medical clinic scene — 12s loop, all animations CSS-driven on SVG elements */
.medical-scene { background: radial-gradient(ellipse at 70% 30%, #f0fdfa 0%, #f8fafc 60%, #e2e8f0 100%); }

/* Subtle "camera sway" — gives the whole scene a sense of being alive
   (not strictly correct iso, but reads as filmic depth). */
.medical-scene .scene-sway {
  transform-box: view-box;
  transform-origin: 550px 290px;
  animation: med-sway 14s ease-in-out infinite;
}
@keyframes med-sway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-4px, -2px) rotate(0.25deg); }
}

/* Patient walks in from left, holds at counter, walks out */
.medical-scene .patient {
  animation: med-walk 12s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes med-walk {
  0%, 5%    { transform: translateX(-640px); }
  20%       { transform: translateX(0); }
  25%, 92%  { transform: translateX(0); }
  98%, 100% { transform: translateX(-640px); }
}

/* NFC pulse rings around the station */
.medical-scene .nfc-ring {
  transform-origin: 615px 350px;
  transform-box: view-box;
  opacity: 0;
  animation: med-nfc 12s ease-out infinite;
}
.medical-scene .nfc-ring-2 { animation-delay: -11.4s; }
.medical-scene .nfc-ring-3 { animation-delay: -10.8s; }
@keyframes med-nfc {
  0%, 28%   { opacity: 0; transform: scale(0.3); }
  30%       { opacity: 0.85; transform: scale(0.3); }
  52%       { opacity: 0; transform: scale(2.4); }
  100%      { opacity: 0; transform: scale(2.4); }
}

/* 3 documents fly from the kiosk tablet (615,300) to the monitor screen (770,220)
   in staggered arcs. They emerge AT the kiosk — never from empty space. */
/* transform-origin: 0 0 so scale pivots at the doc's own origin (not viewBox center) —
   otherwise translate() and scale() compose into wildly wrong positions. */
.medical-scene .doc { opacity: 0; transform-origin: 0 0; }
.medical-scene .doc-1 { animation: med-doc-1 12s cubic-bezier(.55,.08,.45,1) infinite; }
.medical-scene .doc-2 { animation: med-doc-2 12s cubic-bezier(.55,.08,.45,1) infinite; }
.medical-scene .doc-3 { animation: med-doc-3 12s cubic-bezier(.55,.08,.45,1) infinite; }
@keyframes med-doc-1 {
  0%, 50% { transform: translate(615px, 300px) scale(0.25); opacity: 0; }
  54%     { transform: translate(615px, 300px) scale(0.7); opacity: 1; }
  64%     { transform: translate(692px, 238px) scale(0.85); opacity: 1; }
  72%     { transform: translate(770px, 220px) scale(0.45); opacity: 0; }
  100%    { transform: translate(615px, 300px) scale(0.25); opacity: 0; }
}
@keyframes med-doc-2 {
  0%, 55% { transform: translate(615px, 300px) scale(0.25); opacity: 0; }
  59%     { transform: translate(615px, 300px) scale(0.7); opacity: 1; }
  69%     { transform: translate(692px, 215px) scale(0.85); opacity: 1; }
  77%     { transform: translate(770px, 220px) scale(0.45); opacity: 0; }
  100%    { transform: translate(615px, 300px) scale(0.25); opacity: 0; }
}
@keyframes med-doc-3 {
  0%, 60% { transform: translate(615px, 300px) scale(0.25); opacity: 0; }
  64%     { transform: translate(615px, 300px) scale(0.7); opacity: 1; }
  74%     { transform: translate(692px, 250px) scale(0.85); opacity: 1; }
  82%     { transform: translate(770px, 220px) scale(0.45); opacity: 0; }
  100%    { transform: translate(615px, 300px) scale(0.25); opacity: 0; }
}

/* Monitor screen brightens when docs arrive */
.medical-scene .monitor-screen {
  fill: #14b8a6;
  fill-opacity: 0.18;
  animation: med-monitor 12s ease-in-out infinite;
}
@keyframes med-monitor {
  0%, 65%  { fill-opacity: 0.18; }
  72%, 95% { fill-opacity: 0.55; }
  100%     { fill-opacity: 0.18; }
}

.medical-scene .monitor-check {
  opacity: 0;
  animation: med-check 12s ease-out infinite;
  transform-origin: 765px 220px;
  transform-box: view-box;
}
@keyframes med-check {
  0%, 68%  { opacity: 0; transform: scale(0.3); }
  74%      { opacity: 1; transform: scale(1.1); }
  78%, 95% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(0.3); }
}

/* Step indicators (4 stages, fill in sync with the scene) */
.med-step .step-dot { background: #cbd5e1; transition: background .3s ease; }
.med-step .step-bar { background: #e2e8f0; height: 2px; }
.med-step .step-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, #14b8a6, #5eead4);
  animation: med-step-fill 12s linear infinite;
}
.med-step-1 .step-fill { animation-name: med-fill-1; }
.med-step-2 .step-fill { animation-name: med-fill-2; }
.med-step-3 .step-fill { animation-name: med-fill-3; }
.med-step-4 .step-fill { animation-name: med-fill-4; }
@keyframes med-fill-1 { 0% { width: 0; } 25% { width: 100%; } 100% { width: 100%; } }
@keyframes med-fill-2 { 0%, 25% { width: 0; } 50% { width: 100%; } 100% { width: 100%; } }
@keyframes med-fill-3 { 0%, 50% { width: 0; } 75% { width: 100%; } 100% { width: 100%; } }
@keyframes med-fill-4 { 0%, 75% { width: 0; } 100% { width: 100%; } }