/* Page transitions and hover grow — see assets/js/page-animations.js */

html.page-animating,
html.page-animating body {
  overflow: hidden;
}

#page-stage {
  flex: 1 1 auto;
  min-height: 0;
  will-change: auto;
}

html[data-anim-enter] #page-stage,
html[data-anim-exit] #page-stage {
  will-change: transform, opacity;
}

/* Back: content goes left */
html[data-anim-exit="left"] #page-stage {
  animation: page-out-left 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-anim-enter="left"] #page-stage {
  animation: page-in-left 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Forward: content goes right */
html[data-anim-exit="right"] #page-stage {
  animation: page-out-right 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-anim-enter="right"] #page-stage {
  animation: page-in-right 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* New page: content goes up */
html[data-anim-exit="up"] #page-stage {
  animation: page-out-up 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-anim-enter="up"] #page-stage {
  animation: page-in-up 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Return to last page via a link: content goes down */
html[data-anim-exit="down"] #page-stage {
  animation: page-out-down 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-anim-enter="down"] #page-stage {
  animation: page-in-down 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Refresh: fade out, then fade in */
html[data-anim-exit="fade"] #page-stage {
  animation: page-out-fade 280ms ease both;
}
html[data-anim-enter="fade"] #page-stage {
  animation: page-in-fade 420ms ease both;
}

@keyframes page-out-left {
  to {
    transform: translateX(-100vw);
  }
}
@keyframes page-in-left {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: none;
  }
}

@keyframes page-out-right {
  to {
    transform: translateX(100vw);
  }
}
@keyframes page-in-right {
  from {
    transform: translateX(-100vw);
  }
  to {
    transform: none;
  }
}

@keyframes page-out-up {
  to {
    transform: translateY(-100vh);
  }
}
@keyframes page-in-up {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: none;
  }
}

@keyframes page-out-down {
  to {
    transform: translateY(100vh);
  }
}
@keyframes page-in-down {
  from {
    transform: translateY(-100vh);
  }
  to {
    transform: none;
  }
}

@keyframes page-out-fade {
  to {
    opacity: 0;
  }
}
@keyframes page-in-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.anim-grow {
  transform-origin: center center;
  transition: transform 180ms ease;
}

.anim-grow:hover,
.anim-grow:focus-visible {
  transform: scale(1.06);
}

.group-hover-card {
  transform-origin: center center;
  transition: transform 180ms ease;
}

.group-hover-card:hover:not(:has(.anim-word:hover)) {
  transform: scale(1.03);
}

.anim-word {
  display: inline-block;
  transform-origin: center center;
  transition: transform 160ms ease;
}

.anim-word:hover,
.anim-word:focus-visible {
  transform: scale(1.14);
}

@media (prefers-reduced-motion: reduce) {
  html[data-anim-enter] #page-stage,
  html[data-anim-exit] #page-stage {
    animation: none !important;
  }

  .anim-grow,
  .anim-word,
  .group-hover-card {
    transition: none;
  }

  .anim-grow:hover,
  .anim-grow:focus-visible,
  .anim-word:hover,
  .anim-word:focus-visible,
  .group-hover-card:hover {
    transform: none;
  }
}