/* Écran de chargement — au tout premier chargement, phone/tablette/desktop */
.mobile-splash {
  position: fixed;
  inset: 0;
  z-index: 999999999999999999;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

body.has-mobile-splash .mobile-splash {
  display: flex;
}

.mobile-splash-word {
  font-family: 'Impact', sans-serif;
  font-weight: 300;
  font-size: clamp(3rem, 22vw, 14rem);
  color: #000;
  opacity: 0;
  transform: scale(0.7);
}

body.has-mobile-splash .mobile-splash-word {
  animation:
    splash-word-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    splash-word-blink 0.4s steps(1, end) 0.4s 2;
}

.mobile-splash.is-leaving {
  animation: splash-fade-out 0.4s ease forwards;
}

.mobile-splash.is-leaving .mobile-splash-word {
  animation: none;
  opacity: 1;
  color: #000;
  transform: scale(1.1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes splash-word-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes splash-word-blink {
  0%,
  49% {
    color: red;
  }
  50%,
  100% {
    color: #000;
  }
}

@keyframes splash-fade-out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Révélation en cascade de la page derrière le splash : chaque élément
   part masqué puis apparaît l'un après l'autre plutôt que d'un coup */
body.has-mobile-splash .yaw,
body.has-mobile-splash .header .h1,
body.has-mobile-splash .header .h2,
body.has-mobile-splash .header .h3,
body.has-mobile-splash .s1h1,
body.has-mobile-splash .us1.gr.is-shown,
body.has-mobile-splash .sec-liste.is-settled,
body.has-mobile-splash .projects-carousel.grill {
  opacity: 0 !important;
  transform: translateY(16px) !important;
}

body.mobile-reveal-stagger .yaw,
body.mobile-reveal-stagger .header .h1,
body.mobile-reveal-stagger .header .h2,
body.mobile-reveal-stagger .header .h3,
body.mobile-reveal-stagger .s1h1,
body.mobile-reveal-stagger .us1.gr.is-shown,
body.mobile-reveal-stagger .sec-liste.is-settled,
body.mobile-reveal-stagger .projects-carousel.grill {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.mobile-reveal-stagger .yaw {
  transition-delay: 0s !important;
}

body.mobile-reveal-stagger .header .h1 {
  transition-delay: 0.08s !important;
}

body.mobile-reveal-stagger .header .h2 {
  transition-delay: 0.14s !important;
}

body.mobile-reveal-stagger .header .h3 {
  transition-delay: 0.2s !important;
}

body.mobile-reveal-stagger .s1h1 {
  transition-delay: 0.32s !important;
}

body.mobile-reveal-stagger .us1.gr.is-shown,
body.mobile-reveal-stagger .projects-carousel.grill {
  transition-delay: 0.48s !important;
}

body.mobile-reveal-stagger .sec-liste.is-settled {
  transition-delay: 0.62s !important;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-splash-word,
  .mobile-splash {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }

  body.has-mobile-splash .yaw,
  body.has-mobile-splash .header .h1,
  body.has-mobile-splash .header .h2,
  body.has-mobile-splash .header .h3,
  body.has-mobile-splash .s1h1,
  body.has-mobile-splash .us1.gr.is-shown,
  body.has-mobile-splash .sec-liste.is-settled,
  body.has-mobile-splash .projects-carousel.grill,
  body.mobile-reveal-stagger .yaw,
  body.mobile-reveal-stagger .header .h1,
  body.mobile-reveal-stagger .header .h2,
  body.mobile-reveal-stagger .header .h3,
  body.mobile-reveal-stagger .s1h1,
  body.mobile-reveal-stagger .us1.gr.is-shown,
  body.mobile-reveal-stagger .sec-liste.is-settled,
  body.mobile-reveal-stagger .projects-carousel.grill {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}