homepage/src/styles/finish.scss

/**
 * finish.scss
 * This is the stylesheet for the finish page that is displayed after submiting
 * a contact form.
 */

@use 'sass:list';
@use 'lib/colors';
@use 'lib/layout';
@use 'lib/motion';

.finish-hero {
  @keyframes finish-hero {
    0% { stroke-width: 3px; }
    10% { stroke-width: 3px; }
    20% { stroke-width: 5px; }
    60% { stroke-width: 5px; }
    100% { stroke-width: 3px; }
  }

  display: block;
  height: 15vmin;
  margin: layout.$huge-gap auto;
  overflow: visible;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  animation: motion.$prominent 0s 1 normal both running finish-hero;

  > .stroke-gradient {
    $idle-color: colors.$gray-900;
    $colors: [
      $idle-color
      $idle-color
      $idle-color
      colors.$blue-500
      colors.$teal-500
      colors.$yellow-500
      colors.$teal-500
      colors.$gray-300
      colors.$yellow-500
      colors.$blue-500
      colors.$gray-300
      $idle-color
      $idle-color
      $idle-color
    ];

    @for $i from 1 through 4 {
      > stop:nth-of-type(#{$i}) {
        @keyframes finish-stroke-gradient-#{$i} {
          0% { stop-color: $idle-color; }
          15% { stop-color: $idle-color; }
          // This is some which magic that chooses the correct colors for each
          // stop - don't change it unless you know what you are doing! In
          // general, the output will look something like this:
          //   <animation stop>: <color stop 1> <color stop 2> ...
          //   20%: 4 3 2 1
          //   25%: 5 4 3 2
          //   35%: 6 5 4 3
          //   ...
          // In order to achieve the 'moving' effect, we make sure that the
          // first and last three colors match the ones we are given at 15% and
          // 70% (before and after the core animation).
          @for $j from 1 to list.length($colors) - 3 {
            #{15% + $j * 5%} {
              stop-color: list.nth($colors, 4 + $j - $i);
            }
          }
          70% { stop-color: $idle-color; }
          100% { stop-color: $idle-color; }
        }

        animation:
          motion.$prominent 0s 1 normal both running finish-stroke-gradient-#{$i};
      }
    }
  }

  > .cable {
    @keyframes finish-hero-cable {
      0% { transform: translateX(0.5rem); }
      20% { transform: translateX(0.5rem); }
      70% { transform: translateX(0.5rem); }
      100% { transform: none; }
    }

    animation: motion.$prominent 0s 1 normal both running finish-hero-cable;
  }

  > .plug {
    @keyframes finish-hero-plug {
      0% { transform: translateX(-0.5rem); }
      20% { transform: translateX(-0.5rem); }
      70% { transform: translateX(-0.5rem); }
      100% { transform: none; }
    }
    @keyframes finish-hero-plug-transition {
      0% { fill: colors.$gray-900; }
      100% { fill: colors.$gray-600; }
    }
    @keyframes finish-hero-plug-idle {
      0% { fill: colors.$gray-600; }
      25% { fill: colors.$teal-600; }
      50% { fill: colors.$yellow-600; }
      75% { fill: colors.$blue-800; }
      100% { fill: colors.$gray-600; }
    }

    animation: motion.$prominent 0s 1 normal both running finish-hero-plug,
      motion.$gentle 0.7s 1 normal forwards running finish-hero-plug-transition,
      motion.$background 1s infinite normal none running finish-hero-plug-idle;
  }

  > .contacts {
    @keyframes finish-hero-contacts {
      0% { transform: translateX(0rem); }
      20% { transform: translateX(-0.7rem); }
      70% { transform: translateX(-0.7rem); }
      100% { transform: none; }
    }

    animation: motion.$prominent 0s 1 normal both running finish-hero-contacts;
  }
}