/* =============================================
   YUVITE WEDDING — LOADING SCREEN V3
   Ultra-Premium Animated Heart Opening
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Great+Vibes&family=Inter:wght@300;400;500&display=swap');

/* ── Loader Wrapper ── */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: linear-gradient(160deg, #fdfbf7 0%, #f7f0e8 40%, #fdf2f0 70%, #f5ebe4 100%);
  overflow: hidden;
}

/* ── Split Door Sections ── */
#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: linear-gradient(160deg, #fdfbf7 0%, #f7f0e8 40%, #fdf2f0 70%, #f5ebe4 100%);
  z-index: 1000;
  transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* ── Loaded State Transitions ── */
.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 1s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.loaded .wrapper {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: all 0.6s ease-out;
}

.loaded .wrapper-text {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(30px);
  transition: all 0.5s 0.1s ease-out;
}

.loaded .wrapper-text-long {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(30px);
  transition: all 0.5s 0.1s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.3s 1.5s ease-out;
}

/* Hide original bouncing dots — we replace with a CSS heart */
.loaded #loader-wrapper .wrapper span {
  opacity: 0;
}

/* ═══════════════════════════════════════════
   ANIMATED HEART SYMBOL (Pure CSS)
   ═══════════════════════════════════════════ */

.wrapper {
  z-index: 1003;
  width: 160px;
  height: 160px;
  text-align: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hide the original blob spans - replace with heart */
.wrapper span:nth-child(1),
.wrapper span:nth-child(2),
.wrapper span:nth-child(3),
.wrapper span.shadow {
  display: none !important;
}

/* ── CSS Heart Shape ── */
.wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  background-color: #c9716b;
  transform: translate(-50%, -60%) rotate(-45deg);
  border-radius: 4px;
  animation: heartPulse 1.4s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(201, 113, 107, 0.3),
    0 0 60px rgba(201, 113, 107, 0.15);
  z-index: 2;
}

.wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  background-color: transparent;
  transform: translate(-50%, -60%) rotate(-45deg);
  z-index: 3;
}

/* Heart top-left lobe */
.wrapper::before {
  background: #c9716b;
  border-radius: 4px;
}

/* We use the SVG filter (#love) that already exists in the HTML
   but also build the heart shape with box-shadow trick */
.wrapper {
  filter: none;
  -webkit-filter: none;
}

/* Actual Heart using pseudo-element with clip-path */
.wrapper::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background: linear-gradient(135deg, #e88d85 0%, #c9716b 40%, #b85c57 100%);
  clip-path: path('M30 54 C30 54, 0 36, 0 18 C0 6, 10 0, 18 0 C24 0, 28 4, 30 8 C32 4, 36 0, 42 0 C50 0, 60 6, 60 18 C60 36, 30 54, 30 54 Z');
  animation: heartPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(201, 113, 107, 0.4);
  z-index: 2;
}

/* Heart glow ring */
.wrapper::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  border: 1.5px solid rgba(201, 113, 107, 0.2);
  animation: glowRing 2.8s ease-in-out infinite;
  z-index: 1;
}

/* ── Heart Pulse Animation ── */
@keyframes heartPulse {
  0%   { transform: translate(-50%, -55%) scale(1); }
  5%   { transform: translate(-50%, -55%) scale(1.15); }
  10%  { transform: translate(-50%, -55%) scale(1.05); }
  15%  { transform: translate(-50%, -55%) scale(1.2); }
  50%  { transform: translate(-50%, -55%) scale(1); }
  100% { transform: translate(-50%, -55%) scale(1); }
}

/* ── Glow Ring Expansion ── */
@keyframes glowRing {
  0% {
    transform: translate(-50%, -55%) scale(1);
    opacity: 0.6;
    border-color: rgba(201, 113, 107, 0.3);
  }
  50% {
    transform: translate(-50%, -55%) scale(1.5);
    opacity: 0;
    border-color: rgba(201, 113, 107, 0);
  }
  51% {
    transform: translate(-50%, -55%) scale(1);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -55%) scale(1);
    opacity: 0.6;
    border-color: rgba(201, 113, 107, 0.3);
  }
}

/* ═══════════════════════════════════════════
   FLOATING HEART PARTICLES (Rising)
   ═══════════════════════════════════════════ */

#loader-wrapper .loader-section.section-left::before,
#loader-wrapper .loader-section.section-left::after,
#loader-wrapper .loader-section.section-right::before,
#loader-wrapper .loader-section.section-right::after {
  content: '♥';
  position: absolute;
  font-size: 12px;
  color: rgba(201, 113, 107, 0.15);
  z-index: 1001;
  animation: floatUp 6s ease-in infinite;
}

#loader-wrapper .loader-section.section-left::before {
  left: 25%;
  bottom: -20px;
  font-size: 14px;
  animation-delay: 0s;
  animation-duration: 5s;
}

#loader-wrapper .loader-section.section-left::after {
  left: 65%;
  bottom: -20px;
  font-size: 10px;
  animation-delay: 1.5s;
  animation-duration: 7s;
  color: rgba(201, 113, 107, 0.1);
}

#loader-wrapper .loader-section.section-right::before {
  left: 35%;
  bottom: -20px;
  font-size: 16px;
  animation-delay: 2.5s;
  animation-duration: 6s;
  color: rgba(201, 113, 107, 0.12);
}

#loader-wrapper .loader-section.section-right::after {
  left: 70%;
  bottom: -20px;
  font-size: 8px;
  animation-delay: 4s;
  animation-duration: 8s;
  color: rgba(201, 113, 107, 0.08);
}

@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) rotate(45deg) scale(0.5);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════
   "THE WEDDING OF" LABEL
   ═══════════════════════════════════════════ */

#loader-wrapper::after {
  content: 'The Wedding Of';
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #b8a090;
  z-index: 1004;
  animation: labelFadeIn 1.5s 0.3s ease-out both;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   DECORATIVE BOTTOM ELEMENT
   ═══════════════════════════════════════════ */

#loader-wrapper::before {
  content: '';
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a96e, transparent);
  z-index: 1004;
  animation: lineGrow 2.5s 0.8s ease-out forwards;
}

@keyframes lineGrow {
  to {
    width: 80px;
  }
}

/* ═══════════════════════════════════════════
   COUPLE NAMES TYPOGRAPHY
   ═══════════════════════════════════════════ */

.wrapper-text {
  z-index: 1003;
  width: 85vw;
  max-width: 460px;
  height: auto;
  min-height: 130px;
  text-align: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper-text-long {
  z-index: 1003;
  width: 85vw;
  max-width: 460px;
  height: auto;
  min-height: 90px;
  text-align: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Name text styling */
.wrapper span.text,
.wrapper-text span.text {
  position: relative;
  width: 100%;
  background-color: transparent;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  text-align: center;
  color: #7a5222;
  line-height: 1.5;
  animation: nameSlideIn 1.2s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  text-shadow: 0 1px 2px rgba(122, 82, 34, 0.08);
}

.wrapper-text-long span.text-long {
  position: relative;
  width: 100%;
  background-color: transparent;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #7a5222;
  line-height: 1.5;
  animation: nameSlideIn 1.2s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ═══════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════ */

@keyframes labelFadeIn {
  from {
    opacity: 0;
    letter-spacing: 12px;
  }
  to {
    opacity: 1;
    letter-spacing: 6px;
  }
}

@keyframes nameSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ═══════════════════════════════════════════
   SPARKLE ORBIT AROUND HEART
   ═══════════════════════════════════════════ */

/* We use a hidden <span> inside .wrapper via the SVG filter defs area.
   Since we can't add HTML, we simulate with a gradient dot on the glow ring */

@keyframes sparkleOrbit {
  0% {
    transform: translate(-50%, -55%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -55%) rotate(360deg);
  }
}

/* Sparkle dot orbiting - reusing ::after with orbit */
.wrapper::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  border: none;
  background: transparent;
  animation: sparkleOrbit 4s linear infinite;
  z-index: 1;
}

/* Sparkle dot as a pseudo-radial */
.wrapper::after {
  background-image: radial-gradient(
    circle 3px at 50px 0px,
    rgba(201, 168, 110, 0.8) 0%,
    rgba(201, 168, 110, 0) 100%
  );
  filter: blur(0.5px);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 400px) {
  .wrapper::before {
    width: 48px;
    height: 48px;
    clip-path: path('M24 43.2 C24 43.2, 0 28.8, 0 14.4 C0 4.8, 8 0, 14.4 0 C19.2 0, 22.4 3.2, 24 6.4 C25.6 3.2, 28.8 0, 33.6 0 C40 0, 48 4.8, 48 14.4 C48 28.8, 24 43.2, 24 43.2 Z');
  }

  .wrapper span.text,
  .wrapper-text span.text {
    font-size: 24px;
  }

  .wrapper-text-long span.text-long {
    font-size: 12px;
  }

  #loader-wrapper::after {
    font-size: 8px;
    letter-spacing: 4px;
  }
}