/* Printing-themed loading states.
   Built on CMYK — the four process inks a real press lays down — so the
   waiting moment says "printing" rather than "generic spinner".

   Three sizes of wait, three treatments:
     .ucl-press      full-page / section wait (a sheet running through a press)
     .ucl-cmyk       inline wait (four ink dots registering)
     .ucl-btn-load   inside a button while a form submits

   All of it stops under prefers-reduced-motion — the states stay legible,
   they just hold still. */

:root {
  --ink-c: #0ca9c7;   /* cyan    — brand */
  --ink-m: #e05a87;   /* magenta — brand */
  --ink-y: #f4c95d;   /* yellow  — brand */
  --ink-k: #182b49;   /* key     — brand navy */
}
[data-theme="dark"] {
  --ink-k: #8fb4e3;
}

/* ---------- The press: a sheet feeding through, print head sweeping ---------- */
.ucl-press {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 20px; text-align: center;
}
.ucl-press-machine {
  position: relative;
  width: 132px; height: 92px;
}
/* the press body */
.ucl-press-body {
  position: absolute; left: 0; bottom: 0;
  width: 132px; height: 46px;
  background: var(--ink-k);
  border-radius: 10px 10px 8px 8px;
}
/* the feed slot */
.ucl-press-body::before {
  content: ""; position: absolute; top: 9px; left: 16px; right: 16px; height: 4px;
  background: rgba(255,255,255,0.25); border-radius: 2px;
}
/* the print head, sweeping left-right across the slot */
.ucl-press-head {
  position: absolute; top: 6px; left: 14px;
  width: 22px; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ink-c), var(--ink-m), var(--ink-y));
  animation: ucl-sweep 1.15s ease-in-out infinite;
}
/* the sheet, rising out of the press with printed bands appearing on it */
.ucl-press-sheet {
  position: absolute; left: 50%; bottom: 38px;
  width: 66px; height: 54px; margin-left: -33px;
  background: #fff;
  border: 1px solid var(--border, #dce3ea);
  border-radius: 3px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  overflow: hidden;
  transform-origin: bottom center;
  animation: ucl-feed 2.3s cubic-bezier(.4,.1,.2,1) infinite;
}
[data-theme="dark"] .ucl-press-sheet { background: #e8edf6; }
/* the ink laid down on the sheet, one band per pass */
.ucl-press-sheet i {
  position: absolute; left: 9px; height: 4px; border-radius: 2px;
  animation: ucl-print 2.3s cubic-bezier(.4,.1,.2,1) infinite;
}
.ucl-press-sheet i:nth-child(1) { top: 10px; width: 46px; background: var(--ink-c); animation-delay: .10s; }
.ucl-press-sheet i:nth-child(2) { top: 20px; width: 34px; background: var(--ink-m); animation-delay: .28s; }
.ucl-press-sheet i:nth-child(3) { top: 30px; width: 42px; background: var(--ink-y); animation-delay: .46s; }
.ucl-press-sheet i:nth-child(4) { top: 40px; width: 26px; background: var(--ink-k); animation-delay: .64s; }

.ucl-press-label {
  font-size: 14px; font-weight: 700; color: var(--text-dark, #172033);
}
.ucl-press-sub {
  font-size: 12.5px; color: var(--text-muted, #687587); max-width: 280px; line-height: 1.5;
}

@keyframes ucl-sweep {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(74px); }
}
@keyframes ucl-feed {
  0%       { transform: translateY(26px) scaleY(.25); opacity: 0; }
  18%      { opacity: 1; }
  55%, 78% { transform: translateY(0) scaleY(1); opacity: 1; }
  100%     { transform: translateY(-16px) scaleY(1); opacity: 0; }
}
@keyframes ucl-print {
  0%, 12%  { transform: scaleX(0); opacity: 0; }
  30%      { opacity: 1; }
  55%, 78% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(1); opacity: 0; }
}

/* ---------- Inline: four ink dots coming into registration ---------- */
.ucl-cmyk {
  display: inline-flex; align-items: center; gap: 5px;
}
.ucl-cmyk span {
  width: 9px; height: 9px; border-radius: 50%;
  animation: ucl-register 1.1s ease-in-out infinite;
}
.ucl-cmyk span:nth-child(1) { background: var(--ink-c); animation-delay: 0s; }
.ucl-cmyk span:nth-child(2) { background: var(--ink-m); animation-delay: .13s; }
.ucl-cmyk span:nth-child(3) { background: var(--ink-y); animation-delay: .26s; }
.ucl-cmyk span:nth-child(4) { background: var(--ink-k); animation-delay: .39s; }

@keyframes ucl-register {
  0%, 100% { transform: translateY(0) scale(.72); opacity: .45; }
  40%      { transform: translateY(-7px) scale(1);  opacity: 1; }
}

/* ---------- Inside a button while it submits ---------- */
.ucl-btn-load {
  display: inline-flex; align-items: center; gap: 8px;
}
.ucl-btn-load .ucl-cmyk span { width: 7px; height: 7px; }

/* ---------- Full-page overlay, for a wait that blocks everything ---------- */
.ucl-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(246,244,239,0.92);
  backdrop-filter: blur(2px);
}
[data-theme="dark"] .ucl-overlay { background: rgba(11,18,32,0.92); }
.ucl-overlay[hidden] { display: none; }

/* ---------- Reduced motion: hold everything still, stay readable ---------- */
@media (prefers-reduced-motion: reduce) {
  .ucl-press-head,
  .ucl-press-sheet,
  .ucl-press-sheet i,
  .ucl-cmyk span {
    animation: none !important;
  }
  /* Without motion the sheet must still read as a printed page. */
  .ucl-press-sheet { transform: none; opacity: 1; }
  .ucl-press-sheet i { transform: scaleX(1); opacity: 1; }
  .ucl-cmyk span { opacity: 1; transform: none; }
}