/* Fast flag to avoid FOUC only when JS is enabled */
html.js .block-hero-projects .box-image-project {
  opacity: 0;
}

/* 3D camera */
.block-hero-projects {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.box-image-project {
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}

.box-image-project .image-project {
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* If JS is disabled, show content */
noscript .block-hero-projects .box-image-project {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js .block-hero-projects .box-image-project {
    opacity: 1;
  }
  .box-image-project {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}