/* Crazylimo Splash Loader V3 — solid color background, logo pop + yellow splash + reveal */
:root{
  --cl-yellow:#FFE000;
  --cl-bg:#FFE000; /* solid */
}
.cl-splash-overlay{
  position:fixed; inset:0;
  background: var(--cl-bg);
  display:flex; align-items:center; justify-content:center;
  z-index:999999; overflow:hidden; pointer-events:none;
}
.cl-scene{ position:relative; width:min(520px, 90vw); height:min(520px, 90vh); }

.cl-bottle{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.8) rotate(-8deg);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
  opacity:0;
  animation: logoIntro .7s cubic-bezier(.2,.8,.2,1) forwards,
             logoPop 1.0s .7s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes logoIntro{
  from{opacity:0; transform:translate(-50%,-56%) scale(.6) rotate(-16deg);}
  to{opacity:1; transform:translate(-50%,-50%) scale(.95) rotate(-3deg);}
}
@keyframes logoPop{
  0%{ transform:translate(-50%,-50%) scale(.95) rotate(-3deg); }
  35%{ transform:translate(-50%,-50%) scale(1.06) rotate(1deg); }
  100%{ transform:translate(-50%,-50%) scale(1.0) rotate(0deg); }
}

.cl-splash-burst{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  background: var(--cl-yellow);
  opacity:0;
  animation: splashSeed .25s 1.2s ease-out forwards, splashReveal .6s 1.35s ease-out forwards;
}
@keyframes splashSeed{
  from{opacity:0; transform:translate(-50%,-50%) scale(.6);}
  to{opacity:1; transform:translate(-50%,-50%) scale(1);}
}
@keyframes splashReveal{
  from{ box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  to{ box-shadow: 0 0 0 160vmax rgba(0,0,0,0); }
}

.cl-splash-overlay.cl-fadeout{ animation: overlayOut .35s ease-in forwards; }
@keyframes overlayOut{ to{ opacity:0; visibility:hidden; } }