@keyframes --scale { to { scale: 0.7 1.5; }}
@keyframes --translate { to { translate: 0 -600px; }}
@keyframes --rotate { to { rotate: 360deg; }}

svg {
  --anim-duration: 3000ms;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
  width: 70px;
  overflow: visible;

  .triangle-inner {
    transform-origin: 50% 66%;
    animation: var(--anim-duration) infinite --rotate;
    animation-timing-function: var(--rotate-time);
  }

  .triangle-outer {
    transform-origin: 50% 100%;
    animation:
      var(--anim-duration) infinite --translate,
      var(--anim-duration) infinite --scale;
    animation-timing-function: var(--translate-time), var(--scale-time);
  }
}

html, body {
  height: 100%;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}

body {
  background:  radial-gradient(20vw 20vw at 10% 10%, #1846f725, transparent), radial-gradient(50vw 50vw at 90% 30%, #a100ff15, transparent), radial-gradient(40vw 40vw at 20% 90%, #a1458545, transparent), radial-gradient(30vw 30vw at 75% 70%, #4556a145, transparent), #060515;
  align-content: center;
  padding-top: 15vh;
  
  --rotate-time:  linear(
        0.002,
        0.006 8.4%,
        0.02 10%,
        0.057 12%,
        0.169 17.2%,
        0.229 20.3%,
        0.282 23.9%,
        0.319 27.8%,
        0.335 32%,
        0.34 39.9%,
        0.354 41.6%,
        0.39 43.7%,
        0.502 49.3%,
        0.562 52.8%,
        0.614 56.7%,
        0.652 61.1%,
        0.666 66%,
        0.667 73.1%,
        0.682 74.6%,
        0.719 76.5%,
        0.833 81.2%,
        0.893 84.1%,
        0.946 87.4%,
        0.984 91.2%,
        0.998 95.3%,
        1.002
      );
    /* TODO: add link to edit timing function */
  
  --translate-time: linear(
          0.00442,
          0.00674 7.227%,
          0.042181 8.6382%,
          0.133865 9.6336%,
          0.410934 11.3116%,
          0.687902 14.1296%,
          0.77946 16.5499%,
          0.805302 18.1152%,
          0.814726 19.956%,
          0.805966 21.7117%,
          0.780448 23.1914%,
          0.688706 25.4501%,
          0.409362 28.0526%,
          0.129755 29.7949%,
          0.037683 30.9782%,
          0.002944 32.7083%,
          0.006232 38.9859%,
          0.041727 40.4231%,
          0.135492 41.4897%,
          0.420158 43.4385%,
          0.704884 46.6874%,
          0.798724 49.3792%,
          0.825017 51.0933%,
          0.834324 53.0916%,
          0.825174 54.9564%,
          0.799312 56.5733%,
          0.707003 59.1602%,
          0.426947 62.4214%,
          0.147064 64.4191%,
          0.05497 65.4266%,
          0.02026 66.697%,
          0.02094 72.094%,
          0.056782 73.3538%,
          0.151071 74.5144%,
          0.437229 77.0536%,
          0.723895 80.742%,
          0.818819 83.3392%,
          0.845673 84.8823%,
          0.85555 86.61%,
          0.846526 88.3189%,
          0.819963 89.8026%,
          0.724229 92.1879%,
          0.432383 95.2831%,
          0.140134 97.3893%,
          0.043899 98.5383%,
          0.00761
        );
  
  --scale-time: linear(
            0.00442,
            -0.075344 1.508%,
            -0.248654 2.3986%,
            -0.421735 3.1098%,
            -0.500813 4.0795%,
            -0.3721 5.8906%,
            -0.087536 7.8479%,
            0.197138 9.8583%,
            0.326183 11.8286%,
            0.273403 12.8356%,
            0.158092 13.7841%,
            0.043282 15.7813%,
            0.005764 17.5194%,
            -0.00799 19.935%,
            0.007922 23.8683%,
            0.041134 25.811%,
            0.074139 26.8236%,
            0.089426 27.967%,
            0.055866 30.5875%,
            -0.01209 32.515%,
            -0.264449 33.7923%,
            -0.417641 34.691%,
            -0.486283 36.0206%,
            -0.359088 38.0294%,
            -0.078177 40.1112%,
            0.202828 42.1021%,
            0.330304 43.8382%,
            0.279305 45.0887%,
            0.167682 46.4568%,
            0.056059 48.8018%,
            0.019193 50.6092%,
            0.00506 52.983%,
            0.018609 56.7377%,
            0.048824 59.3074%,
            0.091808 62.5546%,
            0.054064 65.0219%,
            -0.01158 66.521%,
            -0.269293 67.9572%,
            -0.423569 69.0523%,
            -0.492978 70.3084%,
            -0.364892 72.1998%,
            -0.080499 74.2047%,
            0.204214 76.1404%,
            0.333262 77.8242%,
            0.280612 78.9621%,
            0.165646 80.3172%,
            0.05086 82.6445%,
            0.013064 84.4087%,
            -0.00125 86.699%,
            0.017309 88.8273%,
            0.058324 91.0344%,
            0.09987 93.1266%,
            0.120021 94.91%,
            0.102952 96.1639%,
            0.062889 97.2079%,
            0.022608 98.3754%,
            0.00488
          );
    /* TODO: add link to edit timing function */
}