@ibgib/space-gib 0.0.33 → 0.0.34

package/src/client/ui/component/cosmos-navigator/cosmos-navigator.css

@@ -0,0 +1,864 @@
+:host {
+  display: flex !important;
+  flex-direction: column !important;
+  flex: 1 !important;
+  position: relative !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  overflow: hidden;
+  background: transparent;
+  user-select: none;
+  font-family: inherit;
+  color: var(--text-color, #e0e0e0);
+}
+
+.cosmos-navigator-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* Starfield & Particle Canvas */
+.starfield-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  display: block;
+}
+
+/* =========================================================================
+   POLYCOSMOS STAGE (Zoom Level 1 & 2)
+   ========================================================================= */
+.polycosmos-stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+}
+
+.polycosmos-stage.hidden {
+  opacity: 0;
+  transform: scale(0.85);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+/* Singularity / Big Bang Button */
+.singularity-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.singularity-btn {
+  position: relative;
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(124, 92, 252, 0.8) 35%, rgba(15, 23, 42, 0.95) 70%);
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 50px rgba(124, 92, 252, 0.8), 0 0 100px rgba(56, 189, 248, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.9);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
+  padding: 0;
+  outline: none;
+}
+
+.singularity-btn:hover {
+  transform: scale(1.12);
+  box-shadow: 0 0 70px rgba(124, 92, 252, 1), 0 0 130px rgba(56, 189, 248, 0.7), inset 0 0 40px rgba(255, 255, 255, 1);
+}
+
+.singularity-btn:active {
+  transform: scale(0.96);
+}
+
+.singularity-core {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 0 20px #ffffff, 0 0 40px #a78bfa;
+  animation: singularity-pulse 2s ease-in-out infinite alternate;
+}
+
+.singularity-emoji {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.45rem;
+  line-height: 1;
+  pointer-events: none;
+  z-index: 4;
+  user-select: none;
+  animation: singularity-emoji-fluctuate 2s ease-in-out infinite alternate;
+}
+
+/* Compression / Gravitational collapse right before explosion - High velocity spinning firecracker */
+.singularity-btn.compressing {
+  pointer-events: none;
+  animation: singularity-compress 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.singularity-btn.compressing .singularity-ring,
+.singularity-btn.compressing .singularity-glow {
+  transition: transform 0.95s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease;
+  transform: scale(0.05);
+  opacity: 0;
+}
+
+.singularity-btn.compressing .singularity-core {
+  transition: transform 0.95s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease;
+  transform: scale(0.18);
+  opacity: 0.1;
+}
+
+.singularity-btn.compressing .singularity-emoji {
+  animation: singularity-emoji-spin-flare 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  filter: drop-shadow(0 0 18px rgba(251, 191, 36, 1)) drop-shadow(0 0 36px rgba(245, 158, 11, 0.95));
+}
+
+.singularity-btn.exploded {
+  animation: singularity-explode-burst 0.5s ease-out forwards;
+}
+
+.singularity-glow {
+  position: absolute;
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(167, 139, 250, 0.4) 0%, transparent 70%);
+  animation: singularity-glow-flare 3s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+
+.singularity-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px dashed rgba(255, 255, 255, 0.6);
+  pointer-events: none;
+}
+
+.ring-outer {
+  width: 130px;
+  height: 130px;
+  border-color: rgba(167, 139, 250, 0.5);
+  animation: ring-spin 18s linear infinite;
+}
+
+.ring-middle {
+  width: 115px;
+  height: 115px;
+  border-color: rgba(56, 189, 248, 0.6);
+  border-style: dotted;
+  animation: ring-spin-rev 12s linear infinite;
+}
+
+.ring-inner {
+  width: 100px;
+  height: 100px;
+  border-color: rgba(255, 255, 255, 0.7);
+  animation: ring-spin 8s linear infinite;
+}
+
+.singularity-label {
+  position: absolute;
+  bottom: -36px;
+  white-space: nowrap;
+  font-size: 0.88rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: #f1f5f9;
+  text-shadow: 0 0 12px rgba(124, 92, 252, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+}
+
+/* Orbit Track & Orbiting Cosmos Nodes */
+.orbit-track {
+  position: absolute;
+  width: 480px;
+  height: 480px;
+  border-radius: 50%;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.4s ease;
+}
+
+.orbit-track.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.orbit-ring-visual {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1.5px dashed rgba(124, 92, 252, 0.35);
+  animation: orbit-track-spin 140s linear infinite;
+  box-shadow: inset 0 0 40px rgba(124, 92, 252, 0.08), 0 0 40px rgba(124, 92, 252, 0.08);
+}
+
+.orbiting-cosmoses-container {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.orbit-cosmos-node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  background: rgba(18, 22, 38, 0.88);
+  border: 1.5px solid rgba(124, 92, 252, 0.55);
+  border-radius: 9999px;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #f8fafc;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(124, 92, 252, 0.3);
+  white-space: nowrap;
+}
+
+.orbit-cosmos-node:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+  border-color: rgba(167, 139, 250, 0.95);
+  box-shadow: 0 0 30px rgba(124, 92, 252, 0.7), 0 6px 24px rgba(0, 0, 0, 0.7);
+}
+
+.orbit-cosmos-node.is-active {
+  border-color: #38bdf8;
+  box-shadow: 0 0 25px rgba(56, 189, 248, 0.6), 0 4px 20px rgba(0, 0, 0, 0.6);
+}
+
+.orbit-cosmos-icon {
+  font-size: 1.25rem;
+  display: inline-block;
+  animation: galaxy-spin 25s linear infinite;
+}
+
+.orbit-cosmos-name {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #f8fafc;
+}
+
+.orbit-cosmos-badge {
+  background: rgba(124, 92, 252, 0.35);
+  border: 1px solid rgba(167, 139, 250, 0.4);
+  border-radius: 12px;
+  padding: 1px 7px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #c4b5fd;
+}
+
+/* =========================================================================
+   ACTIVE COSMOS STAGE (Zoom Level 3)
+   ========================================================================= */
+.active-cosmos-stage {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+}
+
+.active-cosmos-stage.hidden {
+  opacity: 0;
+  transform: scale(1.15);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.cosmos-node-wrapper {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  pointer-events: auto;
+  z-index: 5;
+}
+
+/* Node layout positions matching refined drift */
+.node-superspace-pos {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 6;
+  animation: cosmos-center-emerge 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.node-pitch-pos {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  animation: drift-pitch-to-top 18s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  z-index: 5;
+}
+
+.node-pitch-pos:hover {
+  animation-play-state: paused !important;
+}
+
+.node-identity-pos {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  animation: drift-identity-to-corner 18s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  z-index: 5;
+}
+
+.node-identity-pos:hover {
+  animation-play-state: paused !important;
+}
+
+.node-agent-pos {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  animation: drift-agent-to-corner 18s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  z-index: 5;
+}
+
+.node-agent-pos:hover {
+  animation-play-state: paused !important;
+}
+
+/* Node escaping / launched state (hidden in canvas while flying projectile is in flight) */
+.node-is-escaping {
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden !important;
+}
+
+/* Captions: initial nodes hidden until hover */
+.node-identity-pos .node-caption,
+.node-agent-pos .node-caption {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--clr-text-secondary, #b4c0d3);
+  margin-top: 0.35rem;
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.node-identity-pos:hover .node-caption,
+.node-agent-pos:hover .node-caption {
+  opacity: 1;
+}
+
+.cosmos-node-btn {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
+  border: 2px solid rgba(124, 92, 252, 0.6);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  cursor: pointer;
+  position: relative;
+  box-shadow: 0 0 24px rgba(124, 92, 252, 0.4), inset 0 0 15px rgba(124, 92, 252, 0.2);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  padding: 0;
+  outline: none;
+}
+
+.cosmos-node-btn:hover {
+  transform: scale(1.14);
+  border-color: rgba(167, 139, 250, 0.95);
+  box-shadow: 0 0 35px rgba(124, 92, 252, 0.8), inset 0 0 20px rgba(167, 139, 250, 0.4);
+}
+
+.pitch-node {
+  border-color: rgba(251, 191, 36, 0.75) !important;
+  box-shadow: 0 0 24px rgba(251, 191, 36, 0.45), inset 0 0 15px rgba(251, 191, 36, 0.25) !important;
+}
+
+.pitch-node:hover {
+  border-color: #fde047 !important;
+  box-shadow: 0 0 35px rgba(251, 191, 36, 0.85), inset 0 0 20px rgba(251, 191, 36, 0.45) !important;
+}
+
+.gold-pulse {
+  position: absolute;
+  inset: -6px;
+  border-radius: 50%;
+  border: 1.5px solid rgba(251, 191, 36, 0.6);
+  animation: gold-pulse-flare 3s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes gold-pulse-flare {
+
+  0%,
+  100% {
+    transform: scale(0.95);
+    opacity: 0.3;
+  }
+
+  50% {
+    transform: scale(1.18);
+    opacity: 0.85;
+  }
+}
+
+.galaxy-node {
+  width: 76px;
+  height: 76px;
+  font-size: 2.1rem;
+  background: radial-gradient(circle, rgba(124, 92, 252, 0.45) 0%, rgba(15, 23, 42, 0.95) 75%);
+  border: 2.5px solid rgba(167, 139, 250, 0.85);
+  box-shadow: 0 0 45px rgba(124, 92, 252, 0.65), inset 0 0 25px rgba(167, 139, 250, 0.5);
+}
+
+.galaxy-node .node-emoji {
+  display: inline-block;
+  animation: galaxy-spin 75s linear infinite;
+  transition: transform 0.3s ease;
+}
+
+.galaxy-orbit-ring {
+  position: absolute;
+  inset: -12px;
+  border-radius: 50%;
+  border: 1.5px dashed rgba(167, 139, 250, 0.5);
+  animation: galaxy-spin 60s linear infinite;
+  pointer-events: none;
+}
+
+.node-caption {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #cbd5e1;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 6px rgba(124, 92, 252, 0.7);
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.cosmos-temp-badge {
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: #c4b5fd;
+  background: rgba(124, 92, 252, 0.22);
+  border: 1px solid rgba(167, 139, 250, 0.45);
+  border-radius: 9999px;
+  padding: 2px 8px;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  box-shadow: 0 0 10px rgba(124, 92, 252, 0.25);
+  margin-top: 4px;
+  display: inline-block;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.cosmos-temp-badge.hidden {
+  display: none !important;
+}
+
+/* Superspace Satellites (Code Space & Text Space - Revolving in Stable Orbit around Cosmos) */
+.superspace-satellites {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  animation: orbit-satellites-spin 75s linear infinite;
+  z-index: 10;
+}
+
+.satellite-orbit-guide-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 270px;
+  height: 270px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 1px dashed rgba(56, 189, 248, 0.25);
+  box-shadow: 0 0 20px rgba(56, 189, 248, 0.06);
+  pointer-events: none;
+  animation: satellite-ring-emerge 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.satellite-wrapper {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  pointer-events: auto;
+  animation: orbit-satellites-counter-spin 75s linear infinite;
+  transform-origin: center center;
+}
+
+/* Hovering Code or Text satellite buttons (sub-menu items):
+   pauses the satellites orbital motion, the counter-rotation, AND the cosmos galaxy spin.
+   (Escaping drifting buttons are NOT paused. Hovering center cosmos does NOT pause anything.) */
+.active-cosmos-stage:has(.satellite-wrapper:hover) .superspace-satellites,
+.active-cosmos-stage:has(.satellite-wrapper:hover) .satellite-wrapper,
+.active-cosmos-stage:has(.satellite-wrapper:hover) .galaxy-node .node-emoji,
+.active-cosmos-stage:has(.satellite-wrapper:hover) .galaxy-orbit-ring,
+.active-cosmos-stage.satellites-hovered .superspace-satellites,
+.active-cosmos-stage.satellites-hovered .satellite-wrapper,
+.active-cosmos-stage.satellites-hovered .galaxy-node .node-emoji,
+.active-cosmos-stage.satellites-hovered .galaxy-orbit-ring {
+  animation-play-state: paused !important;
+}
+
+.sat-code-pos {
+  top: 0;
+  left: -135px;
+}
+
+.sat-notes-pos {
+  top: 0;
+  left: 135px;
+}
+
+.satellite-node-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
+  border: 2px solid rgba(56, 189, 248, 0.7);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.4rem;
+  cursor: pointer;
+  position: relative;
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.45);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  padding: 0;
+  outline: none;
+  animation: satellite-btn-emerge 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.satellite-node-btn:hover {
+  transform: scale(1.15);
+  border-color: rgba(125, 211, 252, 1);
+  box-shadow: 0 0 35px rgba(56, 189, 248, 0.85);
+}
+
+.satellite-caption {
+  font-size: 0.76rem;
+  font-weight: 600;
+  color: #94a3b8;
+  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
+  white-space: nowrap;
+}
+
+/* =========================================================================
+   ANIMATION KEYFRAMES
+   ========================================================================= */
+@keyframes singularity-pulse {
+  0% {
+    transform: scale(0.92);
+    opacity: 0.9;
+  }
+
+  100% {
+    transform: scale(1.12);
+    opacity: 1;
+  }
+}
+
+@keyframes singularity-emoji-fluctuate {
+  0% {
+    transform: translate(-50%, -50%) scale(0.85);
+    opacity: 0.12;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1.1);
+    opacity: 0.38;
+  }
+}
+
+@keyframes singularity-compress {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  20% {
+    transform: scale(0.88) rotate(90deg);
+  }
+
+  45% {
+    transform: scale(0.7) rotate(360deg);
+  }
+
+  70% {
+    transform: scale(0.48) rotate(900deg);
+  }
+
+  100% {
+    transform: scale(0.28) rotate(1800deg);
+  }
+}
+
+@keyframes singularity-emoji-spin-flare {
+  0% {
+    transform: translate(-50%, -50%) scale(1) rotate(0deg);
+    opacity: 0.8;
+  }
+
+  20% {
+    transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
+    opacity: 0.9;
+  }
+
+  50% {
+    transform: translate(-50%, -50%) scale(1.3) rotate(360deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: translate(-50%, -50%) scale(1.55) rotate(900deg);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1.8) rotate(1800deg);
+    opacity: 1;
+  }
+}
+
+@keyframes singularity-explode-burst {
+  0% {
+    transform: scale(0.28) rotate(1800deg);
+    opacity: 1;
+  }
+
+  35% {
+    transform: scale(3.5) rotate(2000deg);
+    opacity: 0.85;
+  }
+
+  100% {
+    transform: scale(5.5) rotate(2160deg);
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes singularity-glow-flare {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.4;
+  }
+
+  100% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+@keyframes ring-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ring-spin-rev {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+@keyframes galaxy-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes orbit-track-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes orbit-satellites-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes orbit-satellites-counter-spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes cosmos-center-emerge {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes satellite-ring-emerge {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes satellite-btn-emerge {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes drift-identity-to-corner {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+  }
+  5% {
+    transform: translate(calc(-50% + 140px), calc(-50% - 100px)) scale(1);
+  }
+  30% {
+    transform: translate(calc(-50% + 175px), calc(-50% - 125px)) scale(1);
+  }
+  65% {
+    transform: translate(calc(-50% + 195px), calc(-50% - 145px)) scale(1);
+  }
+  100% {
+    transform: translate(calc(-50% + 215px), calc(-50% - 165px)) scale(1);
+  }
+}
+
+@keyframes drift-agent-to-corner {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+  }
+  5% {
+    transform: translate(calc(-50% + 140px), calc(-50% + 105px)) scale(1);
+  }
+  30% {
+    transform: translate(calc(-50% + 175px), calc(-50% + 135px)) scale(1);
+  }
+  65% {
+    transform: translate(calc(-50% + 195px), calc(-50% + 155px)) scale(1);
+  }
+  100% {
+    transform: translate(calc(-50% + 215px), calc(-50% + 175px)) scale(1);
+  }
+}
+
+@keyframes drift-pitch-to-top {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+  }
+  5% {
+    transform: translate(-50%, calc(-50% - 140px)) scale(1);
+  }
+  30% {
+    transform: translate(calc(-50% + 35px), calc(-50% - 170px)) scale(1);
+  }
+  65% {
+    transform: translate(calc(-50% + 15px), calc(-50% - 195px)) scale(1);
+  }
+  100% {
+    transform: translate(-50%, calc(-50% - 215px)) scale(1);
+  }
+}