/**
* Fuel Theme
* Version 6.4.4
**/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Hero
# Welcome
# CTA's
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# CTA's
--------------------------------------------------------------*/

@keyframes cta-left {
  0% {
    transform: translateX(-2rem)
  }

  66% {
    transform: translateX(0.3rem)
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes cta-right {
  0% {
    transform: translateX(2rem)
  }

  66% {
    transform: translateX(-0.3rem)
  }

  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {

  .hero-waves path:not(:last-of-type) {
    transform: translateX(0);
    transition: transform 1s, clip-path 1s;
    clip-path: inset(0 0 0 0);


    @starting-style {
      transform: translateX(-2rem);
      clip-path: inset(0 100% 0 0);
    }
  }

  .hero-waves path:nth-of-type(3) {
    transition-delay: 1s;
  }

  .hero-waves path:nth-of-type(2) {
    transition-delay: 2s;
  }

  .welcome-waves,
  .location-wave {
    opacity: 0 !important;
    transition: opacity 4s;
  }

  .welcome-waves path,
  .location-wave path {
    transform: translateX(3rem);
    transition: transform 3s;
  }

  .welcome-waves path:nth-of-type(odd),
  .location-wave path:nth-of-type(odd) {
    transform: translateX(-3rem);
  }

  .js-intersected .welcome-waves path,
  .js-intersected .location-wave path {
    transform: translateX(0);
  }

  .js-intersected .welcome-waves,
  .js-intersected .location-wave {
    opacity: 1 !important;
  }

  .logo-icon-wrap::before,
  .logo-icon-wrap::after {
    transform: scaleX(0);
    transition: transform 350ms;
    transform-origin: right;
  }

  .logo-icon-wrap::after {
    transform-origin: left;
  }

  .js-intersected.logo-icon-wrap::before,
  .js-intersected.logo-icon-wrap::after {
    transform: scaleX(1);
  }

  .wave path {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 300ms;
    transition-delay: 900ms;
  }

  .wave path:first-of-type {
    transition-delay: 300ms;
  }

  .wave path:last-of-type {
    transition-delay: 600ms;
  }

  .js-intersected .wave path {
    clip-path: inset(0 0 0 0);
  }

  .cta-wrap {
    transform: translateX(-1rem);
    animation: cta-left 500ms ease both;
    animation-play-state: paused;
  }

  .cta-right .cta-wrap {
    animation: cta-right 500ms ease both;
    animation-play-state: paused;
  }

  .cta-wrap:nth-of-type(2) {
    animation-delay: 500ms;
  }

  .cta-wrap:nth-of-type(3) {
    animation-delay: 1s;
  }

  .js-intersected .cta-wrap {
    animation-play-state: running;
    transform: translateX(0);
  }
}