/* ========================= */
/* TRANSITIONS EURIKO */
/* ========================= */

/* ========================= */
/* ÉCRAN TRANSITION */
/* ========================= */

.transition-screen {
  position: absolute;
  inset: 0;

  z-index: var(--z-transition);

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 450ms ease;
}

/* ========================= */
/* ÉTAT ACTIF */
/* ========================= */

.transition-screen.is-visible {
  opacity: 1;

  pointer-events: auto;
}

/* ========================= */
/* IMAGE TRANSITION */
/* ========================= */

.transition-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}