/***************************************************/
/******************* Keyframes *********************/
/***************************************************/

/**
 * ----------------------------------------
 * Roll out animation
 * ----------------------------------------
 */

 .roll-out-left {
	-webkit-animation: roll-out-left 0.6s ease-in both;
	animation: roll-out-left 0.6s ease-in both;
}

@-webkit-keyframes roll-out-left {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px) rotate(-540deg);
    opacity: 0;
  }
}
@keyframes roll-out-left {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px) rotate(-540deg);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * Tilt in animation
 * ----------------------------------------
 */

 .tilt-in-top-1 {
	-webkit-animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes tilt-in-top-1 {
  0% {
    transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-top-1 {
  0% {
    transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * Heart beat animation
 * ----------------------------------------
 */
 @media (prefers-reduced-motion: no-preference) {
    .find-me-link-animation {
    animation: beat 2s infinite alternate;
    -webkit-animation: beat 2s infinite alternate;
    }
  }

 @-webkit-keyframes beat{
	to { transform: scale(1.1); }
  }

 @keyframes beat{
	to { transform: scale(1.1); }
  }

/**
 * ----------------------------------------
 * Slide in animation 
 * ----------------------------------------
 */

 @media (prefers-reduced-motion: no-preference) {
    .book-cover-animation {
        animation: slide-in-elliptic-top-fwd 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        -webkit-animation: slide-in-elliptic-top-fwd 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
  }

 @-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
      transform: translateY(-600px) rotateX(-30deg) scale(0);
      transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      transform: translateY(0) rotateX(0) scale(1);
      transform-origin: 50% 1400px;
      opacity: 1;
    }
  }
  @keyframes slide-in-elliptic-top-fwd {
    0% {
      transform: translateY(-600px) rotateX(-30deg) scale(0);
      transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      transform: translateY(0) rotateX(0) scale(1);
      transform-origin: 50% 1400px;
      opacity: 1;
    }
  }
  
/**
 * ----------------------------------------
 * animation background colour burst
 * ----------------------------------------
 */

 @media (prefers-reduced-motion: no-preference) {
    .sentinel-section-animation {
        animation: sunburst 5s alternate linear;
        -webkit-animation: sunburst 5s alternate linear;
        z-index: -1;
    }
  }

  @-webkit-keyframes sunburst {
    0% { 
        background-color: var(--main-bg-color); 
        color: var(--black);
    }
	25% { 
        background-color: #fbc540;
        color: var(--white); 
    }
	50% { 
        background-color: #ebd01e; 
        color: var(--white);
    }
	75% { 
        background-color: #eaa207;
        color: var(--white);
    }
/* 	25% { 
        background-color: #fbc540;
        color: var(--white); 
    }
	50% { 
        background-color: #ec5c04; 
        color: var(--white);
    }
	75% { 
        background-color: #ad3304;
        color: var(--white);
    } */
	100% { 
        background-color: var(--main-bg-color);
        color: var(--black);
    }
  }
  
  @keyframes sunburst {
    0% { 
        background-color: var(--main-bg-color); 
        color: var(--black);
    }
    25% { 
      background-color: #fbc540;
      color: var(--white); 
  }
50% { 
      background-color: #ebd01e; 
      color: var(--white);
  }
75% { 
      background-color: #eaa207;
      color: var(--white);
  }
/* 	25% { 
        background-color: #fbc540;
        color: var(--white);
    }
	50% { 
        background-color: #ec5c04; 
        color: var(--white);
    }
	75% { 
        background-color: #ad3304;
        color: var(--white);
    } */
	100% { 
        background-color: var(--main-bg-color);
        color: var(--black);
    }
  }

  /**
 * ----------------------------------------
 * animation fade text entry
 * ----------------------------------------
 */

 @media (prefers-reduced-motion: no-preference) {
    .sentinel-extract-animation {
        animation: slowtype 5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        -webkit-animation: slowtype 5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
/*         animation: slowtype 5s steps(60, end);
        -webkit-animation: slowtype 5s steps(20000, end); */
    }
  }

  @-webkit-keyframes slowtype {
/*     from { width: 0; } */

    0% {
      transform: translateZ(-80px);
      opacity: 0;
    }

/*     10% {
        color: var(--link-hover);
    }

    98% {
        color: var(--link-hover);
    } */

    100% {
      transform: translateZ(0);
      opacity: 1;
/*       color: var(--black); */
    }
  }
  @keyframes slowtype {
/*     from { width: 0; } */

    0% {
        transform: translateZ(-80px);
        opacity: 0;
    }

/*     10% {
      color: var(--link-hover);
  }

  98% {
      color: var(--link-hover);
  } */

  100% {
    transform: translateZ(0);
    opacity: 1;
/*       color: var(--black); */
  }
  }

  /**
 * ----------------------------------------
 * animation text-focus-in entry
 * ----------------------------------------
 */

 .text-focus-in-instant {
	-webkit-animation: text-focus-in-instant 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: text-focus-in-instant 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

 .text-focus-in-1sec {
	-webkit-animation: text-focus-in-1sec 2s 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: text-focus-in-1sec 2s 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

 .text-focus-in-2sec {
	-webkit-animation: text-focus-in-2sec 2s 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: text-focus-in-2sec 2s 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

 .text-focus-in-3sec {
	-webkit-animation: text-focus-in-3sec 2s 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: text-focus-in-3sec 2s 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes text-focus-in-instant {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in-instant {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

@-webkit-keyframes text-focus-in-1sec {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in-1sec {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

@-webkit-keyframes text-focus-in-2sec {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in-2sec {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

@-webkit-keyframes text-focus-in-3sec {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in-3sec {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }