:root {
  --scentra-preloader-bg: #131313;
  --scentra-preloader-gold: rgba(214, 173, 66, 0.84);
  --scentra-preloader-gold-soft: rgba(214, 173, 66, 0.42);
  --scentra-preloader-text: rgba(238, 228, 206, 0.84);
  --scentra-preloader-speed: 1.35s;
}

.scentra-preloader-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(214, 173, 66, 0.055),
      transparent 30%
    ),
    linear-gradient(180deg, #202327 0%, var(--scentra-preloader-bg) 100%);
  transition: opacity 420ms ease, visibility 420ms ease;
}

.scentra-preloader-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.scentra-preloader {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.scentra-preloader__scene {
  width: 100%;
  display: grid;
  place-items: center;
}

.scentra-stage {
  position: relative;
  width: clamp(310px, 88vmin, 560px);
  aspect-ratio: 1 / 1;
  overflow: visible;
  display: grid;
  place-items: center;
  animation: scentraStageIn 0.55s ease-out both;
}

.bottle-wrap {
  position: relative;
  width: 52%;
  aspect-ratio: 1 / 1;
  overflow: visible;
  animation: scentraBottlePress var(--scentra-preloader-speed) ease-in-out infinite;
}

.bottle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.24));
}

.spray {
  position: absolute;
  left: 51.95%;
  top: 14.25%;
  width: 32%;
  height: 17%;
  overflow: visible;
  pointer-events: none;
  transform-origin: 0% 50%;
  opacity: 0;
  animation: scentraSprayAppear var(--scentra-preloader-speed) ease-in-out infinite;
}

.spray path {
  fill: none;
  stroke: var(--scentra-preloader-gold);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  filter: drop-shadow(0 0 4px rgba(214, 173, 66, 0.25));
  animation: scentraSprayDraw var(--scentra-preloader-speed) ease-in-out infinite;
}

.spray .main {
  stroke-width: 4;
}

.spray .mid {
  stroke-width: 2.8;
  opacity: 0.72;
  animation-delay: 0.035s;
}

.spray .thin {
  stroke-width: 2;
  opacity: 0.52;
  animation-delay: 0.07s;
}

.nozzle-pulse {
  position: absolute;
  left: 51.95%;
  top: 22.75%;
  width: 8.5%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1px solid var(--scentra-preloader-gold-soft);
  box-shadow: 0 0 10px rgba(214, 173, 66, 0.22);
  transform: translate(-50%, -50%) scale(0.45);
  opacity: 0;
  pointer-events: none;
  animation: scentraNozzlePulse var(--scentra-preloader-speed) ease-in-out infinite;
}

.cap-press-glow {
  position: absolute;
  left: 50.5%;
  top: 18.8%;
  width: 19%;
  height: 4%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 222, 143, 0.38),
    transparent
  );
  transform: translateX(-50%) translateY(0);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: scentraCapGlow var(--scentra-preloader-speed) ease-in-out infinite;
}

.particle {
  position: absolute;
  border-radius: 999px;
  background: var(--scentra-preloader-gold);
  box-shadow: 0 0 8px rgba(214, 173, 66, 0.34);
  pointer-events: none;
  opacity: 0;
  animation: scentraParticleMove var(--scentra-preloader-speed) ease-in-out infinite;
}

.p1 {
  left: 62%;
  top: 18%;
  width: 4px;
  height: 4px;
  animation-delay: 0.18s;
}
.p2 {
  left: 70%;
  top: 16%;
  width: 3px;
  height: 3px;
  animation-delay: 0.26s;
}
.p3 {
  left: 76%;
  top: 22%;
  width: 5px;
  height: 5px;
  animation-delay: 0.34s;
}
.p4 {
  left: 69%;
  top: 28%;
  width: 3px;
  height: 3px;
  animation-delay: 0.41s;
}
.p5 {
  left: 82%;
  top: 25%;
  width: 3px;
  height: 3px;
  animation-delay: 0.48s;
}

.signature {
  margin-top: clamp(-145px, -23vw, -82px);
  color: var(--scentra-preloader-text);
  font-size: clamp(9px, 1.8vw, 14px);
  letter-spacing: clamp(0.18em, 0.9vw, 0.34em);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  animation: scentraSignatureFade var(--scentra-preloader-speed) ease-in-out infinite;
}

@keyframes scentraStageIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes scentraBottlePress {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  17% {
    transform: translateY(0) scale(1);
  }

  23% {
    transform: translateY(4px) scaleY(0.994);
  }

  31% {
    transform: translateY(0) scale(1);
  }

  62% {
    transform: translateY(-1px) scale(1.002);
  }
}

@keyframes scentraCapGlow {
  0%,
  17%,
  36%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }

  22%,
  27% {
    opacity: 0.75;
    transform: translateX(-50%) translateY(5px);
  }
}

@keyframes scentraNozzlePulse {
  0%,
  17%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }

  23% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.75);
  }

  38% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

@keyframes scentraSprayAppear {
  0%,
  18%,
  74%,
  100% {
    opacity: 0;
    transform: translateX(-4px) scaleX(0.22);
  }

  27% {
    opacity: 0.88;
    transform: translateX(0) scaleX(0.72);
  }

  48% {
    opacity: 0.72;
    transform: translateX(12px) scaleX(1);
  }

  63% {
    opacity: 0.12;
    transform: translateX(24px) scaleX(1.04);
  }
}

@keyframes scentraSprayDraw {
  0%,
  18%,
  100% {
    stroke-dashoffset: 320;
    opacity: 0;
  }

  29% {
    stroke-dashoffset: 210;
    opacity: 0.95;
  }

  49% {
    stroke-dashoffset: 0;
    opacity: 0.72;
  }

  67% {
    stroke-dashoffset: -110;
    opacity: 0;
  }
}

@keyframes scentraParticleMove {
  0%,
  20%,
  76%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.45);
  }

  34% {
    opacity: 0.58;
  }

  60% {
    opacity: 0.08;
    transform: translate(24px, -11px) scale(1.08);
  }
}

@keyframes scentraSignatureFade {
  0%,
  48%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }

  58%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scentra-stage,
  .bottle-wrap,
  .spray,
  .spray path,
  .nozzle-pulse,
  .cap-press-glow,
  .particle,
  .signature {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 540px) {
  .scentra-preloader-overlay {
    min-height: 100svh;
  }

  .scentra-preloader {
    padding-left: 12px;
    padding-right: 12px;
  }

  .scentra-stage {
    width: min(94vw, 420px);
  }
}