html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

html.js .reveal:not(.settled) {
  transition: opacity var(--t-enter) var(--ease-entrance), transform var(--t-enter) var(--ease-entrance);
}

html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

html.js .reveal.delay-1:not(.settled) { transition-delay: 100ms; }
html.js .reveal.delay-2:not(.settled) { transition-delay: 180ms; }
html.js .reveal.delay-3:not(.settled) { transition-delay: 260ms; }

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: lang-flou 650ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: lang-entree 650ms var(--ease-entrance) both;
}

html[dir="rtl"]::view-transition-new(root) {
  animation-name: lang-entree-rtl;
}

@keyframes lang-flou {
  to { filter: blur(6px); }
}

@keyframes lang-entree {
  from { opacity: 0; filter: blur(6px); transform: translateX(-14px); }
}

@keyframes lang-entree-rtl {
  from { opacity: 0; filter: blur(6px); transform: translateX(14px); }
}

@media (hover: none) {
  ::view-transition-old(root) {
    animation: none;
  }

  ::view-transition-new(root),
  html[dir="rtl"]::view-transition-new(root) {
    animation: lang-fondu 380ms var(--ease-out) both;
  }
}

@keyframes lang-fondu {
  from { opacity: 0; }
}

body {
  transition: opacity 240ms var(--ease-out);
}

html.lang-sortie body {
  opacity: 0;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js.sd .reveal {
      opacity: 1;
      transform: none;
      animation: revelation linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }

    html.js.sd .delay-1,
    html.js.sd .delay-2,
    html.js.sd .delay-3 {
      animation-range: entry 0% cover 28%;
    }
  }
}

@keyframes revelation {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

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

  html.js .reveal {
    opacity: 1;
    transform: none;
  }
}