/* ==========================================================
   TOKENS
   ========================================================== */
:root{
  --ivory:        #F8FBFE;
  --baby-blue:    #DCEBF5;
  --powder-blue:  #B7D6EA;
  --steel-blue:   #6E93B7;
  --deep-navy:    #223C55;
  --deep-navy-2:  #16283B;
  --silver:       #CBD5DD;
  --silver-soft:  #E7ECF1;
  --ink:          #26364a;
  --gold:         #CBA968;
  --gold-soft:    #E5D6AE;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  --shadow-soft: 0 20px 45px -20px rgba(34,60,85,0.35);
  --shadow-card: 0 30px 60px -25px rgba(22,40,59,0.4);

  --ease-lux: cubic-bezier(.22,.85,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* ==========================================================
   AMBIENT BACKGROUND
   ========================================================== */
.bg-scene{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 90% at 50% -10%, #eaf4fb 0%, var(--ivory) 45%, var(--baby-blue) 100%);
  overflow:hidden;
}

.bg-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  will-change:transform;
}
.bg-glow-1{
  width:60vmax; height:60vmax;
  top:-20vmax; left:-15vmax;
  background:radial-gradient(circle, #cfe6f5 0%, transparent 70%);
  animation:driftA 26s ease-in-out infinite;
}
.bg-glow-2{
  width:50vmax; height:50vmax;
  bottom:-15vmax; right:-20vmax;
  background:radial-gradient(circle, #bcd9ef 0%, transparent 70%);
  animation:driftB 32s ease-in-out infinite;
}
.bg-glow-3{
  width:40vmax; height:40vmax;
  top:35%; left:60%;
  background:radial-gradient(circle, #e4f0fa 0%, transparent 70%);
  animation:driftA 22s ease-in-out infinite reverse;
}

@keyframes driftA{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4vw,3vh) scale(1.08); }
}
@keyframes driftB{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-3vw,-4vh) scale(1.1); }
}

.particles{ position:absolute; inset:0; }
.particle{
  position:absolute;
  bottom:-5%;
  width:5px; height:5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(183,214,234,.5));
  box-shadow:0 0 6px rgba(255,255,255,.6);
  opacity:0;
  animation-name:rise;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  8%{ opacity:.8; }
  92%{ opacity:.5; }
  100%{ transform:translateY(-115vh) translateX(var(--drift,20px)); opacity:0; }
}

/* ==========================================================
   FALLING PETALS
   ========================================================== */
.petals{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.petal{
  position:absolute;
  top:-6%;
  left:0;
  border-radius:0% 100% 0% 100% / 0% 100% 0% 100%;
  will-change:transform, opacity;
  animation-name:petalFall;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.petal.is-blue{
  background:linear-gradient(135deg, var(--powder-blue), var(--baby-blue));
  box-shadow:0 2px 6px rgba(110,147,183,.25);
}
.petal.is-white{
  background:linear-gradient(135deg, #ffffff, var(--silver-soft));
  box-shadow:0 2px 6px rgba(180,200,215,.3);
}

@keyframes petalFall{
  0%{
    transform:translate3d(0,-8vh,0) rotate(0deg);
    opacity:0;
  }
  8%{ opacity:.85; }
  25%{
    transform:translate3d(calc(var(--swing,1) * 22px), 25vh, 0) rotate(90deg);
  }
  50%{
    transform:translate3d(calc(var(--swing,1) * -18px), 52vh, 0) rotate(180deg);
  }
  75%{
    transform:translate3d(calc(var(--swing,1) * 20px), 80vh, 0) rotate(270deg);
  }
  92%{ opacity:.8; }
  100%{
    transform:translate3d(calc(var(--swing,1) * -10px), 112vh, 0) rotate(360deg);
    opacity:0;
  }
}

/* ==========================================================
   ENVELOPE STAGE
   ========================================================== */
.stage{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vh 5vw;
  overflow:hidden;
}

.stage-inner{
  position:relative;
  width:100%;
  max-width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:70vh;
}

.envelope-scene{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  transition:opacity .8s var(--ease-lux), transform .8s var(--ease-lux);
}
.envelope-scene.is-hidden{
  opacity:0;
  transform:translateY(-16px) scale(.94);
  pointer-events:none;
}

.envelope-wrap{
  position:relative;
  width:min(80vw, 340px);
  aspect-ratio:1064/736;
  cursor:pointer;
  perspective:900px;
  -webkit-tap-highlight-color:transparent;
  animation:envFloat 4.5s ease-in-out infinite;
  transition:transform .45s var(--ease-lux);
}
@keyframes envFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-8px) rotate(-.6deg); }
}

.envelope-wrap.is-pressed{ animation:none; transform:scale(.96); }
.envelope-wrap.is-opening{ animation:none; }

.envelope-wrap.is-shaking{
  animation:envShake .5s ease-in-out;
}
@keyframes envShake{
  0%,100%{ transform:rotate(0deg) scale(1); }
  20%{ transform:rotate(-3deg) scale(1.01); }
  40%{ transform:rotate(2.4deg) scale(1.01); }
  60%{ transform:rotate(-1.8deg) scale(1.01); }
  80%{ transform:rotate(1deg) scale(1.01); }
}

/* Hover interactivity — pointer devices only, so it never sticks on touch */
@media (hover:hover) and (pointer:fine){
  .envelope-wrap:not(.is-opening):hover{
    transform:translateY(-6px) scale(1.035);
  }
  .envelope-wrap:not(.is-opening):hover .env-glow{
    opacity:.55;
    transform:scale(.85);
  }
  .envelope-wrap:not(.is-opening):hover .env-base{
    filter:drop-shadow(0 22px 30px rgba(34,60,85,.4)) brightness(1.03);
  }
}

.env-shadow{
  position:absolute;
  left:12%; right:12%; bottom:-16px;
  height:22px;
  background:radial-gradient(ellipse, rgba(34,60,85,.32), transparent 70%);
  filter:blur(7px);
  transition:transform .6s var(--ease-lux), opacity .6s var(--ease-lux);
}

.env-base{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(34,60,85,.32));
  transition:transform .7s var(--ease-lux), opacity .6s var(--ease-lux), filter .5s;
}

.env-flap{
  position:absolute;
  top:0; left:0; right:0;
  height:100%;
  width:100%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  clip-path:polygon(6% 4%, 94% 4%, 50% 46%);
  transform-origin:50% 4%;
  transform-style:preserve-3d;
  transition:transform .9s var(--ease-lux), filter .9s var(--ease-lux);
  filter:brightness(.98) drop-shadow(0 4px 6px rgba(0,0,0,.06));
}

.env-glow{
  position:absolute; inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(220,240,255,.95), rgba(229,214,174,.3) 55%, transparent 72%);
  opacity:0;
  transform:scale(.6);
  pointer-events:none;
  transition:opacity .5s ease, transform .8s var(--ease-lux);
  z-index:-1;
}

.seal-flash{
  position:absolute;
  left:50%; top:44%;
  width:14px; height:14px;
  transform:translate(-50%,-50%) scale(0);
  border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--powder-blue) 45%, var(--gold-soft) 70%, transparent 75%);
  opacity:0;
  pointer-events:none;
}
.seal-flash.is-cracking{
  animation:sealCrack .7s var(--ease-lux) forwards;
}
@keyframes sealCrack{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:0; }
  35%{ transform:translate(-50%,-50%) scale(2.4); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(6.5); opacity:0; }
}

/* Opening sequence states */
.envelope-wrap.flap-open .env-flap{
  transform:rotateX(-165deg) translateY(-2px);
  filter:brightness(.85);
}
.envelope-wrap.flap-open .env-glow{
  opacity:1;
  transform:scale(1.15);
}
.envelope-wrap.letter-out .env-base{
  transform:scale(.82) translateY(10px);
  opacity:0;
}
.envelope-wrap.letter-out .env-shadow{
  opacity:0;
  transform:scale(.7);
}

.tap-hint{
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--steel-blue);
  opacity:.85;
  animation:hintPulse 2.6s ease-in-out infinite;
  margin:0;
}
@keyframes hintPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
.tap-hint.is-hidden{ opacity:0; transition:opacity .4s; }

/* Sparkle burst */
.sparkle{
  position:absolute;
  left:50%; top:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px 2px rgba(190,220,245,.9);
  pointer-events:none;
  animation:sparkleOut .9s ease-out forwards;
}
@keyframes sparkleOut{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:1; }
  70%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1); opacity:0; }
}

/* Confetti burst when the letter appears */
.confetti-piece{
  position:fixed;
  top:38%;
  left:50%;
  width:7px;
  height:11px;
  border-radius:1px;
  pointer-events:none;
  z-index:60;
  animation:confettiFall 1.6s ease-out forwards;
}
@keyframes confettiFall{
  0%{
    transform:translate(-50%,-50%) translate(0,0) rotate(0deg);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-50%) translate(var(--cx), var(--cy)) rotate(var(--cr));
    opacity:0;
  }
}

/* ==========================================================
   LETTER CARD
   ========================================================== */
.letter-card{
  position:absolute;
  inset:0 auto auto 50%;
  top:50%;
  transform:translate(-50%,-42%) scale(.55);
  width:min(90vw, 440px);
  max-height:82vh;
  overflow-y:auto;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius:18px;
  box-shadow:var(--shadow-card);
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:transform 1.05s var(--ease-lux), opacity .8s ease;
  border:1px solid rgba(183,214,234,.5);
}
.letter-card::-webkit-scrollbar{ width:5px; }
.letter-card::-webkit-scrollbar-thumb{ background:var(--silver); border-radius:10px; }

.letter-card.is-visible{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}

.letter-inner{
  padding:44px 30px 38px;
  text-align:center;
}

.letter-eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--powder-blue);
  margin:0 0 6px;
  font-weight:500;
}

.letter-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem, 7vw, 2.6rem);
  line-height:1.1;
  color:var(--deep-navy);
  margin:0 0 18px;
}
.letter-title em{
  font-style:italic;
  color:var(--steel-blue);
}

.letter-divider{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  margin:0 auto 22px;
  width:70%;
}
.letter-divider span{
  height:1px; flex:1;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.letter-heart{
  font-style:normal;
  color:var(--powder-blue);
  font-size:.85rem;
  text-shadow:0 0 10px rgba(203,169,104,.35);
}

.letter-body{
  font-family:var(--font-display);
  font-size:clamp(1.02rem, 3.6vw, 1.18rem);
  line-height:1.75;
  color:var(--ink);
  margin:0 0 22px;
}

.letter-sign{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--steel-blue);
  margin:0;
}

/* ==========================================================
   SCROLL CUE
   ========================================================== */
.scroll-cue{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:0;
  transition:opacity .8s ease;
}
.scroll-cue.is-visible{ opacity:.85; }
.scroll-cue span{
  width:1px; height:34px;
  background:linear-gradient(180deg, transparent, var(--steel-blue));
  position:relative;
  overflow:hidden;
}
.scroll-cue span::after{
  content:'';
  position:absolute;
  left:0; top:-100%;
  width:100%; height:100%;
  background:var(--deep-navy);
  animation:scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{ top:-100%; }
  100%{ top:100%; }
}
.scroll-cue p{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel-blue);
  margin:0;
}

/* ==========================================================
   MUSIC BUTTON
   ========================================================== */
.music-btn{
  position:fixed;
  top:max(18px, env(safe-area-inset-top));
  right:16px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  border:1px solid rgba(183,214,234,.7);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 28px -14px rgba(34,60,85,.4);
  color:var(--deep-navy);
  font-size:.82rem;
  font-weight:500;
  cursor:pointer;
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .8s var(--ease-lux) .3s, transform .8s var(--ease-lux) .3s, box-shadow .3s;
  animation:musicFloat 4s ease-in-out infinite;
}
.music-btn.is-loaded{
  opacity:1;
  transform:translateY(0);
}
@keyframes musicFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
.music-btn:active{ transform:scale(.96); }

.music-visual{
  position:relative;
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.music-icon{
  position:absolute;
  font-size:1.05rem;
  color:var(--steel-blue);
  transition:opacity .35s ease, transform .4s var(--ease-lux);
  opacity:1;
}
.music-btn.is-playing .music-icon{
  opacity:0;
  transform:scale(.6);
}

.music-bars{
  position:absolute;
  display:flex;
  align-items:flex-end;
  gap:2.5px;
  height:14px;
  opacity:0;
  transition:opacity .35s ease;
}
.music-btn.is-playing .music-bars{ opacity:1; }
.music-bars i{
  display:block;
  width:2.5px;
  border-radius:2px;
  background:var(--steel-blue);
  animation:barBounce 1s ease-in-out infinite;
}
.music-bars i:nth-child(1){ animation-delay:-.9s; }
.music-bars i:nth-child(2){ animation-delay:-.6s; }
.music-bars i:nth-child(3){ animation-delay:-.3s; }
.music-bars i:nth-child(4){ animation-delay:0s; }
@keyframes barBounce{
  0%,100%{ height:4px; }
  50%{ height:14px; }
}

.music-ring{
  position:absolute; inset:0;
  border-radius:999px;
  border:1px solid var(--powder-blue);
  opacity:0;
  pointer-events:none;
}
.music-btn.is-playing .music-ring{
  animation:ringPulse 2s ease-out infinite;
}
@keyframes ringPulse{
  0%{ opacity:.6; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.35); }
}

/* Tiny notes drifting off the button while playing */
.floating-note{
  position:fixed;
  z-index:59;
  font-family:var(--font-display);
  color:var(--steel-blue);
  opacity:0;
  pointer-events:none;
  animation:noteFloat 2.2s ease-out forwards;
}
@keyframes noteFloat{
  0%{ transform:translate(0,0) rotate(0deg) scale(.8); opacity:0; }
  15%{ opacity:.9; }
  100%{ transform:translate(var(--nx), -70px) rotate(var(--nr)) scale(1); opacity:0; }
}

/* ==========================================================
   TIMELINE
   ========================================================== */
.timeline{
  position:relative;
  padding:14vh 6vw 10vh;
  max-width:720px;
  margin:0 auto;
}

.timeline-head{
  text-align:center;
  margin-bottom:9vh;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease-lux), transform .9s var(--ease-lux);
}
.timeline-head.in-view{ opacity:1; transform:translateY(0); }

.timeline-eyebrow{
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--steel-blue);
  margin:0 0 10px;
}
.timeline-title{
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(1.8rem, 6vw, 2.5rem);
  color:var(--deep-navy);
  margin:0;
}

.timeline-track{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.photo-item{
  position:relative;
  width:min(74vw, 320px);
  opacity:0;
  transform:translateY(50px) scale(.9);
  transition:opacity 1s var(--ease-lux), transform 1s var(--ease-lux);
  will-change:transform, opacity;
}
.photo-item.align-left{ margin-right:14%; }
.photo-item.align-right{ margin-left:14%; }

.photo-item.in-view{
  opacity:1;
  transform:translateY(0) scale(1);
}
.photo-item.in-view.floaty{
  animation:photoFloat 5s ease-in-out infinite;
}
@keyframes photoFloat{
  0%,100%{ transform:translateY(0) rotate(var(--tilt,0deg)); }
  50%{ transform:translateY(-7px) rotate(var(--tilt,0deg)); }
}

.photo-frame{
  background:#fff;
  padding:10px 10px 16px;
  border-radius:6px;
  box-shadow:var(--shadow-card);
  transform:rotate(var(--tilt,0deg));
  transition:transform .4s ease;
}
.photo-item.in-view .photo-frame{ transform:rotate(var(--tilt,0deg)); }

.photo-frame img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:3px;
  background:var(--silver-soft);
}

.photo-index{
  display:block;
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.85rem;
  color:var(--powder-blue);
  margin-top:8px;
  letter-spacing:.05em;
}

.arrow-slot{
  width:100%;
  height:110px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.arrow-slot svg{
  width:120px;
  height:100%;
  overflow:visible;
}
.arrow-slot path{
  fill:none;
  stroke:var(--deep-navy-2);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.8;
}
.arrow-slot polygon{
  fill:var(--deep-navy-2);
  opacity:.8;
}

/* ==========================================================
   FINALE
   ========================================================== */
.finale{
  position:relative;
  min-height:80vh;
  min-height:80svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10vh 8vw;
  overflow:hidden;
}

.finale-glow{
  position:absolute;
  width:70vmax; height:70vmax;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(183,214,234,.55), transparent 65%);
  filter:blur(50px);
  z-index:-1;
}

.finale-heart{
  width:46px; height:auto;
  fill:var(--powder-blue);
  margin-bottom:20px;
  opacity:0;
  transform:scale(.6);
  transition:opacity 1s var(--ease-lux), transform 1s var(--ease-lux);
  animation:heartPulse 2.6s ease-in-out infinite;
}
.finale-heart.in-view{ opacity:1; transform:scale(1); }
@keyframes heartPulse{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(183,214,234,0)); }
  50%{ filter:drop-shadow(0 0 14px rgba(183,214,234,.7)); }
}

.finale-eyebrow{
  font-size:.8rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--steel-blue);
  margin:0 0 14px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s var(--ease-lux), transform .9s var(--ease-lux);
}
.finale-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.4rem, 10vw, 4rem);
  color:var(--deep-navy);
  margin:0 0 18px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1s var(--ease-lux) .1s, transform 1s var(--ease-lux) .1s;
}
.finale-sub{
  font-family:var(--font-body);
  font-weight:300;
  font-size:1rem;
  color:var(--ink);
  max-width:380px;
  margin:0 auto;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1s var(--ease-lux) .2s, transform 1s var(--ease-lux) .2s;
}

.reveal.in-view{ opacity:1 !important; transform:translateY(0) !important; }

/* ==========================================================
   RESPONSIVE — DESKTOP ENHANCEMENTS
   ========================================================== */
@media (min-width:720px){
  .music-btn{ top:26px; right:30px; padding:12px 20px; }
  .photo-item{ width:300px; }
}

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

:focus-visible{
  outline:2px solid var(--steel-blue);
  outline-offset:3px;
}