/* Dynamic LabSystems: branded loading screen + page-change progress bar.
   Shown once per browser session (first open / after sign-in); later page
   changes show only the thin red bar so lab work isn't slowed down. */

.dl-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f4f5f8 70%);
  /* Fail-safe: if JavaScript never runs, the splash still leaves on its own. */
  animation: dl-splash-failsafe 0.5s ease 3.8s forwards;
}
html.dl-splash-seen .dl-splash { display: none; }
.dl-splash.is-leaving { animation: dl-splash-out 0.55s cubic-bezier(.4,0,.2,1) forwards; }

.dl-splash-inner { display: flex; flex-direction: column; align-items: center; }

.dl-mark { position: relative; width: 112px; height: 105px; }
.dl-mark svg, .dl-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dl-mark .dl-stroke {
  fill: none; stroke: var(--navy, #333750); stroke-width: 32;
  stroke-linecap: butt; stroke-linejoin: miter;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
}
.dl-mark .dl-stroke-outer { animation: dl-draw 0.95s cubic-bezier(.65,0,.35,1) 0.1s forwards; }
.dl-mark .dl-stroke-inner { animation: dl-draw 0.85s cubic-bezier(.65,0,.35,1) 0.3s forwards; }
.dl-mark .dl-square {
  fill: var(--red, #e8352b); transform-origin: 28px 296px; transform: scale(0);
  animation: dl-pop 0.4s cubic-bezier(.34,1.56,.64,1) 0.95s forwards;
}
.dl-mark svg { animation: dl-fade-out 0.3s ease 1.25s forwards; }
.dl-mark img { opacity: 0; animation: dl-fade-in 0.3s ease 1.15s forwards; }

.dl-word {
  margin-top: 22px; font-size: 22px; font-weight: 600; letter-spacing: 0.32em;
  color: var(--navy, #333750); opacity: 0; transform: translateY(8px);
  animation: dl-word-in 0.6s cubic-bezier(.2,.8,.2,1) 1.05s forwards;
}
.dl-word span { color: var(--red, #e8352b); }
.dl-tag {
  margin-top: 6px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted, #6b6f80); opacity: 0;
  animation: dl-fade-in 0.5s ease 1.3s forwards;
}
.dl-bar {
  margin-top: 26px; width: 160px; height: 2px; border-radius: 2px;
  background: var(--border, #e2e3ea); overflow: hidden; opacity: 0;
  animation: dl-fade-in 0.3s ease 0.4s forwards;
}
.dl-bar i {
  display: block; height: 100%; width: 40%; background: var(--red, #e8352b);
  animation: dl-sweep 1.1s cubic-bezier(.65,0,.35,1) infinite;
}

/* Thin progress bar for page changes after the first visit. */
.dl-topbar {
  position: fixed; top: 0; left: 0; z-index: 9998; height: 3px; width: 0;
  background: var(--red, #e8352b); box-shadow: 0 0 8px rgba(232,53,43,.45);
  opacity: 0; transition: width 2.5s cubic-bezier(.1,.7,.2,1), opacity .2s;
}
.dl-topbar.is-active { width: 85%; opacity: 1; }

@keyframes dl-draw { to { stroke-dashoffset: 0; } }
@keyframes dl-pop { to { transform: scale(1); } }
@keyframes dl-fade-in { to { opacity: 1; } }
@keyframes dl-fade-out { to { opacity: 0; } }
@keyframes dl-word-in { to { opacity: 1; transform: none; letter-spacing: 0.18em; } }
@keyframes dl-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes dl-splash-out { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
@keyframes dl-splash-failsafe { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .dl-mark svg { display: none; }
  .dl-mark img, .dl-word, .dl-tag, .dl-bar { animation: dl-fade-in 0.3s ease forwards; transform: none; }
  .dl-bar i { animation: none; width: 100%; }
}