:root {
  --glass: rgba(255, 255, 255, 0.88);
  --accent: #e84393;
  --card-w: 360px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

/* --- 1. Breathing Holy Background --- */
@keyframes divineBreath {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #3a2b2b;
  overflow: hidden; 
  /* Celestial Palette */
  background: linear-gradient(-45deg, #fdfbfb, #f3e5f5, #e3f2fd, #fff8e1, #fff3e0);
  background-size: 400% 400%;
  animation: divineBreath 22s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  touch-action: none; 
}

/* Central divine glow overlay */
.divine-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, transparent 75%);
  will-change: transform, opacity;
}

#canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: block; }
#color-overlay { position: fixed; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay; transition: background .18s ease; }

/* --- Parallax Layers (New) --- */
#parallax-scene { position: fixed; inset: -50px; pointer-events: none; z-index: 0; }
.layer { position: absolute; inset: 0; background-position: center; background-size: cover; transition: transform 0.1s linear; will-change: transform; }
.layer-back { 
  background-image: radial-gradient(circle at 20% 80%, rgba(255, 230, 240, 0.4), transparent 40%),
                    radial-gradient(circle at 80% 20%, rgba(230, 240, 255, 0.4), transparent 40%);
  opacity: 0.6;
}
.layer-mid {
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), transparent 60%);
  opacity: 0.3; mix-blend-mode: overlay;
}

/* --- ASMR Kinetic Text Animation --- */
.asmr-item {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(15px) scale(0.9);
  transition: opacity 2s ease, filter 2s ease, transform 2s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: opacity, filter, transform;
}
.asmr-item.visible {
  opacity: 1; filter: blur(0px); transform: translateY(0) scale(1);
}

@keyframes breatheText { 0%, 100% { opacity: 0.4; transform: translateY(0px); } 50% { opacity: 0.9; transform: translateY(-3px); } }
.hint, .small { 
  font-size: 0.75rem; color: #6b5a4b; letter-spacing: 2px; text-transform: uppercase; 
  animation: breatheText 4s infinite ease-in-out; 
}

.text-gradient {
  background: linear-gradient(45deg, #e84393, #ff7fb6, #d35400, #e84393);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 300% 300%; animation: gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

@keyframes etherealPulse {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

/* --- Cover & First Message --- */
.cover { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(255,255,255,0.4); backdrop-filter: blur(16px); transition: opacity 1.2s ease; }

.story { width: min(560px, 94%); position: relative; text-align: center; z-index: 10; padding: 40px 20px; }
.story::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 140%; height: 140%;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,245,235,0.4) 40%, transparent 70%);
  z-index: -1; filter: blur(30px);
  animation: etherealPulse 6s infinite alternate ease-in-out;
}

.sender-line { font-family: "Cormorant Garamond", serif; font-size: 2.8rem; font-style: italic; font-weight: 600; color: var(--accent); margin-bottom: 20px; text-shadow: 0 4px 16px rgba(255,255,255,0.9); }
.story-text { color: #4a3b3b; margin-bottom: 32px; font-size: 1.1rem; line-height: 1.9; font-weight: 400; }
.open-btn { display: inline-flex; gap: 10px; align-items: center; padding: 14px 36px; border-radius: 99px; border: 0; font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--accent), #f39c12); color: white; cursor: pointer; font-size: 1.05rem; box-shadow: 0 12px 30px rgba(232, 67, 147, 0.3); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.6s ease;}
.open-btn:active { transform: scale(0.92); box-shadow: 0 6px 15px rgba(232, 67, 147, 0.2); }

/* --- Main Card --- */
.stage { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; transition: opacity 1s ease; }
.card-wrap { pointer-events: auto; perspective: 1000px; width: calc(var(--card-w)); max-width: 92%; }
.card {
  width: 100%; height: 420px; border-radius: 20px; 
  background: linear-gradient(180deg, #fff, #fffdfa); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08); position: relative; cursor: pointer; user-select: none;
  transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 1.2s ease;
}
.card.zoomed { transform: scale(1.08) translateY(-10px); box-shadow: 0 40px 80px rgba(0,0,0,0.15); }
.face { position: absolute; inset: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 36px; text-align: center; transition: opacity 0.8s ease; }

.hero { font-family: "Cormorant Garamond", serif; font-size: 2.6rem; color: var(--accent); margin-bottom: 16px; line-height: 1.1; font-weight: 600; }
.sub { color: #5b462c; font-size: 1.1rem; line-height: 1.7; font-weight: 300; }
.show-btn { margin-top: 32px; padding: 14px 28px; background: linear-gradient(90deg, #ff9a9e, #f6d365); border-radius: 99px; border: 0; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 500; color: #4a2c2a; box-shadow: 0 12px 24px rgba(0,0,0,0.1); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.show-btn:active { transform: scale(0.94); }

/* --- Gallery Deck --- */
.deck-wrap { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; perspective: 1200px; transform-style: preserve-3d; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.deck-wrap.active { opacity: 1; }
.deck { position: absolute; width: min(320px, 80vw); aspect-ratio: 3/4; cursor: pointer; transition: transform 1s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.8s ease; will-change: transform, opacity; }

.card-inner { width: 100%; height: 100%; position: absolute; inset: 0; }
.card-face { width: 100%; height: 100%; border-radius: 24px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }

/* Front face: The frosted glass cover */
.face-front {
  background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(35px) saturate(180%); -webkit-backdrop-filter: blur(35px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 20px 50px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: #333; padding: 20px; z-index: 2;
  transition: opacity 1.2s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.face-front::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent); border-radius: 24px 24px 0 0; pointer-events: none; }
.face-front-title { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-style: italic; color: var(--accent); }

/* Back face: The Photo underneath */
.face-back { padding: 14px; z-index: 1; background: #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); overflow: hidden; } 
.photo { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; filter: brightness(0.95); transition: filter 1.5s ease;}

/* Active interaction classes */
.deck.revealed .face-front { opacity: 0; pointer-events: none; }
.deck.revealed .photo { filter: brightness(1.05); }

.content-fade { opacity: 0; transition: opacity 1s ease, transform 1s ease; transform: translateY(8px); }
.deck.is-active .content-fade { opacity: 1; transform: translateY(0); }

/* --- Paper Grain Effect (New) --- */
.grain-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
  background-size: 150px; mix-blend-mode: overlay; z-index: 10;
}

/* --- Final Message --- */
.final-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transform: scale(.97); display: none; transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.2, 0.9, 0.2, 1); }

.final-card { width: min(580px, 94%); position: relative; text-align: center; z-index: 10; padding: 50px 20px; }
.final-card::before {
  content: ''; position: absolute; inset: -50px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(243, 229, 245, 0.6) 40%, transparent 75%);
  z-index: -1; filter: blur(40px);
  animation: etherealPulse 8s infinite alternate ease-in-out;
}

.final-title { font-family: "Cormorant Garamond", serif; font-size: 3.2rem; margin-bottom: 24px; line-height: 1.1; font-style: italic; text-shadow: 0 0 30px rgba(232, 67, 147, 0.4); }
.final-sub { color: #4a3b3b; font-size: 1.25rem; line-height: 1.8; font-weight: 300; }

/* --- Light Burst (New) --- */
.light-burst {
  position: fixed; pointer-events: none; z-index: 99;
  width: 100px; height: 100px; margin: -50px 0 0 -50px;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,245,220,0.4) 50%, transparent 70%);
  border-radius: 50%; filter: blur(30px); opacity: 0; transform: scale(0.5);
  animation: burstAnim 1.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes burstAnim {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(2.5); }
  100% { opacity: 0; transform: scale(4.5); }
}

/* --- Utilities --- */
.pop-text { position: fixed; pointer-events: none; z-index: 60; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.6rem; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,0.28); transform-origin: center; white-space: nowrap; }
#joy-meter-container { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); width: 300px; height: 14px; border-radius: 99px; background: rgba(255,255,255,0.6); z-index: 50; overflow: hidden; border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 8px 18px rgba(0,0,0,0.06); display: none; opacity: 0; transition: opacity 0.5s ease; }
#joy-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#ff9a9e,#fecfef,#a1c4fd); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; transition: width .28s cubic-bezier(.2,.9,.3,1); }
#color-palette { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.92); padding: 10px 14px; border-radius: 999px; z-index: 50; display: none; opacity: 0; gap: 10px; align-items: center; box-shadow: 0 14px 30px rgba(0,0,0,0.08); transition: opacity 0.5s ease; }
.color-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.08); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.color-btn.active { transform: scale(1.16); border: 2px solid rgba(0,0,0,0.12); }
.mute-btn-wrapper { position: fixed; top: 16px; right: 16px; z-index: 80; }
#muteBtn { padding: 10px 12px; border-radius: 12px; border: 0; background: rgba(255,255,255,0.9); box-shadow: 0 8px 24px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.3s; font-size: 1.1rem; }
#muteBtn:active { transform: scale(0.85); }

@media (max-width: 420px){ .card { height: 380px; } .hero { font-size: 2.2rem; } .final-title { font-size: 2.6rem; } .sender-line{font-size: 2.4rem;} }

/* ... [Keep all previous CSS] ... */

/* --- [Fix 1] Final Celebration: Cinematic Color Wash --- */
/* Add this to the bottom of style.css */

body.celebrating {
  animation: celebrationWash 12s infinite ease-in-out;
}

@keyframes celebrationWash {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  25% { background-color: #fff0f5; } /* Lavender Blush */
  50% { background-color: #fffacd; } /* Lemon Chiffon (Gold) */
  75% { background-color: #e6e6fa; } /* Lavender */
  100% { background-position: 100% 50%; filter: hue-rotate(10deg); }
}

/* Ensure the glow gets warmer during celebration */
body.celebrating .divine-glow {
  background: radial-gradient(circle at center, rgba(255, 220, 200, 0.6) 0%, transparent 80%);
  transition: background 3s ease;
}