/********************
 ENTRANCE
*********************/
/* Shown one by one by revealOneByOne in animations.js */
.entrance
  :is(
    #head > a,
    #head > div > a,
    #mobile_bar,
    #burger,
    .index-back span,
    .band-track > *,
    .index-image,
    .prestations .page-title,
    .prestations .split-image,
    .prestation h2,
    .prestation p,
    .prestations-action,
    .realisations .page-title,
    .filter-item,
    .works,
    .about .page-title,
    .about .split-image,
    .ruled,
    .ruled span,
    .about-value h2,
    .about-value p,
    .about-credits,
    .contact h1 tspan,
    .contact-details p,
    .contact-image,
    .p404 h1 tspan,
    .p404-details p,
    .p404-image
  ):not(.revealed) {
  visibility: hidden;
}

.entrance .reviews {
  opacity: 0;
  transform: translateY(calc(40 * var(--u)));
}

.entrance .reviews.revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}

/********************
 ANIMATIONS
*********************/
.anim-title:not(.ck) {
  opacity: 0;
}

.anim-title.inited {
  opacity: 1;
}

.anim-title > p > span,
.anim-title > p > i {
  display: inline-block;
  overflow: hidden;
}

.anim-title > p > span > span,
.anim-title > p > i > span {
  display: block;
  position: relative;
  transform: translateY(120%);
}

.anim-trigger:not(.animate) .anim-title > p > span > span,
.anim-trigger:not(.animate) .anim-title > p > i > span {
  transition: transform 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0s !important;
}

.anim-trigger.animate .anim-title > p > span > span,
.anim-trigger.animate .anim-title > p > i > span {
  transform: translateY(0);
}

.anim-title > p > i:last-child {
  margin-left: 10px;
}

.fade-up,
.fade-bottom,
.fade-right,
.fade-left,
.fade {
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.fade-up {
  transform: translateY(20px);
}

.fade-left {
  transform: translateX(20px);
}

.fade-right {
  transform: translateX(-20px);
}

.fade-bottom {
  transform: translateY(-20px);
}

.anim-trigger.animate .fade-up,
.anim-trigger.animate .fade-left,
.anim-trigger.animate .fade-right,
.anim-trigger.animate .fade-bottom {
  opacity: 1;
  transform: translate(0, 0);
}

.anim-trigger.animate .delay-1 {
  transition-delay: 0.2s;
}

.anim-trigger.animate .delay-2 {
  transition-delay: 0.4s;
}

.anim-trigger.animate .delay-3 {
  transition-delay: 0.6s;
}

.anim-trigger.animate .delay-4 {
  transition-delay: 0.8s;
}

.anim-trigger.animate .delay-5 {
  transition-delay: 1s;
}

.anim-trigger.animate .delay-6 {
  transition-delay: 1.2s;
}

.anim-trigger.animate .delay-7 {
  transition-delay: 1.4s;
}

.anim-trigger.animate .delay-8 {
  transition-delay: 1.6s;
}

.anim-trigger.animate .delay-9 {
  transition-delay: 1.8s;
}

.anim-trigger.animate .delay-10 {
  transition-delay: 2s;
}

.anim-trigger.animate .delay-11 {
  transition-delay: 2.2s;
}

.anim-trigger.animate .delay-12 {
  transition-delay: 2.4s;
}

.anim-trigger.animate .delay-13 {
  transition-delay: 2.6s;
}

.anim-trigger.animate .delay-14 {
  transition-delay: 2.8s;
}

.anim-trigger.animate .delay-15 {
  transition-delay: 3s;
}

@media screen and (max-width: 1199px) {
  .fade-right,
  .fade-left {
    transform: translateY(20px);
  }
}