@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&display=swap');

.loadingScreen{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:40px 24px;
  text-align:center;
  overflow:hidden;
  cursor:pointer;

  background:
    radial-gradient(circle at 50% 38%, rgba(255, 153, 0, 0.12) 0%, rgba(255, 153, 0, 0) 28%),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #18212c 0%, #131921 42%, #0f141b 100%);

  opacity:1;
  visibility:visible;
  transform:translate3d(0, 0, 0);
  filter:brightness(1);
  transition:
    transform .62s cubic-bezier(0.22, 1, 0.36, 1),
    opacity .34s ease,
    visibility 0s linear .62s,
    filter .34s ease;
}

.loadingScreen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,153,0,0.08) 0%, rgba(255,153,0,0) 42%);
  pointer-events:none;
}

.loadingScreen[aria-hidden="true"]{
  opacity:1;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0, -100%, 0);
  filter:brightness(0.98);
}

/* força todos os filhos a sumirem junto */
.loadingScreen[aria-hidden="true"] > *{
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .18s ease, visibility 0s linear .18s;
}

.loadingScreen.is-clicked{
  filter:brightness(0.97);
}

.loadingScreen__logo{
  position:relative;
  z-index:2;
  width:220px;
  max-width:88vw;
  margin:0 auto 30px;
  transform-origin:center;
  animation:loadingLogoPulse 2s ease-in-out infinite;
}

.loadingScreen__logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 8px 22px rgba(0,0,0,0.28))
    drop-shadow(0 0 10px rgba(255,153,0,0.12));
}

.loadingScreen__title{
  position:relative;
  z-index:2;
  margin:0 0 8px;
  color:#ffffff;
  font-size:clamp(24px, 4vw, 30px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.03em;
}

.loadingScreen__text{
  position:relative;
  z-index:2;
  width:min(100%, 420px);
  margin:0 auto 18px;
  color:rgba(255,255,255,0.78);
  font-size:15px;
  line-height:1.5;
  font-weight:600;
}

.loadingScreen__bar{
  position:relative;
  z-index:2;
  width:min(100%, 320px);
  height:10px;
  margin:0 auto 14px;
  border-radius:999px;
  overflow:hidden;

  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.25),
    0 6px 18px rgba(0,0,0,0.14);
}

.loadingScreen__progress{
  position:relative;
  width:0%;
  height:100%;
  border-radius:inherit;

  background:linear-gradient(
    90deg,
    #ff9900 0%,
    #ffad1f 45%,
    #ffc95a 75%,
    #ffe3a6 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 18px rgba(255,153,0,0.28);

  transition:width .22s linear;
}

.loadingScreen__progress::after{
  content:"";
  position:absolute;
  top:0;
  right:-30px;
  width:58px;
  height:100%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-18deg);
  pointer-events:none;
}

.loadingScreen__status{
  position:relative;
  z-index:2;
  min-height:22px;
  margin-top:2px;

  color:#ffffff;
  font-size:14px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:-0.01em;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  transform-origin:center;
  will-change:transform, opacity;
  animation:loadingStatusPulse 1.4s ease-in-out infinite;
}

.loadingScreen__dots{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:22px;
}

.loadingScreen__dots span{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#ff9900;
  opacity:.35;
  animation:loadingDotsBounce 1s ease-in-out infinite;
}

.loadingScreen__dots span:nth-child(2){
  animation-delay:.16s;
}

.loadingScreen__dots span:nth-child(3){
  animation-delay:.32s;
}

.loadingScreen.is-clicked .loadingScreen__status,
.loadingScreen.is-clicked .loadingScreen__dots,
.loadingScreen.is-clicked .loadingScreen__title,
.loadingScreen.is-clicked .loadingScreen__text{
  animation:loadingTapPulse .28s ease-out;
}

@keyframes loadingLogoPulse{
  0%{
    transform:scale(1);
    opacity:.82;
  }
  50%{
    transform:scale(1.04);
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:.82;
  }
}

@keyframes loadingStatusPulse{
  0%, 100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.55;
    transform:scale(1.05);
  }
}

@keyframes loadingDotsBounce{
  0%, 80%, 100%{
    transform:translateY(0);
    opacity:.3;
  }
  40%{
    transform:translateY(-3px);
    opacity:1;
  }
}

@keyframes loadingTapPulse{
  0%{
    transform:scale(1);
    opacity:1;
  }
  45%{
    transform:scale(0.92);
    opacity:.78;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

@media (max-width:640px){
  .loadingScreen{
    padding:32px 20px;
  }

  .loadingScreen__logo{
    width:200px;
    margin-bottom:24px;
  }

  .loadingScreen__title{
    font-size:22px;
    margin-bottom:7px;
  }

  .loadingScreen__text{
    width:min(100%, 300px);
    font-size:14px;
    margin-bottom:16px;
  }

  .loadingScreen__bar{
    width:min(100%, 270px);
    height:9px;
  }

  .loadingScreen__status{
    font-size:13px;
  }
}

@media (prefers-reduced-motion: reduce){
  .loadingScreen,
  .loadingScreen__logo,
  .loadingScreen__status,
  .loadingScreen__title,
  .loadingScreen__text,
  .loadingScreen__dots span{
    animation:none !important;
    transition:none !important;
  }
}

.loadingScreen__gateText{
  position:absolute;
  left:50%;
  bottom:90px;
  transform:translateX(-50%);

  z-index:3;

  display:inline-flex;
  align-items:center;
  gap:10px;

  font-size:16px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:0.2px;

  color:#ffffff; /* branco como você pediu */
  text-align:center;
  white-space:nowrap;

  user-select:none;
  pointer-events:none;

  animation:loadingGatePulse 1.4s ease-in-out infinite;
}

.loadingScreen__gateIcon,
.loadingScreen__gateLabel{
  display:inline-block;
  transform-origin:center;
  will-change:transform, opacity;
}

/* efeito ao clicar */
.loadingScreen.is-clicked .loadingScreen__gateIcon,
.loadingScreen.is-clicked .loadingScreen__gateLabel{
  animation:loadingTapPulse 0.28s ease-out;
}
@keyframes loadingGatePulse{
  0%, 100%{
    opacity:1;
    transform:translateX(-50%) scale(1);
  }
  50%{
    opacity:0.55;
    transform:translateX(-50%) scale(1.05);
  }
}