/* ============================================================
   LRES-UK · One Team — Motion System
   Loaders (pure CSS). No framework, no JS required.
   ------------------------------------------------------------
   The mark is the brand droplet PNG used as a CSS mask, so the
   green is real CSS colour you can re-theme with the variables
   below — swap the variables, the artwork follows.

   Asset path: these rules reference  assets/droplet.png  relative
   to THIS css file. If you move the css, override --lres-mask.
   ============================================================ */

:root{
  --lres-green:    #00B050;   /* LRES primary  */
  --lres-green-lt: #3ee07f;   /* highlight     */
  --lres-anthracite:#1F2937;  /* dark text     */
  --lres-alert:    #C00000;   /* warnings      */
  --lres-mask: url("assets/droplet.png");
}

@keyframes lres-shimmer { 0%{ background-position-x:170%; } 100%{ background-position-x:-170%; } }
@keyframes lres-spin    { to{ transform:rotate(360deg); } }
@keyframes lres-fill    { 0%{ clip-path:inset(100% 0 0 0); } 58%{ clip-path:inset(0 0 0 0); } 80%{ clip-path:inset(0 0 0 0); opacity:1; } 100%{ clip-path:inset(0 0 0 0); opacity:0; } }

/* shared mask helper */
.lres-drop{
  -webkit-mask: var(--lres-mask) center / contain no-repeat;
          mask: var(--lres-mask) center / contain no-repeat;
}

/* ---- 1. SHIMMER — inline (buttons, content loads) -------------------- */
.lres-loader-shimmer{ position:relative; width:48px; height:62px; display:inline-block; }
.lres-loader-shimmer > *{ position:absolute; inset:0; }
.lres-loader-shimmer .base{ background:linear-gradient(180deg, var(--lres-green-lt), var(--lres-green)); }
.lres-loader-shimmer .sweep{
  background:linear-gradient(110deg, transparent 36%, rgba(255,255,255,.95) 50%, transparent 64%);
  background-size:250% 100%; mix-blend-mode:screen;
  animation:lres-shimmer 1.8s linear infinite;
}

/* ---- 2. ORBIT — full-screen (app & web launch) ---------------------- */
.lres-loader-orbit{ position:relative; width:96px; height:96px; display:inline-flex; align-items:center; justify-content:center; }
.lres-loader-orbit .ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 215deg, var(--lres-green) 348deg, transparent 360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 70%, #000 72%);
          mask:radial-gradient(closest-side, transparent 70%, #000 72%);
  animation:lres-spin 1.1s linear infinite;
}
.lres-loader-orbit .mark{ width:50px; height:64px; background:linear-gradient(180deg, var(--lres-green-lt), var(--lres-green)); }

/* ---- 3. FILL — the web PLATFORM loader (page & data loads) ---------- */
.lres-loader-fill{ position:relative; width:64px; height:83px; display:inline-block; }
.lres-loader-fill > *{ position:absolute; inset:0; }
.lres-loader-fill .track{ background:linear-gradient(180deg, var(--lres-green-lt), var(--lres-green)); opacity:.16; }
.lres-loader-fill .level{ background:linear-gradient(180deg, #5fe89a, var(--lres-green)); animation:lres-fill 1.9s cubic-bezier(.45,0,.2,1) infinite; }

/* DETERMINATE variant — drive real progress instead of the loop.
   Add class "is-determinate" and set --lres-progress: 0%..100% (e.g. from JS). */
.lres-loader-fill.is-determinate .level{
  animation:none;
  clip-path:inset(calc(100% - var(--lres-progress, 0%)) 0 0 0);
  opacity:1;
  transition:clip-path .3s ease;
}

@media (prefers-reduced-motion: reduce){
  .lres-loader-shimmer .sweep,
  .lres-loader-orbit .ring,
  .lres-loader-fill .level{ animation-duration:3.2s; }
}