/* ============================================================
   INVESTIR POUR GAGNER — Special FX
   Preloader (logo assembly) · film grain · vignette
   Pure monochrome. No colour added.
   ============================================================ */

/* ---------- film grain ---------- */
#grain{
  position:fixed; inset:-60%; z-index:8000; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-4%,3%); }
  50%{ transform:translate(3%,-4%); } 75%{ transform:translate(-3%,4%); } 100%{ transform:translate(0,0); }
}

/* ---------- vignette ---------- */
#vignette{
  position:fixed; inset:0; z-index:7990; pointer-events:none;
  background:radial-gradient(125% 125% at 50% 42%, transparent 56%, rgba(0,0,0,.07) 100%);
}

/* ---------- preloader (logo assembly) ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999; background:#fff;
  display:grid; place-items:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1) .15s;
}
#preloader.lift{ transform:translateY(-100%); }
.pl-logo{ position:relative; width:clamp(150px,18vw,210px); aspect-ratio:707/729; }
.pl-logo img{ position:absolute; height:auto; display:block; opacity:0; will-change:transform,opacity; }
.pl-logo .b1{ left:2.7%;  top:26.2%; width:31.1%; animation:plAssemble1 .95s cubic-bezier(.16,1,.3,1) .05s forwards; }
.pl-logo .b2{ left:34.4%; top:19.3%; width:31.3%; animation:plAssemble2 .95s cubic-bezier(.16,1,.3,1) .20s forwards; }
.pl-logo .b3{ left:66.3%; top:2.2%;  width:31.1%; animation:plAssemble3 .95s cubic-bezier(.16,1,.3,1) .34s forwards; }
@keyframes plAssemble1{ from{ opacity:0; transform:translate(-130px,70px) rotate(-16deg) scale(.78); } to{ opacity:1; transform:none; } }
@keyframes plAssemble2{ from{ opacity:0; transform:translate(0,170px) rotate(10deg) scale(.8); } to{ opacity:1; transform:none; } }
@keyframes plAssemble3{ from{ opacity:0; transform:translate(130px,-80px) rotate(16deg) scale(.78); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  #grain{ animation:none; }
  .pl-logo img{ opacity:1 !important; animation:none !important; }
  #preloader{ display:none; }
}