/* ===========================================================
   DEEKSHA'S 23RD BIRTHDAY — STYLESHEET
   Theme: Luxury Glassmorphism · Soft Pink · White · Gold · Lavender
   =========================================================== */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* Core palette */
  --c-blush:        #FBEAF0;   /* soft pink background */
  --c-blush-deep:   #F3C9D8;   /* deeper pink accent */
  --c-lavender:     #E7E1F7;   /* lavender background */
  --c-lavender-deep:#C9B6EC;   /* deeper lavender accent */
  --c-white:        #FFFDFB;
  --c-gold:         #D8B26A;   /* primary gold */
  --c-gold-light:   #F1DDA8;
  --c-plum:         #3A2240;   /* deep plum text / hero bg */
  --c-plum-soft:    #5C3A63;
  --c-ink:          #4A3B4D;   /* body text on light bg */

  /* Glass */
  --glass-bg: rgba(255, 253, 251, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(90, 50, 80, 0.15);

  /* Type */
  --f-display: 'Playfair Display', serif;
  --f-body: 'Outfit', sans-serif;

  /* Motion */
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur: .8s;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family: var(--f-body);
  color: var(--c-ink);
  background: linear-gradient(160deg, var(--c-blush) 0%, var(--c-lavender) 55%, var(--c-blush) 100%);
  overflow-x: hidden;
  position: relative;
  cursor: default;
}

::selection{ background: var(--c-gold-light); color: var(--c-plum); }

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family: var(--f-body); border:none; cursor:pointer; background:none; }

h1,h2,h3,h4{ font-family: var(--f-display); font-weight:600; color: var(--c-plum); }

.section-title{
  text-align:center;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: .6rem;
  position: relative;
}
.section-sub{
  text-align:center;
  font-family: var(--f-body);
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size:.72rem;
  color: var(--c-gold);
  font-weight:600;
  margin-bottom: 1rem;
}
.section-divider{
  width: 70px; height: 2px;
  margin: 0 auto 3rem auto;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

section{ position: relative; padding: 7rem 6vw; }

/* ---------- 2. Loader ---------- */
#loader{
  position: fixed; inset:0; z-index: 9999;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background: linear-gradient(160deg, var(--c-plum), #2a1730);
  transition: opacity .9s var(--ease-soft), visibility .9s var(--ease-soft);
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring{
  width:74px; height:74px; border-radius:50%;
  border: 2px solid rgba(216,178,106,.25);
  border-top-color: var(--c-gold);
  animation: spin 1.1s linear infinite;
  margin-bottom: 1.8rem;
  position: relative;
}
.loader-ring::after{
  content:"\f004";
  font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:1rem; color: var(--c-gold-light);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes pulse{ 0%,100%{ opacity:.4; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.08);} }
.loader-text{
  font-family: var(--f-display); color: var(--c-gold-light);
  font-size: 1.15rem; letter-spacing:.03em; font-style: italic;
}

/* ---------- 3. Background FX (particles/hearts/stars) ---------- */
#bg-fx{
  position: fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.fx-item{
  position:absolute; bottom:-10%;
  opacity:.55; color: var(--c-gold);
  animation: floatUp linear infinite;
}
@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.5; }
  100%{ transform: translateY(-115vh) translateX(var(--drift,20px)) rotate(360deg); opacity:0; }
}

/* ---------- 4. Hero ---------- */
.hero{
  height:100vh; padding:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: radial-gradient(circle at 30% 20%, #4a2b52, var(--c-plum) 60%, #281427 100%);
  overflow:hidden;
}
.hero-bg-gradient{
  position:absolute; inset:0;
  background: linear-gradient(120deg, #4a2b52, #6b3f6f, #3a2240, #5c3a63);
  background-size: 300% 300%;
  animation: gradientShift 16s ease infinite;
  z-index:0;
}
@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.hero-content{ position:relative; z-index:2; padding: 0 5vw; }
.eyebrow{
  color: var(--c-gold-light); letter-spacing:.3em; text-transform:uppercase;
  font-size:.75rem; margin-bottom:1.2rem; opacity:0; animation: fadeUp 1s .2s forwards;
}
.hero-title{
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  color: var(--c-white);
  line-height: 1.08;
  text-shadow: 0 0 30px rgba(216,178,106,.25);
}
.hero-title .line1{ display:block; opacity:0; animation: fadeUp 1s .4s forwards; }
.hero-title .line2{
  display:block; font-style:italic; color: var(--c-gold-light);
  opacity:0; animation: fadeUp 1s .65s forwards;
}
.hero-tagline{
  margin-top:1.6rem; color: rgba(255,253,251,.82); font-size: clamp(.95rem,2vw,1.15rem);
  font-weight:300; opacity:0; animation: fadeUp 1s .95s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:translateY(0); } }

.glow-btn{
  margin-top: 2.6rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 1rem 2.4rem;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-light));
  color: var(--c-plum); font-weight:600; font-size: .95rem; letter-spacing:.03em;
  box-shadow: 0 0 25px rgba(216,178,106,.5), 0 8px 30px rgba(0,0,0,.25);
  opacity:0; animation: fadeUp 1s 1.25s forwards;
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.glow-btn:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 0 40px rgba(216,178,106,.75), 0 10px 35px rgba(0,0,0,.3); }
.scroll-cue{
  position:absolute; bottom: 2.4rem; left:50%; transform:translateX(-50%);
  color: rgba(255,253,251,.7); font-size:1.3rem; z-index:2;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: translate(-50%,0); } 50%{ transform: translate(-50%,10px); } }

/* ---------- 5. Glass card base ---------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--glass-shadow);
}

/* ---------- 6. Countdown ---------- */
.countdown-section{ text-align:center; }
.countdown-wrap{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 1.6rem;
  max-width: 760px; margin: 0 auto;
}
.time-card{
  width: 130px; padding: 1.6rem 0;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.time-num{
  font-family: var(--f-display); font-size: 2.6rem; color: var(--c-plum);
  font-weight:700;
}
.time-label{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color: var(--c-gold); font-weight:600; }
.birthday-live{
  font-family: var(--f-display); font-size: clamp(2rem,5vw,3.2rem);
  color: var(--c-plum); animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ text-shadow:0 0 10px rgba(216,178,106,.3);} 50%{ text-shadow:0 0 30px rgba(216,178,106,.7);} }

/* ---------- 7. Gallery (masonry) ---------- */
.gallery-grid{
  display:grid; gap: 1.2rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 10px;
  max-width: 1200px; margin:0 auto;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius: 18px;
  cursor: pointer; grid-row-end: span 28;
  box-shadow: 0 10px 25px rgba(90,50,80,.12);
  transition: transform .5s var(--ease-soft);
}
.gallery-item:nth-child(2n){ grid-row-end: span 22; }
.gallery-item:nth-child(3n){ grid-row-end: span 34; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease-soft); }
.gallery-item:hover{ transform: translateY(-6px); }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item .img-placeholder{ position:absolute; inset:0; display:none; }
.gallery-item.img-missing img{ display:none; }
.gallery-item.img-missing .img-placeholder{ display:flex; }
.gallery-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(58,34,64,.65), transparent 55%);
  display:flex; align-items:flex-end; padding:1rem;
  opacity:0; transition: opacity .4s ease;
  color: var(--c-white); font-size:1.2rem;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.img-placeholder{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(135deg, var(--c-blush-deep), var(--c-lavender-deep));
  color: var(--c-plum); font-size:1.6rem;
}
.img-placeholder span{ font-size:.7rem; letter-spacing:.05em; font-family: var(--f-body); }

/* Lightbox */
#lightbox{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background: rgba(40,20,40,.85); backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition: opacity .4s ease, visibility .4s ease;
}
#lightbox.active{ opacity:1; visibility:visible; }
#lightbox img{ max-width: 86vw; max-height: 80vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:2rem; right:2.6rem; color: var(--c-white); font-size:1.8rem;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  color: var(--c-white); font-size: 1.8rem; padding: 1rem;
}
.lightbox-nav.prev{ left: 1rem; } .lightbox-nav.next{ right: 1rem; }

/* ---------- 8. Timeline ---------- */
.timeline{ max-width: 880px; margin: 0 auto; position:relative; }
.timeline::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background: linear-gradient(to bottom, transparent, var(--c-gold), transparent);
  transform: translateX(-50%);
}
.timeline-item{
  position:relative; width:50%; padding: 0 3rem 3.4rem;
  opacity:0; transform: translateY(40px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.timeline-item.in-view{ opacity:1; transform: translateY(0); }
.timeline-item:nth-child(odd){ left:0; text-align:right; }
.timeline-item:nth-child(even){ left:50%; text-align:left; }
.timeline-dot{
  position:absolute; top:6px; width:16px; height:16px; border-radius:50%;
  background: var(--c-gold); box-shadow: 0 0 0 6px rgba(216,178,106,.2);
}
.timeline-item:nth-child(odd) .timeline-dot{ right:-8px; }
.timeline-item:nth-child(even) .timeline-dot{ left:-8px; }
.timeline-card{ padding: 1.6rem; display:inline-block; width:100%; }
.timeline-card .img-placeholder{ height:130px; border-radius:14px; margin-bottom:1rem; font-size:1.2rem; }
.timeline-card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.timeline-card p{ font-size:.92rem; color: var(--c-ink); opacity:.85; line-height:1.5; }

@media (max-width: 720px){
  .timeline::before{ left: 18px; }
  .timeline-item, .timeline-item:nth-child(even){ left:0; width:100%; text-align:left; padding-left: 3rem; padding-right:0; }
  .timeline-item:nth-child(odd){ text-align:left; }
  .timeline-item .timeline-dot, .timeline-item:nth-child(odd) .timeline-dot{ left:10px; right:auto; }
}

/* ---------- 9. Video Gallery ---------- */
.video-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem;
  max-width: 1000px; margin:0 auto;
}
.video-card{
  border-radius: 20px; overflow:hidden; position:relative;
  box-shadow: 0 12px 30px rgba(90,50,80,.15);
  transition: transform .5s var(--ease-soft);
}
.video-card:hover{ transform: translateY(-6px); }
.video-card video{ width:100%; aspect-ratio: 16/10; object-fit:cover; background: var(--c-plum); }
.video-fallback{
  width:100%; aspect-ratio:16/10;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background: linear-gradient(135deg, var(--c-lavender-deep), var(--c-blush-deep));
  color: var(--c-plum);
}
.video-play-btn{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 58px; height:58px; border-radius:50%;
  background: rgba(255,253,251,.85); color: var(--c-plum);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .3s ease;
}
.video-card:hover .video-play-btn{ transform: translate(-50%,-50%) scale(1.1); }

/* ---------- 10. Letter ---------- */
.letter-wrap{ max-width: 680px; margin:0 auto; perspective: 1000px; }
.letter-paper{
  background: linear-gradient(160deg, #fffdf8, #fbf3e6);
  border-radius: 6px;
  padding: 3.2rem 3rem;
  box-shadow: 0 20px 50px rgba(90,50,80,.18), inset 0 0 0 1px rgba(216,178,106,.25);
  position: relative;
  font-family: var(--f-display);
  color: var(--c-plum-soft);
}
.letter-paper::before{
  content:"\f005"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; top:1.4rem; right:1.6rem; color: var(--c-gold); opacity:.5; font-size:1.1rem;
}
.letter-paper h3{ font-size:1.5rem; margin-bottom:1.4rem; }
.letter-paper p{ font-size:1.05rem; line-height:1.85; margin-bottom:1.1rem; font-family: var(--f-body); font-weight:300; }
.letter-sign{ margin-top:1.2rem; font-style:italic; font-family: var(--f-display); font-size:1.1rem; color: var(--c-gold); text-align:right; }

/* ---------- 11. Music Player ---------- */
#music-player{
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 500;
  display:flex; align-items:center; gap:.8rem;
  padding: .7rem 1.1rem;
  border-radius: 50px;
}
.music-btn{
  width:42px; height:42px; border-radius:50%;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-light));
  display:flex; align-items:center; justify-content:center; color:var(--c-plum); font-size:1rem;
  flex-shrink:0;
}
.music-bars{ display:flex; gap:3px; align-items:center; height:18px; }
.music-bars span{
  width:3px; background: var(--c-gold); border-radius:2px; height:6px;
  animation: bar 1s ease-in-out infinite;
  animation-play-state: paused;
}
#music-player.playing .music-bars span{ animation-play-state: running; }
.music-bars span:nth-child(2){ animation-delay:.15s; }
.music-bars span:nth-child(3){ animation-delay:.3s; }
@keyframes bar{ 0%,100%{ height:5px;} 50%{ height:17px;} }
.music-label{ font-size:.78rem; color: var(--c-plum); max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 12. Wishes Wall ---------- */
.wishes-wrap{ position:relative; max-width:1100px; margin:0 auto; min-height: 380px; }
.wish-card{
  position:absolute; padding: 1.1rem 1.5rem; max-width:220px;
  font-family: var(--f-display); font-style:italic; font-size:1rem; color: var(--c-plum-soft);
  animation: drift 7s ease-in-out infinite;
}
@keyframes drift{ 0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)); } 50%{ transform: translateY(-16px) rotate(var(--rot,0deg)); } }

/* ---------- 13. Surprise / Gift ---------- */
.surprise-section{ text-align:center; }
.gift-wrap{ display:flex; flex-direction:column; align-items:center; gap:2rem; }
.gift-box{ position:relative; width:160px; height:140px; cursor:pointer; }
.gift-lid{
  position:absolute; top:-26px; left:-10px; width:180px; height:38px;
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-light));
  border-radius: 8px; transition: transform .7s var(--ease-soft), opacity .7s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}
.gift-base{
  position:absolute; bottom:0; width:160px; height:110px;
  background: linear-gradient(160deg, var(--c-blush-deep), var(--c-lavender-deep));
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(90,50,80,.25);
}
.gift-ribbon-v{ position:absolute; left:50%; top:0; bottom:0; width:18px; background: var(--c-gold); transform: translateX(-50%); }
.gift-ribbon-h{ position:absolute; top:50%; left:0; right:0; height:18px; background: var(--c-gold); transform: translateY(-50%); }
.gift-box.opened .gift-lid{ transform: translateY(-90px) rotate(-25deg); opacity:0; }
.gift-message{
  font-family: var(--f-display); font-size: clamp(1.3rem,3vw,1.9rem); color: var(--c-plum);
  max-width: 520px; opacity:0; transform: translateY(20px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.gift-message.show{ opacity:1; transform: translateY(0); }
#gift-btn{
  padding: .9rem 2.2rem; border-radius:50px;
  background: linear-gradient(135deg, var(--c-plum), var(--c-plum-soft));
  color: var(--c-white); font-weight:600; letter-spacing:.02em;
  box-shadow: 0 10px 25px rgba(58,34,64,.3);
  transition: transform .4s var(--ease-soft);
}
#gift-btn:hover{ transform: translateY(-3px); }

/* Confetti & Fireworks canvases */
#confetti-canvas, #fireworks-canvas{
  position: fixed; inset:0; z-index: 800; pointer-events:none;
}

/* ---------- 14. Ending ---------- */
.ending-section{
  text-align:center; background: radial-gradient(circle at 50% 30%, #4a2b52, var(--c-plum) 70%);
  color: var(--c-white); padding: 8rem 6vw;
}
.ending-section h2{ color: var(--c-gold-light); }
.ending-section p{ max-width: 520px; margin: .6rem auto 0; font-weight:300; opacity:.85; line-height:1.7; }
.ending-section .fa-heart{ color: var(--c-gold); margin-top:1.6rem; font-size:1.4rem; animation: pulseGlow 2s ease-in-out infinite; }

/* ---------- 15. Scroll reveal helpers ---------- */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-left{ opacity:0; transform: translateX(-50px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal-left.in-view{ opacity:1; transform: translateX(0); }
.reveal-right{ opacity:0; transform: translateX(50px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal-right.in-view{ opacity:1; transform: translateX(0); }
.reveal-zoom{ opacity:0; transform: scale(.85); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal-zoom.in-view{ opacity:1; transform: scale(1); }

/* ---------- 16. Responsive ---------- */
@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .video-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  section{ padding: 5rem 6vw; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); gap:.8rem; }
  .time-card{ width: 80px; padding: 1rem 0; }
  .time-num{ font-size:1.7rem; }
  .letter-paper{ padding: 2.2rem 1.6rem; }
  #music-player{ bottom: 1rem; right: 1rem; }
  .wishes-wrap{ min-height: 620px; }
  .wish-card{ position: static; margin: 0 auto 1rem; animation: none; }
  .wishes-wrap{ display:flex; flex-direction:column; }
}

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- 18. Focus states ---------- */
button:focus-visible, a:focus-visible{
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}