/* =========================
   Intro Particle Logo Screen
========================= */

.intro-particle-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(68, 60, 128, 0.42) 0%, rgba(24, 22, 55, 0.96) 46%, #070814 100%);
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 900ms ease,
    visibility 900ms ease;
}

.intro-particle-wrap.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.intro-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.intro-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 120px;
  animation: introLogoIn 1100ms ease forwards;
}

.intro-logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(190, 180, 255, 0.11) 34%, transparent 68%);
  filter: blur(18px);
  opacity: 0.88;
}

.intro-logo img {
  position: relative;
  z-index: 2;
  width: min(340px, 46vw);
  max-height: 150px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.22))
    drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
}

.intro-logo-text {
  position: relative;
  z-index: 2;
  display: none;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-shadow:
    0 0 22px rgba(255, 255, 255, 0.28),
    0 16px 34px rgba(0, 0, 0, 0.35);
}

.intro-particle-wrap.is-ending .intro-logo {
  animation: introLogoOut 700ms ease forwards;
}

@keyframes introLogoIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(12px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

@keyframes introLogoOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(10px);
  }
}

/* Products 카드 목록 숨김 */
.products {
  display: none;
}

@media (max-width: 768px) {
  .intro-logo {
    min-width: 220px;
    min-height: 100px;
  }

  .intro-logo::before {
    width: 280px;
    height: 170px;
  }

  .intro-logo img {
    width: min(260px, 62vw);
  }
}