@use '../abstracts' as *;

//Scrollout /Appear on scroll animations
[data-scroll] {
  transition: opacity 0.7s;
  opacity: 0;

  &.glint {
    opacity: 1;
    .word {
      .char{
        transition: all 0.05s var(--easing-3);
        animation-timing-function: var(--ease-in-1);
      }

    }
  }
}

[data-scroll="out"] {
  opacity: 0;
  transition-delay: 0s;


}

// Header glint animation
.glint[data-scroll="out"] {
  .word {
    .char{
    }

  }
}


[data-scroll="in"] {
  opacity: 1;

  &.glint {
    .word {
      .char {
        animation: glintShine 0.7s var(--easing-3) calc(var(--char-index) * 0.03s);
      }
    }
  }
}

.copy-and-image {
  h2.glint[data-scroll=in] {
    .word {
      .char {
        animation: glintShine 0.7s var(--easing-3) calc(var(--char-index) * 0.05s);
      }
    }
  }
}
.enquiry-form {
  h2.glint[data-scroll=in] {
    .word {
      .char {
        animation: glintShine 0.7s var(--easing-3) calc(var(--char-index) * 0.1s);
      }
    }
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes glintShine {
  0% { color: var(--c-gold); }
  50% { color: #dfbea0; }
  0% { color: var(--c-gold); }
}
@keyframes glintShineSvg {
  0% { fill: var(--c-gold); }
  10% { fill: #dfbea0; }
  20% { fill: var(--c-gold); }
  100% { fill: var(--c-gold); }
}
// Animated loading ellipses
@keyframes ellipsis {
  to {
    //width: 1.25em;
    width: 1.35em;
  }
}


//
// Mobile only
//--------------------------------------------------------------------- */
@media (max-width: $small-breakpoint) {
}

//
// Above Mobile
//--------------------------------------------------------------------- */
@media (min-width: $small-breakpoint) {
}