/*
 * ANMITRHA — HOME Horizon, phase 5.
 *
 * Cette couche ne modifie pas la direction artistique statique validée. Elle
 * n'est active que lorsque le contrôleur de mouvement desktop a terminé son
 * initialisation. Mobile, tablette et mouvement réduit conservent la phase 4.
 */

.horizon-home-phase4.is-horizon-vertical-motion [data-horizon-home-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 560ms cubic-bezier(.22, 1, .36, 1),
    transform 620ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--horizon-home-reveal-delay, 0ms);
}

.horizon-home-phase4.is-horizon-vertical-motion [data-horizon-home-reveal].horizon-home-photo {
  transform: translate3d(0, 18px, 0) scale(.99);
}

.horizon-home-phase4.is-horizon-vertical-motion [data-horizon-home-reveal].is-visible,
.horizon-home-phase4.is-horizon-vertical-motion [data-horizon-home-reveal]:focus-within {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (min-width: 1200px) and (min-height: 700px) and (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) and (prefers-reduced-motion: no-preference) {
  .horizon-home-phase4.is-horizon-motion {
    overflow: visible;
  }

  .horizon-home-phase4.is-horizon-motion .horizon-home-phase4__viewport {
    overflow: hidden;
    overflow: clip;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .horizon-home-phase4.is-horizon-motion .horizon-home-phase4__viewport::-webkit-scrollbar {
    display: none;
  }

  .horizon-home-phase4.is-horizon-motion .horizon-home-phase4__track {
    will-change: transform;
  }

  .horizon-home-phase4.is-horizon-motion .horizon-home-phase4__thread-depth,
  .horizon-home-phase4.is-horizon-motion .horizon-home-phase4__thread-line,
  .horizon-home-phase4.is-horizon-motion .horizon-home-phase4__thread-light,
  .horizon-home-phase4.is-horizon-motion .horizon-home-phase4__branches use {
    will-change: stroke-dashoffset;
  }

  .horizon-home-phase4.is-horizon-motion .horizon-home-photo > img {
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    will-change: transform;
  }

}

@media (prefers-reduced-motion: reduce) {
  .horizon-home-phase4.is-horizon-vertical-motion [data-horizon-home-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
