/* ══════════════════════════════════════════════════════
   FONTS
══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Great+Vibes&family=Jost:wght@300;400;500&family=Lora:ital,wght@0,400;1,400&family=Sacramento&display=swap');

/* ══════════════════════════════════════════════════════
   EROS PULSE DESIGN TOKENS
══════════════════════════════════════════════════════ */
:root{
  /* Core palette */
  --passion:    #E63946;
  --soft-pink:  #FF8FA3;
  --blush:      #FFC2D1;
  --cream:      #FFF1F3;
  --dark:       #1D1B2F;

  /* Derived */
  --bg:         #0e0b1e;          /* deeper than --dark for canvas bg */
  --rose:       var(--passion);
  --rose-light: var(--soft-pink);
  --gold:       var(--blush);
  --gold-light: var(--cream);
  --glass:      rgba(230,57,70,.06);
  --glass-border:rgba(255,143,163,.15);
}

/* ══════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;}
body{
  font-family:'Jost',sans-serif;
  text-align:center;
  background:var(--bg);
  color:var(--cream);
  overflow:hidden;
  cursor:none;
}

/* ══════════════════════════════════════════════════════
   PARTICLES CANVAS
══════════════════════════════════════════════════════ */
#particlesCanvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.55;
}

/* ══════════════════════════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════════════════════════ */
.cursor{
  width:10px;height:10px;
  background:var(--soft-pink);
  border-radius:50%;
  position:fixed;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--passion),0 0 24px rgba(230,57,70,.4);
  transition:transform .1s;
}
.cursor-ring{
  width:30px;height:30px;
  border:1.5px solid rgba(255,143,163,.45);
  border-radius:50%;
  position:fixed;pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .18s ease;
}
@media(pointer:coarse){.cursor,.cursor-ring{display:none;}}

/* ══════════════════════════════════════════════════════
   FLOATING HEARTS
══════════════════════════════════════════════════════ */
#hearts-container{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9;overflow:hidden;
}
.floating-heart{
  position:absolute;bottom:-60px;opacity:0;
  animation:floatUp linear infinite;
  user-select:none;pointer-events:none;
  font-size:1.4rem;
  filter:
    drop-shadow(0 0 8px rgba(230,57,70,.70))
    drop-shadow(0 0 18px rgba(230,57,70,.35));
}
@keyframes floatUp{
  0%  {opacity:0;transform:translateY(0) rotate(-10deg) scale(.8);}
  8%  {opacity:.85;}
  85% {opacity:.5;}
  100%{opacity:0;transform:translateY(-110vh) rotate(12deg) scale(1.3);}
}

/* ══════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════ */
.section{
  display:none;position:fixed;inset:0;z-index:10;
  align-items:center;justify-content:center;flex-direction:column;
  padding:40px 16px;
  background:transparent;
}
.section.active{
  display:flex;
  animation:sectionEnter .55s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes sectionEnter{
  from{opacity:0;transform:translateY(20px) scale(.98);}
  to  {opacity:1;transform:translateY(0) scale(1);}
}

/* Staggered children */
.section.active .glass-card > *{
  opacity:0;
  animation:childRise .52s cubic-bezier(.22,1,.36,1) both;
}
.section.active .glass-card > *:nth-child(1){animation-delay:.12s;}
.section.active .glass-card > *:nth-child(2){animation-delay:.22s;}
.section.active .glass-card > *:nth-child(3){animation-delay:.32s;}
.section.active .glass-card > *:nth-child(4){animation-delay:.42s;}
.section.active .glass-card > *:nth-child(5){animation-delay:.50s;}
@keyframes childRise{
  from{opacity:0;transform:translateY(16px);}
  to  {opacity:1;transform:translateY(0);}
}

.cel-section{padding:0;background:var(--bg);}
body.celebrating #hearts-container{display:none;}

/* ══════════════════════════════════════════════════════
   GLASSMORPHISM CARD — Eros Pulse tint
══════════════════════════════════════════════════════ */
.glass-card{
  background:
    linear-gradient(135deg,
      rgba(230,57,70,.10) 0%,
      rgba(29,27,47,.65)  50%,
      rgba(230,57,70,.06) 100%
    );
  border:1px solid rgba(255,143,163,.18);
  border-radius:28px;
  padding:52px 36px;
  width:100%;max-width:460px;
  backdrop-filter:blur(40px) saturate(1.6) brightness(.88);
  -webkit-backdrop-filter:blur(40px) saturate(1.6) brightness(.88);
  box-shadow:
    0 32px 80px rgba(0,0,0,.70),
    0 0 0 1px rgba(230,57,70,.12),
    0 0 40px rgba(230,57,70,.06),
    inset 0 1px 0 rgba(255,194,209,.14),
    inset 0 -1px 0 rgba(0,0,0,.20);
  position:relative;overflow:visible;
}
.glass-card::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 45% at 50% -5%,rgba(255,143,163,.09) 0%,transparent 70%),
    radial-gradient(ellipse 60% 35% at 50% 110%,rgba(230,57,70,.07) 0%,transparent 70%);
  pointer-events:none;border-radius:inherit;clip-path:inset(0 round 28px);
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════ */
h1{
  font-family:'Great Vibes',cursive;
  font-size:clamp(2.4rem,8vw,4rem);
  color:var(--cream);
  line-height:1.2;margin-bottom:14px;
  text-shadow:0 0 40px rgba(230,57,70,.45),0 0 80px rgba(230,57,70,.20);
}
h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.4rem,5vw,2rem);
  color:var(--cream);margin-bottom:14px;
  font-style:italic;font-weight:400;
  text-shadow:0 2px 20px rgba(230,57,70,.22);
}
p{
  font-family:'Jost',sans-serif;
  font-size:1rem;font-weight:300;
  color:rgba(255,241,243,.78);
  line-height:1.85;margin-bottom:26px;
  letter-spacing:.03em;
}
.divider{
  width:56px;height:1px;
  background:linear-gradient(90deg,transparent,var(--soft-pink),transparent);
  margin:18px auto;
  box-shadow:0 0 10px rgba(255,143,163,.5);
}

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
button{
  font-family:'Jost',sans-serif;font-size:.9rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:13px 30px;
  border:1.5px solid var(--passion);border-radius:50px;
  background:transparent;color:var(--cream);cursor:pointer;margin:7px;
  position:relative;overflow:hidden;
  transition:color .3s,border-color .3s,box-shadow .3s,transform .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
button::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--passion),var(--soft-pink));
  opacity:0;transition:opacity .3s;border-radius:inherit;
}
button:hover::before,button:focus-visible::before{opacity:1;}
button:hover{
  border-color:var(--soft-pink);
  box-shadow:0 0 24px rgba(230,57,70,.50);
  transform:translateY(-2px);
}
button:active{transform:translateY(0) scale(.97);}
button span{position:relative;z-index:1;}

/* Gold / primary button */
button.btn-gold{border-color:var(--blush);}
button.btn-gold::before{
  background:linear-gradient(135deg,var(--passion),var(--soft-pink),var(--blush));
}
button.btn-gold:hover{
  color:var(--dark);
  box-shadow:0 0 28px rgba(255,194,209,.55);
}

/* Lights button */
.btn-lights{
  border-color:rgba(255,194,209,.35);
  font-size:1rem;padding:16px 40px;letter-spacing:.15em;
}
.btn-lights::before{
  background:linear-gradient(135deg,rgba(230,57,70,.18),rgba(255,143,163,.28));
}
.btn-lights:hover{box-shadow:0 0 32px rgba(230,57,70,.28);}

/* Runaway button */
.btn-row{
  position:relative;min-height:64px;
  display:flex;align-items:center;justify-content:center;
  margin-top:12px;overflow:visible;
}
.btn-runaway{
  width:110px;height:46px;padding:0;
  position:absolute;top:0;right:0;
  border-color:rgba(255,143,163,.55);
  transition:left .35s cubic-bezier(.22,1,.36,1),
             top  .35s cubic-bezier(.22,1,.36,1) !important;
  transform:none !important;
}
.btn-runaway:hover{transform:none !important;}
.btn-runaway::before{
  background:linear-gradient(135deg,rgba(230,57,70,.3),rgba(255,143,163,.3));
}

/* Proposal YES — glowing pulse */
.proposal-yes{
  animation:proposalPulse 2s ease-in-out infinite;
  font-size:1.1rem;padding:16px 42px;
  border-color:var(--soft-pink);
}
.proposal-yes::before{
  background:linear-gradient(135deg,var(--passion),var(--soft-pink));
}
@keyframes proposalPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,.55);}
  50%    {box-shadow:0 0 0 20px rgba(230,57,70,0);}
}

/* ══════════════════════════════════════════════════════
   VIDEO + IMAGES
══════════════════════════════════════════════════════ */
video{
  border-radius:16px;
  border:1px solid rgba(255,143,163,.20);
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 20px rgba(230,57,70,.12);
  margin:0 auto 14px;display:block;max-width:100%;width:220px;
}
.meme-pic{
  width:160px;height:160px;object-fit:cover;border-radius:20px;
  border:1px solid rgba(255,143,163,.20);
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 20px rgba(230,57,70,.10);
  margin:0 auto 18px;display:block;
}

/* ══════════════════════════════════════════════════════
   GREAT MESSAGE
══════════════════════════════════════════════════════ */
.great-message-wrap{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:32px;padding:20px;
}
.great-text{
  font-family:'Great Vibes',cursive;
  color:var(--cream);opacity:0;margin:0;text-align:center;
  line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity 1s ease;
}
.great-line1{
  font-size:clamp(2.8rem,10vw,4.8rem);
  text-shadow:
    0 0 60px rgba(230,57,70,.80),
    0 0 120px rgba(230,57,70,.40);
  letter-spacing:.04em;display:block;
}
.great-line2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.2rem,4.5vw,1.9rem);
  color:rgba(255,194,209,.80);
  text-shadow:0 0 30px rgba(230,57,70,.38);
  font-style:italic;letter-spacing:.06em;display:block;
}
.great-countdown{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3.5rem,16vw,7rem);
  color:var(--soft-pink);
  text-shadow:0 0 60px rgba(230,57,70,.70);
  opacity:0;margin:0;min-height:1.2em;
  transition:opacity .5s ease;
  animation:heartbeat .6s ease-in-out infinite;
}
@keyframes heartbeat{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

/* ══════════════════════════════════════════════════════
   ANNIVERSARY SECTION
══════════════════════════════════════════════════════ */
.ann-section{padding:0;background:var(--bg);overflow:hidden;}
.ann-backdrop{
  position:absolute;inset:0;
  background:rgba(14,11,30,.75);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  z-index:1;
}
.ann-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:20px;padding:40px 24px;text-align:center;
}
.ann-title{
  font-family:'Great Vibes',cursive;
  font-size:clamp(2.6rem,9vw,5rem);
  color:var(--cream);margin:0;
  text-shadow:0 0 60px rgba(230,57,70,.80),0 0 120px rgba(230,57,70,.40);
  opacity:0;
  animation:annFadeIn 1.4s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.ann-sub{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.1rem,4vw,1.5rem);
  font-style:italic;color:rgba(255,241,243,.78);
  letter-spacing:.06em;margin:0;
  opacity:0;animation:annFadeIn 1s ease 1s forwards;
}
.ann-btn{opacity:0;animation:annFadeIn 1s ease 1.8s forwards;}
@keyframes annFadeIn{
  from{opacity:0;transform:translateY(18px) scale(.97);}
  to  {opacity:1;transform:translateY(0) scale(1);}
}

/* ══════════════════════════════════════════════════════
   FIREWORKS SECTION
══════════════════════════════════════════════════════ */
.fw-section{padding:0;background:var(--bg);}
#fwCanvas{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;z-index:1;
}
.fw-overlay{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:40px 24px;text-align:center;
  pointer-events:none;
}
.fw-title{
  font-family:'Great Vibes',cursive;
  font-size:clamp(2.4rem,9vw,4.5rem);
  color:var(--cream);margin:0;
  text-shadow:0 0 50px rgba(230,57,70,.80);
  opacity:0;animation:annFadeIn 1.2s cubic-bezier(.22,1,.36,1) .5s forwards;
}
#fw-continue{
  pointer-events:auto;opacity:0;
  margin-top:10px;font-size:1rem;padding:14px 38px;
}

/* ══════════════════════════════════════════════════════
   CELEBRATION CANVAS
══════════════════════════════════════════════════════ */
#roadCanvas{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;z-index:1;
}

/* ══════════════════════════════════════════════════════
   CSS CARTOON CLOUDS
══════════════════════════════════════════════════════ */
#cartoon-clouds{
  position:absolute;top:0;left:0;right:0;height:42%;
  overflow:hidden;pointer-events:none;z-index:2;
  opacity:0;transition:opacity 3s ease 1s;
}
#cartoon-clouds.active{opacity:1;}
.cc{position:absolute;will-change:transform;animation:ccDrift linear infinite;}
.cc-body{
  position:relative;
  background:rgba(255,194,209,.65);
  border-radius:50px;
  box-shadow:0 6px 20px rgba(230,57,70,.12);
}
.cc-body::before{content:'';position:absolute;background:inherit;border-radius:50%;}
.cc-body::after {content:'';position:absolute;background:rgba(255,215,225,.70);border-radius:50%;}
.cc1{top:10%;animation-duration:55s;animation-delay:0s;}
.cc1 .cc-body{width:170px;height:46px;}
.cc1 .cc-body::before{width:88px;height:88px;top:-52px;left:18px;}
.cc1 .cc-body::after {width:110px;height:76px;top:-44px;right:14px;}
.cc2{top:22%;animation-duration:40s;animation-delay:-18s;}
.cc2 .cc-body{width:130px;height:38px;}
.cc2 .cc-body::before{width:70px;height:70px;top:-42px;left:14px;}
.cc2 .cc-body::after {width:90px;height:62px;top:-36px;right:10px;}
.cc3{top:7%;animation-duration:68s;animation-delay:-32s;}
.cc3 .cc-body{width:200px;height:54px;}
.cc3 .cc-body::before{width:100px;height:100px;top:-60px;left:22px;}
.cc3 .cc-body::after {width:130px;height:90px;top:-52px;right:18px;}
.cc4{top:55%;animation-duration:28s;animation-delay:-8s;}
.cc4 .cc-body{width:90px;height:26px;}
.cc4 .cc-body::before{width:48px;height:48px;top:-28px;left:10px;}
.cc4 .cc-body::after {width:60px;height:42px;top:-24px;right:8px;}
.cc5{top:35%;animation-duration:45s;animation-delay:-22s;}
.cc5 .cc-body{width:112px;height:32px;}
.cc5 .cc-body::before{width:60px;height:60px;top:-36px;left:12px;}
.cc5 .cc-body::after {width:76px;height:54px;top:-30px;right:10px;}
.cc6{top:62%;animation-duration:32s;animation-delay:-14s;}
.cc6 .cc-body{width:80px;height:22px;background:rgba(255,194,209,.50);}
.cc6 .cc-body::before{width:42px;height:42px;top:-24px;left:8px;}
.cc6 .cc-body::after {width:54px;height:38px;top:-20px;right:6px;}
@keyframes ccDrift{
  0%  {opacity:0;transform:translateX(-220px);}
  6%  {opacity:1;}92%{opacity:1;}
  100%{opacity:0;transform:translateX(calc(100vw + 220px));}
}

/* ══════════════════════════════════════════════════════
   HORIZON GLOW
══════════════════════════════════════════════════════ */
#horizon-glow-css{
  position:absolute;top:39%;left:0;right:0;height:6%;
  pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 80% 100% at 50% 100%,
    rgba(230,57,70,.22) 0%,rgba(255,143,163,.10) 45%,transparent 100%);
  opacity:0;transition:opacity 3s ease;
  animation:horizonPulse 5s ease-in-out infinite;
}
#horizon-glow-css.active{opacity:1;}
@keyframes horizonPulse{0%,100%{opacity:.6;}50%{opacity:1.0;}}

/* ══════════════════════════════════════════════════════
   LIGHTS OVERLAY
══════════════════════════════════════════════════════ */
#lights-overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease;
}
#lights-overlay.hidden{opacity:0;pointer-events:none;}
.lights-card{
  background:rgba(14,11,30,.55);
  border:1px solid rgba(255,143,163,.14);
  border-radius:24px;padding:40px 36px;
  backdrop-filter:blur(30px) saturate(1.4);
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,194,209,.10);
}
.lights-hint{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;color:rgba(255,241,243,.6);
  margin-bottom:20px;letter-spacing:.05em;
}

/* ══════════════════════════════════════════════════════
   BOTTOM UI — timer + music
══════════════════════════════════════════════════════ */
#bottom-ui{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:30;display:flex;align-items:center;gap:14px;
  opacity:0;transition:opacity 1s ease;pointer-events:none;
}
#bottom-ui.visible{opacity:1;pointer-events:auto;}
.timer-pill{
  background:rgba(14,11,30,.65);
  border:1px solid rgba(230,57,70,.30);
  border-radius:50px;padding:10px 20px;
  backdrop-filter:blur(24px);
  box-shadow:0 0 22px rgba(230,57,70,.10),0 4px 22px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,194,209,.07);
}
#timer-text{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(.78rem,2.2vw,1rem);
  color:var(--blush);letter-spacing:.04em;font-style:italic;white-space:nowrap;
}
.music-btn{
  width:52px;height:52px;border-radius:50%;
  background:rgba(14,11,30,.65);
  border:1px solid rgba(230,57,70,.32);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(24px);
  box-shadow:0 0 22px rgba(230,57,70,.12),0 4px 22px rgba(0,0,0,.45);
  transition:box-shadow .3s,transform .2s;
}
.music-btn:hover{box-shadow:0 0 32px rgba(230,57,70,.45);transform:scale(1.08);}
.music-disc-small{
  width:36px;height:36px;border-radius:50%;
  background:conic-gradient(var(--passion) 0%,var(--soft-pink) 30%,var(--blush) 60%,var(--passion) 100%);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.music-disc-small::before{
  content:'';position:absolute;width:12px;height:12px;
  border-radius:50%;background:rgba(14,11,30,.80);
}
.music-note{position:relative;z-index:1;font-size:.9rem;color:#fff;}
.music-disc-small.spinning{animation:spin 3s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ══════════════════════════════════════════════════════
   ENVELOPE POPUP
══════════════════════════════════════════════════════ */
.memory-popup{
  position:absolute;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:16px;pointer-events:none;
  visibility:hidden;opacity:0;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:background .45s ease,backdrop-filter .45s ease,
    -webkit-backdrop-filter .45s ease,opacity .3s ease,visibility 0s linear .5s;
}
.memory-popup.open{
  background:rgba(14,11,30,.88);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  pointer-events:auto;visibility:visible;opacity:1;
  transition:background .45s ease,backdrop-filter .45s ease,
    -webkit-backdrop-filter .45s ease,opacity .25s ease,visibility 0s linear 0s;
}

#envelope-scene{
  position:relative;
  width:min(310px,86vw);height:min(76vh,510px);
  overflow:hidden;
}
#envelope-scene.env-opening,
#envelope-scene.env-open{overflow:visible;}

/* Letter paper */
.letter-paper{
  position:absolute;left:4%;right:4%;
  bottom:calc(44% - 18px);max-height:58%;
  overflow-y:auto;overflow-x:hidden;
  background:#fff6f7;
  border-radius:14px;
  padding:26px 22px 22px;
  box-shadow:0 -4px 24px rgba(0,0,0,.18),0 8px 40px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.90);
  border:1px solid rgba(230,57,70,.12);
  scrollbar-width:thin;scrollbar-color:rgba(230,57,70,.20) transparent;
  transform:translateY(110%);opacity:0;z-index:2;transition:none;
}
.letter-paper::-webkit-scrollbar{width:3px;}
.letter-paper::-webkit-scrollbar-thumb{background:rgba(230,57,70,.2);border-radius:2px;}
.letter-paper::before{
  content:'';position:absolute;left:16px;right:16px;top:108px;bottom:0;
  background-image:repeating-linear-gradient(
    transparent,transparent 31px,rgba(230,57,70,.08) 31px,rgba(230,57,70,.08) 32px);
  pointer-events:none;border-radius:0 0 14px 14px;
}

/* Letter states */
#envelope-scene.env-open .letter-paper{
  animation:letterPeek .70s cubic-bezier(.34,1.10,.64,1) .30s both;
}
@keyframes letterPeek{
  from{transform:translateY(110%);opacity:0;}
  25%{opacity:1;}to{transform:translateY(0);opacity:1;}
}
#envelope-scene.env-reading .letter-paper{
  position:fixed;left:4vw;right:4vw;top:50%;bottom:auto;
  height:auto;max-height:88vh;z-index:50;border-radius:16px;overflow-y:auto;
  transform:translateY(-50%) scale(1);opacity:1;
  animation:letterExpand .55s cubic-bezier(.34,1.12,.64,1) both;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(230,57,70,.15),
             inset 0 1px 0 rgba(255,255,255,.90);
}
@keyframes letterExpand{
  from{transform:translateY(-50%) scale(.86);opacity:0;}
  25%{opacity:1;}to{transform:translateY(-50%) scale(1);opacity:1;}
}
#envelope-scene.env-closing .letter-paper{
  position:fixed;left:4vw;right:4vw;top:50%;bottom:auto;
  height:auto;max-height:88vh;z-index:50;
  animation:letterCollapse .50s cubic-bezier(.55,0,.45,1) both;
}
@keyframes letterCollapse{
  from{transform:translateY(-50%) scale(1);opacity:1;}
  70%{opacity:.6;}to{transform:translateY(-50%) scale(.82);opacity:0;}
}

/* Envelope body — Eros Pulse rose */
.envelope{
  position:absolute;bottom:0;left:0;right:0;height:44%;
  cursor:pointer;z-index:10;
  animation:envAppear .58s cubic-bezier(.34,1.28,.64,1) both;
  will-change:transform,opacity;
}
@keyframes envAppear{
  from{transform:translateY(50px) scale(.86);opacity:0;}
  to  {transform:translateY(0) scale(1);opacity:1;}
}
.env-back{
  position:absolute;inset:0;
  background:linear-gradient(160deg,var(--soft-pink) 0%,var(--passion) 50%,#c0263a 100%);
  border-radius:4px 4px 10px 10px;
  box-shadow:0 16px 50px rgba(0,0,0,.60),0 0 0 1px rgba(230,57,70,.40),
             inset 0 1px 0 rgba(255,200,210,.25);
}
.env-flap-left{
  position:absolute;inset:0;
  background:linear-gradient(to bottom right,#c0263a 0%,var(--passion) 50%,transparent 50%);
  border-radius:4px 0 0 10px;opacity:.60;
}
.env-flap-right{
  position:absolute;inset:0;
  background:linear-gradient(to bottom left,#c0263a 0%,var(--passion) 50%,transparent 50%);
  border-radius:0 4px 10px 0;opacity:.60;
}
.env-flap-bottom{
  position:absolute;bottom:0;left:0;right:0;height:60%;
  background:linear-gradient(175deg,var(--passion) 0%,#b02030 60%,#9a1828 100%);
  clip-path:polygon(0% 100%,50% 0%,100% 100%);border-radius:0 0 10px 10px;z-index:2;
}
.env-flap-top{
  position:absolute;top:0;left:0;right:0;height:60%;
  background:linear-gradient(168deg,var(--soft-pink) 0%,var(--passion) 40%,#c0263a 100%);
  clip-path:polygon(0% 0%,50% 100%,100% 0%);border-radius:4px 4px 0 0;
  transform-origin:top center;will-change:transform;z-index:5;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22));
}
#envelope-scene.env-opening .env-flap-top,
#envelope-scene.env-open    .env-flap-top{
  animation:flapOpen .60s cubic-bezier(.4,0,.2,1) both;
}
@keyframes flapOpen{0%{transform:perspective(700px) rotateX(0deg);}100%{transform:perspective(700px) rotateX(-182deg);}}
#envelope-scene.env-closing .env-flap-top{
  animation:flapClose .50s cubic-bezier(.4,0,.2,1) .28s both;
}
@keyframes flapClose{0%{transform:perspective(700px) rotateX(-182deg);}100%{transform:perspective(700px) rotateX(0deg);}}
#envelope-scene.env-open .envelope{
  pointer-events:none;animation:envFadeGone .55s ease .40s both;
}
@keyframes envFadeGone{from{transform:translateY(0);opacity:1;}to{transform:translateY(55px);opacity:0;}}
#envelope-scene.env-reading .envelope{opacity:0;transform:translateY(55px);pointer-events:none;}
#envelope-scene.env-closing .envelope{
  pointer-events:none;
  animation:envReturnAndExit .90s cubic-bezier(.4,0,.2,1) .25s both;
}
@keyframes envReturnAndExit{
  0%{transform:translateY(55px);opacity:0;}
  30%{transform:translateY(0);opacity:1;}
  65%{transform:translateY(0);opacity:1;}
  100%{transform:translateY(80px);opacity:0;}
}

/* Wax seal */
.env-seal{
  position:absolute;top:calc(60% - 24px);left:50%;
  transform:translateX(-50%);font-size:2.1rem;z-index:6;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.40));
  transition:transform .3s ease,opacity .3s ease;pointer-events:none;
}
#envelope-scene.env-opening .env-seal,
#envelope-scene.env-open    .env-seal,
#envelope-scene.env-reading .env-seal{
  opacity:0;transform:translateX(-50%) scale(.5) translateY(-10px);transition:all .25s ease;
}
#envelope-scene.env-closing .env-seal{animation:sealReturn .32s ease .55s both;}
@keyframes sealReturn{from{opacity:0;transform:translateX(-50%) scale(.5);}to{opacity:1;transform:translateX(-50%) scale(1);}}

/* Hint */
.env-hint{
  position:absolute;bottom:14%;left:0;right:0;text-align:center;
  font-family:'Sacramento',cursive;font-size:1.1rem;
  color:rgba(255,241,243,.88);letter-spacing:.05em;
  pointer-events:none;z-index:7;
  animation:hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.70;}50%{opacity:1;}}
#envelope-scene.env-opening .env-hint,
#envelope-scene.env-open    .env-hint,
#envelope-scene.env-reading .env-hint,
#envelope-scene.env-closing .env-hint{display:none;}

/* ══════════════════════════════════════════════════════
   LETTER CONTENT
══════════════════════════════════════════════════════ */
.letter-close{
  position:absolute;top:10px;right:12px;
  background:rgba(230,57,70,.10);border:none;border-radius:50%;
  width:28px;height:28px;color:rgba(180,50,60,.60);
  font-size:.78rem;cursor:pointer;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;z-index:10;
}
.letter-close:hover{background:rgba(230,57,70,.22);color:rgba(180,50,60,.92);}
.letter-close::before{display:none;}
.letter-to-tag{
  display:inline-block;
  background:rgba(230,57,70,.12);border:1px solid rgba(230,57,70,.28);
  border-radius:20px;padding:2px 12px;
  font-family:'Jost',sans-serif;font-size:.78rem;
  color:rgba(180,50,70,.80);letter-spacing:.06em;
  margin-bottom:12px;position:relative;z-index:2;
}
.letter-heading{
  font-family:'Great Vibes',cursive;
  font-size:clamp(1.6rem,5.5vw,2.2rem);color:#1a0608;
  text-align:center;margin-bottom:10px;position:relative;z-index:2;
}
.letter-rule{
  display:block;width:60%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,57,70,.28),transparent);
  margin:0 auto 12px;position:relative;z-index:2;
}
.letter-photo{
  display:block;width:100%;max-height:170px;object-fit:cover;
  margin:0 0 14px;border-radius:4px;position:relative;z-index:2;
  box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(230,57,70,.15),0 5px 18px rgba(0,0,0,.28);
  filter:contrast(1.04) brightness(.98) saturate(.94);transform:rotate(-0.5deg);
}
.letter-salutation{
  font-family:'Great Vibes',cursive;
  font-size:clamp(1.4rem,5vw,1.85rem);color:#220a0c;
  text-align:left;display:block;margin-bottom:8px;
  position:relative;z-index:2;line-height:1.3;
}
.letter-body{
  font-family:'Lora',serif;font-size:1.0rem;font-style:italic;
  line-height:2.0;color:#1e0a0c;position:relative;z-index:2;
  letter-spacing:.012em;margin:0;padding-bottom:4px;
  text-align:left;text-indent:1.4em;min-height:2em;
}
.type-cursor{
  display:inline;color:rgba(230,57,70,.75);font-weight:700;
  animation:cursorBlink .65s steps(1) infinite;
}
@keyframes cursorBlink{0%,100%{opacity:1;}50%{opacity:0;}}
.type-cursor.done{animation:cursorFade .9s ease forwards;}
@keyframes cursorFade{to{opacity:0;}}
.letter-closing,.letter-signature{
  display:block;position:relative;z-index:2;
  opacity:0;transform:translateY(6px);
  transition:opacity .8s ease,transform .8s ease;
}
.letter-closing.visible,.letter-signature.visible{opacity:1;transform:translateY(0);}
.letter-closing{
  font-family:'Great Vibes',cursive;
  font-size:clamp(1.1rem,3.8vw,1.35rem);
  color:#2a0a0e;margin-top:16px;text-align:right;
}
.letter-signature{
  font-family:'Great Vibes',cursive;
  font-size:clamp(1.35rem,4.8vw,1.75rem);
  color:#1a0608;margin-top:2px;text-align:right;
}

/* First song player */
.popup-song-wrap{
  margin-top:16px;padding-top:12px;
  border-top:1px solid rgba(230,57,70,.15);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;z-index:2;
}
.popup-song-label{
  font-family:'Jost',sans-serif;font-size:.75rem;
  color:rgba(180,50,60,.50);letter-spacing:.08em;text-transform:uppercase;
}
.popup-song-btn{
  font-family:'Great Vibes',cursive;font-size:1.1rem;
  padding:9px 26px;border:1.5px solid rgba(230,57,70,.45);border-radius:50px;
  background:transparent;color:#5a0a12;cursor:pointer;margin:0;
  position:relative;overflow:hidden;
  transition:color .3s,box-shadow .3s,transform .2s;
}
.popup-song-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--passion),var(--soft-pink));opacity:0;transition:opacity .3s;border-radius:inherit;}
.popup-song-btn:hover::before{opacity:1;}
.popup-song-btn:hover{color:#fff;box-shadow:0 0 20px rgba(230,57,70,.45);transform:translateY(-2px);}
.popup-song-btn span{position:relative;z-index:1;}
.popup-song-btn.playing{border-color:var(--passion);color:var(--passion);animation:songPulse 1.8s ease-in-out infinite;}
.popup-song-btn.playing::before{background:linear-gradient(135deg,var(--passion),var(--soft-pink));}
@keyframes songPulse{0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,.45);}50%{box-shadow:0 0 0 10px rgba(230,57,70,0);}}

/* ══════════════════════════════════════════════════════
   ASSET PROTECTION
══════════════════════════════════════════════════════ */
img,video{
  -webkit-touch-callout:none;-webkit-user-select:none;
  user-select:none;pointer-events:none;
}
button,a,.btn-runaway,#memory-popup,.letter-close,
.popup-song-btn,.music-btn,canvas,#roadCanvas,
.envelope,#envelope-scene{pointer-events:auto;}
.meme-pic,.letter-photo{position:relative;}
.meme-pic::after,.letter-photo::after{content:'';position:absolute;inset:0;z-index:1;}

/* ══════════════════════════════════════════════════════
   SHAKE
══════════════════════════════════════════════════════ */
.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97);}
@keyframes shake{10%,90%{transform:translate(-2px,1px);}20%,80%{transform:translate(3px,-1px);}30%,50%,70%{transform:translate(-3px,2px);}40%,60%{transform:translate(3px,-2px);}}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:479px){
  .glass-card{padding:32px 16px;border-radius:22px;}
  h1{font-size:clamp(1.9rem,9vw,2.8rem);}
  h2{font-size:clamp(1.2rem,5vw,1.5rem);}
  .meme-pic{width:110px;height:110px;}
  #envelope-scene{width:min(280px,92vw);height:min(72vh,420px);}
  .letter-paper{padding:18px 14px 16px;}
}
@media(min-width:768px) and (max-width:1023px){
  .glass-card{padding:60px 48px;max-width:560px;}
  .meme-pic{width:190px;height:190px;}
  #envelope-scene{width:min(400px,75vw);height:min(72vh,580px);}
}
@media(min-width:1024px){
  body{cursor:auto;}
  .glass-card{padding:64px 56px;max-width:620px;}
  .meme-pic{width:210px;height:210px;}
  #envelope-scene.env-reading .letter-paper{left:20vw;right:20vw;}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  .section{padding:12px 16px;overflow-y:auto;}
  .glass-card{padding:20px 24px;border-radius:18px;}
  h1{font-size:1.8rem;}h2{font-size:1.2rem;}
  .meme-pic{width:90px;height:90px;}
  #envelope-scene{width:min(260px,50vw);height:min(80vh,340px);}
}
@media(hover:hover) and (pointer:fine){
  button:hover{border-color:var(--soft-pink);box-shadow:0 0 24px rgba(230,57,70,.50);transform:translateY(-2px);}
  .music-btn:hover{box-shadow:0 0 32px rgba(230,57,70,.45);transform:scale(1.08);}
}