/*
  The TentCraft preloader: a pop-up canopy that folds flat, pops up and locks while an app loads its data. Behaviour is in preloader.js.
  It covers only the app's content area (preloader.js sets its position), so the sidebar and header stay visible and on top.

  A file, not injected by the script, because the sites' content security policy (style-src 'self') blocks styles added by a script.
  Every colour comes from the site's theme tokens (--background, --primary, --brass, --muted-foreground), so the canopy follows the
  site's theme and its light or dark mode. A site can override any of them for the preloader alone:
  --tc-pl-bg, --tc-pl-ink, --tc-pl-accent, --tc-pl-label.
*/
#tc-preloader {
  --pl-bg: var(--tc-pl-bg, var(--background, #ffffff));
  --pl-ink: var(--tc-pl-ink, var(--primary, #002e46));
  --pl-accent: var(--tc-pl-accent, var(--brass, #f15b43));
  --pl-label: var(--tc-pl-label, var(--muted-foreground, #4b5b64));

  /* Where it sits is set by preloader.js over the app's content area; this is only the starting point. Below menus and dialogs (z-50). */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--pl-bg);
  /* Never in the way: clicks and taps go to the page underneath, so a fast visitor or a browser test is not blocked while it fades. */
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s;
}
#tc-preloader.tc-pl-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s 300ms;
}
#tc-preloader svg {
  width: min(240px, 60vw);
  height: auto;
  overflow: visible;
}
#tc-preloader .tc-pl-label {
  font: 500 14px/1 var(--font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  letter-spacing: 0.04em;
  color: var(--pl-label);
}

/* The canopy: 240 x 160 drawing, ground at y=140. The legs and truss fold by squashing from the ground up; the roof drops with them. */
#tc-preloader .tc-pl-ground {
  stroke: var(--pl-ink);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.35;
}
#tc-preloader .tc-pl-line {
  fill: none;
  stroke: var(--pl-ink);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#tc-preloader .tc-pl-leg {
  stroke-width: 4.5;
}
#tc-preloader .tc-pl-thin {
  stroke-width: 2.5;
}
#tc-preloader .tc-pl-legs {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tc-pl-legs 2.6s infinite;
}
#tc-preloader .tc-pl-canopy {
  transform-box: fill-box;
  transform-origin: 50% 78%;
  animation: tc-pl-canopy 2.6s infinite;
}
#tc-preloader .tc-pl-roof,
#tc-preloader .tc-pl-val {
  fill: var(--pl-accent);
  stroke: var(--pl-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#tc-preloader .tc-pl-val-alt {
  fill: var(--pl-bg);
}
#tc-preloader .tc-pl-seam {
  fill: none;
  stroke: var(--pl-bg);
  stroke-opacity: 0.45;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
#tc-preloader .tc-pl-vent {
  fill: var(--pl-ink);
  stroke: var(--pl-ink);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#tc-preloader .tc-pl-pin {
  fill: var(--pl-bg);
  stroke: var(--pl-ink);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  animation: tc-pl-pin 2.6s infinite;
}

@keyframes tc-pl-legs {
  0% { transform: scaleY(0.28); animation-timing-function: cubic-bezier(0.3, 0.8, 0.3, 1.15); }
  42% { transform: scaleY(1); }
  48% { transform: scaleY(0.96); animation-timing-function: ease-out; }
  54%, 80% { transform: scaleY(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { transform: scaleY(0.28); }
}
@keyframes tc-pl-canopy {
  0% { transform: translateY(49px) scaleY(0.45); animation-timing-function: cubic-bezier(0.3, 0.8, 0.3, 1.15); }
  42% { transform: translateY(0) scaleY(1); }
  48% { transform: translateY(3px) scaleY(0.98); animation-timing-function: ease-out; }
  54%, 80% { transform: translateY(0) scaleY(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { transform: translateY(49px) scaleY(0.45); }
}
/* The lock pins ride up with the frame and turn the accent colour as it locks. */
@keyframes tc-pl-pin {
  0% { transform: translateY(26px); animation-timing-function: cubic-bezier(0.3, 0.8, 0.3, 1.15); }
  42% { transform: translateY(0); fill: var(--pl-bg); }
  48% { transform: translateY(1px); fill: var(--pl-accent); }
  54%, 80% { transform: translateY(0); fill: var(--pl-accent); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { transform: translateY(26px); fill: var(--pl-bg); }
}

/* Reduced motion: a fully deployed canopy, standing still. */
@media (prefers-reduced-motion: reduce) {
  #tc-preloader .tc-pl-legs,
  #tc-preloader .tc-pl-canopy,
  #tc-preloader .tc-pl-pin {
    animation: none;
  }
  #tc-preloader .tc-pl-pin {
    fill: var(--pl-accent);
  }
}