/* =========================================================
   SPLASH — com feixes em loop + 12 carrinhos flutuando
   Arquivo: /public/modules/splash.css
========================================================= */

#splash{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#00f162,#00d769,#00ca80);
  z-index:999;
  opacity:1;
  transition: opacity .55s ease;
  overflow:hidden;
}

/* brilho suave no fundo durante o splash */
.splashGlow{
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  opacity:.35;
  filter: blur(14px);
  animation: glowPulse 2.4s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes glowPulse{
  from { transform: scale(1); opacity:.28; }
  to   { transform: scale(1.06); opacity:.38; }
}

/* camada só pros carrinhos */
#splashCars{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* carrinho flutuante */
.splashCar{
  position:absolute;
  width:34px;
  height:34px;
  opacity:.18;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
  transform: translate(-50%,-50%);
  animation: floatY var(--dur, 3.2s) ease-in-out infinite alternate;
}

@keyframes floatY{
  from{ transform: translate(-50%,-50%) translateY(-10px) rotate(-2deg); }
  to{   transform: translate(-50%,-50%) translateY(14px) rotate(2deg); }
}

/* centro do logo */
.splashCenter{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(320px, 72vw);
  height:min(220px, 40vh);
}

/* logo com “pop” leve */
.splashLogo{
  width:170px;
  height:auto;
  animation: logoPop .9s ease-out both;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.22));
}

@keyframes logoPop{
  0%{ transform: scale(.86); opacity:0; }
  55%{ transform: scale(1.02); opacity:1; }
  100%{ transform: scale(1); }
}

/* =========================================================
   3 FEIXES EM LOOP (TELA INTEIRA)
========================================================= */
.logoShine{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,.45) 50%,
      rgba(255,255,255,0) 56%,
      rgba(255,255,255,0) 100%
    );

  width: 240vw;
  height: 140vh;

  left: -120vw;
  top: -20vh;

  mix-blend-mode: screen;
  opacity:.90;

  animation-name: shinePass;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
}

@keyframes shinePass{
  from { transform: translateX(0); }
  to   { transform: translateX(240vw); }
}

/* Feixe 1 (base) */
.shine1{
  opacity: .95;
  animation-duration: 3.45s;
  animation-delay: .10s;
}

/* Feixe 2 (um pouco mais lento e mais suave) */
.shine2{
  opacity: .70;
  animation-duration: 3.75s;
  animation-delay: .55s;
  filter: blur(.2px);
}

/* Feixe 3 (mais lento ainda, bem suave) */
.shine3{
  opacity: .55;
  animation-duration: 4.15s;
  animation-delay: 1.05s;
  filter: blur(.4px);
}