/* ════════════════════════════════════════════════════
   loading-screen.css — appme Premium Loading Screen
   Uzupełnienie dla loading-screen.js (który też wstrzykuje
   część styli inline, ale tu mamy resztę + fallbacki)
════════════════════════════════════════════════════ */

/* ── Overlay ── */
#aml-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #05010a;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#aml-overlay.aml-fade-out {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* ── Background canvas ── */
#aml-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#aml-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: crisp-edges;
}

/* ── Vignette overlay ── */
#aml-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(5, 1, 10, 0.8) 100%);
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 10;
}

/* ── Content wrapper ── */
#aml-content {
  position: absolute;
  inset-inline: 0;
  top: 45%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  pointer-events: none;
}

/* ── Logo ── */
#aml-logo-wrap {
  animation: aml-float 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
#aml-logo {
  height: clamp(3.5rem, 9vw, 6.5rem);
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1)
          drop-shadow(0 0 20px rgba(255, 255, 255, 0.6))
          drop-shadow(0 0 50px rgba(149, 248, 255, 0.4));
}
@keyframes aml-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-12px) scale(1.02); }
}

/* ── Progress bar wrapper ── */
#aml-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(22rem, 80vw);
  background: rgba(10, 2, 20, 0.4);
  padding: 1.5rem 2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              inset 0 0 20px rgba(83, 17, 89, 0.1);
}

/* ── Track ── */
#aml-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ── Fill bar ── */
#aml-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #aa379b, #0cb5d2, #fff);
  border-radius: 99px;
  position: relative;
  box-shadow: 0 0 10px rgba(12, 181, 210, 0.5);
  transition: width 0.1s linear;
}

/* ── Shine sweep ── */
#aml-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
  animation: aml-shine 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes aml-shine {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}

/* ── Percentage text ── */
#aml-pct {
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #fff;
  text-shadow: 0 0 10px rgba(12, 181, 210, 0.8);
}