/* ============================================================================
   DWGViewer demo splash screen.

   Markup/artwork/animation are a verbatim transplant of
   "E:\Color_System\versions\green\ECCO-Soft Splash -no JS-.html" (#eccoRoot
   renamed to #splash; the SVG artwork/text inside is otherwise untouched -
   user decision). This stylesheet is that source file's <style> block,
   adapted for the two-phase progress model instead of a single static
   --progress value:

     Phase 1 (Blazor boot)   - the base #splash rule below drives --progress
                                 from Blazor's own `--blazor-load-percentage`
                                 CSS variable (set on <html> during boot by
                                 the .NET WASM loader), capped at 70% so
                                 phase 2 never runs backwards.
     Phase 2 (engine load)   - js/splash.js adds .splash-engine on Home's
                                 first render (DrawingWeb is a ~6.2 MB
                                 brotli/19.7 MB raw WASM payload with no
                                 progress API - this is a slow, perceived-
                                 progress crawl from 70% to 92%, gears/dots
                                 keep animating throughout).
     Ready (OnReady)         - js/splash.js adds .splash-done: snap to 100%,
                                 then fade the whole splash out and hide it.
     Failed (OnError)        - js/splash.js adds .splash-failed and writes
                                 the error message into .ec-lt-msg: bar turns
                                 red, the animated dots are hidden.

   All motion besides the phase transitions is SVG SMIL animation, exactly as
   in the source file - there is no JS driving the glow/gears/dots.
   ============================================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#86B834}
#splash{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,6vmin,54px);background:radial-gradient(125% 95% at 50% 26%,#B4D580 0%,#8CBF3C 54%,#80B22C 100%);font-family:'Segoe UI',Tahoma,system-ui,sans-serif;--load-text:#ffffff;--bar-track:rgba(255,255,255,.32);--bar-fill:#ffffff;--progress:min(var(--blazor-load-percentage, 0%), 70%)}
.ec-glow{position:absolute;left:50%;top:43%;width:min(108vmin,780px);height:min(108vmin,780px);transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.ec-logo{position:relative;width:clamp(240px,58vmin,400px);aspect-ratio:1}
.ec-logo svg{width:100%;height:100%;display:block;overflow:visible}
.ec-loader{display:flex;flex-direction:column;align-items:center;gap:clamp(13px,2.6vmin,20px);width:clamp(240px,58vmin,400px)}
.ec-track{position:relative;width:100%;height:6px;border-radius:99px;background:var(--bar-track);overflow:hidden}
.ec-bar{position:absolute;top:0;left:0;height:100%;width:var(--progress,50%);border-radius:99px;background:var(--bar-fill);box-shadow:0 0 12px rgba(255,255,255,.5);transition:width .2s linear}
.ec-lt{display:flex;align-items:center;color:var(--load-text);font-size:clamp(11.5px,2.5vmin,15px);font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.96}
.ec-dots{margin-left:.45em}

/* ---- Phase 2: DrawingWeb engine loading (no progress API - perceived
   progress crawl 70% -> 92% over ~6s; gears/dots keep animating). ---- */
#splash.splash-engine{--progress:92%}
#splash.splash-engine .ec-bar{transition:width 6s ease-out}

/* ---- OnReady: snap to 100%, then fade the whole splash out. ---- */
#splash.splash-done{--progress:100%}
#splash.splash-done .ec-bar{transition:width .15s ease-out}
#splash.splash-done{opacity:0;visibility:hidden;transition:opacity .5s ease .1s,visibility 0s linear .6s}

/* ---- OnError(ModuleLoad): red bar, dots hidden, message shown. ---- */
#splash.splash-failed .ec-bar{background:#e5484d;box-shadow:none}
#splash.splash-failed .ec-dots{display:none}
