/* pl-preloader — scoped pl- prefix only */
html.pl-loading body {
  overflow: hidden;
}

html.pl-loading #page {
  visibility: hidden;
}

#pl-wrap {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.47s ease, visibility 0.47s ease;
}

#pl-wrap.pl-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#pl-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 5%, rgba(255, 200, 225, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 45% 38% at 95% 95%, rgba(212, 234, 247, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 32% at 5% 85%, rgba(255, 180, 210, 0.09) 0%, transparent 60%);
}

.pl-pts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.pl-pt {
  position: absolute;
  border-radius: 50%;
  animation: pl-pUp linear infinite;
}

.pl-ctr {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pl-ha {
  position: relative;
  width: 340px;
  height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.pl-aura-pink {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 69, 115, 0.09) 0%, rgba(255, 130, 160, 0.05) 40%, transparent 68%);
  filter: blur(22px);
  animation: pl-pinkGlow 2.6s ease-in-out infinite;
}

.pl-aura-blue {
  position: absolute;
  width: 235px;
  height: 235px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 234, 247, 0.14) 0%, rgba(180, 210, 245, 0.07) 45%, transparent 66%);
  filter: blur(18px);
  animation: pl-blueGlow 2.6s 0.9s ease-in-out infinite;
}

.pl-aura-core {
  position: absolute;
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 252, 0.98) 0%, rgba(255, 240, 248, 0.5) 55%, transparent 70%);
  animation: pl-auraRing 3s 0.4s ease-in-out infinite;
}

.pl-heart-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 258px;
  height: 244px;
  overflow: visible;
}

.pl-hp-pink {
  fill: none;
  stroke: url(#pl-hgPink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: pl-drawPink 1.34s 0.10s cubic-bezier(0.35, 0, 0.15, 1) forwards;
  filter: drop-shadow(0 0 6px rgba(255, 69, 115, 0.55)) drop-shadow(0 0 14px rgba(255, 69, 115, 0.3));
}

.pl-hp-blue {
  fill: none;
  stroke: url(#pl-hgBlue);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 580;
  stroke-dashoffset: 580;
  animation: pl-drawBlue 1.34s 0.57s cubic-bezier(0.35, 0, 0.15, 1) forwards;
  filter: drop-shadow(0 0 5px rgba(180, 220, 255, 0.7)) drop-shadow(0 0 12px rgba(212, 234, 247, 0.5));
}

.pl-mini-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.pl-mh {
  position: absolute;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.pl-logo {
  width: 190px;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 4;
  animation: pl-logoF 3.4s ease-in-out infinite, pl-logoShadow 4s ease-in-out infinite;
}

.pl-brand {
  text-align: center;
  margin-bottom: 14px;
  animation: pl-fadeUp 0.54s 0.40s ease both;
  opacity: 0;
  animation-fill-mode: forwards;
}

.pl-brand-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Prompt", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #6b4f0a 0%,
    #a67c00 14%,
    #d4af37 28%,
    #ffd700 42%,
    #ffeb8a 50%,
    #ffd700 58%,
    #d4af37 72%,
    #a67c00 86%,
    #6b4f0a 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(107, 79, 10, 0.35)) drop-shadow(0 0 14px rgba(255, 215, 0, 0.22));
  animation: pl-goldShim 7s ease-in-out infinite;
}

.pl-bdash {
  height: 1px;
  width: 32px;
  flex-shrink: 0;
  background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.85), transparent);
  animation: pl-goldDash 7s ease-in-out infinite;
  -webkit-text-fill-color: unset;
}

.pl-tagline {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 3px;
  margin-bottom: 32px;
  background: linear-gradient(
    90deg,
    #6b4f0a 0%,
    #a67c00 14%,
    #d4af37 28%,
    #ffd700 42%,
    #ffeb8a 50%,
    #ffd700 58%,
    #d4af37 72%,
    #a67c00 86%,
    #6b4f0a 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 3px rgba(107, 79, 10, 0.32)) drop-shadow(0 0 18px rgba(255, 215, 0, 0.2));
  animation: pl-goldShim 8s 0.5s ease-in-out infinite;
}

.pl-prog {
  width: 200px;
  animation: pl-fadeUp 0.54s 0.67s ease both;
  opacity: 0;
  animation-fill-mode: forwards;
}

.pl-prog-track {
  height: 1.5px;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.05);
}

.pl-prog-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff4573, #ff8989, #ffa6a6, #a8d4f7, #ffa6a6, #ff4573);
  background-size: 400%;
  animation: pl-fillP 2.41s cubic-bezier(0.4, 0, 0.2, 1) forwards, pl-shimP 1.34s linear infinite;
}

.pl-prog-pct {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, #c9a84c, #ffd700, #fff5a0, #ffd700, #c9a84c);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pl-goldShim 3s linear infinite;
}

.pl-dots {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  justify-content: center;
  animation: pl-fadeUp 0.54s 0.80s ease both;
  opacity: 0;
  animation-fill-mode: forwards;
}

.pl-d {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 69, 115, 0.18);
}

.pl-d1 {
  animation: pl-dotB 1.3s 0s ease-in-out infinite;
}

.pl-d2 {
  animation: pl-dotB 1.3s 0.24s ease-in-out infinite;
}

.pl-d3 {
  animation: pl-dotB 1.3s 0.48s ease-in-out infinite;
}

@keyframes pl-drawPink {
  from { stroke-dashoffset: 640; }
  to { stroke-dashoffset: 0; }
}

@keyframes pl-drawBlue {
  from { stroke-dashoffset: 580; }
  to { stroke-dashoffset: 0; }
}

@keyframes pl-logoF {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pl-fillP {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes pl-shimP {
  0% { background-position: -300% center; }
  100% { background-position: 300% center; }
}

@keyframes pl-fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pl-dotB {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.8); opacity: 1; }
}

@keyframes pl-pUp {
  0% { transform: translateY(105vh); opacity: 0; }
  8% { opacity: 0.7; }
  92% { opacity: 0.5; }
  100% { transform: translateY(-20px); opacity: 0; }
}

@keyframes pl-pinkGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes pl-blueGlow {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.1); }
}

@keyframes pl-auraRing {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.06); }
}

@keyframes pl-logoShadow {
  0% { filter: drop-shadow(0 6px 24px rgba(255, 69, 115, 0.25)) drop-shadow(0 0 40px rgba(255, 69, 115, 0.1)); }
  33% { filter: drop-shadow(0 6px 28px rgba(212, 234, 247, 0.3)) drop-shadow(0 0 55px rgba(180, 210, 255, 0.2)); }
  66% { filter: drop-shadow(0 6px 24px rgba(255, 166, 166, 0.28)) drop-shadow(0 0 45px rgba(255, 130, 180, 0.15)); }
  100% { filter: drop-shadow(0 6px 24px rgba(255, 69, 115, 0.25)) drop-shadow(0 0 40px rgba(255, 69, 115, 0.1)); }
}

@keyframes pl-goldShim {
  0% { background-position: -300% center; filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0)); }
  30% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)); }
  50% { background-position: 0% center; filter: drop-shadow(0 0 20px rgba(255, 235, 150, 0.7)); }
  70% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5)); }
  100% { background-position: 300% center; filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0)); }
}

@keyframes pl-goldDash {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@keyframes pl-hFL1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(-15deg); }
  12% { opacity: 1; }
  88% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-32px, -72px) scale(1.15) rotate(-22deg); }
}

@keyframes pl-hFL2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(-28deg); }
  12% { opacity: 0.9; }
  88% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-18px, -88px) scale(1) rotate(-35deg); }
}

@keyframes pl-hFL3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.65) rotate(-10deg); }
  12% { opacity: 1; }
  88% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-42px, -60px) scale(1.25) rotate(-14deg); }
}

@keyframes pl-hFL4 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.35) rotate(-38deg); }
  12% { opacity: 0.85; }
  88% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-12px, -80px) scale(0.95) rotate(-45deg); }
}

@keyframes pl-hFL5 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.55) rotate(-20deg); }
  12% { opacity: 0.95; }
  88% { opacity: 0.65; }
  100% { opacity: 0; transform: translate(-24px, -95px) scale(1.1) rotate(-26deg); }
}

@keyframes pl-hFL6 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.45) rotate(-8deg); }
  12% { opacity: 1; }
  88% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-52px, -50px) scale(1.2) rotate(-12deg); }
}

@keyframes pl-hFR1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(15deg); }
  12% { opacity: 1; }
  88% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(32px, -72px) scale(1.15) rotate(22deg); }
}

@keyframes pl-hFR2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(28deg); }
  12% { opacity: 0.9; }
  88% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(18px, -88px) scale(1) rotate(35deg); }
}

@keyframes pl-hFR3 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.65) rotate(10deg); }
  12% { opacity: 1; }
  88% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(42px, -60px) scale(1.25) rotate(14deg); }
}

@keyframes pl-hFR4 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.35) rotate(38deg); }
  12% { opacity: 0.85; }
  88% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(12px, -80px) scale(0.95) rotate(45deg); }
}

@keyframes pl-hFR5 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.55) rotate(20deg); }
  12% { opacity: 0.95; }
  88% { opacity: 0.65; }
  100% { opacity: 0; transform: translate(24px, -95px) scale(1.1) rotate(26deg); }
}

@keyframes pl-hFR6 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.45) rotate(8deg); }
  12% { opacity: 1; }
  88% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(52px, -50px) scale(1.2) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  #pl-wrap * {
    animation: none !important;
    transition: none !important;
  }

  #pl-wrap.pl-done {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
}