/* ═══════════════════════════════════════════════════════════════════════
   THE NINE SIGNS — how they are drawn, and how they move

   The drawings are in signs.js; this is the only place their motion is
   described. Three surfaces perform them now — the owl's chest on the
   film, the navbar on every other page, and the procession's still
   fallback when motion is turned off — and a sign that moved differently
   in the navbar than on the film would be two signs.

   TWO VARIABLES DO ALL THE WORK.

     --sp   the tempo. 1 is a hover: the whole performance inside a
            second, because a hover that outlasts the pointer is a
            hover nobody sees the end of. On the owl's chest it is 2.6,
            because there the sign has half a minute and the film is
            not in a hurry.
     --d    each stroke's place in the order, carried on the stroke
            itself in signs.js. Multiplied by the tempo, so the stagger
            stretches with the performance instead of bunching at the
            front of a slow one.

   The sign takes its colour from whatever it is standing in, so the
   navbar can dim it and the chest can hold it white without either
   knowing about the other.
   ═══════════════════════════════════════════════════════════════════════ */

.sm-sign { display: block; overflow: visible; }
.sm-sign * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sm-sign .sm-fill { fill: currentColor; stroke: none; }

/* ── A SIGN AT REST IS A FINISHED DRAWING ──
   This was the other way round at first: every stroke sat in its
   not-yet-performed state -- undrawn, or at zero opacity -- and waited
   for something to run it. That is right on the film, where the sign is
   hidden until its turn comes anyway. In the navbar it meant six of the
   nine were simply INVISIBLE until a pointer happened to cross them,
   which is a navigation you cannot see.

   So the resting state is the finished drawing, and each performance
   carries its own beginning in its keyframes. The film hides the whole
   sign until its turn regardless, so it loses nothing. */
.sm-sign .sm-draw { stroke-dasharray: var(--len, 120); }
.sm-sign .sm-pop { transform-box: fill-box; transform-origin: center; }

/* ── THE PERFORMANCE ──
   `.sm-go` on the sign runs it; `.sm-hover` on an ancestor runs it when
   a pointer or a keyboard arrives, which is the navbar's whole trick. */
.sm-go .sm-draw,
.sm-hover:hover .sm-sign .sm-draw,
.sm-hover:focus-visible .sm-sign .sm-draw {
  animation: sm-draw calc(900ms * var(--sp, 1)) cubic-bezier(.3, .9, .35, 1) both;
  animation-delay: calc(var(--d, 0ms) * var(--sp, 1));
}
@keyframes sm-draw {
  from { stroke-dashoffset: var(--len, 120) }
  to { stroke-dashoffset: 0 }
}

.sm-go .sm-pop,
.sm-hover:hover .sm-sign .sm-pop,
.sm-hover:focus-visible .sm-sign .sm-pop {
  animation: sm-pop calc(520ms * var(--sp, 1)) cubic-bezier(.2, .9, .3, 1) both;
  animation-delay: calc(var(--d, 0ms) * var(--sp, 1));
}
@keyframes sm-pop {
  0% { opacity: 0; transform: scale(.4) }
  100% { opacity: 1; transform: scale(1) }
}

.sm-go .sm-lift,
.sm-hover:hover .sm-sign .sm-lift,
.sm-hover:focus-visible .sm-sign .sm-lift {
  animation: sm-rise calc(900ms * var(--sp, 1)) cubic-bezier(.2, .85, .3, 1) both;
  animation-delay: calc(var(--d, 0ms) * var(--sp, 1));
}
@keyframes sm-rise {
  0% { opacity: 0; transform: translateY(9px) }
  100% { opacity: 1; transform: none }
}

/* THE STORY: out, and the whole way back — the film's own thesis */
.sm-go .sm-there,
.sm-hover:hover .sm-sign .sm-there,
.sm-hover:focus-visible .sm-sign .sm-there {
  animation: sm-there-back calc(2600ms * var(--sp, 1)) cubic-bezier(.45, 0, .55, 1) both;
  animation-delay: calc(500ms * var(--sp, 1));
}
@keyframes sm-there-back {
  0% { transform: translateX(-13px); opacity: 0 }
  12% { opacity: 1 }
  50% { transform: translateX(13px); opacity: 1 }
  88% { opacity: 1 }
  100% { transform: translateX(-13px); opacity: 0 }
}

/* ── NOTHING IS HIDDEN BEHIND A MOVEMENT SOMEBODY ASKED NOT TO SEE ──
   Every sign is simply already finished. */
@media (prefers-reduced-motion: reduce) {
  .sm-sign .sm-draw { stroke-dashoffset: 0 }
  .sm-sign .sm-pop, .sm-sign .sm-lift, .sm-sign .sm-there { opacity: 1; transform: none }
  .sm-go .sm-draw, .sm-go .sm-pop, .sm-go .sm-lift, .sm-go .sm-there,
  .sm-hover:hover .sm-sign *, .sm-hover:focus-visible .sm-sign * { animation: none }
}