/* Its own file so the logo review page (/brand/) can show every logo's
   loader without the rest of app.css. Uses --accent and --ink. */
/* ---------- Echo loader (_echo_loader.html) ----------
   The active logo's mark, animated (tailor/loaders/): the dot breathes, the
   two waves light up in turn, and two faint ripples spread out from the
   dot. One 2.4s cycle, everything keyed off it so the pieces read as one
   echo. Logos without their own version breathe their mark (.echo-mark). */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.echo-loader { display: inline-block; line-height: 0; vertical-align: middle; }
.echo-loader svg { display: block; width: 100%; height: 100%; overflow: visible; }
.echo-loader-sm { width: 1.35rem; height: 1.25rem; }
.echo-loader-md { width: 3.4rem; height: 3.1rem; }
.echo-loader-lg { width: 5rem; height: 4.5rem; }
.echo-dot { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: echo-breathe 2.4s ease-in-out infinite; }
.echo-arc { fill: none; stroke: var(--ink); stroke-width: 20; stroke-linecap: round; opacity: 0.16; animation: echo-arc 2.4s ease-in-out infinite; }
.echo-arc-2 { animation-delay: 0.28s; }
.echo-arc-thick { stroke-width: 30; }
.echo-reflect { stroke: var(--accent); stroke-width: 6; animation-delay: 0.56s; }
.echo-reflect-2 { animation-delay: 0.84s; }
.echo-mark { display: block; width: 100%; height: 100%; object-fit: contain; animation: echo-mark 2.4s ease-in-out infinite; }
.echo-ripple { fill: none; stroke: var(--accent); stroke-width: 5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: echo-ripple 2.4s ease-out infinite; }
.echo-ripple-late { animation-delay: 1.2s; }
@keyframes echo-breathe { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.12); } 40% { transform: scale(0.97); } }
@keyframes echo-arc { 0%, 12% { opacity: 0.16; } 30% { opacity: 1; } 62%, 100% { opacity: 0.16; } }
@keyframes echo-mark { 0%, 100% { transform: scale(0.94); opacity: 0.55; } 30% { transform: scale(1.04); opacity: 1; } }
@keyframes echo-ripple { 0% { opacity: 0.45; transform: scale(1); } 75% { opacity: 0; transform: scale(3.4); } 100% { opacity: 0; transform: scale(3.4); } }
/* JR monograms (loaders/jr_*.html): drawn from the top of the J to the
   tail of the R in the first 60% of the cycle, held, faded, redrawn; the
   mark pulses throughout. The J stem (245 units) and R (281) split the
   draw by length (0-28%, 28-60%); the serif (62) takes 0-7%. */
.jr-ink { stroke: var(--ink); }
.jr-rust { stroke: var(--accent); }
/* "1 2": a gap longer than the path, so an undrawn stroke has no dash
   touching either end (round caps would show there as dots). */
.jr-pen { stroke-dasharray: 1 2; stroke-dashoffset: 0; animation: 2.4s linear infinite; }
.jr-serif { animation-name: jr-serif; }
.jr-stem { animation-name: jr-stem; }
.jr-r { animation-name: jr-r; }
.jr-whole { animation-name: jr-whole; }
.jr-fade { animation: jr-fade 2.4s linear infinite; }
.jr-pulse { transform-box: fill-box; transform-origin: center; animation: jr-pulse 1.2s ease-in-out infinite; }
@keyframes jr-serif { 0% { stroke-dashoffset: 1; } 7%, 100% { stroke-dashoffset: 0; } }
@keyframes jr-stem { 0% { stroke-dashoffset: 1; } 28%, 100% { stroke-dashoffset: 0; } }
@keyframes jr-r { 0%, 28% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes jr-whole { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes jr-fade { 0% { opacity: 0; } 3%, 85% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes jr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .echo-dot, .echo-arc, .echo-ripple, .echo-mark, .jr-pen, .jr-fade, .jr-pulse { animation: none; }
  .echo-arc { opacity: 0.7; }
}