@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@include levitateAnimation;

.#{utility('stage')} {
  .#{organism('case-band')} {
    grid-column: 1 / -1;
    width: 150vw;
    margin-top: -40%;
    margin-right: -150vw;
    pointer-events: none;

    @media (min-width: 768px) {
      width: 100%;
      margin-top: -30%;
      margin-right: 0;
    }
  }
}

.#{utility('case-band')} {
  overflow: hidden;
  margin-bottom: 7em;

  @media (min-width: 768px) {
    margin-bottom: 8vw;
  }

  .#{molecule('copy')} {
    h3 {
      margin-top: 0;
    }
  }
}

.#{organism('case-band')} {
  grid-column: 2 / -1;
  width: 100%;
  max-width: 1680px;
  height: auto;
  display: grid;
  grid-gap: 0;
  grid-template-columns: 17fr 5.5fr 3fr 9fr 7fr 12.5fr 3fr 9fr 4fr 12.5fr 6fr 10.5fr;
  grid-template-rows: 19fr 6fr 12.5fr 12.5fr 25fr 5fr 5fr 5fr 5fr 5fr;
  padding: 7vw 0 11vw;
  // filter: drop-shadow(50px 50px 35px rgba(0, 0, 0, 0.25));
  transform: perspective(100px) rotate(0.1deg) rotateY(-0.1deg) skewX(-4deg) skewY(0deg) translateX(6.3%);
  transform-origin: center;

  &-image {
    width: 100%;
    height: auto;
    margin-top: auto;
    animation: levitate 7s ease-in-out infinite forwards;

    // prevent antimation fro accessiblity users
    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }

    &:nth-child(1) {
      grid-column: 2 / 5;
      grid-row: 1 / 8;
      animation-delay: -5s;
    }

    &:nth-child(2) {
      grid-column: 1 / 3;
      grid-row: 2 / 10;
      animation-delay: -6s;
    }

    &:nth-child(3) {
      grid-column: 8 / 12;
      grid-row: 3 / 7;
      animation-delay: -2s;
    }

    &:nth-child(4) {
      grid-column: 6 / 9;
      grid-row: 2 / 11;
      animation-delay: -3s;
    }

    &:nth-child(5) {
      grid-column: 4 / 7;
      grid-row: 4 / 9;
      animation-delay: -4s;
    }
  }
}
