/* =========================================================
   Javori Nettoyage — Intro "Pschit + essuyage"
   Page d'accueil uniquement. Overlay position:fixed (aucun
   impact sur le flux du document -> zéro layout shift).
   ========================================================= */

html.intro-lock,
html.intro-lock body{ overflow: hidden; }

#preloader{
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 220ms ease;
}
#preloader.is-done{ opacity: 0; pointer-events: none; }

/* Ne joue jamais : reduced motion, ou déjà vue cette session
   (classe posée par le script inline bloquant, avant peinture) */
html.no-preloader #preloader{ display: none !important; }

/* ---------- Voile coloré (couvre le site pendant l'intro) ---------- */
#preloader .veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue) 70%);
  clip-path: polygon(-40% 0%, 200% 0%, 200% 100%, -40% 100%);
}
#preloader.is-wiping .veil{
  animation: veil-wipe 900ms cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: 60ms;
}
@keyframes veil-wipe{
  0%   { clip-path: polygon(-40% 0%, 200% 0%, 200% 100%, -40% 100%); }
  100% { clip-path: polygon(97% 0%, 200% 0%, 200% 100%, 91% 100%); }
}

/* ---------- Étape 1 : "pschit" (halo + particules) ---------- */
#preloader .spray-core{
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%,-50%) scale(0);
  animation: spray-core 420ms ease-out forwards;
}
@keyframes spray-core{
  0%  { transform: translate(-50%,-50%) scale(0);   opacity: .9; }
  60% { transform: translate(-50%,-50%) scale(2.4); opacity: .5; }
  100%{ transform: translate(-50%,-50%) scale(3.4); opacity: 0; }
}

#preloader .spray{ position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
#preloader .spray span{
  position: absolute; top: 0; left: 0;
  width: var(--s, 6px); height: var(--s, 6px);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  opacity: 0;
  transform: translate(-50%,-50%) rotate(var(--a,0deg)) translateX(0) scale(.3);
  animation: spray-burst 620ms cubic-bezier(.15,.7,.3,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes spray-burst{
  0%  { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a,0deg)) translateX(0) scale(.3); }
  22% { opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%,-50%) rotate(var(--a,0deg)) translateX(var(--r,90px)) scale(1); }
}

/* ---------- Étape 2 : la feuille d'essuie-tout ---------- */
#preloader .sheet{
  position: absolute;
  top: 50%;
  left: -34%;
  width: 34%;
  min-width: 260px;
  height: 140%;
  transform: translateY(-50%) rotate(-6deg);
  border-radius: var(--radius-lg);
  background:
    repeating-radial-gradient(circle at 9px 9px, rgba(27,87,168,.10) 0 2px, transparent 2px 18px),
    var(--white);
  box-shadow: 0 30px 60px -20px rgba(13,44,82,.5), inset 0 0 0 1px rgba(255,255,255,.5);
  opacity: 0;
}
#preloader.is-wiping .sheet{
  animation: sheet-sweep 900ms cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: 60ms;
}
@keyframes sheet-sweep{
  0%  { opacity: 0; left: -34%; }
  8%  { opacity: 1; }
  92% { opacity: 1; }
  100%{ opacity: 0; left: 100%; }
}

@media (max-width: 640px){
  #preloader .sheet{ width: 58%; min-width: 0; }
  #preloader.is-wiping .veil{ animation-name: veil-wipe-mobile; }
}
@keyframes veil-wipe-mobile{
  0%   { clip-path: polygon(-40% 0%, 200% 0%, 200% 100%, -40% 100%); }
  100% { clip-path: polygon(97% 0%, 200% 0%, 200% 100%, 94% 100%); }
}

@media (prefers-reduced-motion: reduce){
  #preloader{ display: none !important; }
}