/* ================================================================
   Tangency Loader — Concept A “The Draw”
   Source: tangency-loader-concepts.html (SVG + CSS · ~2.4s · <1 KB)
   Usage: wrap markup in .tangency-loader.play (add .play to start)
   ================================================================ */

.tangency-loader {
  --tl-ink: #F4F8FF;
  --tl-ink-3: #64748B;
  --tl-accent: #3B82F6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  user-select: none;
  pointer-events: none;
}

.tangency-loader .tl-mark-wrap {
  position: relative;
  width: 88px;
}

.tangency-loader .tl-mark {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.tangency-loader .tl-glow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 240%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.28), transparent 72%);
}

.tangency-loader .tl-word {
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--tl-ink);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  opacity: 0;
}

.tangency-loader .tl-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--tl-ink-3);
  text-transform: uppercase;
  opacity: 0;
}

/* Resting (pre-play) — mark hidden so we never flash a finished logo */
.tangency-loader .tl-circle {
  stroke-dasharray: 81.68;
  stroke-dashoffset: 81.68;
}

.tangency-loader .tl-line {
  transform: scaleX(0);
  transform-box: view-box;
  transform-origin: 54.7% 70.6%;
}

.tangency-loader .tl-dot {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

.tangency-loader .tl-ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Play */
.tangency-loader.play .tl-circle {
  animation: tlCircle 1.15s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards;
}

.tangency-loader.play .tl-line {
  animation: tlLine 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}

.tangency-loader.play .tl-dot {
  animation: tlPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s forwards;
}

.tangency-loader.play .tl-ring {
  animation: tlRing 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}

.tangency-loader.play .tl-glow {
  /* No infinite breath — Matt 2026-08-30: loader must not loop/lag while waiting for data */
  animation: tlGlow 1.6s ease-out 1.35s forwards;
}
/* Final frame while overlay waits for m21:data-loaded / terminal-ready */
.tangency-loader.tl-hold .tl-circle {
  stroke-dashoffset: 0;
}
.tangency-loader.tl-hold .tl-line {
  transform: scaleX(1);
}
.tangency-loader.tl-hold .tl-word,
.tangency-loader.tl-hold .tl-tag {
  opacity: 1;
}
.tangency-loader.tl-hold .tl-glow {
  opacity: 0.55;
  animation: none;
}
.tangency-loader.tl-done .tl-glow {
  animation: none !important;
}

.tangency-loader.play .tl-word {
  animation: tlWord 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1.45s forwards;
}

.tangency-loader.play .tl-tag {
  animation: tlFade 0.8s ease-out 2.15s forwards;
}

@keyframes tlCircle { to { stroke-dashoffset: 0; } }
@keyframes tlLine { to { transform: scaleX(1); } }
@keyframes tlPop { to { transform: scale(1); } }
@keyframes tlRing {
  0% { opacity: 0.9; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes tlGlow {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0.55; }
}
@keyframes tlWord {
  from { opacity: 0; letter-spacing: 0.55em; }
  to { opacity: 1; letter-spacing: 0.3em; }
}
@keyframes tlFade { to { opacity: 1; } }
@keyframes tlBreath {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .tangency-loader.play * {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
}

/* Terminal boot shell: fill the main pane */
.loading-state.loading-state--draw {
  min-height: 60vh;
  gap: 0;
}

.loading-state.loading-state--draw .tangency-loader .tl-mark-wrap {
  width: min(120px, 18vw);
}

.loading-state.loading-state--draw .tangency-loader .tl-word {
  font-size: clamp(18px, 2.2vw, 26px);
}

/* Full-viewport boot overlay (Terminal + Dashboard cold start) */
.tangency-boot-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, #0A1222 0%, #05080F 78%);
  opacity: 1;
  transition: opacity 0.45s ease;
}
.tangency-boot-loader[hidden] {
  display: none !important;
}
.tangency-boot-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.tangency-boot-loader .tangency-loader .tl-mark-wrap {
  width: min(120px, 18vw);
}
.tangency-boot-loader .tangency-loader .tl-word {
  font-size: clamp(18px, 2.2vw, 26px);
}