header('Content-type: text/css');
/* 
 * CSS Document 
  transition: max-height 0.3s, padding 0.3s;
  transition: all .35s;
 * https://jqueryui.com/demos/
 * https://www.w3schools.com/cssref/css_selectors.php
 * https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
 */
html, body {
}
/* With Delay */
/*
Overlap Control Guide
Inside your HTML you can tweak:
--overlap: 0.75;

What values do:
Value	Result
1	No overlap
0.9	Very subtle overlap
0.75	Smooth natural overlap
0.6	Strong overlap
0.5	Heavy overlap
0.3	Almost stacked
*/
.image-sequence {
  --total-duration: 6s;
  --count: 6;
  --overlap: 0.75;

  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
}

.image-sequence img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;

  opacity: 0;
  transform: rotate(0deg);

  animation-name: rotateFade360;
  animation-duration: calc(var(--total-duration) / var(--count));
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

/* Delay formula rewritten safely */
.image-sequence img:nth-child(1) {
  animation-delay: 0s;
}

.image-sequence img:nth-child(2) {
  animation-delay: calc((var(--total-duration) / var(--count)) * var(--overlap));
}

.image-sequence img:nth-child(3) {
  animation-delay: calc((var(--total-duration) / var(--count)) * var(--overlap) * 2);
}

.image-sequence img:nth-child(4) {
  animation-delay: calc((var(--total-duration) / var(--count)) * var(--overlap) * 3);
}

.image-sequence img:nth-child(5) {
  animation-delay: calc((var(--total-duration) / var(--count)) * var(--overlap) * 4);
}

.image-sequence img:nth-child(6) {
  animation-delay: calc((var(--total-duration) / var(--count)) * var(--overlap) * 5);
}

/* Stay image */
.image-sequence img.stay {
  animation-name: rotateStay360;
}

/* Triggers */
.image-sequence.hoverRotate img {
  animation-play-state: paused;
}

.image-sequence.hoverRotate:hover img {
  animation-play-state: running;
}

.image-sequence.clickRotate img {
  animation-play-state: paused;
}

.image-sequence.clickRotate:active img {
  animation-play-state: running;
}

.image-sequence.autoPlay img {
  animation-play-state: running;
}

/* Animations */

@keyframes rotateFade360 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.9);
  }

  40% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0.9);
  }
}

@keyframes rotateStay360 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.9);
  }

  40% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }

  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
}