/* SPACE logo hover effects, ported from the main SPACE Studios site (styles.css).
   The logo PNG is black, so it is inverted to white here. The orbit path is drawn for a
   132px-wide logo, so the logo is built at 132px and scaled down to fit the bar. */
.oo-logo { display: block; width: 80px; height: 26px; }
.oo-logo .mark { width: 132px; transform: scale(.606); transform-origin: 0 0; }
.oo-logo .mark img { width: 132px; height: auto; filter: invert(1); }

/* Logo hover: a disc crosses the logo like an eclipse, inverting what it covers,
   and each letter lifts as the disc passes. The logo is one PNG shown five times,
   each copy clipped to one piece (disc and S, then P, A, C, E). */
.mark { display: block; position: relative; }
.mark img { position: absolute; top: 0; left: 0; }
.mark img:first-child { position: relative; clip-path: inset(0 64.67% 0 0); }
.mark img:first-child { transform-origin: 16.33% 50%; }
/* --at: lift timing in the eclipse. --pass: dip timing in the orbit.
   --dx: distance to the planet's center. --n: stagger in the black hole. */
.mark .p { clip-path: inset(0 49% 0 35.33%);    transform-origin: 44% 50%; --at: 581ms; --pass: 824ms;  --dx: -27.9%; --n: 0ms; }
.mark .a { clip-path: inset(0 30.5% 0 51%);     transform-origin: 60% 50%; --at: 678ms; --pass: 905ms;  --dx: -43.7%; --n: 70ms; }
.mark .c { clip-path: inset(0 14.5% 0 69.5%);   transform-origin: 77% 50%; --at: 787ms; --pass: 994ms;  --dx: -60.7%; --n: 140ms; }
.mark .e { clip-path: inset(0 0 0 85.5%);       transform-origin: 94% 50%; --at: 909ms; --pass: 1094ms; --dx: -77.5%; --n: 210ms; }
.mark .eclipse {
  position: absolute; top: 0; left: 0;
  height: 100%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  pointer-events: none; visibility: hidden;
}
.oo-logo.playing .eclipse { visibility: visible; }

/* Effect 1: the eclipse crosses the word. */
.oo-logo.fx-cross .eclipse { animation: eclipse-cross 2000ms both; }
.oo-logo.fx-cross .p, .oo-logo.fx-cross .a, .oo-logo.fx-cross .c, .oo-logo.fx-cross .e { animation: eclipse-lift 640ms ease-in-out var(--at) both; }

/* Effect 2: two laps of a tilted oval around the word, smaller on the far side.
   The path is in pixels for the 132px logo. Letters dip on each near pass. */
.oo-logo.fx-orbit .eclipse {
  offset-path: path("M145.56 1.72 A82 13 -14 1 0 -13.56 41.4 A82 13 -14 1 0 145.56 1.72 Z");
  animation: orbit-path 2800ms linear both, orbit-depth 2800ms ease-in-out both;
}
.oo-logo.fx-orbit .p, .oo-logo.fx-orbit .a, .oo-logo.fx-orbit .c, .oo-logo.fx-orbit .e { animation: orbit-dip 1960ms ease-in-out var(--pass) both; }

/* Effect 3: the letters spiral into the planet, it inverts, and they burst back out. */
.oo-logo.fx-hole .eclipse { animation: hole-core 2400ms ease-in-out both; }
.oo-logo.fx-hole img:first-child { animation: hole-gulp 2400ms ease-in-out both; }
.oo-logo.fx-hole .p, .oo-logo.fx-hole .a, .oo-logo.fx-hole .c, .oo-logo.fx-hole .e { animation: hole-letter 2400ms var(--n) both; }

@keyframes orbit-path { from { offset-distance: 0%; } to { offset-distance: 200%; } }
@keyframes orbit-depth {
  0%    { transform: scale(0); }
  12.5% { transform: scale(.5); }
  25%   { transform: scale(.66); }
  37.5% { transform: scale(.95); }
  50%   { transform: scale(.66); }
  62.5% { transform: scale(.5); }
  75%   { transform: scale(.66); }
  87.5% { transform: scale(.95); }
  100%  { transform: scale(0); }
}
@keyframes orbit-dip {
  0%, 28.57%, 71.43%, 100% { transform: translateY(0) rotate(0deg); }
  10%, 81.43% { transform: translateY(7%) rotate(3deg); }
  20%, 91.43% { transform: translateY(-2%) rotate(-1deg); }
}
@keyframes hole-letter {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
  28%  { transform: translate(calc(var(--dx) * .55), -10%) rotate(-70deg) scale(.7); animation-timing-function: cubic-bezier(.4, .3, .9, .7); }
  38%, 62% { transform: translate(var(--dx), 0) rotate(-240deg) scale(0); animation-timing-function: cubic-bezier(.1, .8, .3, 1); }
  84%  { transform: translate(calc(var(--dx) * -.05), 0) rotate(8deg) scale(1.06); animation-timing-function: ease-in-out; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes hole-core {
  0%, 44% { transform: scale(0); }
  54%, 62% { transform: scale(1); }
  72%, 100% { transform: scale(0); }
}
@keyframes hole-gulp {
  0%, 32% { transform: scale(1); }
  42% { transform: scale(1.1); }
  52% { transform: scale(1); }
  62% { transform: scale(.92); }
  70% { transform: scale(1.06); }
  82%, 100% { transform: scale(1); }
}

/* Starts past the left edge of the screen, stops just right of the E, then shrinks away. */
@keyframes eclipse-cross {
  0%   { transform: translateX(-180%) scale(1); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  78%  { transform: translateX(325%) scale(1); }
  82%  { transform: translateX(325%) scale(1); animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  100% { transform: translateX(325%) scale(0); }
}
@keyframes eclipse-lift {
  0%, 100% { transform: none; }
  35% { transform: translateY(-9%) rotate(-4deg); }
  70% { transform: translateY(2%) rotate(1deg); }
}