/*
 * TMS loader overlay, v0.1. Pair with js/loader.js.
 *   .tms-loader--full   solid white, Medpark intro -> Digitalizing -> vehicle (app open, sign-in)
 *   .tms-loader--short  frosted see-through, Digitalizing + vehicle at once (workspace switch)
 *   .tms-loader--teal   deep-teal colour variant
 * Letter timing uses --i (set per letter by loader.js); no inline styles needed.
 */
.tms-loader {
  --ld-mp: #4D4D4F; --ld-dg: #0A6C77; --ld-dot: #EA703D; --ld-bar: #0E8C99;
  --ld-shine: rgba(255, 255, 255, 0.7); --ld-cap: #3A4449;
  --v-out: #4D4D4F; --v-fill: #FFFFFF; --v-acc: #0E8C99; --v-warm: #EA703D; --v-glass: #BFEFF2; --v-smoke: #C9D3D6;
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 40px 16px;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  transition: opacity 0.5s ease;
}
.tms-loader--full { background: #FFFFFF; --dg-start: 2.55s; --dots-delay: 3.35s; --lane-delay: 3.3s; --shine-delay: 3.25s; }
.tms-loader--short {
  background: rgba(245, 248, 249, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  --dg-start: 0.1s; --dots-delay: 0.6s; --lane-delay: 0.35s; --shine-delay: 0.3s;
}
.tms-loader--teal {
  --ld-mp: #FFFFFF; --ld-dg: #BFEFF2; --ld-dot: #F59E7A; --ld-bar: #5CCFD9;
  --ld-shine: rgba(255, 255, 255, 0.85); --ld-cap: #DCEDEF;
  --v-out: #FFFFFF; --v-fill: #12606A; --v-acc: #7FE0E8; --v-glass: #7FE0E8; --v-smoke: rgba(255, 255, 255, 0.75);
}
.tms-loader--full.tms-loader--teal { background: #0B4D55; }
.tms-loader--short.tms-loader--teal { background: rgba(11, 77, 85, 0.6); }
.tms-loader--out { opacity: 0; pointer-events: none; }

.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ld-status { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-stage { position: relative; width: 680px; height: 252px; flex: none; }
.ld-layer { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.ld-layer--mp { bottom: 16px; }
.ld-layer--dg { bottom: 12px; }
.tms-loader--short .ld-layer--mp { display: none; }

/* "Medpark": rises out of the bar, then sinks back into it */
.ld-word-mp {
  display: inline-flex; overflow: hidden; padding: 0 4px;
  font-size: 116px; line-height: 1.32; font-weight: 400; letter-spacing: -0.01em; color: var(--ld-mp);
}
.ld-mp {
  display: inline-block; transform: translateY(115%);
  animation: ldMp 3.2s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.05s);
}

/* "Digitalizing": 104 px extra-bold italic, slams up out of the bar */
.ld-word-dg {
  display: inline-flex; align-items: flex-start; height: 237px; overflow: hidden; padding: 0 16px;
  font-size: 104px; line-height: 1.32; font-weight: 800; font-style: italic; letter-spacing: -0.02em; color: var(--ld-dg);
}
.ld-dg {
  display: inline-block; transform: translateY(180%);
  animation: ldDg 0.75s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--dg-start) + var(--i, 0) * 0.04s);
}
.ld-dots { display: inline-flex; margin-left: 4px; color: var(--ld-dot); opacity: 0; animation: ldFade 0.4s ease-out both; animation-delay: var(--dots-delay); }
.ld-dot { display: inline-block; animation: ldDot 0.9s ease-in-out infinite both; }
.ld-dot:nth-child(2) { animation-delay: 0.15s; }
.ld-dot:nth-child(3) { animation-delay: 0.3s; }

/* Vehicle lane: one vehicle (random) loops along the bar */
.ld-lane { position: absolute; left: 0; right: 0; bottom: 12px; height: 100px; overflow: hidden; opacity: 0; animation: ldFade 0.4s ease-out both; animation-delay: var(--lane-delay); }
.ld-car { position: absolute; bottom: 0; left: -210px; animation: ldDrive 2.4s cubic-bezier(.45, 0, .85, .7) infinite both; animation-delay: var(--lane-delay); }
.ld-car--locomotive { animation-duration: 3s; animation-timing-function: linear; }
.ld-car--rocket { bottom: 10px; animation-duration: 1.7s; animation-timing-function: cubic-bezier(.65, 0, .95, .45); }
.ld-car svg { display: block; overflow: visible; }
.ld-rumble { display: block; animation: ldRumble 0.2s ease-in-out infinite alternate; }
.ld-bob { display: block; animation: ldBob 0.5s ease-in-out infinite alternate; }
.ld-shake { display: block; animation: ldShake 0.09s linear infinite; }

/* The teal bar from the logo */
.ld-track { position: absolute; bottom: 0; left: 0; width: 100%; height: 12px; overflow: hidden; background: var(--ld-bar); }
.tms-loader--full .ld-track { animation: ldBar 3.2s cubic-bezier(.65, 0, .35, 1) both; }
.ld-shine-wrap { position: absolute; inset: 0; opacity: 0; animation: ldFade 0.4s ease-out both; animation-delay: var(--shine-delay); }
.ld-shine {
  position: absolute; top: 0; bottom: 0; width: 32%; left: -32%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--ld-shine), rgba(255, 255, 255, 0));
  animation: ldShine 1.1s cubic-bezier(.45, 0, .55, 1) infinite;
}
.ld-caption { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0.01em; color: var(--ld-cap); opacity: 0; animation: ldFade 0.4s ease-out 0.2s both; }

/* SVG paint (colours follow the theme variables) */
.v-out { fill: var(--v-out); }   .v-fill { fill: var(--v-fill); } .v-acc { fill: var(--v-acc); }
.v-warm { fill: var(--v-warm); } .v-glass { fill: var(--v-glass); } .v-smoke { fill: var(--v-smoke); }
.vs-out { stroke: var(--v-out); } .vs-fill { stroke: var(--v-fill); } .vs-acc { stroke: var(--v-acc); } .vs-warm { stroke: var(--v-warm); }
.v-none { fill: none; }

/* Vehicle parts */
.ld-wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: ldSpin 0.25s linear infinite; }
.ld-flash-a { animation: ldFlash 0.4s steps(1) infinite; }
.ld-flash-b { animation: ldFlash 0.4s steps(1) 0.2s infinite; }
.ld-trail { transform-box: fill-box; transform-origin: 100% 50%; animation: ldTrail 0.16s ease-in-out infinite alternate; }
.ld-dust { transform-box: fill-box; transform-origin: 50% 50%; animation: ldDust 0.36s ease-out infinite; }
.ld-dust.d2 { animation-delay: 0.12s; } .ld-dust.d3 { animation-delay: 0.24s; }
.ld-puff { transform-box: fill-box; transform-origin: 50% 50%; animation: ldPuff 0.9s ease-out infinite; }
.ld-puff.d2 { animation-delay: 0.22s; } .ld-puff.d3 { animation-delay: 0.45s; } .ld-puff.d4 { animation-delay: 0.67s; }
.ld-spark { animation: ldSpark 0.18s steps(1) infinite; }
.ld-spark.d2 { animation-delay: 0.09s; } .ld-spark.d3 { animation-delay: 0.05s; }
.ld-rod { animation: ldRod 0.25s linear infinite; }
.ld-flame { transform-box: fill-box; transform-origin: 100% 50%; animation: ldFlame 0.08s ease-in-out infinite alternate; }
.ld-exhaust { transform-box: fill-box; transform-origin: 50% 50%; animation: ldExhaust 0.6s ease-out infinite; }
.ld-exhaust.d2 { animation-delay: 0.15s; } .ld-exhaust.d3 { animation-delay: 0.3s; } .ld-exhaust.d4 { animation-delay: 0.45s; }

@keyframes ldMp { 0% { transform: translateY(115%); } 18%, 62% { transform: translateY(0); } 80%, 100% { transform: translateY(115%); } }
@keyframes ldDg {
  0% { transform: translateY(180%) rotate(-14deg) scaleY(1.25); }
  55% { transform: translateY(-12%) rotate(4deg) scaleY(.92); }
  75% { transform: translateY(4%) rotate(-2deg) scaleY(1.03); }
  100% { transform: translateY(0) rotate(0) scaleY(1); }
}
@keyframes ldBar {
  0% { left: 50%; width: 0; transform: scaleY(1); }
  20%, 58% { left: 50%; width: 50%; transform: scaleY(1); }
  72% { left: 0; width: 100%; transform: scaleY(1); }
  84% { left: 0; width: 100%; transform: scaleY(1.8); }
  94%, 100% { left: 0; width: 100%; transform: scaleY(1); }
}
@keyframes ldFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ldDot { 0%, 70%, 100% { opacity: .3; transform: translateY(0) scale(1); } 35% { opacity: 1; transform: translateY(-.3em) scale(1.3); } }
@keyframes ldShine { from { left: -32%; } to { left: 100%; } }
@keyframes ldDrive { from { left: -210px; } to { left: 100%; } }
@keyframes ldRumble { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(-3px) rotate(.4deg); } }
@keyframes ldBob { from { transform: translateY(3px) rotate(-6deg); } to { transform: translateY(-5px) rotate(-11deg); } }
@keyframes ldShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldFlash { 0% { opacity: 1; } 50% { opacity: .1; } }
@keyframes ldTrail { from { transform: scaleX(.55); opacity: .55; } to { transform: scaleX(1.1); opacity: 1; } }
@keyframes ldDust { 0% { opacity: .8; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-16px, -6px) scale(1.8); } }
@keyframes ldPuff { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-26px, -16px) scale(1.8); } }
@keyframes ldSpark { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ldRod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ldFlame { from { transform: scaleX(.7) scaleY(.9); } to { transform: scaleX(1.2) scaleY(1.08); } }
@keyframes ldExhaust { 0% { opacity: .8; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-34px, 0) scale(2.2); } }

@media (max-width: 740px) { .ld-stage { transform: scale(.55); } }

@media (prefers-reduced-motion: reduce) {
  :root:not(.tms-motion-always) .ld-mp { animation: none !important; transform: translateY(115%); }
  :root:not(.tms-motion-always) .ld-dg { animation: none !important; transform: none; }
  :root:not(.tms-motion-always) .tms-loader--full .ld-track { animation: none !important; }
  :root:not(.tms-motion-always) .ld-dots, :root:not(.tms-motion-always) .ld-lane, :root:not(.tms-motion-always) .ld-shine-wrap, :root:not(.tms-motion-always) .ld-caption { animation: none !important; opacity: 1; }
  :root:not(.tms-motion-always) .ld-shine { display: none; }
  :root:not(.tms-motion-always) .ld-car { animation: none !important; left: 50%; transform: translateX(-50%); }
  :root:not(.tms-motion-always) .ld-dot, :root:not(.tms-motion-always) .ld-rumble, :root:not(.tms-motion-always) .ld-bob, :root:not(.tms-motion-always) .ld-shake, :root:not(.tms-motion-always) .ld-wheel, :root:not(.tms-motion-always) .ld-flash-a, :root:not(.tms-motion-always) .ld-flash-b, :root:not(.tms-motion-always) .ld-trail, :root:not(.tms-motion-always) .ld-dust, :root:not(.tms-motion-always) .ld-puff, :root:not(.tms-motion-always) .ld-spark, :root:not(.tms-motion-always) .ld-rod, :root:not(.tms-motion-always) .ld-flame, :root:not(.tms-motion-always) .ld-exhaust { animation: none !important; }
}