/* Two viewport snapshots become adjacent faces of a cube. Native navigation
   keeps each page's scripts, URL, focus and browser history intact.
   Motion reference: https://osmo-3d-cube-page-transition.webflow.io/ */
:root {
  --cube-direction: 1;
  --cube-depth: 50dvh;
}

/* Animate the shared angles and depth, then project each face independently.
   This also avoids WebKit flattening nested 3D transition pseudo-elements. */
@property --cube-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --cube-distance {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --cube-zoom {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* Returning to the homepage unwinds the cube. */
.cinema-document { --cube-direction: -1; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition {
    background: var(--paper);
    overflow: clip;
  }

  ::view-transition-group(root) {
    animation: mirada-cube-depth 1.9s both;
  }

  ::view-transition-image-pair(root) {
    isolation: auto;
    animation: mirada-cube-turn 1.2s .1s cubic-bezier(.625, .05, 0, 1) both;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    width: 100%;
    height: 100%;
    object-fit: fill;
    mix-blend-mode: normal;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 24px 80px #40373c26;
    animation: none;
  }

  ::view-transition-old(root) {
    transform: perspective(100vw) translateZ(var(--cube-distance)) rotateX(var(--cube-angle)) translateZ(var(--cube-depth));
  }

  ::view-transition-new(root) {
    transform: perspective(100vw) translateZ(var(--cube-distance)) rotateX(calc(var(--cube-angle) + 90deg * var(--cube-direction))) translateZ(var(--cube-depth));
  }

  /* WebKit projects transition snapshots as affine planes. An orthographic
     cube keeps both faces joined and centered, without skewing them offscreen. */
  @supports (font: -apple-system-body) {
    ::view-transition-group(root) {
      transform: scale(var(--cube-zoom));
      transform-origin: 50% 50%;
    }

    ::view-transition-old(root) {
      transform: translateY(calc(-1 * sin(var(--cube-angle)) * var(--cube-depth))) scaleY(cos(var(--cube-angle)));
    }

    ::view-transition-new(root) {
      --cube-face-angle: calc(var(--cube-angle) + 90deg * var(--cube-direction));
      transform: translateY(calc(-1 * sin(var(--cube-face-angle)) * var(--cube-depth))) scaleY(cos(var(--cube-face-angle)));
    }
  }
}

@keyframes mirada-cube-depth {
  0% {
    --cube-distance: calc(-1 * var(--cube-depth));
    --cube-zoom: 1;
    animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  }
  42% {
    --cube-distance: calc(-1.6 * var(--cube-depth));
    --cube-zoom: .65;
    animation-timing-function: cubic-bezier(.625, .05, 0, 1);
  }
  100% {
    --cube-distance: calc(-1 * var(--cube-depth));
    --cube-zoom: 1;
  }
}

@keyframes mirada-cube-turn {
  from { --cube-angle: 0deg; }
  to { --cube-angle: calc(-90deg * var(--cube-direction)); }
}

/* Also stop an animation if the preference changes during navigation. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-image-pair(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}