/* ===== SPLASH SCREEN ===== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #130c1e;
  transition: opacity .9s ease, visibility .9s ease;
}

.splash.fade-out {
  opacity: 0;
  visibility: hidden;
  filter: blur(6px);
  transform: scale(1.04);
}

.splash-content {
  position: relative;
  text-align: center;
  animation: contentEntrance .9s cubic-bezier(.22, 1, .36, 1) both;
}

/* SVG heart wrapper -- positions sparkles + ripple rings absolutely around it */
.splash-heart-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.1rem;
}

/* Ripple rings */
.splash-heart-wrap::before,
.splash-heart-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 86px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.7);
}

.splash-heart-wrap::before {
  border: 2px solid rgba(255, 100, 140, .55);
  animation: heartRipple 2.1s ease-out infinite;
}

.splash-heart-wrap::after {
  border: 1.5px solid rgba(192, 132, 252, .4);
  animation: heartRipple 2.1s ease-out .72s infinite;
}

.splash-heart-svg {
  display: block;
  width: 88px;
  height: 78px;
  animation: heartBeat 1.3s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 80, 120, .55));
}

.heart-glow {
  animation: heartGlowPulse 1.3s ease-in-out infinite;
}

/* Orbiting sparkles */
.splash-sparkle {
  position: absolute;
  opacity: 0;
  animation: sparklePop ease-in-out infinite;
}
.splash-sparkle.sp1 { width: 18px; height: 18px; top: -20px; left:  24px;  animation-duration: 2.4s; animation-delay: 0s; }
.splash-sparkle.sp2 { width: 14px; height: 14px; top: -12px; right: 18px;  animation-duration: 2.8s; animation-delay: .6s; }
.splash-sparkle.sp3 { width: 16px; height: 16px; top:  22px; right: -26px; animation-duration: 2.2s; animation-delay: 1.2s; }
.splash-sparkle.sp4 { width: 12px; height: 12px; top:  32px; left: -22px;  animation-duration: 3.1s; animation-delay: 1.8s; }

.splash-text {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  color: rgba(255, 200, 215, .9);
  margin-bottom: 1.5rem;
  letter-spacing: .03em;
}

/* Loading bar */
.splash-loader {
  width: 220px;
  height: 5px;
  background: rgba(255, 255, 255, .08);
  border-radius: 5px;
  overflow: hidden;
  margin: 0 auto;
}

.splash-loader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff4d78, #c084fc, #47d4ff, #fbbf24, #ff4d78);
  background-size: 300% 100%;
  border-radius: 5px;
  transition: width .25s ease;
  animation: loaderShimmer 2s linear infinite;
}

/* ===== KEYFRAMES ===== */
@keyframes heartRipple {
  0%   { transform: translate(-50%, -50%) scale(.75); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

@keyframes contentEntrance {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14%  { transform: scale(1.3); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.18); }
  70%  { transform: scale(1); }
}

@keyframes heartGlowPulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .75; }
}

@keyframes sparklePop {
  0%, 100% { opacity: 0;   transform: scale(.3) rotate(0deg); }
  30%       { opacity: 1;   transform: scale(1)  rotate(18deg); }
  65%       { opacity: .6;  transform: scale(.8) rotate(-10deg); }
}

@keyframes loaderShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
  .splash-heart-svg  { width: 70px; height: 62px; }
  .splash-text       { font-size: 1.25rem; }
  .splash-loader     { width: 175px; }
}

/* Landscape phone: tighter vertical layout */
@media (max-height: 520px) and (orientation: landscape) {
  .splash-heart-wrap { margin-bottom: .45rem; }
  .splash-heart-svg  { width: 54px; height: 48px; }
  .splash-text       { font-size: 1.05rem; margin-bottom: .7rem; }
  .splash-loader     { width: 155px; }
}