:root {
  --rose: #f4a7b9;
  --rose-deep: #e8849c;
  --rose-pale: #fce4ec;
  --rose-blush: #fdf0f4;
  --rose-dust: #f8d7e3;
  --cream: #fff8f5;
  --text-dark: #3a1a24;
  --text-mid: #7a4055;
  --text-soft: #b07a8a;
  --white: #ffffff;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Jost',sans-serif;
  background:var(--cream); color:var(--text-dark);
  cursor:none; overflow-x:hidden;
}

/* Cursor */
.cursor { width:12px; height:12px; background:var(--rose-deep); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:multiply; }
.cursor-ring { width:36px; height:36px; border:1px solid var(--rose); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform .18s ease; }

/* Petals */
.petal { position:fixed; pointer-events:none; z-index:1; animation:petalFall linear infinite; opacity:0; }
@keyframes petalFall { 0%{transform:translateY(-20px) rotate(0deg);opacity:0} 5%{opacity:.6} 90%{opacity:.4} 100%{transform:translateY(110vh) rotate(360deg);opacity:0} }

/* Nav dots */
.nav-dots { position:fixed; right:1.5rem; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:100; }
.nav-dot { width:8px; height:8px; border-radius:50%; background:var(--rose-dust); cursor:pointer; border:1px solid var(--rose); transition:background .3s,transform .3s; }
.nav-dot.active { background:var(--rose-deep); transform:scale(1.4); }

/* Reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

/* Divider */
.divider { text-align:center; padding:1.5rem; letter-spacing:1rem; font-size:.85rem; color:var(--rose); }

/* Section labels */
.section-label { font-weight:200; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.8rem; display:block; }
.section-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(1.8rem,4vw,2.8rem); color:var(--text-dark); margin-bottom:2.5rem; }
.section-title em { font-style:italic; color:var(--rose-deep); }

/* Hero */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3rem 2rem; position:relative; overflow:hidden; background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(244,167,185,.18) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 80%,rgba(248,215,227,.25) 0%,transparent 60%),var(--cream); }
.hero-deco { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.deco-circle { position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(244,167,185,.12) 0%,transparent 70%); }
.deco-circle.c1 { width:600px; height:600px; top:-200px; left:-150px; }
.deco-circle.c2 { width:400px; height:400px; bottom:-100px; right:-100px; }
.for-label { font-weight:200; font-size:.8rem; letter-spacing:.25em; text-transform:uppercase; color:var(--text-soft); margin-bottom:1.2rem; opacity:0; animation:fadeUp .8s ease .3s forwards; }
.hero-name { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(4rem,12vw,8rem); line-height:1; letter-spacing:-.02em; color:var(--text-dark); opacity:0; animation:fadeUp 1s ease .5s forwards; }
.hero-name span { color:var(--rose-deep); font-style:italic; }
.hero-heart { font-size:1.8rem; margin:1.5rem 0; opacity:0; animation:heartBeat .8s ease 1.2s forwards; display:inline-block; }
@keyframes heartBeat { 0%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.2)} 100%{opacity:1;transform:scale(1)} }
.hero-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:clamp(1rem,2.5vw,1.3rem); color:var(--text-soft); opacity:0; animation:fadeUp .8s ease 1.5s forwards; margin-bottom:3rem; }
.scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:0; animation:fadeUp .8s ease 2.2s forwards; }
.scroll-hint span { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-soft); font-weight:200; }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--rose),transparent); animation:scrollAnim 2s ease-in-out infinite; }
@keyframes scrollAnim { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Counter */
.counter-section { padding:6rem 2rem; text-align:center; background:linear-gradient(180deg,var(--cream) 0%,var(--rose-blush) 50%,var(--cream) 100%); }
.counter-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:1.5rem; max-width:560px; margin:0 auto; }
.counter-card { background:var(--white); border:.5px solid rgba(244,167,185,.4); border-radius:16px; padding:2rem 1.5rem; min-width:140px; flex:1; box-shadow:0 4px 30px rgba(232,132,156,.08); position:relative; overflow:hidden; }
.counter-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--rose),var(--rose-deep)); border-radius:16px 16px 0 0; }
.counter-num { font-family:'Cormorant Garamond',serif; font-size:3.5rem; font-weight:600; color:var(--text-dark); line-height:1; display:block; margin-bottom:.4rem; }
.counter-num.animate { animation:slotIn .7s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes slotIn { 0%{transform:translateY(-80px);opacity:0} 60%{transform:translateY(6px)} 100%{transform:translateY(0);opacity:1} }
.counter-unit { font-size:.72rem; font-weight:300; letter-spacing:.15em; text-transform:uppercase; color:var(--text-soft); }

/* Gallery */
.gallery-section { padding:5rem 2rem 6rem; max-width:1100px; margin:0 auto; }
.gallery-section .section-title, .gallery-section .section-label { text-align:center; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-top:1.5rem; min-height:80px; }
.gallery-empty { grid-column:1/-1; text-align:center; padding:3rem; color:var(--text-soft); font-size:.9rem; font-weight:300; }
.gallery-item { position:relative; overflow:hidden; border-radius:12px; aspect-ratio:1; cursor:pointer; background:var(--rose-dust); transition:transform .3s,box-shadow .3s; opacity:0; animation:photoAppear .5s ease forwards; }
@keyframes photoAppear { to{opacity:1;transform:scale(1) translateY(0)} from{opacity:0;transform:scale(.9) translateY(20px)} }
.gallery-item:hover { transform:scale(1.03); box-shadow:0 12px 40px rgba(232,132,156,.2); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .heart-overlay { position:absolute; inset:0; background:rgba(244,167,185,0); display:flex; align-items:center; justify-content:center; font-size:2rem; opacity:0; transition:all .3s; }
.gallery-item:hover .heart-overlay { opacity:1; background:rgba(244,167,185,.15); }

/* Letters */
.letters-section { padding:5rem 2rem; }
.letters-section .section-label, .letters-section .section-title { text-align:center; }
.letters-wrapper { max-width:700px; margin:0 auto; }
.letters-nav { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:2rem; }
.letter-arrow { width:42px; height:42px; border-radius:50%; border:.5px solid rgba(244,167,185,.6); background:var(--white); color:var(--rose-deep); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.letter-arrow:hover { background:var(--rose-pale); border-color:var(--rose-deep); }
.letter-arrow:disabled { opacity:.3; cursor:default; }
.letters-counter-display { font-size:.82rem; font-weight:300; letter-spacing:.1em; color:var(--text-soft); }
.letters-track-outer { overflow:hidden; }
.letters-track { display:flex; transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
.letter-slide { min-width:100%; padding:0 .5rem; }
.letter-card { background:var(--white); border:.5px solid rgba(244,167,185,.35); border-radius:20px; padding:3rem 3.5rem; box-shadow:0 8px 50px rgba(232,132,156,.1); position:relative; }
.letter-meta { font-size:.72rem; font-weight:300; letter-spacing:.12em; text-transform:uppercase; color:var(--rose-deep); margin-bottom:1.2rem; }
.letter-title-display { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.4rem; color:var(--text-dark); margin-bottom:1.2rem; font-style:italic; }
.letter-body { font-family:'Cormorant Garamond',serif; font-size:1.1rem; line-height:1.9; color:var(--text-mid); font-weight:300; white-space:pre-wrap; }
.view-all-btn { display:block; margin:1.8rem auto 0; background:none; border:.5px solid rgba(244,167,185,.6); border-radius:50px; padding:.7rem 1.8rem; font-family:'Jost',sans-serif; font-size:.82rem; font-weight:300; letter-spacing:.1em; color:var(--text-soft); cursor:pointer; transition:all .2s; }
.view-all-btn:hover { border-color:var(--rose-deep); color:var(--rose-deep); background:var(--rose-blush); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(58,26,36,.7); z-index:500; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); padding:2rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--cream); border-radius:20px; padding:2.5rem; max-width:680px; width:100%; max-height:85vh; overflow-y:auto; position:relative; animation:modalIn .3s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.modal-close { position:absolute; top:1.2rem; right:1.5rem; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text-soft); }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:300; margin-bottom:1.5rem; }
.modal-title em { font-style:italic; color:var(--rose-deep); }
.modal-letters-list { display:flex; flex-direction:column; gap:1.2rem; }
.modal-letter-item { border:.5px solid rgba(244,167,185,.35); border-radius:14px; padding:1.4rem 1.6rem; cursor:pointer; background:var(--white); transition:box-shadow .2s; }
.modal-letter-item:hover { box-shadow:0 4px 20px rgba(232,132,156,.12); }
.modal-letter-date { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-deep); margin-bottom:.4rem; }
.modal-letter-title { font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--text-dark); }

/* Memories */
.memories-section { padding:5rem 2rem; max-width:960px; margin:0 auto; }
.memories-section .section-label, .memories-section .section-title { text-align:center; }
.memories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.2rem; margin-top:2.5rem; }
.memory-card { background:var(--white); border:.5px solid rgba(244,167,185,.3); border-radius:14px; padding:1.6rem; position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.memory-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(232,132,156,.12); }
.memory-card::after { content:'♡'; position:absolute; bottom:.8rem; right:1rem; font-size:1.2rem; color:var(--rose-dust); }
.memory-date { font-size:.7rem; font-weight:300; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-deep); margin-bottom:.6rem; }
.memory-title { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:400; color:var(--text-dark); margin-bottom:.5rem; }
.memory-desc { font-size:.88rem; font-weight:300; line-height:1.7; color:var(--text-soft); }

/* Reasons */
.reasons-section { padding:5rem 2rem 6rem; text-align:center; background:linear-gradient(180deg,var(--cream) 0%,var(--rose-blush) 100%); }
.reasons-sub { font-size:.82rem; font-weight:300; color:var(--text-soft); margin-bottom:2.5rem; margin-top:-.8rem; }
.reasons-list { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.reason-item { background:var(--white); border:.5px solid rgba(244,167,185,.3); border-radius:50px; padding:1rem 2rem; display:flex; align-items:center; gap:1rem; text-align:left; transition:transform .2s,box-shadow .2s; animation:reasonIn .4s ease both; }
@keyframes reasonIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
.reason-item:hover { transform:translateX(6px); box-shadow:-4px 0 0 var(--rose),0 8px 30px rgba(232,132,156,.1); }
.reason-num { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:300; color:var(--rose); min-width:2rem; }
.reason-text { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-style:italic; color:var(--text-mid); font-weight:300; }
.dice-btn { margin-top:2.5rem; background:var(--white); border:.5px solid rgba(244,167,185,.5); border-radius:50px; padding:.85rem 2rem; font-family:'Jost',sans-serif; font-size:.88rem; font-weight:300; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem; color:var(--text-mid); transition:all .2s; }
.dice-btn:hover { background:var(--rose-pale); border-color:var(--rose-deep); color:var(--rose-deep); transform:scale(1.04); }
.dice-btn:active { transform:scale(.97) rotate(-10deg); }

/* Footer */
.site-footer { padding:3rem 2rem; text-align:center; border-top:.5px solid rgba(244,167,185,.2); }
.footer-hearts { font-size:1.4rem; margin-bottom:.8rem; letter-spacing:.5rem; }
.footer-text { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:var(--text-soft); }

/* Lightbox */
.lightbox { position:fixed; inset:0; background:rgba(58,26,36,.92); z-index:1000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox.open { display:flex; }
.lightbox img { max-width:80vw; max-height:85vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.4); animation:lightboxIn .3s ease; }
@keyframes lightboxIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.lightbox-close { position:fixed; top:1.5rem; right:2rem; font-size:2rem; color:white; cursor:pointer; opacity:.7; background:none; border:none; }
.lightbox-close:hover { opacity:1; }
.lightbox-arrow { position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:white; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lightbox-arrow:hover { background:rgba(255,255,255,.25); }
.lightbox-arrow.left { left:1.5rem; }
.lightbox-arrow.right { right:1.5rem; }