homepage/styles/components/_actions.scss

@use '../lib/colors';
@use '../lib/motion';
@use '../lib/layout';

// Actions are another module that is present on the home page. It shows a small
// number of CTA-style buttons which lead to different parts of the site.
.page-actions {
  padding: layout.$large-gap;
  background-color: colors.$teal-300;

  > *:not(:last-child) {
    margin-bottom: layout.$large-gap;
  }

  > div {
    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }

  > a {
    display: flex;
    flex-direction: column-reverse;
    margin: layout.$large-gap 0;
    padding: layout.$large-gap;
    background: colors.$gray-50;
    color: inherit;
    text-decoration: none;
    @include colors.card-shadow;

    > h3 {
      margin: 0;
      text-transform: uppercase;
    }

    > svg {
      align-self: center;
      margin-bottom: layout.$normal-gap;
      height: 10rem;
    }

    &:hover {
      @extend %action-icon-hover;
    }
  }

  @media screen and (min-width: layout.$breakpoint) {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: layout.$large-gap;
    align-items: stretch;

    > * {
      grid-column: span 3;

      &:not(:last-child) {
        margin-bottom: 0;
      }
    }

    > a {
      margin: 0;

      &.first {
        transform: translateY(#{-1 * layout.$huge-gap});
      }

      &:not(.first) {
        grid-column: span 2;
      }
    }
  }
}

.action-icon {
  overflow: visible;
  fill: colors.$main-text;
  // This seems to prevent jittering in Firefox:
  pointer-events: none;

  &:hover {
    @extend %action-icon-hover;
  }

  .emphasis-gradient > stop {
    stop-color: colors.$blue-500;
    transition: motion.$gentle stop-color;
  }

  .emphasis {
    transition: motion.$gentle transform;

    &.heart-left {
      transform-origin: top left;
    }

    &.heart-right {
      transform-origin: top right;
    }

    &.coin {
      transform-origin: 58% 39%;
    }
  }
}

%action-icon-hover {
  .emphasis-gradient {
    @keyframes action-icon-emphasis-gradient-1 {
      0% { stop-color: colors.$blue-500; }
      40% { stop-color: colors.$yellow-500; }
      80% { stop-color: colors.$teal-500; }
    }

    @keyframes action-icon-emphasis-gradient-2 {
      0% { stop-color: colors.$blue-500; }
      20% { stop-color: colors.$blue-800; }
      60% { stop-color: colors.$yellow-500; }
      100% { stop-color: colors.$teal-500; }
    }

    @for $i from 1 through 2 {
      > stop:nth-of-type(#{$i}) {
        stop-color: colors.$teal-500;
        animation:
          motion.$prominent 0s 1 normal backwards running
          action-icon-emphasis-gradient-#{$i};
      }
    }
  }

  .heart-left {
    $final-transformation:
      translateX(-0.8rem) translateY(1.4rem) scale(1.5) rotate(-25deg);

    @keyframes action-icon-heart-left {
      0% { transform: none; }
      50% {
        transform:
          translateX(0.2rem) translateY(0.8rem) scale(1.2) rotate(-10deg);
      }
      100% { transform: $final-transformation; }
    }

    transform: $final-transformation;
    animation:
      motion.$gentle 0s 1 normal backwards running action-icon-heart-left;
  }

  .heart-right {
    $final-transformation:
      translateX(1.4rem) translateY(-0.1rem) scale(1.6) rotate(15deg);

    @keyframes action-icon-heart-right {
      0% { transform: none; }
      50% {
        transform:
          translateX(1.3rem) translateY(0.8rem) scale(1.4) rotate(30deg);
      }
      100% { transform: $final-transformation; }
    }

    transform: $final-transformation;
    animation:
      motion.$gentle 0s 1 normal backwards running action-icon-heart-right;
  }

  .coin {
    $final-transformation: scale(0.8);

    @keyframes action-icon-coin {
      0% { transform: none; }
      50% { transform: scale(1.1); }
      100% { transform: $final-transformation; }
    }

    transform: $final-transformation;
    animation: motion.$gentle 0s 1 normal backwards running action-icon-coin;
  }
}