:root {
  --ql-accent: #0ea5a0;
  --ql-bg: #0a0f14;
  --ql-fg: #e6f6f6;
  --ql-fade: 900ms;
}

/* FULLSCREEN CONTAINER */
.ql-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% 50%, rgba(14,165,160,.08), transparent 65%),
    linear-gradient(180deg, #0a0f14 0%, #071016 100%);
  transition: opacity var(--ql-fade) ease;
}
.ql-overlay.ql-out { opacity: 0; pointer-events: none; }

/* CORE CENTER HOLDER */
.ql-core {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RINGS */
.ql-rings {
  position: absolute;
  width: 420px;
  height: 420px;
  pointer-events: none;
  z-index: 0;
}

.ql-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(14,165,160,.35);
  box-shadow: 0 0 50px rgba(14,165,160,.25);
}
.ql-ring-1 { animation: spin 7s linear infinite; }
.ql-ring-2 { transform: scale(.78); animation: spin 10s linear reverse infinite; opacity:.65; }
.ql-ring-3 { transform: scale(.58); animation: spin 14s linear infinite; opacity:.45; }

@keyframes spin { to { transform: rotate(360deg); } }

/* LOGO — COR ORIGINAL, SEM FILTRO */
.ql-logo-wrap {
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.ql-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: float 4s ease-in-out infinite;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  filter: none !important; /* REMOVE TODA COR/BRILHO */
}

@keyframes float {
  50% { transform: translateY(-6px); }
}

/* BRILHO (NEUTRO) ATRÁS DA LOGO */
.ql-glow {
  position: absolute;
  width: 310px;
  height: 310px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  filter: blur(38px);
  z-index: 1;
}

/* TEXTO */
.ql-text {
  position: absolute;
  bottom: -70px;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ql-fg);
  text-align: center;
  text-shadow: 0 0 12px rgba(255,255,255,.23);
}
.ql-text::after {
  content: "▋";
  margin-left: 4px;
  animation: blink 1s step-end infinite;
  color: var(--ql-accent);
}
@keyframes blink { 50% { opacity: 0; } }