/* Switching between the Delibites App and the Workspace (owner 2026-11-01: "add loading screen, animated and modern circular").
   The same screen shows while one site is left (components/SiteSwitch.tsx) and while the other starts (index.html +
   site-loader.js), so the hand-over looks like one motion. Plain CSS (loaded before the app's own styles), transform and
   opacity only; still with reduced motion. */
.site-loader {
  --sl-bg: #f7f4ee; --sl-ink: #2b2a27; --sl-muted: #77736b; --sl-a: #1f8a4c; --sl-b: #f28c28; --sl-track: rgb(0 0 0 / .07);
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; align-content: center; gap: 22px;
  background: radial-gradient(60% 50% at 20% 10%, rgb(31 138 76 / .12), transparent 70%), radial-gradient(50% 45% at 90% 90%, rgb(242 140 40 / .12), transparent 72%), var(--sl-bg);
  color: var(--sl-ink); font: 600 15px/1.3 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  animation: sl-in .22s ease-out both;
}
.site-loader.sl-out { animation: sl-out .32s ease-in forwards; pointer-events: none; }
:root[data-theme="dark"] .site-loader { --sl-bg: #141714; --sl-ink: #ecebe6; --sl-muted: #a29f97; --sl-track: rgb(255 255 255 / .09); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-loader { --sl-bg: #141714; --sl-ink: #ecebe6; --sl-muted: #a29f97; --sl-track: rgb(255 255 255 / .09); } }

.sl-ring { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
/* the track, two arcs turning at different speeds (a gradient sweep), and a soft halo that breathes */
.sl-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--sl-track); }
.sl-ring::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(closest-side, rgb(31 138 76 / .18), transparent); animation: sl-breathe 1.8s ease-in-out infinite; }
.sl-arc { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--sl-a) 40%, var(--sl-b) 72%, transparent 74%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: sl-spin 1.1s cubic-bezier(.55, .15, .45, .85) infinite; }
.sl-arc.sl-arc2 { inset: 14px; opacity: .55; background: conic-gradient(from 180deg, transparent 0 30%, var(--sl-b) 60%, var(--sl-a) 82%, transparent 84%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: sl-spin 1.7s linear infinite reverse; }
.sl-ring img { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .35); animation: sl-pop 1.8s ease-in-out infinite; }
.sl-text { margin: 0; letter-spacing: .01em; text-align: center; }
.sl-text small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--sl-muted); }
.sl-dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.sl-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: sl-dot 1.2s ease-in-out infinite; }
.sl-dots i:nth-child(2) { animation-delay: .15s; } .sl-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes sl-spin { to { transform: rotate(360deg); } }
@keyframes sl-breathe { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes sl-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sl-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes sl-in { from { opacity: 0; } }
@keyframes sl-out { to { opacity: 0; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  .site-loader, .site-loader.sl-out, .sl-arc, .sl-ring::after, .sl-ring img, .sl-dots i { animation: none; }
  .site-loader.sl-out { opacity: 0; }
}