/* Stitch loader — canonical source. Linked from site/index.html so it paints before JS boots.
   Brand colours mapped to design-tokens.json (pink brand):
   light base = petal #FFF0F5, dark base = ink #1B0A14,
   accent = rose #FF5C9E, text-main = ink #1B0A14.
   Edit colours ONLY in the :root block below. */
:root {
  /* ---- BRAND: the only place colours are defined ---- */
  --light-base: #FFF0F5;
  --dark-base: #1B0A14;
  --accent: #FF5C9E;   /* yarn / thread */
  --text-main: #1B0A14;

  --radius: 12px;
  --u: 8px;                                   /* 8pt grid unit */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --loop: 1.6s;                               /* one full stitch pair */
  --ease: cubic-bezier(.45, 0, .2, 1);
  --fade: 640ms;

  --bg: var(--light-base);
  --fg: var(--text-main);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: var(--dark-base);
  --fg: var(--light-base);
  color-scheme: dark;
}

/* Page base so there is no white flash behind the overlay */
html { background: var(--bg); scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/24px var(--font); }

#stitch-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 3);
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/24px var(--font);
  opacity: 1;
  visibility: visible;
  contain: layout paint;
  transition: opacity var(--fade) var(--ease), visibility 0s linear var(--fade);
}
.is-loaded #stitch-loader { opacity: 0; visibility: hidden; pointer-events: none; }
/* Motion has taken over the stage: kill CSS animations so they don't fight inline styles */
#stitch-loader.is-motion .thread, #stitch-loader.is-motion .needle { animation: none; }
.stitch-label { margin: 0; letter-spacing: .02em; }

.stage { position: relative; width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
@media (min-width: 768px) { .stage { transform: scale(1.5); margin-block: calc(var(--u) * 5); } }

.template {
  position: absolute;
  inset: calc(var(--u) * 2);
  border-radius: var(--radius);
  will-change: transform;
  animation: press calc(var(--loop) / 2) var(--ease) infinite;
}
.template::before, .template::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.template::before { background: var(--accent); opacity: .16; }
.template::after  { border: 2px solid var(--fg); opacity: .28; }

.seam { position: absolute; top: calc(var(--u) * 2); left: 50%; width: 7px; height: calc(var(--u) * 16); margin-left: -3.5px; overflow: hidden; }
.thread {
  position: absolute; left: 0; top: calc(var(--u) * -4); width: 100%; height: calc(var(--u) * 20);
  background: repeating-linear-gradient(-48deg, var(--accent) 0 3px, transparent 3px 9px);
  will-change: transform;
  animation: pull var(--loop) var(--ease) infinite;
}

.needle-anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.needle-anchor--a { transform: rotate(45deg); }
.needle-anchor--b { transform: rotate(135deg); }
.needle {
  position: absolute; right: 0; top: -11px;
  width: 110px; height: 22px;
  color: var(--fg);
  will-change: transform;
  animation: pierce var(--loop) var(--ease) infinite;
}
.needle svg { display: block; width: 100%; height: 100%; }
.needle--b { animation-delay: calc(var(--loop) / -2); }

@keyframes pierce { 0%, 100% { transform: translate3d(-32px, 0, 0); } 50% { transform: translate3d(8px, 0, 0); } }
@keyframes pull   { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 16px, 0); } 100% { transform: translate3d(0, 32px, 0); } }
@keyframes press  { 0%, 100% { transform: scale3d(.985, .985, 1); } 40%, 80% { transform: scale3d(1, 1, 1); } }

@media (prefers-reduced-motion: reduce) {
  #stitch-loader { transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .template, .thread, .needle { animation: none; }
  .needle { transform: translate3d(0, 0, 0); }
}