/* =========================================================
   AREA 51 SPACESHIP FLYBY
========================================================= */

#a51-flyby-layer{
  position:fixed;
  z-index:99970;

  inset:0;

  overflow:hidden;

  pointer-events:none !important;

  contain:layout style paint;
}

.a51-flyby{
  --a51-ship-size:84px;
  --a51-ship-rotate:0deg;
  --a51-flight-duration:7s;

  position:absolute;
  z-index:1;

  width:var(--a51-ship-size);
  height:auto;

  left:0;
  top:0;

  pointer-events:none !important;
  user-select:none !important;

  will-change:transform,opacity;

  opacity:0;
}

.a51-flyby,
.a51-flyby *{
  pointer-events:none !important;
}

.a51-flyby__ship{
  position:relative;

  width:100%;

  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,.38));

  transform:rotate(var(--a51-ship-rotate));

  transform-origin:center center;
}

.a51-flyby.is-glowing .a51-flyby__ship{
  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,.38))
    drop-shadow(0 0 9px rgba(57,181,74,.28));
}

.a51-flyby__svg{
  display:block;

  width:100%;
  height:auto;

  overflow:visible;
}


/* =========================================================
   TRAIL
========================================================= */

.a51-flyby__trail{
  position:absolute;

  z-index:-1;

  left:-78%;
  top:50%;

  width:82%;
  height:24%;

  transform:translateY(-50%);

  opacity:0;

  filter:blur(4px);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(57,181,74,.06) 25%,
      rgba(57,181,74,.28) 100%
    );

  clip-path:polygon(
    0 42%,
    100% 0,
    100% 100%,
    0 58%
  );
}

.a51-flyby.has-trail .a51-flyby__trail{
  opacity:.78;
}

.a51-flyby.is-reverse .a51-flyby__trail{
  left:auto;
  right:-78%;

  transform:
    translateY(-50%)
    scaleX(-1);
}


/* =========================================================
   FLIGHT
========================================================= */

.a51-flyby.is-left-to-right{
  animation:
    a51FlyLeftToRight
    var(--a51-flight-duration)
    cubic-bezier(.18,.68,.28,.98)
    forwards;
}

.a51-flyby.is-right-to-left{
  animation:
    a51FlyRightToLeft
    var(--a51-flight-duration)
    cubic-bezier(.18,.68,.28,.98)
    forwards;
}

@keyframes a51FlyLeftToRight{

  0%{
    opacity:0;

    transform:
      translate3d(
        calc(-1 * var(--a51-start-offset)),
        0,
        0
      )
      translateY(0)
      scale(.92);
  }

  8%{
    opacity:.96;
  }

  48%{
    opacity:1;

    transform:
      translate3d(
        calc(50vw - (var(--a51-ship-size) / 2)),
        var(--a51-curve),
        0
      )
      scale(1);
  }

  92%{
    opacity:.96;
  }

  100%{
    opacity:0;

    transform:
      translate3d(
        calc(100vw + var(--a51-end-offset)),
        calc(var(--a51-curve) * .32),
        0
      )
      scale(.92);
  }

}

@keyframes a51FlyRightToLeft{

  0%{
    opacity:0;

    transform:
      translate3d(
        calc(100vw + var(--a51-start-offset)),
        0,
        0
      )
      translateY(0)
      scale(.92);
  }

  8%{
    opacity:.96;
  }

  48%{
    opacity:1;

    transform:
      translate3d(
        calc(50vw - (var(--a51-ship-size) / 2)),
        var(--a51-curve),
        0
      )
      scale(1);
  }

  92%{
    opacity:.96;
  }

  100%{
    opacity:0;

    transform:
      translate3d(
        calc(-1 * var(--a51-end-offset)),
        calc(var(--a51-curve) * .32),
        0
      )
      scale(.92);
  }

}


/* =========================================================
   ENGINE LIGHT PULSE
========================================================= */

.a51-flyby__engine{
  transform-origin:center;
  animation:a51EnginePulse .72s ease-in-out infinite;
}

@keyframes a51EnginePulse{
  0%,
  100%{
    opacity:.58;
  }

  50%{
    opacity:1;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  #a51-flyby-layer{
    z-index:99950;
  }

  .a51-flyby__trail{
    filter:blur(3px);
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

  #a51-flyby-layer{
    display:none !important;
  }

}