/* introSplash.css - Pure Borderless Floating Logo with 100% Colorless Web Blur */

#appIntroSplash {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important; /* Tanpa warna apapun, murni transparan */
  backdrop-filter: blur(22px) !important; /* Blur murni dari tampilan web live */
  -webkit-backdrop-filter: blur(22px) !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.65s ease,
              -webkit-backdrop-filter 0.65s ease,
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  overflow: hidden;
  cursor: pointer;
}

#appIntroSplash.intro-fade-out {
  opacity: 0 !important;
  transform: scale(1.04) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  pointer-events: none !important;
}

/* Zero container, zero box, zero border, zero text */
.intro-logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  animation: introLogoReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes introLogoReveal {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pure Logo Video: Hapus background gelap bawaan video, tinggalkan logo putih murni */
.intro-logo-video {
  display: block;
  width: min(340px, 78vw);
  height: auto;
  aspect-ratio: 528 / 640;
  object-fit: contain;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: url(#pureLogoFilter);
  -webkit-filter: url(#pureLogoFilter);
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 50% 50%, black 40%, rgba(0, 0, 0, 0.85) 60%, transparent 80%);
  mask-image: radial-gradient(ellipse 65% 70% at 50% 50%, black 40%, rgba(0, 0, 0, 0.85) 60%, transparent 80%);
  pointer-events: none;
}