/* ============================================
   VALENTINE WEBSITE — style.css
   Dark · Modern · Glassmorphism
   ============================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background: linear-gradient(135deg, #0a0a0f 0%, #111128 30%, #1a0a2e 70%, #0d0d1a 100%);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

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

/* ---------- GLOW ORBS (soft background glow) ---------- */
.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: #6e1fad;
  top: -100px;
  left: -100px;
  animation: orbFloat1 8s ease-in-out infinite;
}

.orb-2 {
  width: 300px;
  height: 300px;
  background: #1a3a5c;
  bottom: -50px;
  right: -50px;
  animation: orbFloat2 10s ease-in-out infinite;
}

.orb-3 {
  width: 250px;
  height: 250px;
  background: #4a1a6b;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbFloat3 7s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 30px) scale(1.1); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, -40px) scale(1.15); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.2); }
}

/* ---------- FLOATING HEARTS BACKGROUND ---------- */
.hearts-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.heart {
  position: absolute;
  bottom: -60px;
  font-size: 1.4rem;
  opacity: 0;
  animation: floatHeart linear infinite;
}

/* Each heart gets unique position, size, speed */
.heart:nth-child(1)  { left: 5%;  font-size: 1.2rem; animation-duration: 8s;  animation-delay: 0s;   }
.heart:nth-child(2)  { left: 12%; font-size: 0.9rem; animation-duration: 10s; animation-delay: 1s;   }
.heart:nth-child(3)  { left: 20%; font-size: 1.6rem; animation-duration: 7s;  animation-delay: 2s;   }
.heart:nth-child(4)  { left: 30%; font-size: 1rem;   animation-duration: 11s; animation-delay: 0.5s; }
.heart:nth-child(5)  { left: 40%; font-size: 1.4rem; animation-duration: 9s;  animation-delay: 3s;   }
.heart:nth-child(6)  { left: 50%; font-size: 0.8rem; animation-duration: 12s; animation-delay: 1.5s; }
.heart:nth-child(7)  { left: 58%; font-size: 1.5rem; animation-duration: 8s;  animation-delay: 4s;   }
.heart:nth-child(8)  { left: 65%; font-size: 1.1rem; animation-duration: 10s; animation-delay: 2.5s; }
.heart:nth-child(9)  { left: 75%; font-size: 1.3rem; animation-duration: 7s;  animation-delay: 0s;   }
.heart:nth-child(10) { left: 82%; font-size: 0.9rem; animation-duration: 11s; animation-delay: 3.5s; }
.heart:nth-child(11) { left: 88%; font-size: 1.6rem; animation-duration: 9s;  animation-delay: 1s;   }
.heart:nth-child(12) { left: 35%; font-size: 1rem;   animation-duration: 13s; animation-delay: 5s;   }
.heart:nth-child(13) { left: 55%; font-size: 1.2rem; animation-duration: 8s;  animation-delay: 6s;   }
.heart:nth-child(14) { left: 70%; font-size: 0.8rem; animation-duration: 10s; animation-delay: 2s;   }
.heart:nth-child(15) { left: 92%; font-size: 1.4rem; animation-duration: 9s;  animation-delay: 4s;   }

@keyframes floatHeart {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.25;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(-110vh) translateX(30px) rotate(360deg) scale(1);
    opacity: 0;
  }
}

/* ---------- SCENE CONTAINER ---------- */
.scene {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

/* ---------- LANDING SCREEN ---------- */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
}

/* ---------- GIFT BOX ---------- */
.gift-wrapper {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gift-wrapper:hover {
  transform: scale(1.08);
}

.gift-wrapper:hover .gift-box {
  animation: gentleShake 0.4s ease-in-out infinite;
}

@keyframes gentleShake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(2deg); }
}

.gift-box {
  position: relative;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Lid --- */
.gift-lid {
  position: relative;
  z-index: 2;
  transform-origin: center bottom;
  width: 180px;
}

.lid-top {
  width: 180px;
  height: 40px;
  background: linear-gradient(135deg, #2d2d3f, #3a3a52);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 15px rgba(100, 80, 180, 0.3);
  position: relative;
}

.lid-ribbon {
  width: 30px;
  height: 40px;
  background: linear-gradient(135deg, #c9a84c, #a88a3a);
  margin: 0 auto;
  margin-top: -40px;
  border-radius: 3px;
  position: relative;
  z-index: 3;
}

/* Bow on top */
.lid-ribbon::before,
.lid-ribbon::after {
  content: '';
  position: absolute;
  top: -18px;
  width: 28px;
  height: 22px;
  background: linear-gradient(135deg, #c9a84c, #a88a3a);
  border-radius: 50% 50% 0 50%;
}
.lid-ribbon::before {
  left: -20px;
  transform: rotate(-15deg);
  border-radius: 50% 50% 50% 0;
}
.lid-ribbon::after {
  right: -20px;
  transform: rotate(15deg);
}

/* --- Box Body --- */
.gift-body {
  width: 160px;
  height: 120px;
  background: linear-gradient(135deg, #252538, #32324a);
  border-radius: 0 0 12px 12px;
  position: relative;
  box-shadow:
    0 8px 30px rgba(80, 60, 160, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.body-ribbon {
  width: 30px;
  height: 100%;
  background: linear-gradient(135deg, #c9a84c, #a88a3a);
  margin: 0 auto;
}

/* Inner glow */
.gift-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, transparent 70%);
}

/* --- Sparkles around gift --- */
.sparkle {
  position: absolute;
  font-size: 1rem;
  color: #a89050;
  opacity: 0;
  animation: sparklePulse 2s ease-in-out infinite;
  pointer-events: none;
}

.s1 { top: -10px;  left: -20px;  animation-delay: 0s;    }
.s2 { top: -15px;  right: -20px; animation-delay: 0.5s;  }
.s3 { bottom: 10px; left: -25px;  animation-delay: 1s;    }
.s4 { bottom: 5px;  right: -25px; animation-delay: 1.5s;  }

@keyframes sparklePulse {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

/* ---------- CTA TEXT ---------- */
.cta-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.3rem;
  font-weight: 600;
  text-shadow: 0 2px 15px rgba(120, 80, 200, 0.5);
  letter-spacing: 0.5px;
  animation: ctaPulse 2s ease-in-out infinite;
  user-select: none;
}

@keyframes ctaPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.03); }
}

/* Pulse hint ring */
.pulse-hint {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  animation: pulseRing 2.5s ease-out infinite;
  pointer-events: none;
}

@keyframes pulseRing {
  0%   { width: 60px; height: 60px; opacity: 0.8; }
  100% { width: 200px; height: 200px; opacity: 0; margin-top: -70px; margin-left: -70px; }
}

/* ---------- CONFETTI CANVAS ---------- */
#confettiCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* ---------- REVEAL SCREEN ---------- */
.reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

/* ---------- SLIDE HOLDER (fullscreen one-at-a-time) ---------- */
.slide-holder {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------- FULLSCREEN MESSAGE SLIDE ---------- */
.msg-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  opacity: 0;
  pointer-events: none;
}

.msg-slide .slide-emoji {
  font-size: 4.5rem;
  margin-bottom: 24px;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.15));
  animation: emojiFloat 3s ease-in-out infinite;
}

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.05); }
}

.msg-slide .slide-card {
  max-width: 500px;
  width: 90%;
  padding: 36px 32px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on card */
.msg-slide .slide-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 60%
  );
  animation: shimmer 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.msg-slide .slide-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.7;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
}

/* Title slide — bigger */
.msg-slide.is-title .slide-text {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.msg-slide.is-title .slide-emoji {
  font-size: 5.5rem;
}

/* Final slide — subtle glow */
.msg-slide.is-final .slide-card {
  border: 2px solid rgba(160, 120, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 12px 48px rgba(100, 60, 200, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.msg-slide.is-final .slide-text {
  font-size: 1.5rem;
  font-weight: 700;
}

/* Slide counter dots */
.slide-dots {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 150;
  opacity: 0;
}

.slide-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.4s ease;
}

.slide-dots .dot.active {
  background: #a78bfa;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.6);
  transform: scale(1.25);
}

/* ---------- MUSIC TOGGLE ---------- */
.music-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.music-toggle:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
}

.music-toggle.playing {
  animation: musicBounce 1s ease-in-out infinite;
}

@keyframes musicBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

/* ---------- BODY TRANSITION (slightly lighter dark after reveal) ---------- */
body.bright {
  background: linear-gradient(135deg, #0f0f1e 0%, #1a1640 30%, #241450 70%, #151230 100%);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
  .gift-box {
    width: 120px;
  }

  .gift-lid, .lid-top {
    width: 140px;
  }

  .gift-body {
    width: 120px;
    height: 90px;
  }

  .lid-top {
    height: 32px;
  }

  .lid-ribbon {
    width: 24px;
    height: 32px;
    margin-top: -32px;
  }

  .body-ribbon {
    width: 24px;
  }

  .cta-text {
    font-size: 1.1rem;
  }

  .msg-slide .slide-emoji {
    font-size: 3.5rem;
    margin-bottom: 18px;
  }

  .msg-slide .slide-card {
    padding: 28px 22px;
  }

  .msg-slide .slide-text {
    font-size: 1.15rem;
  }

  .msg-slide.is-title .slide-text {
    font-size: 1.45rem;
  }

  .msg-slide.is-title .slide-emoji {
    font-size: 4.2rem;
  }
}

@media (max-width: 380px) {
  .gift-box {
    width: 100px;
  }

  .gift-lid, .lid-top {
    width: 120px;
  }

  .gift-body {
    width: 100px;
    height: 75px;
  }

  .msg-slide .slide-emoji {
    font-size: 3rem;
    margin-bottom: 14px;
  }

  .msg-slide .slide-card {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .msg-slide .slide-text {
    font-size: 1rem;
  }

  .msg-slide.is-title .slide-text {
    font-size: 1.2rem;
  }
}

/* ---------- UTILITY: smooth transition for body bg ---------- */
body {
  transition: background 1.5s ease;
}