/* LupaPay premium layer styles. Styles only: DOM is created by premium-scene.js / premium-fx.js. */

/* 1) Preloader */
#lp-preloader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#lp-preloader .lp-pre-mark {
  font-family: "Montserrat", "Montserrat Placeholder", sans-serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.04em;
  background-image: radial-gradient(71% 100% at 50% 133.9%, rgb(68, 85, 187) 0%, rgb(255, 255, 255) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform .7s cubic-bezier(.7, 0, .2, 1), opacity .6s ease;
}

#lp-preloader .lp-pre-line {
  position: relative;
  width: 180px;
  height: 1px;
  margin-top: 22px;
  background: rgba(255, 255, 255, .12);
  transition: opacity .6s ease;
}

#lp-preloader .lp-pre-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgb(140, 155, 255);
  transform-origin: left;
  transform: scaleX(0);
}

/* Exit: panel wipes upward via clip-path while content fades up */
#lp-preloader.lp-preloader-exit {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity .9s cubic-bezier(.7, 0, .2, 1), clip-path .9s cubic-bezier(.7, 0, .2, 1);
}

#lp-preloader.lp-preloader-exit .lp-pre-mark {
  transform: translateY(-14px);
  opacity: 0;
}

#lp-preloader.lp-preloader-exit .lp-pre-line {
  opacity: 0;
}

/* 2) WebGL scene canvas. Sem mix-blend-mode: o additive blending do renderer
   ja soma luz sobre o fundo preto e blend de viewport inteiro custa GPU a toa. */
#lp-scene {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .55;
  transition: opacity 1.2s ease;
}

#lp-scene.lp-scene-dim {
  opacity: .3;
}

/* Estado inicial: a cena nasce invisivel e o premium-fx revela apos o intro
   (regra depois de .lp-scene-dim para vencer enquanto ambas presentes). */
#lp-scene.lp-scene-hide {
  opacity: 0;
}

/* 3) Trailing cursor ring (transform driven by JS) */
#lp-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(140, 155, 255, .65);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  background: rgba(68, 85, 187, 0);
  transition: opacity .4s ease;
  will-change: transform;
}

#lp-cursor.lp-cursor-on {
  opacity: 1;
}

#lp-cursor.lp-cursor-hot {
  border-color: rgba(140, 155, 255, .95);
  background: rgba(68, 85, 187, .16);
}

/* Hard guard: JS also checks, this covers cached or partial loads */
@media (prefers-reduced-motion: reduce) {
  #lp-preloader {
    display: none;
  }
}