/* =========================================================
   SC SOLUTIONS LLC
   ANIMATIONS
========================================================= */

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal {
  transform: translateY(32px);
}

.reveal-left {
  transform: translateX(-42px);
}

.reveal-right {
  transform: translateX(42px);
}

.reveal-scale {
  transform:
    scale(0.965)
    translateY(18px);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}


/* =========================================================
   PHONE FLOAT
========================================================= */

.assistant-phone {
  animation:
    phoneFloat
    6s
    ease-in-out
    infinite;
}

@keyframes phoneFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card-one {
  animation:
    floatingCardOne
    5.5s
    ease-in-out
    infinite;
}

.floating-card-two {
  animation:
    floatingCardTwo
    6.5s
    ease-in-out
    infinite;
}

@keyframes floatingCardOne {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes floatingCardTwo {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}


/* =========================================================
   HEADER SCROLL EFFECT
========================================================= */

.site-header {
  transition:
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);

  box-shadow:
    0 10px 32px rgba(0, 36, 53, 0.07);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }
}