/*
 * Lori paints the loading circle. Shared by the pre-React splash in index.html and
 * components/LoriPaintLoader.tsx, so the opening screen and in-app loaders match exactly.
 * Normally it is his Higgsfield loop (lori-loader.webm / .mov): a thick gouache ring painted
 * clockwise around him. The SVG ring below is the fallback (Lori hidden, small sizes, no video).
 * SVG geometry (viewBox 132): ring r=55 around the centre; the still Lori's brush tip sits on the
 * ring at 56° clockwise from the top, so the paint starts at his brush and travels clockwise.
 */
.lori-loader, .lori-loader-screen, .lori-loader-page {
  --lori-loader-bg: #f4f4f3;
  --lori-loader-muted: #707070;
  --lori-loader-track: rgb(36 36 36 / 10%);
}
.lori-loader-screen, .lori-loader-page {
  --lori-loader-size: 192px;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--lori-loader-bg);
  font: 500 14px/1.4 'Instrument Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/*
 * One standard spot for every loader: the ring sits dead centre on the screen and the label hangs
 * beneath it, so a label (or none) never shifts Lori. The splash, the app's full-screen loaders
 * (--app, under the page layer) and page-level loaders (.lori-loader-page) all share it.
 */
.lori-loader-screen--app { z-index: 40; }
.lori-loader-page { z-index: 41; background: none; pointer-events: none; }
.lori-loader-page > [role='status'] { position: relative; }
:is(.lori-loader-screen, .lori-loader-page > [role='status']) > .lori-loader-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(var(--lori-loader-size, 192px) / 2 + 12px));
  white-space: nowrap;
}
:root[data-theme='dark'] :is(.lori-loader, .lori-loader-screen, .lori-loader-page), :root.dark :is(.lori-loader, .lori-loader-screen, .lori-loader-page) {
  --lori-loader-bg: #1e1e1e;
  --lori-loader-muted: #a3a3a3;
  --lori-loader-track: rgb(255 255 255 / 12%);
}
.lori-loader-screen.lori-loader-screen--app { background: var(--color-bg-primary, var(--lori-loader-bg)); }

.lori-loader { position: relative; width: var(--lori-loader-size, 192px); height: var(--lori-loader-size, 192px); flex-shrink: 0; }
.lori-loader-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
/* The splash carries both: the loop normally, the SVG ring when Lori is hidden. */
.lori-loader--video > svg, .lori-loader--video > .lori-loader-lori { display: none; }
:root[data-lori-hidden='true'] .lori-loader--video > svg,
.lori-loader--video.lori-loader--fallback > svg,
.lori-loader--video.lori-loader--fallback > .lori-loader-lori { display: block; }
:root[data-lori-hidden='true'] .lori-loader--video > .lori-loader-lori { display: none; }
:root[data-lori-hidden='true'] .lori-loader--video > .lori-loader-video,
.lori-loader--video.lori-loader--fallback > .lori-loader-video { display: none; }
/* Never let iOS draw its own play button or a backdrop over Lori's loop. */
.lori-loader-video { background: transparent; }
.lori-loader-video::-webkit-media-controls,
.lori-loader-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.lori-loader svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lori-loader-track { fill: none; stroke: var(--lori-loader-track, rgb(36 36 36 / 10%)); }
.lori-loader-paint {
  fill: none;
  stroke: url(#lori-loader-gradient);
  stroke-linecap: round;
  stroke-dasharray: 345.6;              /* 2π × 55 */
  stroke-dashoffset: 345.6;
  transform: rotate(-34deg);            /* start at the brush tip */
  transform-origin: 66px 66px;
  animation: lori-loader-paint 2.1s cubic-bezier(.65, 0, .35, 1) var(--lori-loader-phase, 0ms) infinite;
}
/* A bead of wet paint rides the leading edge of the stroke. */
.lori-loader-bead { transform-origin: 66px 66px; animation: lori-loader-bead 2.1s cubic-bezier(.65, 0, .35, 1) var(--lori-loader-phase, 0ms) infinite; }
.lori-loader-bead circle { fill: #ff6b9d; }
.lori-loader-lori {
  position: absolute;
  left: 15.15%;  /* 20 / 132 */
  top: 15.15%;
  width: 69.7%;  /* 92 / 132 */
  height: 69.7%;
  object-fit: contain;
  transform-origin: 45% 92%;           /* rock from his feet */
  animation: lori-loader-dab .7s ease-in-out var(--lori-loader-phase, 0ms) infinite;   /* 3 dabs per paint */
  user-select: none;
  pointer-events: none;
}
.lori-loader-label { margin: 0; color: var(--lori-loader-muted, var(--color-text-secondary, #707070)); letter-spacing: -.005em; }

/* Fill to 100% in 1.5s, hold a beat, fade, and paint again if loading takes longer. */
@keyframes lori-loader-paint {
  0% { stroke-dashoffset: 345.6; opacity: 1; }
  71% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes lori-loader-bead {
  0% { transform: rotate(-34deg); opacity: 1; }
  71% { transform: rotate(326deg); opacity: 1; }
  80%, 100% { transform: rotate(326deg); opacity: 0; }
}
@keyframes lori-loader-dab {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-2%); }
}

/* Someone who hid Lori still gets the painted ring. */
:root[data-lori-hidden='true'] .lori-loader-lori { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lori-loader-paint { animation: none; stroke-dashoffset: 0; }
  .lori-loader-bead { display: none; }
  .lori-loader-lori { animation: none; }
}