/*
 * Progressive cross-document page turn for genuine, same-origin navigation.
 *
 * mascot-cursor.js skips the transition for any navigation that was not armed
 * by an eligible [data-mr-page-turn] link. Unsupported browsers navigate
 * normally and ignore these rules.
 */
@view-transition {
  navigation: auto;
}

:root {
  --mr-page-turn-duration: 1150ms;
}

::view-transition-group(root) {
  animation-duration: var(--mr-page-turn-duration);
  animation-timing-function: cubic-bezier(0.18, 0.72, 0.14, 1);
  perspective: 1800px;
  transform-style: preserve-3d;
}

::view-transition-image-pair(root) {
  isolation: isolate;
  perspective: 1800px;
  overflow: clip;
  background: #073b3f;
  transform-style: preserve-3d;
}

::view-transition-old(root) {
  z-index: 2;
  transform-origin: 0 50%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: mr-turn-old-page var(--mr-page-turn-duration)
    cubic-bezier(0.18, 0.72, 0.14, 1) both;
}

::view-transition-new(root) {
  z-index: 1;
  transform-origin: 0 50%;
  backface-visibility: hidden;
  animation: mr-reveal-new-page var(--mr-page-turn-duration)
    cubic-bezier(0.18, 0.72, 0.14, 1) both;
}

@keyframes mr-turn-old-page {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 0 0 rgba(5, 48, 51, 0)) brightness(1);
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  }

  16% {
    clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
    filter: drop-shadow(8px 1px 14px rgba(5, 48, 51, 0.12)) brightness(1.01);
    transform: translate3d(-0.4%, 0, 24px) rotateY(-4deg) scale(1);
  }

  44% {
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    filter: drop-shadow(28px 4px 34px rgba(5, 48, 51, 0.25)) brightness(0.99);
    transform: translate3d(-3.5%, 0, 82px) rotateY(-29deg) scaleX(0.995);
  }

  74% {
    clip-path: polygon(0 0, 78% 0, 57% 100%, 0 100%);
    filter: drop-shadow(42px 8px 48px rgba(5, 48, 51, 0.34)) brightness(0.94);
    transform: translate3d(-10%, 0, 42px) rotateY(-68deg) scaleX(0.985);
  }

  100% {
    clip-path: polygon(0 0, 34% 0, 12% 100%, 0 100%);
    filter: drop-shadow(54px 10px 60px rgba(5, 48, 51, 0.42)) brightness(0.86);
    transform: translate3d(-22%, 0, 0) rotateY(-108deg) scale(0.975);
  }
}

@keyframes mr-reveal-new-page {
  0% {
    filter: saturate(0.82) brightness(0.72);
    transform: translate3d(2.8%, 0, -150px) rotateY(3deg) scale(0.965);
  }

  48% {
    filter: saturate(0.9) brightness(0.84);
    transform: translate3d(1.4%, 0, -70px) rotateY(1.4deg) scale(0.98);
  }

  82% {
    filter: saturate(0.98) brightness(0.97);
    transform: translate3d(0.3%, 0, -12px) rotateY(0.25deg) scale(0.997);
  }

  100% {
    filter: none;
    transform: translate3d(0, 0, 0) rotateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}