/* Generated by scripts/build_art.py from art/logo/logo.css. Do not edit by hand. */

/* The official Eduport logo, brought to life (assets/logo.js inlines logo.svg).
   Intro, about 2.1 s, played once: the letters pop up one after another on a
   soft spring, the graduation cap drops onto the "e", bounces and rocks while
   its tassel swings, then an orange swoosh writes itself underneath. After
   that the logo rests completely still. Hover (mouse) or tap: a short wiggle.
   Changing the theme sweeps the new ink colour from the cap across "port".
   Everything is class driven, so the page's CSP (no inline styles) holds.

   Timeline (from --lg-delay): letters 0-1.06 s, cap 0.52-1.32 s (lands at
   0.82 s), rocking 0.82-1.62 s, tassel 0.52-1.92 s, swoosh 1.10-1.62 s.
   logo.js waits for the tassel ("lg-swing") to end before "logo:done". */

:root { --logo-ink: #f4f4f5; }
:root[data-theme="light"] { --logo-ink: #18181b; }

.lg {
  --lg-delay: 0.15s;
  /* a soft spring (damping 0.58): about 11% overshoot, settled by the end */
  --lg-spring: cubic-bezier(0.3, 1.4, 0.55, 1);
  display: block;
  width: 220px;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
@supports (animation-timing-function: linear(0, 1)) {
  .lg {
    --lg-spring: linear(0, 0.032, 0.115, 0.231, 0.362, 0.498, 0.628, 0.747, 0.849, 0.933, 0.999, 1.047, 1.08,
      1.098, 1.106, 1.105, 1.098, 1.087, 1.074, 1.059, 1.045, 1.032, 1.02, 1.01, 1.003, 0.997,
      0.993, 0.99, 0.989, 0.989, 0.989, 0.99, 0.992, 0.993, 0.995, 0.996, 1);
  }
}
@media (max-width: 640px) {
  .lg { width: 176px; }
}
.lg svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- colour -------------------------------------------------------------------- */
.lg .lg-edu, .lg .lg-swoosh { fill: var(--logo-brand, #FB6514); }
.lg .lg-port, .lg .lg-cap { fill: var(--logo-ink); transition: fill 0.45s ease var(--lg-wave, 0s); }
/* a theme change sweeps left to right: the cap first, then p, o, r, t */
.lg .lg-p { --lg-wave: 0.08s; }
.lg .lg-o { --lg-wave: 0.14s; }
.lg .lg-r { --lg-wave: 0.2s; }
.lg .lg-t { --lg-wave: 0.26s; }

/* --- rig: pivots in viewBox units ------------------------------------------------ */
.lg .lg-l, .lg .lg-e-shape, .lg .lg-cap, .lg .lg-cap-tilt, .lg .lg-tassel { transform-box: view-box; }
.lg .lg-l { transform-origin: var(--lg-x) 125.4px; } /* letters stand on the baseline */
.lg .lg-e { --i: 0; --lg-x: 87.4px; }
.lg .lg-d { --i: 1; --lg-x: 178.6px; }
.lg .lg-u { --i: 2; --lg-x: 269.8px; }
.lg .lg-p { --i: 3; --lg-x: 360.6px; }
.lg .lg-o { --i: 4; --lg-x: 451.8px; }
.lg .lg-r { --i: 5; --lg-x: 523px; }
.lg .lg-t { --i: 6; --lg-x: 579.6px; }
.lg .lg-e-shape { transform-origin: 87.4px 125.4px; }
.lg .lg-cap, .lg .lg-cap-tilt { transform-origin: 84px 42px; } /* where the cap sits on the "e" */
.lg .lg-tassel { transform-origin: 20.72px 52.77px; } /* top of the cord */

/* --- intro ------------------------------------------------------------------------ */
.lg.is-intro .lg-l {
  animation: lg-pop 0.64s var(--lg-spring) both, lg-in 0.24s ease-out both;
  animation-delay: calc(var(--lg-delay) + var(--i) * 70ms);
}
@keyframes lg-pop {
  from { transform: translateY(34px) scale(0.55); }
  to { transform: translateY(0) scale(1); }
}
@keyframes lg-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The cap falls (straightening as it comes), squashes into the "e", hops once
   and settles. Each step carries its own easing: gravity in, bounce out. */
.lg.is-intro .lg-cap {
  animation: lg-drop 0.8s linear both, lg-in 0.16s ease-out both;
  animation-delay: calc(var(--lg-delay) + 0.52s);
}
@keyframes lg-drop {
  0% { transform: translateY(-118px) rotate(-16deg) scale(1, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.95, 0.5); }
  37.5% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  43.75% { transform: translateY(5px) rotate(0deg) scale(1.07, 0.88); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  58.75% { transform: translateY(-15px) rotate(0deg) scale(0.985, 1.025); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  70% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  75% { transform: translateY(2px) rotate(0deg) scale(1.025, 0.955); animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  84% { transform: translateY(-2px) rotate(0deg) scale(0.995, 1.01); animation-timing-function: ease-in-out; }
  92%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}

/* after the first landing the cap rocks on the "e" a few times */
.lg.is-intro .lg-cap-tilt {
  animation: lg-rock 0.8s ease-in-out both;
  animation-delay: calc(var(--lg-delay) + 0.82s);
}
@keyframes lg-rock {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
  14% { transform: rotate(4.5deg); }
  34% { transform: rotate(-3deg); }
  54% { transform: rotate(1.6deg); }
  72% { transform: rotate(-0.7deg); }
  88% { transform: rotate(0.25deg); }
  100% { transform: rotate(0deg); }
}

/* the tassel hangs straight down during the fall, then swings out and settles */
.lg.is-intro .lg-tassel {
  animation: lg-swing 1.4s ease-in-out both;
  animation-delay: calc(var(--lg-delay) + 0.52s);
}
@keyframes lg-swing {
  0% { transform: rotate(18deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  21.4% { transform: rotate(4deg); animation-timing-function: cubic-bezier(0.2, 0.5, 0.4, 1); }
  31% { transform: rotate(-16deg); }
  45% { transform: rotate(11deg); }
  59% { transform: rotate(-6.5deg); }
  72% { transform: rotate(3.5deg); }
  85% { transform: rotate(-1.4deg); }
  94% { transform: rotate(0.4deg); }
  100% { transform: rotate(0deg); }
}

/* the "e" gives a little under the cap, twice */
.lg.is-intro .lg-e-shape {
  animation: lg-squash 0.56s ease-in-out both;
  animation-delay: calc(var(--lg-delay) + 0.8s);
}
@keyframes lg-squash {
  0%, 3.5% { transform: scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  12.5% { transform: scale(1.035, 0.91); }
  30% { transform: scale(0.99, 1.02); }
  48% { transform: scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  57% { transform: scale(1.012, 0.975); }
  70% { transform: scale(0.998, 1.004); }
  82%, 100% { transform: scale(1, 1); }
}

/* the swoosh: a pen stroke (pathLength 1) reveals the brush shape */
.lg.is-intro .lg-sw-pen {
  stroke-dasharray: 1 2;
  animation: lg-draw 0.52s cubic-bezier(0.45, 0, 0.25, 1) both;
  animation-delay: calc(var(--lg-delay) + 1.1s);
}
@keyframes lg-draw {
  from { stroke-dashoffset: 1.001; }
  to { stroke-dashoffset: 0; }
}

/* --- held: the entrance waits before its first frame (logo.js initLogo(host, { hold }))
   until start(). On a first visit Edu flies in and the letters pop up in its wake. Placed
   after the intro rules, whose animation shorthand would otherwise set it running. -------- */
.lg.is-held.is-intro * { animation-play-state: paused; }

/* --- wiggle (hover, tap, theme change): the cap tips, the letters bob ------------- */
.lg.is-wiggle .lg-l {
  animation: lg-bob 0.56s linear both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes lg-bob {
  0% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  30% { transform: translateY(-12px) scale(0.97, 1.045); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  58% { transform: translateY(1.5px) scale(1.03, 0.96); animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); }
  78% { transform: translateY(-1px) scale(0.995, 1.008); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) scale(1, 1); }
}
.lg.is-wiggle .lg-cap { animation: lg-tip 0.8s linear both; }
@keyframes lg-tip {
  0% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(0.25, 0.7, 0.4, 1); }
  28% { transform: translateY(-16px) rotate(-11deg) scale(1, 1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.45); }
  50% { transform: translateY(2px) rotate(1.5deg) scale(1.04, 0.93); animation-timing-function: cubic-bezier(0.25, 0.7, 0.4, 1); }
  66% { transform: translateY(-2px) rotate(-1.2deg) scale(0.995, 1.01); animation-timing-function: ease-in-out; }
  82% { transform: translateY(0) rotate(0.4deg) scale(1, 1); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}
.lg.is-wiggle .lg-tassel { animation: lg-flick 1s ease-in-out both; }
@keyframes lg-flick {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
  18% { transform: rotate(16deg); }
  38% { transform: rotate(-12deg); }
  56% { transform: rotate(7deg); }
  72% { transform: rotate(-3.5deg); }
  86% { transform: rotate(1.2deg); }
  100% { transform: rotate(0deg); }
}
.lg.is-wiggle .lg-e-shape { animation: lg-thud 0.36s ease-out 0.38s both; }
@keyframes lg-thud {
  0% { transform: scale(1, 1); }
  14% { transform: scale(1.025, 0.94); }
  45% { transform: scale(0.995, 1.012); }
  75%, 100% { transform: scale(1, 1); }
}

/* --- reduced motion: the finished logo, at once ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lg, .lg * { animation: none !important; }
  .lg .lg-sw-pen { stroke-dasharray: none; }
}