/* Transitions légères entre les onglets principaux du portfolio. */
html[data-page-entry="forward"] main {
  animation: portfolio-page-enter-forward 460ms cubic-bezier(.22, 1, .36, 1) both;
}

html[data-page-entry="backward"] main {
  animation: portfolio-page-enter-backward 460ms cubic-bezier(.22, 1, .36, 1) both;
}

html.portfolio-page-leaving {
  cursor: progress;
}

html.portfolio-page-leaving main {
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, var(--page-exit-y, -1.25rem), 0);
  transition: opacity 240ms ease, transform 260ms cubic-bezier(.55, 0, 1, .45);
}

/* Transition de thème de secours : le contenu reste lisible et atteint les
   couleurs finales sans lissage du défilement. */
html.portfolio-theme-changing,
html.portfolio-theme-changing body,
html.portfolio-theme-changing body * {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke !important;
  transition-duration: 720ms !important;
  transition-timing-function: ease !important;
}

@keyframes portfolio-page-enter-forward {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes portfolio-page-enter-backward {
  from {
    opacity: 0;
    transform: translate3d(0, -1.25rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-entry] main {
    animation: none;
  }

  html.portfolio-page-leaving main {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.portfolio-theme-changing,
  html.portfolio-theme-changing body,
  html.portfolio-theme-changing body * {
    transition: none !important;
  }
}