/* ==========================================================================
   SIGNATURE LOADER (default)

   Calm squircle tile with a rounded-square comet ring (cool tail, warm head),
   one slow ripple, and soft brand-colour ribbons. Theme-aware (light / dark).

   - Active when <html data-loader="signature"> (set statically in index.html).
     Removing that attribute falls back to the original "classic" loader in
     loading.css, untouched.
   - Refresh / page load: clean dissolve into the UI.
     Right after sign-in: the cloud/splash burst (js/app.js:
     showPostLoginLoader + triggerLoadingExitTransition).

   Engineering rules:
   - Idle motion uses transform / opacity only (GPU-composited), so it keeps
     moving while the main thread is busy booting the app.
   - Full-bleed layer corrected for body{zoom:.9} on desktop.
   - Sits above the feedback button / theme toggle.
   - Respects prefers-reduced-motion and .no-hw-accel.
   ========================================================================== */

/* Once the loader is hidden (no .active) it stays in the DOM; pause every
   animation inside it so nothing keeps ticking in the background.
   Applies to any loader, including classic. Resumes if .active returns. */
#loading-screen:not(.active),
#loading-screen:not(.active)::before,
#loading-screen:not(.active)::after,
#loading-screen:not(.active) *,
#loading-screen:not(.active) *::before,
#loading-screen:not(.active) *::after {
  animation: none !important;
}

/* Ring element is only used by the signature loader */
#loading-screen .ld-ring {
  display: none;
}

/* -------------------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------------------- */
html[data-loader="signature"] #loading-screen {
  --ld-tile: 128px;
  --ld-radius: 30px;
  --ld-gap: 22px;
  --ld-ring-r: calc(var(--ld-radius) + var(--ld-gap)); /* concentric with the tile corners */
  --ld-bg: linear-gradient(180deg, #fbfcff 0%, #f1f5ff 100%);
  --ld-text: #3b4a63;
  --ld-track: rgba(71, 85, 105, 0.12);
  --ld-ping: rgba(26, 127, 230, 0.55);
  --ld-tile-shadow: 0 22px 50px rgba(79, 70, 229, 0.16), 0 8px 22px rgba(255, 120, 90, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.9);
  --ld-s1: 44% 40%;
  --ld-s2: 40% 44%;
  --ld-s3: 44% 44%;
  --ld-s4: 38% 38%;
  --ld-ribbons:
    radial-gradient(var(--ld-s1) at 20% 26%, rgba(170, 110, 255, 0.40), transparent 70%),
    radial-gradient(var(--ld-s2) at 82% 20%, rgba(50, 160, 255, 0.40), transparent 70%),
    radial-gradient(var(--ld-s3) at 78% 80%, rgba(20, 230, 170, 0.30), transparent 70%),
    radial-gradient(var(--ld-s4) at 18% 84%, rgba(255, 140, 100, 0.30), transparent 70%);
}

/* Tall/narrow screens: circles instead of ellipses (avoids stripy ribbons) */
@media (max-width: 767px) {
  html[data-loader="signature"] #loading-screen {
    --ld-s1: circle 58vh;
    --ld-s2: circle 54vh;
    --ld-s3: circle 58vh;
    --ld-s4: circle 48vh;
  }
}

/* Dark: ink-navy with richer ribbons */
html[data-theme="dark"][data-loader="signature"] #loading-screen {
  --ld-bg: radial-gradient(1000px 700px at 50% 42%, #0f1730 0%, #070b16 70%);
  --ld-text: #d5deee;
  --ld-track: rgba(255, 255, 255, 0.10);
  --ld-ping: rgba(80, 215, 255, 0.55);
  --ld-tile-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 56px rgba(60, 140, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.09);
  --ld-ribbons:
    radial-gradient(var(--ld-s1) at 20% 26%, rgba(150, 90, 255, 0.46), transparent 70%),
    radial-gradient(var(--ld-s2) at 82% 20%, rgba(40, 140, 255, 0.46), transparent 70%),
    radial-gradient(var(--ld-s3) at 78% 80%, rgba(0, 220, 160, 0.30), transparent 70%),
    radial-gradient(var(--ld-s4) at 18% 84%, rgba(255, 110, 120, 0.30), transparent 70%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"])[data-loader="signature"] #loading-screen {
    --ld-bg: radial-gradient(1000px 700px at 50% 42%, #0f1730 0%, #070b16 70%);
    --ld-text: #d5deee;
    --ld-track: rgba(255, 255, 255, 0.10);
    --ld-ping: rgba(80, 215, 255, 0.55);
    --ld-tile-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 56px rgba(60, 140, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.09);
    --ld-ribbons:
      radial-gradient(var(--ld-s1) at 20% 26%, rgba(150, 90, 255, 0.46), transparent 70%),
      radial-gradient(var(--ld-s2) at 82% 20%, rgba(40, 140, 255, 0.46), transparent 70%),
      radial-gradient(var(--ld-s3) at 78% 80%, rgba(0, 220, 160, 0.30), transparent 70%),
      radial-gradient(var(--ld-s4) at 18% 84%, rgba(255, 110, 120, 0.30), transparent 70%);
  }
}

/* -------------------------------------------------------------------------
   LAYER & PAGE INTEGRATION
   ------------------------------------------------------------------------- */
html[data-loader="signature"] #loading-screen {
  z-index: 12100; /* above feedback FAB (12002) and toasts (12004) */
  background: var(--ld-bg);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Height is already compensated for body zoom in reset.css; width was not. */
@media (min-width: 768px) {
  html[data-loader="signature"] #loading-screen {
    width: calc(100vw / var(--zoom-factor, 0.9));
  }
}

/* Off-canvas drawers sit ~4px beyond the right edge; their shadows bleed in. */
html[data-loader="signature"] body:has(#loading-screen.active) [id$="-drawer-panel"],
html[data-loader="signature"] body:has(#loading-screen.active) .sheet-content {
  box-shadow: none !important;
}

/* No double fade: the page-level body fade-in is hidden under the loader anyway */
html[data-loader="signature"] body.sandbox-fade-in {
  animation: none;
}

/* Avoid a flash of the page background while <body> renders under the loader */
html[data-loader="signature"]:has(body.is-loading) { background: #f4f7ff; }
html[data-theme="dark"][data-loader="signature"]:has(body.is-loading) { background: #070b16; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"])[data-loader="signature"]:has(body.is-loading) { background: #070b16; }
}

/* Retire the classic ornaments */
html[data-loader="signature"] #loading-screen .onboarding-background {
  display: none;
}

html[data-loader="signature"] #loading-screen .logo-container::before,
html[data-loader="signature"] #loading-screen .logo-container::after {
  display: none !important;
}

/* -------------------------------------------------------------------------
   BACKDROP: ribbons (::before) + ripple (::after)
   ------------------------------------------------------------------------- */
html[data-loader="signature"] #loading-screen::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background: var(--ld-ribbons);
  will-change: transform;
  animation:
    ldFadeIn 1.1s ease backwards,
    ldDriftA 18s ease-in-out infinite alternate;
  transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s ease-out;
}

@media (max-width: 767px) {
  /* Phones: static, viewport-sized ribbons instead of a drifting 150% layer
     (saves roughly 15-25 MB of GPU memory). Ring + ripple carry the motion. */
  html[data-loader="signature"] #loading-screen::before {
    inset: 0;
    will-change: auto;
    animation: ldFadeIn 1.1s ease backwards;
  }
}

/* One rounded-square ripple, born at the ring and expanding outward */
html[data-loader="signature"] #loading-screen::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  left: 50%;
  top: 45%;
  width: calc(var(--ld-tile) + var(--ld-gap) * 2);
  height: calc(var(--ld-tile) + var(--ld-gap) * 2);
  translate: -50% -50%;
  border-radius: var(--ld-ring-r);
  border: 1.5px solid var(--ld-ping);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: ldPing 4s cubic-bezier(0.25, 0.6, 0.3, 1) 1s infinite;
}

/* -------------------------------------------------------------------------
   TILE, TRACK, COMET RING, STATUS
   ------------------------------------------------------------------------- */
html[data-loader="signature"] #loading-screen .loading-content {
  top: 45%;
}

html[data-loader="signature"] #loading-screen .logo-container {
  width: var(--ld-tile);
  height: var(--ld-tile);
}

html[data-loader="signature"] #loading-screen .loading-logo {
  width: var(--ld-tile);
  height: var(--ld-tile);
  border-radius: var(--ld-radius);
  background: #ffffff;
  object-fit: cover;
  opacity: 1;
  filter: none;
  transform: none;
  box-shadow: var(--ld-tile-shadow);
  animation: ldSigIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Track: static rounded-square outline, concentric with the tile */
html[data-loader="signature"] #loading-screen .loading-content::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  inset: calc(var(--ld-gap) * -1);
  border-radius: var(--ld-ring-r);
  border: 2px solid var(--ld-track);
  pointer-events: none;
  animation: ldFadeIn 0.7s ease-out backwards;
}

/* Comet: a squircle stroke clip (.ld-ring) over a conic layer that rotates
   with transform only, so it stays on the GPU and keeps moving even while
   the main thread is busy booting the app. Cool tail, warm head.
   Uses vector clip-path: path(evenodd, ...) instead of multi-layer composite
   CSS masks so mobile WebKit / Blink GPU compositors never freeze the child
   rotation texture. */
html[data-loader="signature"] #loading-screen .ld-ring {
  display: block;
  position: absolute;
  box-sizing: border-box;
  inset: calc(var(--ld-gap) * -1);
  width: calc(var(--ld-tile) + var(--ld-gap) * 2);
  height: calc(var(--ld-tile) + var(--ld-gap) * 2);
  border-radius: var(--ld-ring-r);
  padding: 3.5px; /* stroke width */
  overflow: hidden;
  pointer-events: none;
  -webkit-clip-path: path(evenodd, "M 52 0 H 120 A 52 52 0 0 1 172 52 V 120 A 52 52 0 0 1 120 172 H 52 A 52 52 0 0 1 0 120 V 52 A 52 52 0 0 1 52 0 Z M 52 3.5 H 120 A 48.5 48.5 0 0 1 168.5 52 V 120 A 48.5 48.5 0 0 1 120 168.5 H 52 A 48.5 48.5 0 0 1 3.5 120 V 52 A 48.5 48.5 0 0 1 52 3.5 Z");
  clip-path: path(evenodd, "M 52 0 H 120 A 52 52 0 0 1 172 52 V 120 A 52 52 0 0 1 120 172 H 52 A 52 52 0 0 1 0 120 V 52 A 52 52 0 0 1 52 0 Z M 52 3.5 H 120 A 48.5 48.5 0 0 1 168.5 52 V 120 A 48.5 48.5 0 0 1 120 168.5 H 52 A 48.5 48.5 0 0 1 3.5 120 V 52 A 48.5 48.5 0 0 1 52 3.5 Z");
  animation: ldFadeIn 0.7s ease-out backwards;
}

html[data-loader="signature"] #loading-screen .ld-ring > .ld-ring-spinner,
html[data-loader="signature"] #loading-screen .ld-ring:empty::before {
  content: '';
  display: block;
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  transform-origin: 50% 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 229, 212, 0) 0deg,
    rgba(0, 229, 212, 0) 70deg,
    #00e5d4 150deg,
    #2f8cff 220deg,
    #8b5cf6 285deg,
    #ff5fa2 335deg,
    #ffb347 360deg
  );
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: ldSpin 1.6s linear infinite;
}

/* Status copy: same words, calmer delivery */
html[data-loader="signature"] #loading-screen .loading-status-container {
  top: calc(100% + var(--ld-gap) + 26px);
}

html[data-loader="signature"] #loading-screen .loading-status-text {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ld-text);
  transition: opacity 0.25s ease;
  animation: ldTextIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

/* Re-triggered from JS each time the phrase changes (slide-up + fade) */
html[data-loader="signature"] #loading-screen .loading-status-text.ld-text-swap {
  animation: ldTextSwap 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* -------------------------------------------------------------------------
   ENTER / EXIT
   ------------------------------------------------------------------------- */
/* Returning to the loader after sign-in: fade in rather than pop over the UI */
html[data-loader="signature"] #loading-screen.ld-enter {
  animation: ldFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Exit: ribbons drift outward; tile, ring and text lift and dissolve together */
html[data-loader="signature"] #loading-screen.exiting::before {
  scale: 1.12;
  opacity: 0;
}

html[data-loader="signature"] #loading-screen.exiting .loading-content {
  scale: 1.04;
  opacity: 0;
  transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-loader="signature"] #loading-screen.exiting .loading-status-container {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Clean exit (refresh): the whole loader dissolves on an even ease-in-out
   curve, starting just after the tile begins to lift, so the UI is revealed
   gradually instead of being uncovered in one ~90ms drop. */
html[data-loader="signature"] #loading-screen.exiting:not(.ld-splash) {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.45, 0, 0.55, 1) 0.1s;
}

/* Splash exit (post sign-in): same even curve once the cloud has bloomed */
html[data-loader="signature"] #loading-screen.ld-splash.fade-out {
  transition: opacity 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

/* -------------------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------------------- */
@keyframes ldFadeIn {
  from { opacity: 0; }
}

@keyframes ldPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes ldTextIn {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes ldTextSwap {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes ldSigIn {
  from { opacity: 0; transform: scale(0.94); }
}

@keyframes ldSpin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ldPing {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes ldDriftA {
  from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  to { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.1); }
}

/* -------------------------------------------------------------------------
   ACCESSIBILITY / PERFORMANCE SAFETY NETS
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-loader="signature"] #loading-screen .loading-logo,
  html[data-loader="signature"] #loading-screen::before,
  html[data-loader="signature"] #loading-screen::after {
    animation: none !important;
  }

  /* Keep the essential loading progress ring rotating even when OS reduce-motion
     is enabled (overrides reset.css / animations-enhanced.css 0.01ms !important) */
  html[data-loader="signature"] #loading-screen.active .ld-ring > .ld-ring-spinner,
  html[data-loader="signature"] #loading-screen.active .ld-ring:empty::before {
    animation: ldSpin 1.6s linear infinite !important;
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
}

html.no-hw-accel[data-loader="signature"] #loading-screen,
html.no-hw-accel[data-loader="signature"] #loading-screen::before,
html.no-hw-accel[data-loader="signature"] #loading-screen::after,
html.no-hw-accel[data-loader="signature"] #loading-screen .loading-content::before {
  animation: none !important;
}