/* eMed logo — the EMEDICAL.HEALTH ring lockup (emed-logo.ejs, beside this file). One version everywhere.
   Sized in em of the logo's font-size (the wordmark scale): 10.033em × 2.569em.
   Motion:
     intro (login)    — starts empty; the ring draws while the name wipes in left to right, once.
     .emed-logo-busy  — on a parent (the topbar's brand link): the ring retracts to nothing and redraws, over and
                        over, while the shell is loading. emed-logo.js adds and removes the class, so a cycle
                        always finishes. */

.emed-logo { font-size: var(--emed-logo-size, 24px); display: inline-block; width: 10.033em; height: 2.569em; vertical-align: middle; overflow: visible; }
.emed-logo--light { --el-ink: var(--theme-ink); --el-accent: var(--theme-primary); --el-inner: var(--theme-ink); --el-inner-opacity: 0.2; }
.emed-logo--dark  { --el-ink: var(--theme-ink-on-dark); --el-accent: var(--theme-primary-on-dark); --el-inner: var(--theme-ink-on-dark); --el-inner-opacity: 0.22; }

.emed-logo .el-ink  { fill: var(--el-ink); }
.emed-logo .el-dot  { fill: var(--el-accent); }
.emed-logo .el-ring { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.emed-logo .el-ring-outer { stroke: var(--el-accent); stroke-width: 8.62; }
.emed-logo .el-ring-inner { stroke: var(--el-inner); stroke-opacity: var(--el-inner-opacity); stroke-width: 3.45; }

/* Intro: fill-mode both keeps everything empty until each part starts, then holds the end state. */
.emed-logo--intro .el-ring-outer { animation: emed-logo-draw 1.1s cubic-bezier(.65, 0, .35, 1) 0.15s both; }
.emed-logo--intro .el-ring-inner { animation: emed-logo-draw 1.1s cubic-bezier(.65, 0, .35, 1) 0.4s both; }
.emed-logo--intro .el-text       { animation: emed-logo-wipe 1.1s cubic-bezier(.65, 0, .35, 1) 0.2s both; }

/* Busy: the ring retracts to its start, then grows back out (0.54s each way), the inner ring 0.08s behind. That beat
   is inside the keyframes, not an animation-delay, so both rings are whole when a 1.28s cycle (TURN_MS in
   emed-logo.js) ends, which is where emed-logo.js lets it stop. */
.emed-logo-busy .emed-logo .el-ring-outer { animation: emed-logo-retract 1.28s cubic-bezier(.65, 0, .35, 1) infinite; }
.emed-logo-busy .emed-logo .el-ring-inner { animation: emed-logo-retract-inner 1.28s cubic-bezier(.65, 0, .35, 1) infinite; }

@keyframes emed-logo-draw    { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes emed-logo-wipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes emed-logo-retract       { 0% { stroke-dashoffset: 0; } 42%, 52% { stroke-dashoffset: 100; } 94%, 100% { stroke-dashoffset: 0; } }
@keyframes emed-logo-retract-inner { 0%, 6% { stroke-dashoffset: 0; } 48%, 58% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .emed-logo .el-ring, .emed-logo .el-text { animation: none !important; }
    .emed-logo-busy .emed-logo .el-ring-outer { animation: emed-logo-retract 3s linear infinite !important; }
    .emed-logo-busy .emed-logo .el-ring-inner { animation: emed-logo-retract-inner 3s linear infinite !important; }
}