/* ============================================================
   ROWDY DESIGNS — Site-wide loading feedback system
   Hand-written (NOT Tailwind) so it is never purged and never
   hits the Jinja hash-brace trap. Loaded in all three base
   templates (website / portal / dashboard).

   EVERYTHING here is namespaced under `.rdld-*` and every
   @keyframes is prefixed per-loader (`rdld-bar-*`, `rdld-br-*`,
   `rdld-tl-*`, `rdld-up-*`, `rdld-term-*`) so nothing collides
   with the existing site CSS (there is already a `.loader`
   spinner + Tailwind) or between the five loaders themselves.

   Source: 5 Uiverse.io loaders, retinted from #00ccff /
   rgba(110,231,255) / rgba(176,140,255) toward brand cyan
   #06b6d4 (+ bright #22d3ee / #67e8f9 highlights).
   ============================================================ */

/* ─── shared brand tokens ─────────────────────────────────── */
:root{
  --rdld-cyan:#06b6d4;
  --rdld-cyan-bright:#22d3ee;
  --rdld-cyan-light:#67e8f9;
}

/* ============================================================
   LOADER 1 — thin cyan light-sweep bar (top of viewport)
   Used for EVERY page-to-page navigation in all three areas.
   Page stays visible underneath; this is NOT an overlay.
   ============================================================ */
.rdld-topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  z-index:99991;              /* above nav (z-50) + overlays, below toasts (99999) */
  background:rgba(44,44,44,.55);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  pointer-events:none;
}
.rdld-topbar.rdld-on{ opacity:1; visibility:visible; }
.rdld-topbar__light{
  position:absolute;
  top:0; left:-20%;
  width:70px; height:100%;
  background:linear-gradient(87deg,
    rgba(0,0,0,0) 0%,
    var(--rdld-cyan) 35%,
    var(--rdld-cyan-bright) 50%,
    var(--rdld-cyan) 65%,
    rgba(0,0,0,0) 100%);
  box-shadow:0 0 10px rgba(6,182,212,.65);
  animation:rdld-bar-sweep 1.4s infinite ease-in-out;
}
@keyframes rdld-bar-sweep{ from{ left:-30%; } to{ left:100%; } }

/* ============================================================
   OVERLAY — dimmed backdrop that centers a chosen loader card.
   Used for form submits / uploads / data loads. Dismiss-proof
   (no user-close); hidden only when code calls rdLoader.hide().
   ============================================================ */
.rdld-overlay{
  position:fixed;
  inset:0;
  z-index:99990;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.rdld-overlay.rdld-on{ display:flex; }
/* only the active card inside the overlay is shown.
   Key off the [data-rdld-card] ATTRIBUTE (the markup in _loaders.html
   uses data-rdld-card="…", NOT a .rdld-card class) so hide/show actually
   matches. max-width:100% clamps any card to the viewport on 320px. */
[data-rdld-card]{ display:none; max-width:100%; }
[data-rdld-card].rdld-on{ display:block; }

/* ============================================================
   LOADER 2 — browser skeleton + circuit traces (rdld-browser)
   Overlay type 'browser' — heavy form submits / checkout / auth.
   ============================================================ */
.rdld-browser{
  width:min(340px,88vw);
  aspect-ratio:1;
  border-radius:18px;
  overflow:hidden;
  filter:drop-shadow(0 28px 80px rgba(0,0,0,.55));
}
.rdld-browser svg{ width:100%; height:100%; display:block; }
.rdld-br-grid-line{ stroke:#222; stroke-width:.5; }
.rdld-br-frame{ fill:#111; stroke:#666; stroke-width:1; filter:drop-shadow(0 0 10px rgba(0,0,0,.9)); }
.rdld-br-top{ fill:#1a1a1a; }
.rdld-br-text{ font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif; font-size:14px; fill:#e4e4e4; }
.rdld-br-skeleton{
  fill:#2d2d2d; rx:4; ry:4;
  animation:rdld-br-pulse 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.02));
}
@keyframes rdld-br-pulse{ 0%{ fill:#2d2d2d; } 50%{ fill:#505050; } 100%{ fill:#2d2d2d; } }
.rdld-br-trace{
  stroke-width:1; fill:none;
  stroke-dasharray:120 600; stroke-dashoffset:720;
  animation:rdld-br-flow 5s linear infinite;
  opacity:.95; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px currentColor) blur(.5px);
  color:var(--rdld-cyan);
}
.rdld-br-trace:nth-child(1){ stroke:url(#rdld-br-grad1); }
.rdld-br-trace:nth-child(2){ stroke:url(#rdld-br-grad2); }
.rdld-br-trace:nth-child(3){ stroke:url(#rdld-br-grad3); }
.rdld-br-trace:nth-child(4){ stroke:url(#rdld-br-grad4); }
@keyframes rdld-br-flow{ from{ stroke-dashoffset:720; } to{ stroke-dashoffset:0; } }
/* status caption under the browser card */
.rdld-br-caption{
  margin-top:14px; text-align:center;
  font:600 12px/1 'DM Sans',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.2px; color:rgba(255,255,255,.72);
}

/* ============================================================
   LOADER 3 — timeline "Rendering" skeleton card (rdld-timeline)
   Overlay type 'timeline' — portal/dashboard client-side data loads.
   ============================================================ */
.rdld-timeline{
  width:min(380px,88vw);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
}
.rdld-tl-head{
  display:flex; align-items:center; gap:12px; padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.rdld-tl-sk{
  height:12px; width:46%; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
}
.rdld-tl-sk::before{
  content:""; position:absolute; inset:-40% -60%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,.2) 30%,transparent 44%);
  transform:translateX(-60%);
  animation:rdld-tl-shimmer 1.15s cubic-bezier(.2,.8,.2,1) infinite;
  mix-blend-mode:screen;
}
.rdld-tl-chip{
  margin-left:auto; font-size:12px; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(6,182,212,.28); background:rgba(6,182,212,.08);
  color:var(--rdld-cyan-light);
}
.rdld-tl-tracks{ padding:14px; display:grid; gap:10px; }
.rdld-tl-track{
  height:20px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
  position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; padding:0 10px;
}
.rdld-tl-track.rdld-tl-dim{ opacity:.75; }
.rdld-tl-clip{ height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); }
.rdld-tl-c1{ width:70px; } .rdld-tl-c2{ width:44px; } .rdld-tl-c3{ width:92px; }
.rdld-tl-playhead{
  position:absolute; top:-10px; bottom:-10px; width:2px; left:-10%;
  background:linear-gradient(180deg,rgba(6,182,212,0),rgba(34,211,238,.9),rgba(103,232,249,.8),rgba(6,182,212,0));
  box-shadow:0 0 18px rgba(6,182,212,.32);
  animation:rdld-tl-playhead 1.25s cubic-bezier(.2,.8,.2,1) infinite;
}
.rdld-tl-meter{
  height:10px; margin:0 14px 14px; border-radius:999px;
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
}
.rdld-tl-fill{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(6,182,212,0),rgba(6,182,212,.6),rgba(103,232,249,.6),rgba(6,182,212,0));
  transform:translateX(-70%);
  animation:rdld-tl-flow 1.05s cubic-bezier(.2,.8,.2,1) infinite;
}
.rdld-tl-glint{
  position:absolute; inset:-30% -40%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.12) 22%,rgba(255,255,255,.28) 28%,transparent 40%);
  transform:translateX(-55%);
  animation:rdld-tl-glint 1.05s cubic-bezier(.2,.8,.2,1) infinite;
  mix-blend-mode:screen;
}
@keyframes rdld-tl-playhead{ 0%{ left:-10%; opacity:0; } 15%{ opacity:1; } 100%{ left:110%; opacity:0; } }
@keyframes rdld-tl-shimmer{ to{ transform:translateX(60%); } }
@keyframes rdld-tl-flow{ 0%{ transform:translateX(-75%); opacity:.55; } 50%{ opacity:1; } 100%{ transform:translateX(75%); opacity:.55; } }
@keyframes rdld-tl-glint{ 0%{ transform:translateX(-60%); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(60%); opacity:0; } }

/* ============================================================
   LOADER 4 — upload "Uploading" skeleton card (rdld-upload)
   Overlay type 'upload' — file uploads (intake, logo/photo).
   ============================================================ */
.rdld-upload{
  width:min(360px,88vw);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
}
.rdld-up-head{
  display:grid; grid-template-columns:42px 1fr auto; gap:12px; padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  align-items:center;
}
.rdld-up-icon{
  width:42px; height:42px; border-radius:14px;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),rgba(255,255,255,.05) 45%,rgba(0,0,0,.22) 100%),
             linear-gradient(135deg,rgba(6,182,212,.4),rgba(103,232,249,.28));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.rdld-up-pill{
  font-size:12px; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(6,182,212,.28); background:rgba(6,182,212,.08);
  color:var(--rdld-cyan-light); white-space:nowrap;
}
.rdld-up-mid{ padding:14px; }
.rdld-up-sk{
  height:12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07);
  margin:10px 0; overflow:hidden; position:relative;
}
.rdld-up-sk-title{ width:62%; height:13px; margin:2px 0 8px; }
.rdld-up-sk-sub{ width:44%; height:11px; margin:0; opacity:.9; }
.rdld-up-sk-wide{ width:100%; }
.rdld-up-sk-short{ width:62%; }
.rdld-up-sk::before{
  content:""; position:absolute; inset:-40% -60%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,.2) 30%,transparent 44%);
  transform:translateX(-60%);
  animation:rdld-up-shimmer 1.15s cubic-bezier(.2,.8,.2,1) infinite;
  mix-blend-mode:screen;
}
.rdld-up-bar{
  height:10px; margin:2px 14px 14px; border-radius:999px;
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
}
.rdld-up-fill{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(6,182,212,0),rgba(6,182,212,.6),rgba(103,232,249,.6),rgba(6,182,212,0));
  transform:translateX(-70%);
  animation:rdld-up-flow 1.05s cubic-bezier(.2,.8,.2,1) infinite;
}
.rdld-up-shine{
  position:absolute; inset:-30% -40%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.12) 22%,rgba(255,255,255,.28) 28%,transparent 40%);
  transform:translateX(-55%);
  animation:rdld-up-glint 1.05s cubic-bezier(.2,.8,.2,1) infinite;
  mix-blend-mode:screen;
}
@keyframes rdld-up-shimmer{ to{ transform:translateX(60%); } }
@keyframes rdld-up-flow{ 0%{ transform:translateX(-75%); opacity:.55; } 50%{ opacity:1; } 100%{ transform:translateX(75%); opacity:.55; } }
@keyframes rdld-up-glint{ 0%{ transform:translateX(-60%); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(60%); opacity:0; } }

/* ============================================================
   LOADER 5 — terminal "build" card (rdld-term)
   Overlay type 'term' — AI estimate / "generating" waits.
   ============================================================ */
.rdld-term{
  width:min(340px,88vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:relative;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.rdld-term-bar{
  display:flex; align-items:center; gap:10px; padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.rdld-term-dot{ width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.rdld-term-title{ margin-left:auto; font:700 12px/1 'DM Sans',ui-sans-serif,system-ui,sans-serif; color:rgba(255,255,255,.7); letter-spacing:.2px; }
.rdld-term-body{ padding:14px 14px 16px; color:rgba(255,255,255,.8); font-size:12px; line-height:1.55; }
.rdld-term-line{ margin:6px 0; }
.rdld-term-line b{ color:rgba(255,255,255,.92); }
.rdld-term-muted{ color:rgba(255,255,255,.6); }
.rdld-term-tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:6px; margin-right:8px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  font-weight:800; font-size:11px;
}
.rdld-term-tag.rdld-term-ok{ box-shadow:0 0 22px rgba(6,182,212,.18); color:var(--rdld-cyan-light); }
.rdld-term-tag.rdld-term-run{ box-shadow:0 0 22px rgba(103,232,249,.16); color:var(--rdld-cyan-bright); }
.rdld-term-cursor{
  display:inline-block; width:10px; height:14px; margin-left:8px; border-radius:3px;
  background:linear-gradient(135deg,rgba(34,211,238,.95),rgba(103,232,249,.85));
  opacity:.65; animation:rdld-term-blink 1s steps(2,end) infinite;
}
.rdld-term-progress{
  margin-top:12px; height:8px; border-radius:999px;
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
}
.rdld-term-fill{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(6,182,212,0),rgba(6,182,212,.6),rgba(103,232,249,.6),rgba(6,182,212,0));
  transform:translateX(-70%);
  animation:rdld-term-flow 1.05s cubic-bezier(.2,.8,.2,1) infinite;
}
.rdld-term-glint{
  position:absolute; inset:-30% -40%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.12) 22%,rgba(255,255,255,.28) 28%,transparent 40%);
  transform:translateX(-55%);
  animation:rdld-term-glint 1.05s cubic-bezier(.2,.8,.2,1) infinite;
  mix-blend-mode:screen;
}
@keyframes rdld-term-flow{ 0%{ transform:translateX(-75%); opacity:.55; } 50%{ opacity:1; } 100%{ transform:translateX(75%); opacity:.55; } }
@keyframes rdld-term-glint{ 0%{ transform:translateX(-60%); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(60%); opacity:0; } }
@keyframes rdld-term-blink{ 0%{ opacity:.2; } 50%{ opacity:.85; } 100%{ opacity:.2; } }

/* ============================================================
   Reduced motion — freeze every loader animation so the cards
   render as static skeletons (still communicate "loading").
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .rdld-topbar__light,
  .rdld-br-skeleton, .rdld-br-trace,
  .rdld-tl-sk::before, .rdld-tl-playhead, .rdld-tl-fill, .rdld-tl-glint,
  .rdld-up-sk::before, .rdld-up-fill, .rdld-up-shine,
  .rdld-term-cursor, .rdld-term-fill, .rdld-term-glint{
    animation:none !important;
  }
  /* keep the sweep bar faintly visible (centered) rather than off-screen */
  .rdld-topbar__light{ left:40%; }
}