/* Trodelo Junction T-tap nav mark — shared CSS for every static
   landing page so the header logo is identical in size, color, and
   animation. Geometry lives inline in each page's <nav> SVG with
   `class="junction-mark"`; this file binds size/color and runs the
   canonical load animation.

   The animation is the static-HTML counterpart to AnimatedLogo in
   apps/web/app/marketing/page.tsx:
     1. Horizontal stroke draws left-to-right.
     2. Vertical stroke draws top-to-bottom (delayed).
     3. Three terminal squares pop in with spring easing, staggered.
     4. Center "tap" node fades + scales in last.
   Re-triggers on .nav-brand:hover by toggling the animation name.

   Periodic re-trigger (the React version's 30–300s random pulse) is
   not implemented here — keeping CSS simple. Load + hover is enough
   for static legal pages. */

.junction-mark {
  width: 22px;
  height: 22px;
  color: var(--accent);
  display: block;
  overflow: visible;
}

@keyframes junction-draw {
  from { stroke-dashoffset: 32; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
@keyframes junction-pop {
  from { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes junction-tap {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

.junction-mark line {
  stroke-dasharray: 32;
  stroke-dashoffset: 0;
  animation: junction-draw 0.65s ease-out both;
  transform-origin: 24px 15px;
}
.junction-mark line:nth-of-type(2) { animation-delay: 0.45s; }

.junction-mark rect {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: junction-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.junction-mark rect:nth-of-type(1) { animation-delay: 0.35s; }
.junction-mark rect:nth-of-type(2) { animation-delay: 0.50s; }
.junction-mark rect:nth-of-type(3) { animation-delay: 1.0s; }

.junction-mark circle {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: junction-tap 0.3s ease-out 1.15s both;
}

/* Hover replay — strip the animation property then immediately
   re-apply so the CSS animation engine restarts from frame 0. */
.nav-brand:hover .junction-mark line,
.nav-brand:hover .junction-mark rect,
.nav-brand:hover .junction-mark circle {
  animation: none;
}
.nav-brand:hover .junction-mark line   { animation: junction-draw 0.65s ease-out both; }
.nav-brand:hover .junction-mark line:nth-of-type(2) { animation-delay: 0.45s; }
.nav-brand:hover .junction-mark rect   { animation: junction-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.nav-brand:hover .junction-mark rect:nth-of-type(1) { animation-delay: 0.35s; }
.nav-brand:hover .junction-mark rect:nth-of-type(2) { animation-delay: 0.50s; }
.nav-brand:hover .junction-mark rect:nth-of-type(3) { animation-delay: 1.0s; }
.nav-brand:hover .junction-mark circle { animation: junction-tap 0.3s ease-out 1.15s both; }