/* TrustyDr Connected Care: shared splash visual system.
   Production copy of docs/design/connected-care-splash/connected-care.css. Keep in sync.
   Plain CSS + SVG: it runs before Flutter has loaded, so the first frame a
   user sees is already the real animation. Brand tokens mirror
   lib/core/theme/app_colors.dart. */
:root {
  --cc-navy: #0C4A6E;
  --cc-teal: #0E7490;
  --cc-light: #67E8F9;
  --cc-accent: #2DD4BF;
  --cc-line: rgba(255, 255, 255, 0.28);
  --cc-line-strong: rgba(255, 255, 255, 0.85);
  --cc-node-fill: rgba(255, 255, 255, 0.10);
  --cc-node-stroke: rgba(255, 255, 255, 0.45);
  --cc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Per-app themes: each app's EXISTING loader gradient (web/index.html) and
   colour tokens. Doctor Portal, Commerce, Pharmacy and Laboratory portals
   share the navy-teal identity (AppColors / CommerceColors); the Patient App
   keeps its own teal-to-blue identity (PatientAppColors.brandGradient). */
.cc-theme-portal {
  --cc-bg1: #0C4A6E; --cc-bg2: #0E7490;
  --cc-focus: #67E8F9;
  --cc-focus-fill: rgba(103, 232, 249, 0.16);
  --cc-label: rgba(255, 255, 255, 0.72);
  --cc-text-shadow: none;
}
.cc-theme-patient {
  --cc-bg1: #5CC6BA; --cc-bg2: #4A90E2;
  /* The portal's light cyan disappears on this lighter background: the focus
     is white, and lines/labels are stronger with a soft shadow for contrast. */
  --cc-focus: #FFFFFF;
  --cc-focus-fill: rgba(255, 255, 255, 0.24);
  --cc-line: rgba(255, 255, 255, 0.42);
  --cc-line-strong: #FFFFFF;
  --cc-node-fill: rgba(255, 255, 255, 0.14);
  --cc-node-stroke: rgba(255, 255, 255, 0.62);
  --cc-label: rgba(255, 255, 255, 0.94);
  --cc-text-shadow: 0 1px 2px rgba(21, 28, 72, 0.28);
}

.cc-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cc-bg1), var(--cc-bg2));
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", Tahoma, sans-serif;
  overflow: hidden;
  transition: opacity 320ms var(--cc-ease);
}
.cc-stage.cc-exit { opacity: 0; pointer-events: none; }

.cc-stage { container-type: size; }
/* Sized from its own container (the whole viewport in the app), so it fits a
   phone as well as a desktop without clipping. */
.cc-svg {
  width: min(100cqw, 72cqh, 460px);
  height: auto;
  overflow: visible;
  transition: transform 420ms var(--cc-ease);
}

/* Lines: drawn with stroke-dashoffset (pathLength="1"). */
.cc-edge {
  fill: none;
  stroke: var(--cc-line);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms var(--cc-ease), stroke 500ms ease, opacity 500ms ease;
}
.cc-on .cc-edge.cc-drawn { stroke-dashoffset: 0; }
.cc-edge.cc-focus-edge.cc-lit { stroke: var(--cc-line-strong); }
.cc-dim .cc-edge:not(.cc-focus-edge) { opacity: 0.35; }

/* Nodes */
/* Opacity on the positioned group; scale on its inner group (a CSS transform
   on the outer group would replace its SVG translate). */
.cc-node { opacity: 0; transition: opacity 420ms var(--cc-ease); }
.cc-node.cc-shown { opacity: 1; }
.cc-node-inner { transform: scale(0.82); transition: transform 520ms var(--cc-ease); }
.cc-node.cc-shown .cc-node-inner { transform: scale(1); }
.cc-node circle.cc-disc { fill: var(--cc-node-fill); stroke: var(--cc-node-stroke); stroke-width: 1.2; transition: fill 500ms ease, stroke 500ms ease; }
.cc-node .cc-glyph { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cc-node.cc-focus.cc-lit circle.cc-disc { fill: var(--cc-focus-fill); stroke: var(--cc-focus); stroke-width: 1.6; }
.cc-node.cc-focus.cc-lit .cc-node-inner { transform: scale(1.12); }
.cc-dim .cc-node:not(.cc-focus) { opacity: 0.55; }
/* Lighter Patient background: dim less, so labels stay readable. */
.cc-theme-patient.cc-dim .cc-node:not(.cc-focus) { opacity: 0.82; }
.cc-theme-patient.cc-dim .cc-edge:not(.cc-focus-edge) { opacity: 0.5; }

/* A single soft ring around the focus node: an expanding outline, not a glow. */
.cc-ring { fill: none; stroke: var(--cc-focus); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cc-idle .cc-ring { animation: cc-ring 3.2s var(--cc-ease) infinite; }
@keyframes cc-ring { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }

.cc-label { font-size: 12.5px; fill: var(--cc-label); text-shadow: var(--cc-text-shadow); opacity: 0; transition: opacity 500ms ease; }
.cc-labels .cc-label { opacity: 1; }
.cc-label.cc-focus-label { fill: #fff; font-weight: 600; }

.cc-logo { opacity: 1; }
.cc-dot { fill: #fff; }
.cc-dot.cc-focus-dot { fill: var(--cc-focus); }

.cc-status { margin-top: 14px; text-align: center; min-height: 4.6em; padding: 0 24px; text-shadow: var(--cc-text-shadow); }
.cc-status .cc-app { font-size: 15px; font-weight: 600; letter-spacing: 0.3px; opacity: 0; transition: opacity 400ms ease; }
[dir="rtl"] .cc-status .cc-app { letter-spacing: 0; }
.cc-on .cc-status .cc-app { opacity: 1; }
.cc-status .cc-msg { margin-top: 4px; }
.cc-status .cc-msg { font-size: 13.5px; font-weight: 500; opacity: 0; transition: opacity 400ms ease; }
.cc-on .cc-status .cc-msg, .cc-status.cc-on .cc-msg { opacity: 0.95; }
.cc-status .cc-wait { font-size: 12px; margin-top: 6px; opacity: 0; color: rgba(255,255,255,0.72); transition: opacity 500ms ease; }
.cc-status.cc-long .cc-wait { opacity: 1; }

/* Reduced motion: the complete composition, still. No loops, no travel. */
.cc-rm .cc-edge, .cc-rm .cc-node, .cc-rm .cc-node-inner, .cc-rm .cc-label, .cc-rm .cc-status .cc-msg, .cc-rm .cc-status .cc-app, .cc-rm .cc-svg, .cc-rm.cc-stage { transition: none !important; }
.cc-rm .cc-ring { animation: none !important; opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .cc-edge, .cc-node, .cc-node-inner, .cc-label, .cc-status .cc-msg, .cc-status .cc-app, .cc-svg, .cc-stage { transition: none !important; }
  .cc-ring { animation: none !important; opacity: 0 !important; }
}