/* PowerPoint-style entrance animations for viewer (keyframes use --ve-* vars from JS) */

/*
 * Hint GPU compositing layer on page elements to prevent blank/white pages
 * during page flip animations on iOS 17/18 Safari (WebKit compositing bug
 * triggered when isolation:isolate interacts with 3D CSS transforms).
 */
.stf__block,
.stf__item,
.page {
  will-change: transform;
}

@keyframes viewer-entrance-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--ve-opacity-end, 1);
  }
}

@keyframes viewer-entrance-fly-left {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--ve-dist, 48px))) rotate(var(--ve-rot, 0deg));
  }
  to {
    opacity: var(--ve-opacity-end, 1);
    transform: translateX(0) rotate(var(--ve-rot, 0deg));
  }
}

@keyframes viewer-entrance-fly-right {
  from {
    opacity: 0;
    transform: translateX(var(--ve-dist, 48px)) rotate(var(--ve-rot, 0deg));
  }
  to {
    opacity: var(--ve-opacity-end, 1);
    transform: translateX(0) rotate(var(--ve-rot, 0deg));
  }
}

@keyframes viewer-entrance-fly-top {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--ve-dist, 48px))) rotate(var(--ve-rot, 0deg));
  }
  to {
    opacity: var(--ve-opacity-end, 1);
    transform: translateY(0) rotate(var(--ve-rot, 0deg));
  }
}

@keyframes viewer-entrance-fly-bottom {
  from {
    opacity: 0;
    transform: translateY(var(--ve-dist, 48px)) rotate(var(--ve-rot, 0deg));
  }
  to {
    opacity: var(--ve-opacity-end, 1);
    transform: translateY(0) rotate(var(--ve-rot, 0deg));
  }
}

@keyframes viewer-entrance-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.35) rotate(var(--ve-rot, 0deg));
  }
  to {
    opacity: var(--ve-opacity-end, 1);
    transform: scale(1) rotate(var(--ve-rot, 0deg));
  }
}

@keyframes viewer-entrance-zoom-out {
  from {
    opacity: 0;
    transform: scale(1.45) rotate(var(--ve-rot, 0deg));
  }
  to {
    opacity: var(--ve-opacity-end, 1);
    transform: scale(1) rotate(var(--ve-rot, 0deg));
  }
}