/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --wine:      #7A2338;
  --wine-deep: #4E1524;
  --ivory:     #FFF7EE;
  --blush:     #F6D9DE;
  --rose:      #D98FA0;
  --gold:      #C9A15A;
  --gold-soft: #E8CE9C;
  --night:     #0B0A17;
  --night-2:   #171325;

  --font-display: 'Playfair Display', serif;
  --font-body: 'Quicksand', sans-serif;
  --font-script: 'Dancing Script', cursive;

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

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--wine-deep);
  overflow-x: hidden;
  cursor: none;
}
@media (hover:none), (pointer:coarse){ body{ cursor:auto; } #cursor-glow{ display:none; } }

img{ max-width:100%; display:block; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }

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

/* ============================================================
   AMBIENT LAYERS
   ============================================================ */
#ambient-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:5; mix-blend-mode:normal;
}
#cursor-glow{
  position:fixed; top:0; left:0; width:26px; height:26px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(201,161,90,.55), transparent 70%);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition: transform .06s linear, opacity .3s ease;
  will-change: transform;
}

.scroll-thread{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:200;
  background: rgba(122,35,56,.08);
}
.scroll-thread-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--wine), var(--gold));
  transition: width .1s linear;
}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:99999;
  background: var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-heart{ animation: heartbeat 1.1s ease-in-out infinite; }
@keyframes heartbeat{ 0%,100%{ transform:scale(1);} 25%{transform:scale(1.15);} 40%{transform:scale(.96);} }
.loader-text{ font-family:var(--font-script); font-size:1.3rem; color:var(--wine); }

/* ============================================================
   SECTIONS - shared
   ============================================================ */
.section{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 6rem 1.5rem;
  overflow:hidden;
}
.section-title{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  color: var(--wine); text-align:center; margin-bottom:.5rem;
}
.section-sub{
  font-family: var(--font-body); font-weight:500;
  color: var(--rose); text-align:center; margin-bottom:3rem; letter-spacing:.02em;
}

.reveal-up{
  opacity:0; transform: translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-up.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   HERO
   ============================================================ */
#hero{
  background:
    radial-gradient(ellipse at 20% 15%, rgba(217,143,160,.35), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(201,161,90,.28), transparent 55%),
    var(--ivory);
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.6), transparent 60%);
}
.hero-petals{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.hero-inner{ position:relative; z-index:2; text-align:center; max-width:640px; }
.eyebrow{
  font-family: var(--font-script); font-size:1.5rem; color:var(--rose); margin-bottom:.5rem;
}
.hero-name{ font-family: var(--font-display); line-height:1; }
.hero-name .line{
  display:block; font-weight:700; font-size:clamp(2.6rem, 9vw, 5.5rem); color:var(--wine-deep);
}
.hero-name .accent{
  font-style:italic; color:var(--wine);
  background: linear-gradient(90deg, var(--wine), var(--gold) 60%, var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  margin-top:1.4rem; font-size:1.05rem; color:var(--wine-deep); opacity:.85;
  font-weight:500; max-width:420px; margin-inline:auto;
}
.scroll-cue{
  margin-top:3rem; display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
  color: var(--wine); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* ============================================================
   PAPER NOTE
   ============================================================ */
#note{ background: var(--ivory); }
.paper-note{
  max-width:560px; background:#fffdf9;
  border-radius:6px;
  padding: 2.6rem 2.4rem;
  box-shadow: 0 30px 60px -20px rgba(122,35,56,.18), 0 2px 0 rgba(0,0,0,.02);
  transform: rotate(-1.2deg);
  position:relative; z-index:3;
}
.paper-note::before{
  content:''; position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:60px; height:26px; background: rgba(201,161,90,.35); border:1px solid rgba(201,161,90,.5);
}
.paper-note p{
  font-family: var(--font-display); font-size:1.2rem; line-height:1.65; color:var(--wine-deep); margin-bottom:1rem;
}
.paper-note em{ font-style:italic; color:var(--wine); }
.note-sign{ display:block; margin-top:1.2rem; font-family:var(--font-script); font-size:1.2rem; color:var(--rose); text-align:right; }

.floating-doodles{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.doodle{ position:absolute; font-size:1.6rem; opacity:.7; animation: float-doodle 7s ease-in-out infinite; }
.d1{ top:14%; left:10%; animation-delay:0s; }
.d2{ top:70%; left:85%; animation-delay:1.2s; }
.d3{ top:20%; left:82%; animation-delay:2.4s; }
.d4{ top:78%; left:12%; animation-delay:3.4s; }
@keyframes float-doodle{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-22px) rotate(12deg);} }

/* ============================================================
   MEMORY STRING / POLAROIDS
   ============================================================ */
#memories{ background: linear-gradient(180deg, var(--ivory), var(--blush) 120%); }
.string-wrap{ position:relative; width:100%; max-width:1100px; margin-top:1rem; }
.string-svg{ position:absolute; top:-30px; left:0; width:100%; height:60px; z-index:0; }

.polaroid-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 2.2rem 1.6rem;
  position:relative; z-index:1; padding-top: 1rem;
}
.polaroid{
  background:#fff; padding: 14px 14px 46px; width: 210px;
  box-shadow: 0 18px 40px -14px rgba(122,35,56,.35);
  border-radius: 3px;
  transform: rotate(var(--r,0deg));
  animation: sway 6s ease-in-out infinite;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
}
.polaroid:hover{ transform: rotate(0deg) scale(1.05) translateY(-6px); box-shadow: 0 26px 50px -14px rgba(122,35,56,.45); z-index:5; }
.polaroid.p1{ --r: -6deg; animation-delay:.1s; }
.polaroid.p2{ --r: 4deg; animation-delay:.9s; }
.polaroid.p3{ --r: -3deg; animation-delay:1.6s; }
.polaroid.p4{ --r: 6deg; animation-delay:.5s; }
@keyframes sway{ 0%,100%{ transform: rotate(var(--r,0deg)) translateY(0);} 50%{ transform: rotate(calc(var(--r,0deg) * -1)) translateY(-8px);} }

.polaroid img{ width:100%; height:230px; object-fit:cover; border-radius:1px; }
.polaroid figcaption{
  position:absolute; left:0; right:0; bottom:12px; text-align:center;
  font-family: var(--font-script); font-size:1.05rem; color:var(--wine);
}
.pin{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--wine) 70%);
  box-shadow: 0 3px 5px rgba(0,0,0,.25);
  z-index:2;
}

/* ============================================================
   GIFT BOX SURPRISE
   ============================================================ */
#gift{ background: var(--blush); }
.gift-stage{ display:flex; flex-direction:column; align-items:center; }
.gift-box{
  position:relative; width:150px; height:130px; margin-top:1rem;
  transition: transform .3s var(--ease);
}
.gift-box:hover{ transform: translateY(-6px) scale(1.03); }
.gift-box.opened .gift-lid{ transform: translateY(-70px) rotate(-18deg); opacity:0; }
.gift-box.opened .gift-bow{ transform: translate(-50%,-140px) scale(1.3) rotate(15deg); opacity:0; }
.gift-box.opened{ animation: gift-shake .4s ease; }
@keyframes gift-shake{ 0%,100%{ transform: rotate(0);} 25%{ transform: rotate(-3deg);} 75%{ transform: rotate(3deg);} }

.gift-body{
  position:absolute; bottom:0; left:0; right:0; height:88px;
  background: linear-gradient(135deg, var(--wine), var(--wine-deep));
  border-radius: 6px;
  box-shadow: 0 18px 40px -14px rgba(122,35,56,.5);
}
.gift-lid{
  position:absolute; top:26px; left:-6px; right:-6px; height:26px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  border-radius: 6px;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
  z-index:2;
}
.gift-ribbon-v{ position:absolute; top:0; bottom:0; left:50%; width:14px; transform:translateX(-50%); background: var(--gold-soft); z-index:1; }
.gift-ribbon-h{ position:absolute; top:26px; left:0; right:0; height:14px; background: var(--gold-soft); z-index:3; }
.gift-bow{
  position:absolute; top:0; left:50%; transform:translate(-50%,-18px);
  font-size:2.2rem; transition: transform .6s var(--ease), opacity .6s var(--ease); z-index:4;
}

.gift-message{
  margin-top:3rem; text-align:center; max-width:440px;
  opacity:0; transform: translateY(18px) scale(.96);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  font-family: var(--font-display); font-style:italic; font-size:1.3rem; color:var(--wine-deep);
}
.gift-message.show{ opacity:1; transform: translateY(0) scale(1); }
.gift-message p{ margin-bottom:.3rem; }

/* ============================================================
   CINEMATIC VIDEO SURPRISE
   ============================================================ */
#cinema{
  background: var(--night);
  min-height: 100vh;
}
.cinema-particles{ position:absolute; inset:0; z-index:0; }

.cinema-stage{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  opacity:1; transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.cinema-stage.hidden{ opacity:0; transform: scale(.92); pointer-events:none; position:absolute; }
.cinema-kicker{
  font-family: var(--font-script); font-size:2rem; color: var(--gold-soft);
  text-shadow: 0 0 24px rgba(201,161,90,.6);
  animation: shimmer-fade 2.6s ease-in-out infinite;
}
@keyframes shimmer-fade{ 0%,100%{ opacity:.75;} 50%{ opacity:1;} }
.cinema-line{
  font-family: var(--font-display); font-style:italic; color:#F3EDE3; font-size: clamp(1.1rem,3vw,1.6rem);
  max-width:520px; line-height:1.5;
}
.cinema-reveal-btn{
  margin-top:1rem; padding: .9rem 2.4rem; border-radius: 999px;
  border:1px solid rgba(201,161,90,.6); color: var(--gold-soft);
  letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
  background: rgba(201,161,90,.08);
  backdrop-filter: blur(6px);
  transition: all .35s var(--ease);
}
.cinema-reveal-btn:hover{ background: rgba(201,161,90,.22); box-shadow: 0 0 30px rgba(201,161,90,.4); transform:translateY(-2px); }

.video-frame{
  position:relative; z-index:2;
  width:min(360px, 82vw); border-radius: 22px; overflow:hidden;
  opacity:0; transform: scale(.7);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
  box-shadow: 0 0 0 1px rgba(201,161,90,.35), 0 40px 100px -20px rgba(0,0,0,.8);
}
.video-frame.show{ opacity:1; transform: scale(1); }
.video-glow{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  background: radial-gradient(circle, rgba(201,161,90,.35), transparent 65%);
  filter: blur(10px);
  animation: pulse-glow 3.2s ease-in-out infinite;
}
@keyframes pulse-glow{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.video-frame video{ position:relative; z-index:1; width:100%; display:block; aspect-ratio: 9/16; background:#000; border-radius:22px; }

/* ============================================================
   GRAND FINALE
   ============================================================ */
#finale{
  background: linear-gradient(180deg, var(--night-2), var(--night) 60%);
  min-height: 130vh;
}
.finale-sky{ position:absolute; inset:0; z-index:0; }

.cake-stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cake-caption{
  margin-top:1.8rem; font-family: var(--font-script); font-size:1.7rem; color: var(--gold-soft);
  opacity:.9;
}
.cake{ position:relative; width:220px; height:180px; }
.candle-row{
  position:absolute; top:-46px; left:50%; transform:translateX(-50%);
  display:flex; gap:26px; z-index:3;
}
.candle{ width:8px; height:34px; background: linear-gradient(180deg, #fff2d9, var(--gold-soft)); border-radius:3px; position:relative; }
.flame{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:10px; height:16px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 70%, #fff6d0, #ffb648 60%, #ff7a3d);
  box-shadow: 0 0 12px 3px rgba(255,170,60,.7);
  transform-origin: bottom center;
  animation: flicker 1.6s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ transform: translateX(-50%) scale(1) rotate(0deg); }
  25%{ transform: translateX(-50%) scale(1.05,.95) rotate(-3deg); }
  50%{ transform: translateX(-50%) scale(.95,1.08) rotate(2deg); }
  75%{ transform: translateX(-50%) scale(1.02,.97) rotate(-1deg); }
}
.candle.out .flame{ animation:none; opacity:0; transition: opacity .4s ease; }
.candle.out::after{
  content:''; position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:3px; height:18px; background: linear-gradient(180deg, rgba(160,160,160,.6), transparent);
  filter: blur(2px); animation: smoke-rise 2s ease-out forwards;
}
@keyframes smoke-rise{ 0%{ opacity:.7; transform:translate(-50%,0) scale(1);} 100%{ opacity:0; transform:translate(-50%,-40px) scale(2.4);} }

.cake-tier{ position:absolute; left:50%; transform:translateX(-50%); border-radius: 14px; box-shadow: inset 0 -6px 10px rgba(0,0,0,.08); }
.tier-top{ top:0; width:130px; height:60px; background: linear-gradient(180deg, #fff2e0, #ffd9d9); z-index:2; }
.tier-bottom{ top:52px; width:210px; height:80px; background: linear-gradient(180deg, #ffe3e9, #f6c8cf); z-index:1; }
.drip{ position:absolute; bottom:-10px; width:16px; height:20px; background:#ffd9d9; border-radius: 0 0 10px 10px; }
.d1{ left:14px; } .d2{ left:56px; height:26px; } .d3{ right:14px; }
.cake-plate{ position:absolute; top:130px; left:50%; transform:translateX(-50%); width:250px; height:14px; border-radius:50%; background: radial-gradient(ellipse at center, rgba(201,161,90,.5), transparent 70%); }

.wish-text{
  position:relative; z-index:2; margin-top: 4rem; text-align:center; max-width:600px;
}
.wish-line{
  font-family: var(--font-display); font-style:italic; font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  color:#F3EDE3; margin-bottom:.9rem; opacity:0; transform: translateY(20px); filter: blur(6px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.wish-line.in{ opacity:1; transform: translateY(0); filter: blur(0); }
.wish-final{ color: var(--gold-soft); text-shadow: 0 0 26px rgba(201,161,90,.5); margin-top:1rem; }

.site-footer{
  background: var(--night); color: rgba(243,237,227,.5); text-align:center;
  padding: 2.2rem 1rem; font-size:.85rem; letter-spacing:.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px){
  .polaroid{ width: 44vw; }
  .polaroid img{ height: 42vw; }
  .paper-note{ padding: 2rem 1.4rem; }
  .cake{ transform: scale(.85); }
}