/* The entrance animation on the landing page.

   It is a copy, made by hand, of the app's entrance animation in
   apps/nektr/src/components/atomic/text/SplashAnimation.tsx: the same beats
   and the same timings. Nothing links the two. If one changes and they should
   still match, change the other by hand.

   Each rule below describes the finished logo. The animations only say how it
   gets there, so a browser that skips them still shows the finished logo. */

.splash {
  width: 200px;
  height: 200px;
  /* The flash glows past the edge of the drawing. */
  overflow: visible;
}

.splash-graph {
  color: #ffe300;
  animation: splash-color 2080ms linear backwards;
}

.splash-edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  animation: splash-edge 480ms cubic-bezier(0.45, 0, 0.55, 1) 760ms backwards;
}

.splash-vertex {
  fill: currentColor;
  transform: translateY(-130px);
  animation: splash-vertex 560ms linear 200ms backwards;
}

.splash-center {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-center 440ms linear backwards;
}

.splash-glow {
  opacity: 0;
  animation: splash-glow 580ms linear 1500ms backwards;
}

.splash-glow path {
  fill: none;
  stroke-linecap: round;
}

.splash-halo {
  fill: #ffe300;
  stroke: #ffe300;
  stroke-width: 6;
}

.splash-core {
  fill: #FFFCE6;
  stroke: #FFFCE6;
  stroke-width: 5.4;
}

/* Beat 1: the center node grows from nothing, overshoots, settles. */
@keyframes splash-center {
  0% {
    transform: scale(0);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  45.45% {
    transform: scale(1.35);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  100% {
    transform: scale(1);
  }
}

/* Beat 2: the vertices ride out of the center, slightly past the ring, and
   retract onto it. */
@keyframes splash-vertex {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  67.86% {
    transform: translateY(-140.4px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  100% {
    transform: translateY(-130px);
  }
}

/* Beat 3: every edge draws inward from both ends to meet in the middle. Each
   edge has a length of 1, so the dashes are "a half from each end". */
@keyframes splash-edge {
  from {
    stroke-dasharray: 0 1 0 1;
  }
  to {
    stroke-dasharray: 0.5 0 0.5 1;
  }
}

/* Beats 4 and 5, as colour: grey until the edges close, then yellow, then
   white-hot at the peak of the flash, then yellow. */
@keyframes splash-color {
  0% {
    color: #585858;
  }
  59.62% {
    color: #585858;
    animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
  }
  72.12% {
    color: #ffe300;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  81.73% {
    color: #FFFCE6;
    animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
  }
  100% {
    color: #ffe300;
  }
}

/* Beat 5: the halo blooms and drops away. */
@keyframes splash-glow {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  34.48% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
  }
  100% {
    opacity: 0;
  }
}

/* People who ask their device for less motion get the finished logo. */
@media (prefers-reduced-motion: reduce) {
  .splash-graph,
  .splash-edge,
  .splash-vertex,
  .splash-center,
  .splash-glow {
    animation: none;
  }
}