/* Unity shared loader (one component for the whole site).
   Markup: paste loader-snippet.html as the first child of <body>.
   Behaviour: /js/loader.js (optional). Brand defaults = Unity Art Collective
   (#1B4332 dark green, #D4A373 gold, #F7F3EE cream). Playground tools add
   class "ul-theme-playground" for the Colour Yard palette.
   Static CSP safe: no inline style or script. */
.ul-loader{
  --ul-night:#1B4332;--ul-indigo:#2D6A4F;--ul-violet:#1B4332;
  --ul-ink:#F7F3EE;--ul-muted:#e7e1d8;
  --ul-c1:#D4A373;--ul-c2:#F7F3EE;--ul-c3:#D4A373;--ul-c4:#2D6A4F;
  position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  padding:1.5rem;text-align:center;color:var(--ul-ink);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  background:radial-gradient(40% 35% at 50% 40%,rgba(212,163,115,.14),transparent 70%),linear-gradient(160deg,var(--ul-night) 0%,var(--ul-indigo) 70%,#0f2a1f 100%);
  opacity:1;transition:opacity .35s ease,visibility 0s linear 0s;
}
/* Colour Yard / Creative Playground tools keep the night + cyan/pink mark. */
.ul-loader.ul-theme-playground{
  --ul-night:var(--pw-night,#0b0a24);--ul-indigo:var(--pw-indigo,#1b1550);--ul-violet:var(--pw-violet,#2a0f4a);
  --ul-ink:var(--pw-ink,#eef0ff);--ul-muted:var(--pw-muted,#cdd0f5);
  --ul-c1:var(--pw-cyan,#7cf7ff);--ul-c2:var(--pw-pink,#ffb3ec);--ul-c3:var(--pw-focus,#ffd166);--ul-c4:var(--pw-ink,#eef0ff);
  background:radial-gradient(40% 35% at 50% 40%,rgba(124,247,255,.10),transparent 70%),linear-gradient(160deg,var(--ul-night) 0%,var(--ul-indigo) 60%,var(--ul-violet) 100%);
}
.ul-loader.ul-inline{position:relative;inset:auto;min-height:14rem;z-index:auto;background:none}
.ul-loader[hidden],.ul-loader [hidden]{display:none!important}
.ul-loader.ul-done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s}

.ul-mark{width:7.5rem;height:7.5rem;overflow:visible}
.ul-logo{width:6rem;height:6rem;object-fit:contain;border-radius:1rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ul-p{transform-box:fill-box;transform-origin:center;animation:ul-snap 2.4s cubic-bezier(.34,1.4,.64,1) infinite both}
.ul-p1{fill:var(--ul-c1);--ul-from:translate(-60%,-60%) rotate(-25deg)}
.ul-p2{fill:var(--ul-c2);--ul-from:translate(60%,-60%) rotate(25deg);animation-delay:.12s}
.ul-p3{fill:var(--ul-c3);--ul-from:translate(-60%,60%) rotate(25deg);animation-delay:.24s}
.ul-p4{fill:var(--ul-c4);--ul-from:translate(60%,60%) rotate(-25deg);animation-delay:.36s}
.ul-ring{fill:none;stroke:var(--ul-c1);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ul-ring 2.4s ease-out infinite .55s}
@keyframes ul-snap{
  0%{transform:var(--ul-from) scale(.6);opacity:0}
  22%{transform:none;opacity:1}
  70%{transform:none;opacity:1}
  88%,100%{transform:translateY(-14%) scale(.9);opacity:0}
}
@keyframes ul-ring{0%{opacity:0;transform:scale(.85)}10%{opacity:.7}40%,100%{opacity:0;transform:scale(1.18)}}

.ul-label{margin:0;font-weight:650;font-size:1.05rem;letter-spacing:.01em}
.ul-step{margin:0;color:var(--ul-muted);font-size:.9rem;min-height:1.3em}
.ul-bar{position:relative;width:min(16rem,70vw);height:.3rem;border-radius:1rem;background:rgba(247,243,238,.18);overflow:hidden}
.ul-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;border-radius:inherit;background:linear-gradient(90deg,var(--ul-c1),var(--ul-c2));animation:ul-slide 1.4s ease-in-out infinite}
@keyframes ul-slide{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
.ul-progress{width:min(16rem,70vw);height:.3rem;accent-color:var(--ul-c1)}
.ul-loader.ul-determinate .ul-bar{display:none}

.ul-msg{max-width:30rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.ul-msg p{margin:0}
.ul-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.ul-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.45rem 1.1rem;border-radius:999px;border:1px solid rgba(212,163,115,.7);
  background:rgba(27,67,50,.85);color:var(--ul-ink);font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
.ul-theme-playground .ul-btn{border-color:rgba(124,247,255,.55);background:rgba(27,21,80,.75)}
.ul-btn:hover{border-color:var(--ul-c1)}
.ul-btn-primary{background:var(--ul-c1);border-color:var(--ul-c1);color:var(--ul-night)}
.ul-btn:focus-visible{outline:3px solid var(--ul-c3);outline-offset:2px}
.ul-details{max-width:30rem;color:var(--ul-muted);font-size:.85rem;text-align:left}
.ul-details summary{cursor:pointer;text-align:center}
.ul-details pre{white-space:pre-wrap;word-break:break-word;margin:.4rem 0 0;padding:.5rem .7rem;border-radius:.5rem;background:rgba(0,0,0,.35)}
.ul-loader.ul-failed .ul-mark,.ul-loader.ul-failed .ul-logo,.ul-loader.ul-failed .ul-label,.ul-loader.ul-failed .ul-bar,.ul-loader.ul-failed .ul-progress,.ul-loader.ul-failed .ul-step{display:none}

/* CSS-only safety net: if /js/loader.js never runs, offer a reload link after 30s. */
.ul-css-slow{margin:0;color:var(--ul-muted);font-size:.9rem;visibility:hidden;animation:ul-reveal 0s linear 30s forwards}
.ul-css-slow a{color:var(--ul-c1)}
.ul-loader.ul-js .ul-css-slow{display:none}
@keyframes ul-reveal{to{visibility:visible}}

/* Static pages: without JS, do not leave a blank branded wall. data-ul-nojs-hide (ms, default 1600)
   fades the overlay away so the HTML underneath is readable. Apps that need a long load omit the attr. */
.ul-loader[data-ul-nojs-hide]:not(.ul-js){animation:ul-nojs-done 0s linear var(--ul-nojs,1.6s) forwards}
.ul-loader[data-ul-nojs-hide="1200"]:not(.ul-js){--ul-nojs:1.2s}
.ul-loader[data-ul-nojs-hide="2000"]:not(.ul-js){--ul-nojs:2s}
.ul-loader[data-ul-nojs-hide="2500"]:not(.ul-js){--ul-nojs:2.5s}
@keyframes ul-nojs-done{to{opacity:0;visibility:hidden;pointer-events:none}}

@media (prefers-reduced-motion:reduce){
  .ul-p{animation:ul-fade 2.4s ease-in-out infinite alternate;transform:none}
  .ul-p2{animation-delay:.3s}.ul-p3{animation-delay:.6s}.ul-p4{animation-delay:.9s}
  .ul-ring{animation:none;opacity:0}
  .ul-bar::after{animation:ul-fade 2.4s ease-in-out infinite alternate;width:100%;transform:none}
  .ul-loader,.ul-loader.ul-done{transition:none}
  @keyframes ul-fade{from{opacity:.45}to{opacity:1}}
}