body {
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

body.loaded {
  opacity: 1;
}
/* ⭐ Wish star — noticeable, tappable, and on-brand with the letter aesthetic */
#wish-star {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff6df;
  cursor: pointer;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%,
      rgba(202, 164, 106, 0.28) 0%,
      rgba(124, 19, 50, 0.22) 55%,
      rgba(11, 7, 16, 0.35) 100%);
  border: 1px solid rgba(226, 135, 159, 0.55);
  backdrop-filter: blur(2px);
  text-shadow: 0 0 8px #fff, 0 0 16px #e2879f, 0 0 30px #caa46a;
  box-shadow: 0 6px 22px rgba(124, 19, 50, 0.45),
    0 0 18px rgba(202, 164, 106, 0.35);
  animation: starTwinkle 2.4s ease-in-out infinite,
    starGlow 6s ease-in-out infinite alternate;
  z-index: 9999;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* expanding halo ring that draws the eye to the corner */
#wish-star::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(226, 135, 159, 0.6);
  animation: wishHalo 2.8s ease-out infinite;
  pointer-events: none;
}

/* teaching label removed — just the glowing star remains */

#wish-star:hover,
#wish-star:focus-visible {
  transform: scale(1.28) rotate(-8deg);
  border-color: rgba(226, 135, 159, 0.9);
  box-shadow: 0 8px 30px rgba(124, 19, 50, 0.6),
    0 0 34px rgba(202, 164, 106, 0.55);
  outline: none;
}

/* stronger twinkle pulse */
@keyframes starTwinkle {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.14) rotate(8deg);
  }
}

/* soft warm color breathing (ember-gold / wax-rose) */
@keyframes starGlow {
  0% {
    box-shadow: 0 6px 22px rgba(124, 19, 50, 0.4),
      0 0 14px rgba(202, 164, 106, 0.3);
  }
  50% {
    box-shadow: 0 6px 26px rgba(124, 19, 50, 0.55),
      0 0 30px rgba(226, 135, 159, 0.55);
  }
  100% {
    box-shadow: 0 6px 22px rgba(124, 19, 50, 0.45),
      0 0 20px rgba(202, 164, 106, 0.4);
  }
}

/* halo ring expands and fades outward */
@keyframes wishHalo {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* respect reduced-motion: keep it visible, drop the looping motion */
@media (prefers-reduced-motion: reduce) {
  #wish-star {
    animation: none;
  }
  #wish-star::before {
    animation: none;
    opacity: 0.5;
  }
}

/* overlay */
#wish-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  z-index: 9998;
}

#wish-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

#wish-box {
  background: rgba(255, 255, 255, 0.15);
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  text-align: center;
  color: #fff;
  width: 90%;
  max-width: 380px;
  animation: pop 0.6s ease;
}

@keyframes pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#wish-box h3 {
  margin-top: 0;
  font-family: "Dancing Script", cursive;
  font-size: 1.8rem;
}

#wish-text {
  width: 100%;
  height: 90px;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: none;
  border-radius: 0.6rem;
  resize: none;
  font-family: "Dancing Script", cursive;
  font-size: 1.1rem;
  color: #ff4081;
  outline: none;
}

#wish-text:focus {
  box-shadow: 0 0 15px rgba(255, 182, 193, 0.7);
}

#wish-box .btns {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}

#wish-box button {
  border: none;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  background: #fff;
  color: #ff4081;
  font-family: "Dancing Script", cursive;
  font-size: 1.1rem;
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.4);
  transition: transform 0.3s;
}

#wish-box button:hover {
  transform: scale(1.05);
}

/* hearts float upward */
.wish-heart {
  position: fixed;
  bottom: -20px;
  font-size: 1.3rem;
  opacity: 0.9;
  animation: floatUp 4s ease-out forwards;
  z-index: 9997;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-110vh) scale(1.5);
    opacity: 0;
  }
}

/* 💌 Love Notes bubble */
#love-note {
  position: fixed;
  right: 20px;
  bottom: 24px;
  max-width: 280px;
  padding: 12px 14px 12px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #ff2f86;
  /* fits ArMeen palette */
  box-shadow: 0 12px 30px rgba(255, 64, 129, 0.25);
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  transform: translateY(20px) translateX(10px);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

#love-note.show {
  transform: translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#love-note .ln-emoji {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 6px rgba(255, 182, 193, 0.7));
}

#love-note .ln-text {
  font-family: "Dancing Script", cursive;
  font-size: 1.1rem;
  line-height: 1.35;
}

#love-note .ln-close {
  border: none;
  background: transparent;
  color: #ff2f86;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  transition: background 0.2s;
}

#love-note .ln-close:hover {
  background: rgba(255, 64, 129, 0.08);
}

/* dark mode friendly (if body.dark exists in your site) */
body.dark #love-note {
  background: rgba(30, 30, 36, 0.9);
  color: #ffd6ea;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* respectful motion */
@media (prefers-reduced-motion: reduce) {
  #love-note,
  #love-note.show {
    transition: none;
  }
}

@media (max-width: 520px) {
  #love-note {
    right: 14px;
    left: 14px;
    max-width: none;
  }
}

/* ===== Photo Memories ===== */
.memories-section {
  position: relative;
  padding: 3rem 0 2.5rem;
  overflow: hidden;
}

/* no boxed/explicit background here on purpose — the carousel sits directly
   on the page's own ambient theme so the glass cards feel un-boxed */

.memories-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* ── Memory Music: full player card (shuffles a collection) ───────── */
.mem-player {
  flex: 1 1 320px;
  max-width: 460px;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #fff2f8 100%);
  border: 1px solid #ffd0e6;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(255, 64, 129, 0.18);
  transition: box-shadow 0.4s ease;
}
.mem-player.playing {
  box-shadow: 0 14px 40px rgba(255, 64, 129, 0.3);
}

.mp-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* circular control buttons — 48px tap targets */
.mp-btn {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.mp-play {
  background: radial-gradient(circle at 35% 30%, #ff8fbf 0%, #ff2f86 72%);
  box-shadow: 0 6px 16px rgba(255, 47, 134, 0.45);
}
.mp-next {
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  background: linear-gradient(135deg, #ffd0e6, #ff9ec7);
  color: #c2185b;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.28);
}
.mp-btn:hover { transform: scale(1.08); }
.mp-btn:active { transform: scale(0.95); }
.mp-btn:focus-visible { outline: 3px solid #ffb3d4; outline-offset: 3px; }
.mp-next:hover { transform: scale(1.12) rotate(180deg); }
.mem-player.playing .mp-play { animation: memBeat 1.4s ease-in-out infinite; }
@keyframes memBeat {
  0%, 100% { box-shadow: 0 6px 16px rgba(255,47,134,0.45), 0 0 0 0 rgba(255,47,134,0.4); }
  50%      { box-shadow: 0 6px 20px rgba(255,47,134,0.55), 0 0 0 10px rgba(255,47,134,0); }
}
.pi-pause { display: none; }
.mem-player.playing .pi-play { display: none; }
.mem-player.playing .pi-pause { display: inline; }

/* now-playing info — flexible middle column, truncates cleanly */
.mp-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.mp-label {
  font-family: 'Dancing Script', cursive;
  font-size: 1.05rem;
  color: #e91e63;
  line-height: 1.1;
}
.mp-title {
  font-size: 0.86rem;
  color: #a05a7a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* waveform */
.mp-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  margin-top: 0.7rem;
  cursor: pointer;
  touch-action: none;
}
.mp-wave .bar {
  flex: 1 1 0;
  height: var(--h, 40%);
  min-width: 2px;
  border-radius: 3px;
  background: #f7c6dd;
  transform-origin: center;
  transition: background 0.15s ease;
}
.mp-wave .bar.played {
  background: linear-gradient(180deg, #ff6fa5 0%, #ff2f86 55%, #ffb14e 100%);
}
.mem-player.playing .mp-wave .bar {
  animation: memWaveDance 0.9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes memWaveDance {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1.16); }
}

.mp-times {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #c07b9a;
}

/* ── mobile responsiveness ── */
@media (max-width: 720px) {
  .memories-head { flex-direction: column; align-items: stretch; }
  .mem-player { flex: 0 0 auto; max-width: none; width: 100%; }
}
@media (max-width: 420px) {
  .mem-player { padding: 0.75rem 0.8rem; border-radius: 18px; }
  .mp-top { gap: 0.55rem; }
  .mp-btn { width: 46px; height: 46px; }
  .mp-next { width: 40px; height: 40px; }
  .mp-label { font-size: 1rem; }
  .mp-title { font-size: 0.8rem; }
  .mp-wave { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .mem-player.playing .mp-play { animation: none; }
  .mem-player.playing .mp-wave .bar { animation: none; }
}

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

/* ===== Video Memories teaser (links out to reels.html) ===== */
.video-teaser-section {
  position: relative;
  padding: 1rem 0 2.5rem;
}

.video-teaser-card {
  position: relative;
  display: block;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 21 / 9;
  border-radius: 26px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 20px 45px rgba(80, 15, 40, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.video-teaser-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 30px 60px rgba(80, 15, 40, 0.4), 0 0 55px rgba(255, 143, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.video-teaser-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02) brightness(0.9);
}
.video-teaser-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 6, 12, 0.75) 0%, rgba(20, 6, 12, 0.15) 45%, rgba(20, 6, 12, 0.35) 100%);
}
.video-teaser-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(52px, 9vw, 72px);
  height: clamp(52px, 9vw, 72px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding-left: 4px;
  box-shadow: 0 0 0 0 rgba(255, 95, 162, 0.55);
  animation: video-teaser-pulse 2.6s ease-in-out infinite;
}
@keyframes video-teaser-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 95, 162, 0.45); }
  50% { box-shadow: 0 0 0 14px rgba(255, 95, 162, 0); }
}
.video-teaser-text {
  position: absolute;
  left: clamp(14px, 3vw, 26px);
  bottom: clamp(12px, 2.5vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}
.video-teaser-title {
  font-family: "Dancing Script", cursive;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.video-teaser-sub {
  font-family: "Poppins", sans-serif;
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
  .video-teaser-card { aspect-ratio: 4 / 5; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-teaser-play { animation: none; }
}

/* ===================================================================
   3D Coverflow Carousel — a theatrical, romantic photo carousel
   =================================================================== */

.wheel-stage {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(24px, 4.5vw, 52px) 0 clamp(12px, 2vw, 20px);
  perspective: 1900px;
  overflow: hidden;
}

.wheel-spotlight {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(60%, 620px);
  height: 55%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 190, 120, 0.1) 0%, rgba(255, 143, 184, 0.09) 45%, transparent 72%);
  filter: blur(14px);
  z-index: 0;
  pointer-events: none;
}

.wheel-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.wheel-spark {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6db 0%, #ffb6c1 55%, transparent 75%);
  box-shadow: 0 0 8px 2px rgba(255, 214, 234, 0.6);
  opacity: 0;
  animation: wheelSparkDrift linear infinite;
}
@keyframes wheelSparkDrift {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  12%  { opacity: 0.85; }
  85%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-320px) translateX(var(--sx, 10px)) scale(1.1); }
}

/* the viewport that holds the coverflow track */
.wheel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(250px, 50vw, 500px);
  margin: 0 auto;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}
.wheel.grabbing { cursor: grabbing; }

/* every photo card — JS drives transform/opacity/z-index per its distance
   from the centered slide, with silky 120fps hardware compositing */
.wheel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(300px, 72vw, 820px);
  aspect-ratio: 16 / 9;
  margin-left: clamp(-410px, -36vw, -150px);
  margin-top: clamp(-230.625px, -20.25vw, -84.375px);
  will-change: transform, opacity, filter;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease, filter 0.55s ease;
}
.wheel-item.w-active { pointer-events: auto; }
.wheel-item.w-live { pointer-events: auto; } /* within clickable range */
.wheel.grabbing .wheel-item { transition: none !important; }

/* The centered card gets a refined luxury arrival */
.wheel-item.w-center {
  transition: transform 0.78s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease, filter 0.55s ease;
}

/* glassmorphic card shell — translucent, blurred, its own floating pane */
.wheel-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(60, 20, 40, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  box-shadow:
    0 16px 36px rgba(80, 15, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.wheel-item.w-center .wheel-card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 26px 60px rgba(80, 15, 40, 0.38),
    0 0 45px rgba(255, 143, 184, 0.5),
    0 0 85px rgba(255, 199, 115, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* one-shot "it has arrived" pop — refined cubic bezier */
.wheel-card.wheel-pop {
  animation: wheel-pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wheel-pop-in {
  0% {
    transform: scale(0.95);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.3),
      0 10px 24px rgba(80, 15, 40, 0.2),
      0 0 0 rgba(255, 143, 184, 0);
  }
  48% {
    transform: scale(1.025);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.8),
      0 30px 65px rgba(80, 15, 40, 0.42),
      0 0 60px rgba(255, 143, 184, 0.6),
      0 0 100px rgba(255, 199, 115, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.7),
      0 26px 60px rgba(80, 15, 40, 0.38),
      0 0 45px rgba(255, 143, 184, 0.5),
      0 0 85px rgba(255, 199, 115, 0.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-card.wheel-pop { animation: none; }
}
/* glass rim + soft diagonal sheen */
.wheel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
}
.wheel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #ffe6ef, #fff3e6);
  filter: saturate(1.05) contrast(1.02);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* front-facing caption, crossfading beneath the wheel */
.wheel-caption {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: "Dancing Script", cursive;
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  color: #b8296b;
  text-shadow: 0 0 12px rgba(255, 182, 193, 0.4), 0 2px 4px rgba(0, 0, 0, 0.08);
  min-height: 2.4em;
  margin: 0.7rem auto 0;
  max-width: 580px;
  padding: 0 1rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.wheel-caption.fading {
  opacity: 0;
  transform: translateY(8px);
}

.wheel-hint {
  text-align: center;
  font-family: "Dancing Script", cursive;
  font-size: 1.02rem;
  color: #c58aa0;
  margin-top: 0.1rem;
  opacity: 0.85;
  transition: opacity 0.6s ease;
}
.wheel-hint.faded { opacity: 0; }

/* glass navigation arrows */
.wheel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ff2f86;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(173, 80, 120, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  z-index: 20;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.wheel-nav:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 30px rgba(255, 47, 134, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.wheel-nav:active { transform: translateY(-50%) scale(0.94); }
.wheel-nav.prev { left: clamp(4px, 2vw, 18px); }
.wheel-nav.next { right: clamp(4px, 2vw, 18px); }

@media (prefers-reduced-motion: reduce) {
  .wheel-spark { animation: none !important; display: none; }
  .wheel-item, .wheel-card { transition: none !important; }
}

@media (max-width: 640px) {
  .wheel-stage { padding: 20px 0 6px; perspective: 1100px; }
  .wheel-caption { font-size: 1.15rem; }
  .wheel-nav { width: 38px; height: 38px; }
  .wheel-nav svg { width: 16px; height: 16px; }
  .wheel-card { border-radius: 18px; }
  .wheel-card::after { border-radius: 18px; }
}

/* ===== Lightbox ===== */
.wheel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.wheel-lightbox.show { opacity: 1; visibility: visible; }
.wheel-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 8, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wheel-lightbox-figure {
  position: relative;
  z-index: 2;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.92);
  transition: transform 0.35s ease;
}
.wheel-lightbox.show .wheel-lightbox-figure { transform: scale(1); }
.wheel-lightbox-img {
  max-width: 92vw;
  max-height: 78vh;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(255, 47, 134, 0.3);
  object-fit: contain;
}
.wheel-lightbox-caption {
  margin-top: 14px;
  font-family: "Dancing Script", cursive;
  font-size: 1.5rem;
  color: #ffe3ef;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.wheel-lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.wheel-lightbox-close:hover { background: rgba(255, 47, 134, 0.55); transform: rotate(90deg); }
.wheel-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.wheel-lightbox-nav:hover { background: rgba(255, 47, 134, 0.55); transform: translateY(-50%) scale(1.1); }
.wheel-lightbox-nav.prev { left: 3vw; }
.wheel-lightbox-nav.next { right: 3vw; }
@media (max-width: 640px) {
  .wheel-lightbox-nav { width: 42px; height: 42px; font-size: 1.3rem; }
  .wheel-lightbox-nav.prev { left: 2vw; }
  .wheel-lightbox-nav.next { right: 2vw; }
}

/* dark mode */
body.dark .wheel-nav {
  background: rgba(30, 20, 24, 0.55);
  color: #ff9ec4;
}
body.dark .wheel-card { background: rgba(20, 12, 16, 0.35); border-color: rgba(255, 255, 255, 0.14); }
body.dark .video-teaser-card { background: rgba(20, 12, 16, 0.35); border-color: rgba(255, 255, 255, 0.14); }
body.dark .wheel-caption { color: #ff9ec4; }
body.dark .wheel-hint { color: #d97fa0; }

/* dark mode */
body.dark .mem-music {
  background: #1f1f25;
  color: #ffd6ea;
}


.view-all-link{
  display:inline-block; margin:1.4rem auto 0;
  color:#ff2f86; font-family:'Dancing Script',cursive;
  font-size:1.2rem; cursor:pointer;
  text-decoration:none; background:#fff; padding:.5rem 1rem;
  border-radius:999px; box-shadow:0 8px 20px rgba(255,64,129,.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.view-all-link:hover{ transform:scale(1.05); box-shadow:0 12px 30px rgba(255,64,129,.35); }



/* Games section */
/* 💞 Surprise Button */
.surprise-btn {
  background: linear-gradient(45deg, #ff69b4, #e91e63);
  color: #fff;
  font-family: 'Dancing Script', cursive;
  font-size: 1.4rem;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(233,30,99,0.5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: glowPulse 3s infinite ease-in-out;
}

.surprise-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 40px rgba(255,64,129,0.7);
}

/* subtle glowing pulse */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255,105,180,0.5), 0 0 40px rgba(255,64,129,0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255,105,180,0.8), 0 0 60px rgba(255,64,129,0.6);
  }
}

/* FINAL PAGE – FULLSCREEN LOVE */
#final-page {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0a0012, #1a0030);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 1.2s ease;
}

#final-page.show {
  opacity: 1;
  visibility: visible;
}

.final-container {
  text-align: center;
  padding: 2rem;
  max-width: 90%;
}

.final-title {
  font-size: 5.5rem;
  font-family: 'Dancing Script', cursive;
  margin: 0 0 2rem;
  background: linear-gradient(45deg, #ff4081, #ffd700, #ff79b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(255, 64, 129, 0.6);
  animation: float 4s ease-in-out infinite;
}

.final-text {
  font-size: 1.4rem;
  color: #ffd6ea;
  line-height: 2;
  margin-bottom: 2.5rem;
  font-family: 'Poppins', sans-serif;
}

.final-text strong {
  color: #ffd700;
  font-weight: 700;
}

.ar-name {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: #ff4081;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Golden buttons in final page */
#final-page .golden-btn {
  margin: 0.8rem;
  padding: 0.9rem 2rem;
  font-size: 1.1rem;
}

.gradient-text {
  background: linear-gradient(90deg, #ff4081, #ffd700, #ff80ab);
  background-size: 200%;
  animation: gradientFlow 6s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
/* === FIX: Prevent confetti or heart layers from covering content === */
/* 💝 Countdown Section */
.countdown-section {
  text-align: center;
  padding: 3rem 1rem;
  background: radial-gradient(circle at top, #fff0f6 0%, #ffe4ec 100%);
  border-top: 2px dashed #ffb6c1;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

.countdown-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: #e91e63;
  animation: fadeInDown 2s ease;
}

.countdown-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.countdown-card {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 20px rgba(255, 105, 180, 0.2);
  backdrop-filter: blur(8px);
  min-width: 260px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.countdown-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(255, 105, 180, 0.4);
}

.countdown-card h3 {
  font-family: 'Dancing Script', cursive;
  color: #ff4081;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.timer {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: #b0003a;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 182, 193, 0.7);
  animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px #ffb6c1; transform: scale(1); }
  50% { text-shadow: 0 0 25px #ff80ab; transform: scale(1.03); }
}
/* 💖 LOVE PROGRESS BAR */
#love-progress-section {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14px;
  background: rgba(255, 192, 203, 0.25);
  border-top: 2px solid #ffcce5;
  overflow: hidden;
  z-index: 1000;
}

#love-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff80ab, #ff4081, #e91e63);
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
  border-radius: 0;
  transition: width 1s linear;
  animation: loveGlow 3s infinite alternate;
}

@keyframes loveGlow {
  from { box-shadow: 0 0 10px #ffb6c1; }
  to { box-shadow: 0 0 30px #ff4081; }
}

/* 💌 POPUP STYLING */
#love-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 182, 193, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(6px);
  animation: fadeIn 0.8s ease;
}

.hidden { display: none !important; }

.love-popup-content {
  background: linear-gradient(145deg, #fff0f6, #ffe4ec);
  padding: 2rem 2.5rem;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(255, 105, 180, 0.35);
  text-align: center;
  font-family: 'Dancing Script', cursive;
  color: #e91e63;
  max-width: 400px;
  animation: scaleUp 0.6s ease;
}

.love-popup-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ff4081;
}

.love-popup-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

#love-popup-close {
  background: linear-gradient(90deg, #ff80ab, #ff4081);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 0.6rem 1.4rem;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: transform 0.3s ease;
}
#love-popup-close:hover {
  transform: scale(1.1);
}

/* 💞 Floating Balloons */
.balloon {
  position: fixed;
  bottom: -100px;
  width: 40px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #ff99cc, #ff4081);
  border-radius: 50% 50% 45% 45%;
  box-shadow: inset -5px -10px 20px rgba(0,0,0,0.15);
  animation: floatUp 6s ease-in infinite;
}
.balloon::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 60px;
  background: rgba(255,255,255,0.8);
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleUp {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* 💓 Floating hearts pulse effect */
.love-heart {
  position: fixed;
  bottom: 20px;
  font-size: 1.4rem;
  opacity: 0.9;
  animation: heartFloatUp 3s ease-out forwards;
  z-index: 1500;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}

@keyframes heartFloatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-40px) scale(1.4);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-90px) scale(0.8);
    opacity: 0;
  }
}
/* SECRET OF LOVE BUTTON – Slightly Bigger */
#secret-love-message {
  text-align: center;
  margin: 4rem 0 2rem;
}
.secret-love-btn {
  background: linear-gradient(90deg, #ff9ecd, #ff4f8b);
  color: white;
  padding: 1.2rem 3rem;
  font-size: 1.5rem;
  border-radius: 60px;
  cursor: pointer;
  border: none;
  font-family: 'Dancing Script', cursive;
  box-shadow: 0 0 30px rgba(255, 105, 180, 0.6);
  transition: 0.4s ease;
}
.secret-love-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 50px rgba(255, 64, 129, 0.9);
}

/* POPUP BACKDROP */
#secret-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  padding: 20px;
  box-sizing: border-box;
}

/* HIDDEN CLASS */
.hidden { display: none !important; }

/* BIGGER & TALLER SLIDER CONTAINER – NOW PERFECT FOR LONG MESSAGES */
/* MAXIMUM SIZE + 100% RESPONSIVE (Phones → Large Screens) */
.secret-slider-container {
  position: relative;
  background: #fff5fa;
  width: 95vw;                    /* Even wider */
  max-width: 1000px;              /* Bigger on large screens */
  height: 86vh;                   /* Almost full height */
  max-height: 900px;              /* Allows taller on big screens */
  
  /* RESPONSIVE MAGIC: On small screens → full bleed */
  @media (max-width: 768px) {
    width: 94vw;
    height: 88vh;
    max-width: none;
    max-height: none;
    border-radius: 20px;
    padding: 2.5rem 1.8rem;
  }

  @media (max-width: 480px) {
    width: 92vw;
    height: 90vh;
    padding: 2rem 1.5rem;
    border-radius: 18px;
  }

  padding: 3.5rem 3rem;
  border-radius: 32px;
  box-shadow: 0 25px 70px rgba(255, 64, 129, 0.4);
  overflow: hidden;
  animation: popUp 0.8s ease-out;
  display: flex;
  flex-direction: column;
  margin: 0 auto;                 /* Centers it perfectly */
  box-sizing: border-box;
}

/* Make popup backdrop fill entire screen */
#secret-popup {
  padding: 10px;
  align-items: center;
  justify-content: center;
}

/* On very small phones — go even fuller */
@media (max-height: 600px) and (orientation: landscape) {
  .secret-slider-container {
    height: 94vh;
    width: 96vw;
  }
}

@keyframes popUp {
  from { transform: scale(0.75) translateY(50px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* SLIDER */
.secret-slider {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

/* EACH SLIDE – NOW SCROLLABLE IF EVEN LONGER */
.secret-slide {
  min-width: 100%;
  padding: 1rem 1.5rem;
  text-align: center;
  font-family: 'Dancing Script', cursive;
  overflow-y: auto;                    /* Enables scroll for super long letters */
  padding-bottom: 2rem;
}

.secret-slide h2 {
  font-family: 'Dancing Script', cursive;
  color: #ff2e75;
  font-size: 2.8rem;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 10px rgba(255, 46, 117, 0.2);
}

.secret-slide p {
  font-size: 1.25rem;
  line-height: 2;
  color: #993366;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* NAVIGATION ARROWS – Bigger & Better Positioned */
.secret-prev,
.secret-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 46, 117, 0.9);
  color: white;
  border: none;
  font-size: 3.2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.secret-prev { left: 18px; }
.secret-next { right: 18px; }

.secret-prev:hover,
.secret-next:hover {
  background: #ff1f6b;
  transform: translateY(-50%) scale(1.15);
}

/* DOTS – Bigger & Prettier */
.secret-dots {
  margin-top: auto;
  padding-top: 1rem;
  text-align: center;
}
.secret-dots span {
  display: inline-block;
  width: 14px; height: 14px;
  margin: 0 8px;
  background: #ff99cc;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}
.secret-dots .active {
  background: #ff2e75;
  transform: scale(1.5);
  box-shadow: 0 0 15px rgba(255, 46, 117, 0.6);
}

/* CLOSE BUTTON – Bigger & Heart-Shaped Touch */
.close-secret {
  position: absolute;
  top: 18px; 
  right: 22px;
  font-size: 2.8rem;
  cursor: pointer;
  color: #ff4081;
  background: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: 0.3s;
  z-index: 11;
}
.close-secret:hover {
  transform: scale(1.2) rotate(90deg);
  background: #ffebef;
  color: #ff1744;
}
/* TYPEWRITER EFFECT */
/* ULTRA SMOOTH TYPEWRITER – GLIDING LETTERS */
.typewriter {
  font-size: 1.28rem;
  line-height: 2.1;
  color: #993366;
  font-weight: 500;
  letter-spacing: 0.5px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Gliding letters effect */
.typewriter span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: glideIn 0.5s ease-out forwards;
}

/* Stagger animation for natural flow */
.typewriter span:nth-child(1) { animation-delay: 0s; }
.typewriter span:nth-child(2) { animation-delay: 0.03s; }
.typewriter span:nth-child(3) { animation-delay: 0.06s; }
.typewriter span:nth-child(4) { animation-delay: 0.09s; }
/* ... up to ~50 for smooth wave */
.typewriter span:nth-child(n+5) { animation-delay: calc(0.03s * (n - 4)); }

/* Smooth gliding animation */
@keyframes glideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: Subtle cursor (remove when done) */
.typewriter::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 0;
  width: 2px;
  height: 1.4em;
  background: #ff4f8b;
  animation: blink-caret 1s step-end infinite;
  opacity: 0.8;
}

.typewriter.done::after {
  display: none;
}

@keyframes blink-caret {
  from, to { opacity: 0.8; }
  50% { opacity: 0; }
}
/* MAIN HIGHLIGHT — MAKES IT FEEL LIKE THE HEART OF THE MESSAGE */
.highlight-paraaa {
  display: block;
  font-family: 'Dancing Script', cursive;
  font-size: 2.4rem !important;
  font-weight: 700;
  color: #ff1744;
  text-align: center;
  margin: 1.8rem auto 2.2rem;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(120deg, #ffeef4 0%, #fff0f7 50%, #ffeef4 100%);
  border-radius: 20px;
  box-shadow: 
    0 8px 25px rgba(255, 23, 68, 0.25),
    inset 0 2px 8px rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 8px rgba(255, 23, 68, 0.3);
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  animation: gentlePulse 4s ease-in-out infinite;
}

/* Subtle glowing pulse */
@keyframes gentlePulse {
  0%, 100% { 
    box-shadow: 0 8px 25px rgba(255, 23, 68, 0.25), inset 0 2px 8px rgba(255,255,255,0.6);
  }
  50% { 
    box-shadow: 0 12px 35px rgba(255, 23, 68, 0.4), inset 0 2px 12px rgba(255,255,255,0.8);
  }
}

/* Optional: Tiny floating hearts around the highlight */
.highlight-paraaa::before,
.highlight-paraaa::after {
  content: 'Heart with Ribbon';
  position: absolute;
  font-size: 1rem;
  opacity: 0.4;
  animation: floatSide 6s infinite ease-in-out;
}
.highlight-paraaa::before { left: 15px; top: 50%; animation-delay: 0s; }
.highlight-paraaa::after { right: 15px; top: 50%; animation-delay: 3s; }

@keyframes floatSide {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(10deg); }
}

/* 💬 Meenal's Whisper – "pata hai arman aaj kya hua" */
#meenal-whisper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(0.85);
  background: linear-gradient(135deg, rgba(255,240,248,0.97), rgba(255,220,240,0.97));
  border: 1.5px solid rgba(255,105,180,0.3);
  border-radius: 24px 24px 24px 4px;
  padding: 1.4rem 2rem;
  max-width: 340px;
  width: 88vw;
  box-shadow: 0 20px 50px rgba(255,64,129,0.25), 0 0 0 1px rgba(255,255,255,0.6) inset;
  backdrop-filter: blur(12px);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
  text-align: left;
}

#meenal-whisper.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.whisper-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: #ff80ab;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.whisper-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: #ff4081;
  border-radius: 50%;
  animation: whisperDot 1.5s ease-in-out infinite;
}

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

.whisper-hindi {
  font-family: 'Dancing Script', cursive;
  font-size: 1.9rem;
  color: #d81b60;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  text-shadow: 0 2px 10px rgba(216,27,96,0.15);
}

.whisper-translation {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  color: #ad5078;
  font-style: italic;
  margin-bottom: 1.1rem;
  opacity: 0.85;
}

.whisper-reply {
  font-family: 'Dancing Script', cursive;
  font-size: 1.05rem;
  color: #888;
  border-top: 1px dashed rgba(255,105,180,0.3);
  padding-top: 0.8rem;
  line-height: 1.5;
}

.whisper-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #ffb6c1;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  padding: 2px 6px;
}
.whisper-close:hover {
  color: #ff4081;
  transform: scale(1.2);
}

/* backdrop blur overlay */
#meenal-whisper-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,240,248,0.25);
  backdrop-filter: blur(3px);
  z-index: 9989;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
#meenal-whisper-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* === 🤍 HIDDEN SCROLL MESSAGE === */
#hidden-scroll-msg {
  padding: 5rem 1rem 4rem;
  text-align: center;
  background: linear-gradient(to bottom, transparent, #fff5f9, transparent);
  position: relative;
}

.scroll-msg-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.scroll-msg-line {
  font-family: 'Dancing Script', cursive;
  font-size: 1.55rem;
  color: #c2185b;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  line-height: 1.5;
}

.scroll-msg-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-msg-line.highlight-line {
  font-size: 1.9rem;
  color: #e91e63;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(233,30,99,0.2);
}

.scroll-msg-line.faded-end {
  font-size: 1.2rem;
  color: #ad5078;
  font-style: italic;
  opacity: 0;
}
.scroll-msg-line.faded-end.visible {
  opacity: 0.75;
}

/* === 💭 TIMED REMINDER POPUP === */
#reminder-popup {
  position: fixed;
  inset: 0;
  background: rgba(255,240,248,0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9995;
  animation: fadeIn 1s ease;
}

.reminder-box {
  background: linear-gradient(145deg, #fff8fb, #ffe4f0);
  border-radius: 28px;
  padding: 2.5rem 2.8rem;
  max-width: 400px;
  width: 88vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(233,30,99,0.2);
  position: relative;
  animation: popIn 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards;
  border: 1px solid rgba(255,105,180,0.2);
}

.reminder-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #ffb6c1;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}
.reminder-close:hover {
  color: #e91e63;
  transform: scale(1.2);
}

.reminder-emoji {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.reminder-line1 {
  font-family: 'Dancing Script', cursive;
  font-size: 1.4rem;
  color: #ad5078;
  margin-bottom: 0.4rem;
  font-style: italic;
}

.reminder-line2 {
  font-family: 'Dancing Script', cursive;
  font-size: 1.7rem;
  color: #e91e63;
  font-weight: 700;
  margin-bottom: 1.2rem;
  line-height: 1.4;
}

.reminder-line3 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: #7b3a52;
  line-height: 1.9;
  margin-bottom: 1.2rem;
}

.reminder-sign {
  font-family: 'Dancing Script', cursive;
  font-size: 1.1rem;
  color: #c2185b;
  font-style: italic;
  opacity: 0.8;
}

/* === 🌙 FINAL LETTER SECTION === */
#final-letter {
  padding: 5rem 1.5rem 4rem;
  background: linear-gradient(to bottom, #fff8fb, #fff0f5);
  position: relative;
  overflow: hidden;
}

#final-letter::before {
  content: '🤍';
  position: absolute;
  font-size: 18rem;
  opacity: 0.03;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.letter-container {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.letter-top-line,
.letter-bottom-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffb6c1, transparent);
  margin: 0 auto 2rem;
}
.letter-bottom-line { margin: 2.5rem auto 0; }

.letter-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffb6c1;
  margin-bottom: 1rem;
}

.letter-heading {
  font-family: 'Dancing Script', cursive;
  font-size: 2.2rem;
  color: #d81b60;
  margin-bottom: 2rem;
  line-height: 1.3;
}

.letter-body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.letter-body p {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #6d3a4a;
  line-height: 1.9;
}

.letter-body em {
  font-family: 'Dancing Script', cursive;
  font-size: 1.2rem;
  color: #e91e63;
}

.letter-highlight {
  font-family: 'Dancing Script', cursive !important;
  font-size: 1.5rem !important;
  color: #c2185b !important;
  font-weight: 700;
}

.letter-ending {
  font-style: italic;
  color: #9c4060 !important;
  border-top: 1px dashed rgba(255,105,180,0.3);
  padding-top: 1.4rem;
  margin-top: 0.5rem;
}

/* === 💧 FALLING TEARS === */
.teardrop {
  position: fixed;
  top: -60px;
  width: 10px;
  height: 16px;
  background: linear-gradient(180deg, rgba(180,220,255,0.7), rgba(120,180,255,0.4));
  border-radius: 50% 50% 60% 60% / 40% 40% 60% 60%;
  pointer-events: none;
  z-index: 9990;
  animation: tearFall linear forwards;
  filter: blur(0.4px);
  box-shadow: inset -2px -3px 5px rgba(255,255,255,0.4),
              0 0 8px rgba(150,200,255,0.3);
}

@keyframes tearFall {
  0% {
    transform: translateY(0) rotate(-8deg) scale(1);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  70% {
    transform: translateY(70vh) rotate(5deg) scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: translateY(105vh) rotate(-3deg) scale(0.8);
    opacity: 0;
  }
}

/* Optional: tiny word inside rare teardrops */
.teardrop-word {
  position: fixed;
  top: -40px;
  font-family: 'Dancing Script', cursive;
  font-size: 0.75rem;
  color: rgba(150,190,255,0.6);
  pointer-events: none;
  z-index: 9989;
  animation: tearFall linear forwards;
  white-space: nowrap;
}
/* === 💌 ROMANTIC REACH OUT PARCHMENT LETTER === */
#reach-out-section {
  padding: 5rem 1.5rem 4rem;
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255, 230, 240, 0.6) 0%, #fff7fb 60%, #fff0f5 100%);
  position: relative;
  overflow: hidden;
}

.reach-out-container {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.reach-out-header-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 143, 184, 0.25), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

.reach-out-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffb6c1, transparent);
  margin: 1.5rem auto;
}

.reach-out-icon {
  font-size: 2.8rem;
  display: inline-block;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 4px 12px rgba(233, 30, 99, 0.3));
  animation: floatForever 3.5s ease-in-out infinite;
}

.reach-out-title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2rem, 5vw, 2.7rem);
  color: #c2185b;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 10px rgba(233, 30, 99, 0.15);
}

.reach-out-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: #7b3a52;
  line-height: 1.8;
  margin-bottom: 2.2rem;
}

/* 📜 Parchment Stationery Card */
.letter-stationery {
  background:
    radial-gradient(ellipse 100% 70% at 50% 20%, rgba(255, 255, 255, 0.9) 0%, rgba(253, 245, 230, 0.85) 100%),
    linear-gradient(165deg, #fffdf8 0%, #fdf2de 55%, #f6e3c5 100%);
  border: 1px solid rgba(226, 175, 140, 0.55);
  border-radius: 24px;
  padding: 2.4rem 2rem 2rem;
  box-shadow:
    0 24px 70px rgba(124, 19, 50, 0.16),
    0 4px 18px rgba(202, 164, 106, 0.2),
    inset 0 0 50px rgba(202, 164, 106, 0.14);
  position: relative;
  text-align: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.6s ease;
}

.letter-stationery::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(202, 164, 106, 0.4);
  border-radius: 18px;
  pointer-events: none;
}

/* Parchment Top Header */
.parchment-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(202, 164, 106, 0.3);
}

.parchment-salutation {
  display: flex;
  flex-direction: column;
}

.parchment-salutation .to-label {
  font-family: 'Dancing Script', cursive;
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 1px;
  color: #ad5078;
  line-height: 1;
}

.parchment-salutation .to-name {
  font-family: 'Alex Brush', 'Dancing Script', cursive;
  font-size: 2.3rem;
  color: #8c1d40;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 4px rgba(233, 30, 99, 0.15);
}

.parchment-postmark {
  border: 1px dashed rgba(173, 80, 120, 0.5);
  border-radius: 50%;
  width: 58px;
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  color: #ad5078;
  transform: rotate(-10deg);
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.35);
}

.parchment-postmark .postmark-date {
  font-size: 0.5rem;
  color: #caa46a;
  letter-spacing: 1px;
}

/* Parchment Textarea Area */
.parchment-body {
  position: relative;
  margin-bottom: 1.6rem;
}

.typing-spark-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.typing-spark {
  position: absolute;
  font-size: 1rem;
  pointer-events: none;
  animation: sparkRise 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes sparkRise {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sx, 0px), var(--sy, -45px)) scale(1.3) rotate(25deg);
  }
}

.her-message-box {
  width: 100%;
  padding: 1.3rem 1.4rem;
  border: 1.5px solid rgba(202, 164, 106, 0.45);
  border-radius: 16px;
  font-family: 'Dancing Script', cursive;
  font-size: 1.35rem;
  color: #4a1d2e;
  background:
    repeating-linear-gradient(transparent, transparent 33px, rgba(202, 164, 106, 0.18) 33px, rgba(202, 164, 106, 0.18) 34px),
    rgba(255, 255, 255, 0.82);
  line-height: 34px;
  resize: none;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 10px rgba(74, 42, 20, 0.04);
}

.her-message-box:focus {
  border-color: #c2185b;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 24px rgba(233, 30, 99, 0.14),
    inset 0 2px 10px rgba(74, 42, 20, 0.04);
}

.her-message-box::placeholder {
  color: #b88a9c;
  font-style: italic;
  font-family: 'Dancing Script', cursive;
  font-size: 1.25rem;
}

.parchment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0 0.3rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
}

.draft-status {
  color: #ad5078;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.draft-status.show {
  opacity: 1;
}

.char-count {
  color: #9c687d;
}

/* Send / Wax-Seal Button */
.send-msg-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: linear-gradient(135deg, #7c1332 0%, #a82e50 50%, #c2185b 100%);
  color: #fff8f0;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 999px;
  padding: 1rem 2rem;
  font-family: 'Dancing Script', cursive;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(124, 19, 50, 0.35),
    0 0 20px rgba(202, 164, 106, 0.25) inset;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.send-msg-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 16px 40px rgba(124, 19, 50, 0.45),
    0 0 26px rgba(255, 215, 0, 0.35) inset;
  background: linear-gradient(135deg, #91173b 0%, #c2185b 50%, #e91e63 100%);
}

.send-msg-btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-seal-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.reach-out-note {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  color: #9c687d;
  margin-top: 1rem;
}

/* 3D Wax-Sealed Flying Envelope Stage */
.flying-envelope-stage {
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.flying-envelope-stage.hidden {
  display: none;
}

.flying-envelope {
  position: relative;
  width: min(280px, 75vw);
  height: min(180px, 48vw);
  background: linear-gradient(155deg, #e9d6ae 0%, #d3b787 45%, #a98a5c 100%);
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: envFloatAscend 4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes envFloatAscend {
  0% {
    transform: translateY(30px) scale(0.9) rotate(-3deg);
    opacity: 0;
  }
  20% {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 1;
  }
  60% {
    transform: translateY(-20px) scale(1.02) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-160px) scale(0.4) rotate(-8deg);
    opacity: 0;
  }
}

.env-front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
}

.env-stamp {
  align-self: flex-end;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  border: 1px dashed rgba(74, 42, 20, 0.4);
  padding: 4px 8px;
  color: #5a2e16;
}

.env-to-text {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  color: #3a1e10;
  font-weight: 700;
}

.env-wax-seal {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b23a58, #7c1332 70%, #4a081c 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 6px 20px rgba(124, 19, 50, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sealPop 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

@keyframes sealPop {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  70% { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.wax-seal-inner {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #ffd6e0;
  letter-spacing: 1px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.flying-env-caption {
  margin-top: 1.8rem;
  font-family: 'Dancing Script', cursive;
  font-size: 1.4rem;
  color: #ad5078;
}

/* 💌 Heartfelt Sent Confirmation Card */
.confirm-card {
  background:
    radial-gradient(ellipse 100% 70% at 50% 15%, rgba(255, 255, 255, 0.95) 0%, rgba(253, 245, 230, 0.9) 100%),
    linear-gradient(165deg, #fffcf7 0%, #faecd7 100%);
  border: 1px solid rgba(202, 164, 106, 0.55);
  border-radius: 24px;
  padding: 3rem 2rem 2.5rem;
  text-align: center;
  box-shadow:
    0 24px 70px rgba(124, 19, 50, 0.18),
    inset 0 0 50px rgba(202, 164, 106, 0.12);
  animation: cardFadeIn 0.8s ease forwards;
}

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

.confirm-icon {
  font-size: 3rem;
  margin-bottom: 0.6rem;
  animation: heartBreathe 3s ease-in-out infinite;
}

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

.confirm-title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  color: #8c1d40;
  margin-bottom: 1rem;
}

.confirm-message {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  color: #5c2438;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}

.confirm-sub {
  font-family: 'Dancing Script', cursive;
  font-size: 1.35rem;
  color: #a83258;
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.confirm-signature {
  font-family: 'Dancing Script', cursive;
  font-size: 1.55rem;
  color: #7c1332;
  font-weight: 700;
  margin-bottom: 2rem;
}

.write-another-btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(202, 164, 106, 0.6);
  border-radius: 999px;
  padding: 0.75rem 1.8rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  color: #7c1332;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(124, 19, 50, 0.08);
}

.write-another-btn:hover {
  background: #7c1332;
  color: #fffaf0;
  border-color: #7c1332;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 19, 50, 0.25);
}

@media (max-width: 600px) {
  .letter-stationery {
    padding: 1.8rem 1.2rem 1.5rem;
    border-radius: 20px;
  }
  .parchment-top {
    margin-bottom: 1rem;
  }
  .her-message-box {
    font-size: 1.25rem;
    padding: 1rem;
  }
  .send-msg-btn {
    font-size: 1.3rem;
    padding: 0.9rem 1.4rem;
  }
  .confirm-card {
    padding: 2rem 1.2rem;
  }
}

/* ✨ Wish confirmation toast — matches the ink/wax/ember letter aesthetic */
.wish-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 24px);
  z-index: 10000;
  pointer-events: none;
  max-width: min(90vw, 360px);
  padding: 13px 22px;
  border-radius: 999px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: #f6f0ff;
  background: rgba(11, 7, 16, 0.92);
  border: 1px solid rgba(226, 135, 159, 0.45);
  box-shadow: 0 10px 34px rgba(124, 19, 50, 0.4),
              0 0 22px rgba(202, 164, 106, 0.18) inset;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.wish-toast.offline {
  border-color: rgba(202, 164, 106, 0.4);
  color: #f3e6d0;
}
.wish-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .wish-toast { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
  .wish-toast.show { transform: translate(-50%, 0); }
}

/* ============================================================
   🚀 Performance Optimizations — Rendering & Layout Isolation
   ============================================================ */
#video-memories,
#memories,
#secret-game,
#birthday-countdown,
#secret-love-message,
#hidden-scroll-msg,
#final-letter,
#reach-out-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}