/* JerryJerry brand (ROU-63): header lockup and the launch splash.
 * Markup is inline in index.html (tools/build-brand.mjs writes it between the
 * <!--jj:...--> markers). Colours are --jj-brand-* from tokens.css.
 *
 * Splash timeline, 1.45 s in total, never blocks input (pointer-events: none):
 *   0.00-0.62  light trail draws in from the end of its hook, glowing
 *   0.16-0.66  the white J writes down into its hook
 *   0.00-0.80  the mark settles from 92 % to 100 %
 *   0.48-1.05  the wordmark letters rise in, 28 ms apart; the echo "jerry" last
 *   1.15-1.45  the splash fades out over the map
 * Reduced motion: no drawing or movement; the logo shows still and fades. */

.jj-mark { display: block; height: 100%; width: auto; overflow: visible; }
.jj-mark-j { stroke: var(--jj-brand-ink); }
.jj-wordmark { display: block; height: 100%; width: auto; overflow: visible; }
.jj-wm-a { color: var(--jj-brand-ink); }
.jj-wm-b { color: var(--jj-brand-echo); }
.jj-wordmark path { stroke: currentColor; }
.jj-wordmark circle { fill: currentColor; }

/* ---------- Header brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; height: 30px; }
.brand .jj-mark { height: 30px; }
.brand .jj-wordmark { height: 20px; margin-top: 2px; }

/* ---------- Splash ---------- */
.jj-splash {
  position: fixed; inset: 0; z-index: calc(var(--jj-z-dialog) + 10);
  display: grid; place-items: center;
  background: radial-gradient(120% 70% at 50% 38%, var(--jj-brand-glow), transparent 60%), var(--jj-bg);
  pointer-events: none;
  animation: jj-splash-out 300ms var(--jj-ease-accel) 1150ms forwards;
}
.jj-splash-in { display: flex; flex-direction: column; align-items: center; gap: 22px; animation: jj-settle 800ms var(--jj-ease-decel) both; }
.jj-splash .jj-mark { height: 112px; }
.jj-splash .jj-wordmark { height: 34px; }

.jj-splash .jj-mark-trail, .jj-splash .jj-mark-j { stroke-dasharray: 1 2; }
.jj-splash .jj-mark-trail {
  stroke-dashoffset: -1;
  animation: jj-draw 620ms var(--jj-ease-decel) forwards, jj-glow 1100ms ease-out both;
}
.jj-splash .jj-mark-j { stroke-dashoffset: 1; animation: jj-draw 500ms var(--jj-ease-decel) 160ms forwards; }
.jj-splash .jj-wordmark g {
  opacity: 0;
  animation: jj-rise 340ms var(--jj-ease-decel) forwards;
  animation-delay: calc(480ms + var(--i) * 28ms);
}

@keyframes jj-draw { to { stroke-dashoffset: 0; } }
@keyframes jj-glow {
  0% { filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 18px var(--jj-brand-trail-b)); }
  100% { filter: drop-shadow(0 0 6px var(--jj-brand-glow)); }
}
@keyframes jj-settle { from { transform: scale(0.92); } to { transform: none; } }
@keyframes jj-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes jj-splash-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .jj-splash { animation: jj-splash-out 200ms linear 500ms forwards; }
  .jj-splash-in, .jj-splash .jj-mark-trail, .jj-splash .jj-mark-j, .jj-splash .jj-wordmark g { animation: none; }
  .jj-splash .jj-mark-trail, .jj-splash .jj-mark-j { stroke-dasharray: none; stroke-dashoffset: 0; }
  .jj-splash .jj-wordmark g { opacity: 1; }
}