/* Logo whimsy lane (prefix al-). Generic: works for any school whose logo.svg was made by
   whimsy/logo/tools/vectorize_logo.py (groups .al-mark > .al-piece[data-role], .al-word > .al-line > .al-ch).
   No colours here: the logo keeps its own fills. Motion = transform + opacity only.
   States:  html.al-intro   first page of the session, set by the inline head snippet before first paint
            .al-host        the header .brand-link once the inline SVG overlay is in place
            .al-logo.al-play  the one-time intro is running                                              */

/* Until the intro takes over, hide the header logo image (first page of a session only). Failsafe: if the
   script never arrives, the image fades back in on its own after 2.6s. */
html.al-intro #site-header .brand-link .brand-logo { opacity: 0; animation: al-failsafe .3s ease 2.6s forwards; }
@keyframes al-failsafe { to { opacity: 1; } }

.al-host { position: relative; }
.al-host .brand-logo.al-img-off { visibility: hidden; animation: none; }
.al-logo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; display: block;
}
.al-logo .al-piece, .al-logo .al-ch, .al-logo .al-echo, .al-logo .al-rule { transform-box: fill-box; }
.al-logo .al-rule { transform-origin: 50% 0; }
.al-logo .al-echo { opacity: 0; }
.al-logo .al-ch { transform-origin: 50% 100%; }

/* ---------- the intro (plays once per session) ---------- */
.al-logo.al-play .al-piece[data-role="palm"] { animation: al-press .68s cubic-bezier(.3, .7, .35, 1) var(--al-d, 0ms) both; }
.al-logo.al-play .al-echo { animation: al-echo .7s cubic-bezier(.2, .7, .3, 1) var(--al-d, 0ms) both; }
.al-logo.al-play .al-piece[data-role="digit"] { animation: al-dab .5s cubic-bezier(.25, .8, .35, 1.15) var(--al-d, 0ms) both; }
.al-logo.al-play .al-rule { animation: al-rule .5s cubic-bezier(.3, .7, .3, 1) var(--al-d, 0ms) both; }
.al-logo.al-play .al-line:first-child .al-ch { animation: al-settle .56s cubic-bezier(.3, .75, .4, 1) var(--al-d, 0ms) both; }
.al-logo.al-play .al-line:not(:first-child) .al-ch { animation: al-stamp .52s cubic-bezier(.3, .8, .4, 1.1) var(--al-d, 0ms) both; }

/* the hand comes down onto the page, squashes into the paint, settles */
@keyframes al-press {
  0%   { opacity: 0; transform: translateY(-8%) scale(1.42) rotate(-9deg); }
  38%  { opacity: 1; transform: translateY(0) scale(.9) rotate(2deg); }
  62%  { transform: scale(1.05) rotate(-1deg); }
  82%  { transform: scale(.985); }
  100% { opacity: 1; transform: none; }
}
/* a wet ring of the same paint spreads out from under the palm as it lands (a copy of the palm, its own colour) */
@keyframes al-echo {
  0%   { opacity: 0; transform: scale(.96); }
  12%  { opacity: .38; }
  100% { opacity: 0; transform: scale(1.3); }
}
/* each finger and the thumb squeeze out of the palm like paint */
@keyframes al-dab {
  0%   { opacity: 0; transform: scale(.25); }
  30%  { opacity: 1; }
  62%  { transform: scale(1.1); }
  100% { opacity: 1; transform: none; }
}
/* a divider between mark and wordmark (some logos) is drawn down like a crayon line */
@keyframes al-rule {
  0%   { opacity: 0; transform: scaleY(0); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* first line: letters drop in and settle on their feet, one by one */
@keyframes al-settle {
  0%   { opacity: 0; transform: translateY(-55%) rotate(-12deg); }
  45%  { opacity: 1; }
  68%  { transform: translateY(6%) rotate(3deg) scaleY(.92); }
  100% { opacity: 1; transform: none; }
}
/* following lines: letters are stamped down like blocks */
@keyframes al-stamp {
  0%   { opacity: 0; transform: translateY(-14%) scale(1.25); }
  22%  { opacity: 1; }
  66%  { transform: scaleX(1.04) scaleY(.94); }
  100% { opacity: 1; transform: none; }
}

/* ---------- hover / keyboard focus: the hand waves hello, the first line ripples ---------- */
@media (hover: hover) {
  .al-host:hover .al-logo:not(.al-play) .al-piece[data-role="digit"] { animation: al-wave .95s ease-in-out var(--al-h, 0ms) 1 both; }
  .al-host:hover .al-logo:not(.al-play) .al-piece[data-role="palm"] { animation: al-squish .95s ease-in-out 1 both; }
  .al-host:hover .al-logo:not(.al-play) .al-line:first-child .al-ch { animation: al-ripple .6s ease-in-out var(--al-h, 0ms) 1 both; }
}
.al-host:focus-visible .al-logo:not(.al-play) .al-piece[data-role="digit"] { animation: al-wave .95s ease-in-out var(--al-h, 0ms) 1 both; }
.al-host:focus-visible .al-logo:not(.al-play) .al-piece[data-role="palm"] { animation: al-squish .95s ease-in-out 1 both; }
.al-host:focus-visible .al-logo:not(.al-play) .al-line:first-child .al-ch { animation: al-ripple .6s ease-in-out var(--al-h, 0ms) 1 both; }

@keyframes al-wave {
  0%, 100% { transform: none; }
  25% { transform: rotate(-7deg); }
  55% { transform: rotate(5deg); }
  80% { transform: rotate(-2deg); }
}
@keyframes al-squish {
  0%, 100% { transform: none; }
  30% { transform: scale(1.04, .96); }
  60% { transform: scale(.98, 1.02); }
}
@keyframes al-ripple {
  0%, 100% { transform: none; }
  45% { transform: translateY(-9%); }
}

/* Reduced motion: no intro, no wave. The script never builds the overlay, the static SVG image shows. */
@media (prefers-reduced-motion: reduce) {
  html.al-intro #site-header .brand-link .brand-logo { opacity: 1; animation: none; }
  .al-logo .al-piece, .al-logo .al-ch, .al-logo .al-echo, .al-logo .al-rule { animation: none !important; }
}