/* focusEDU whimsy — "commencement" lane. Page-specific moments: 404 cap toss, team portrait hang,
   contact envelope, Our Process route. Everything is scoped under .wm-*; decorative only. */

/* ---------- 404: the mortarboard lands on the "0" ---------- */
.wm-c404 { position: relative; height: 0; margin: 0; padding: 0; pointer-events: none; }
.wm-c404__fly {
  position: absolute; display: block;
  left: var(--wm-x, 50%); top: var(--wm-y, 2px);
  width: var(--wm-w, 4.25rem); margin-left: calc(var(--wm-w, 4.25rem) * -0.5);
  animation: wm-c404-fly 1.7s .35s both;
}
.wm-c404__spin {
  display: block; transform: rotate(-12deg); transform-origin: 50% 58%;
  animation: wm-c404-spin 1.7s .35s both;
}
.wm-c404__cap { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.wm-c404__board { fill: #132a4b; stroke: #eef2f8; stroke-width: 1.3; stroke-linejoin: round; }
.wm-c404__edge { fill: #0a1a33; stroke: #eef2f8; stroke-width: 1.1; stroke-linejoin: round; }
.wm-c404__skull { fill: #0c1d38; stroke: #eef2f8; stroke-width: 1.2; stroke-linejoin: round; }
.wm-c404__cord { fill: none; stroke: #d4232f; stroke-width: 1.5; stroke-linecap: round; }
.wm-c404__button, .wm-c404__knot, .wm-c404__fringe { fill: #d4232f; }
.wm-c404__tassel {
  transform-box: fill-box; transform-origin: 50% 0;
  transform: rotate(12deg);           /* hangs plumb while the cap sits at -12deg */
  animation: wm-c404-tassel 1.9s 1.6s both;
}
@keyframes wm-c404-fly {
  0%   { transform: translate(-34px, 96px); opacity: 0; animation-timing-function: cubic-bezier(.2, .75, .35, 1); }
  10%  { opacity: 1; }
  42%  { transform: translate(-9px, -118px); animation-timing-function: cubic-bezier(.55, 0, .85, .45); }
  74%  { transform: translate(0, 3px); animation-timing-function: ease-out; }
  83%  { transform: translate(0, -7px); animation-timing-function: ease-in; }
  91%  { transform: translate(0, 0); }
  96%  { transform: translate(0, -1.5px); }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes wm-c404-spin {
  0%   { transform: rotate(-40deg); animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  74%  { transform: rotate(700deg); animation-timing-function: ease-out; }
  84%  { transform: rotate(713deg); }
  92%  { transform: rotate(706deg); }
  100% { transform: rotate(708deg); } /* = -12deg */
}
@keyframes wm-c404-tassel {
  0%   { transform: rotate(12deg); animation-timing-function: ease-out; }
  14%  { transform: rotate(44deg); animation-timing-function: ease-in-out; }
  34%  { transform: rotate(-10deg); animation-timing-function: ease-in-out; }
  54%  { transform: rotate(26deg); animation-timing-function: ease-in-out; }
  72%  { transform: rotate(5deg); animation-timing-function: ease-in-out; }
  88%  { transform: rotate(15deg); }
  100% { transform: rotate(12deg); }
}
.wm-c404-line {
  margin: -1.15rem auto 1.9rem; color: #cbd5e1; font-size: 1rem; font-weight: 300;
  font-style: italic; letter-spacing: .01em;
}

/* ---------- Team: portraits hung on a picture wire, settling upright ---------- */
.team-card.wm-hang { position: relative; overflow: visible; }
.team-card.wm-hang > .aspect-square { border-radius: .75rem .75rem 0 0; }
.wm-hang--solo { position: relative; overflow: visible !important; }
.wm-hang--solo > img, .wm-hang--solo > div { border-radius: .75rem; }
.wm-hang::before {
  content: ""; position: absolute; left: 50%; top: -16px; width: 96px; height: 16px; margin-left: -48px;
  pointer-events: none;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 16'%3E%3Cpath d='M14 16.5 48 3.6 82 16.5' fill='none' stroke='%23a3adbd' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='48' cy='3.6' r='2.8' fill='%23848fa2'/%3E%3Ccircle cx='47.1' cy='2.7' r='.95' fill='%23fff' opacity='.8'/%3E%3C/svg%3E");
}
.wm-hang { transform-origin: 50% -12.4px; }
.wm-hang.wm-hang-in { animation: wm-hang-in 1.6s ease-in-out both; }
.wm-hang:not(.wm-hang-in):hover,
.wm-hang:not(.wm-hang-in):focus-visible { animation: wm-hang-sway 1.15s ease-in-out; }
@keyframes wm-hang-in {
  0%   { transform: none; }
  16%  { transform: rotate(-1.8deg); }
  38%  { transform: rotate(1.2deg); }
  58%  { transform: rotate(-.65deg); }
  76%  { transform: rotate(.28deg); }
  90%  { transform: rotate(-.08deg); }
  100% { transform: none; }
}
@keyframes wm-hang-sway {
  0%   { transform: none; }
  24%  { transform: rotate(1deg); }
  52%  { transform: rotate(-.55deg); }
  78%  { transform: rotate(.2deg); }
  100% { transform: none; }
}

/* ---------- Contact: a sealed envelope beside the contact details ---------- */
.wm-mail { position: relative; height: 0; margin: 0; padding: 0; pointer-events: none;
  container-type: inline-size; --wm-mw: 176px; }
.wm-mail__env {
  position: absolute; right: 1rem; top: calc(6.3rem - var(--wm-mw) * .34); width: var(--wm-mw);
  transition: transform .5s cubic-bezier(.3, 1.45, .5, 1);
}
.wm-mail__card { transform: rotate(-4deg); transform-origin: 50% 60%; }
.wm-mail__card svg { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 6px 9px rgba(15, 34, 64, .13)); }
.wm-mail__seal { transform-box: fill-box; transform-origin: 50% 50%; }
.wm-mail__ripple { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
@container (max-width: 519px) { .wm-mail__env { --wm-mw: 128px; right: .5rem; } }
@container (max-width: 419px) { .wm-mail__env { --wm-mw: 100px; right: 0; } }
@container (max-width: 339px) { .wm-mail__env { --wm-mw: 84px; } }
@container (max-width: 309px) { .wm-mail__env { display: none; } }
@supports not (container-type: inline-size) { .wm-mail { display: none; } } /* no safe sizing: skip it */
.wm-mail:has(~ .space-y-5 a:hover) .wm-mail__env,
.wm-mail:has(~ .space-y-5 a:focus-visible) .wm-mail__env { transform: translateY(-5px) rotate(3deg); }
.wm-mail.is-in .wm-mail__card { animation: wm-mail-hop 1.15s ease-in-out .15s; }
.wm-mail.is-in .wm-mail__seal { animation: wm-mail-press .6s ease-out 1.05s; }
.wm-mail.is-in .wm-mail__ripple { animation: wm-mail-ripple .9s ease-out 1.15s; }
@keyframes wm-mail-hop {
  0%   { transform: rotate(-4deg); }
  28%  { transform: translateY(-11px) rotate(1.5deg); }
  54%  { transform: translateY(0) rotate(-6deg); }
  72%  { transform: translateY(-3px) rotate(-3deg); }
  100% { transform: rotate(-4deg); }
}
@keyframes wm-mail-press {
  0% { transform: none; } 35% { transform: scale(1.14); } 70% { transform: scale(.95); } 100% { transform: none; }
}
@keyframes wm-mail-ripple {
  0% { opacity: 0; transform: scale(.7); } 25% { opacity: .5; } 100% { opacity: 0; transform: scale(1.75); }
}

/* ---------- Our Process: a campus route drawn from step to step ---------- */
.wm-route-host { position: relative; isolation: isolate; }
.wm-route { position: absolute; left: 0; top: 0; z-index: -1; margin: 0 !important; overflow: visible;
  pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.wm-route.is-ready { opacity: 1; }
.wm-route__base { fill: none; stroke: #b3bdcc; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .01 9; }
.wm-route__ink { fill: none; stroke: #b81321; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.wm-route__ring { fill: none; stroke: #b81321; stroke-width: 1.5; opacity: 0; transform-box: fill-box;
  transform-origin: 50% 50%; transform: scale(.82); transition: opacity .45s ease, transform .55s cubic-bezier(.3, 1.5, .5, 1); }
.wm-route__ring.is-on { opacity: .32; transform: none; }
.wm-route__walker { opacity: 0; transition: opacity .3s ease; }
.wm-route__walker.is-on { opacity: 1; }

/* ---------- Reduced motion: the composed, final state, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .wm-c404__fly, .wm-c404__spin, .wm-c404__tassel,
  .wm-hang, .wm-hang.wm-hang-in, .wm-hang:hover, .wm-hang:focus-visible,
  .wm-mail__card, .wm-mail__seal, .wm-mail__ripple { animation: none !important; }
  .wm-mail__env, .wm-route, .wm-route__ring, .wm-route__walker { transition: none !important; }
  .wm-mail:has(~ .space-y-5 a:hover) .wm-mail__env,
  .wm-mail:has(~ .space-y-5 a:focus-visible) .wm-mail__env { transform: none; }
}