*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --red:    #c0392b; --gold: #c9963d; --gold2: #e8c97a;
  --dark:   #0d0608; --dark2: #1a0a0e; --cream: #fdf6f0;
  --shadow: 0 8px 40px rgba(192,57,43,0.25);
}
html, body { height:100%; font-family:'Lato',sans-serif; background:var(--dark); color:#fff; overflow:hidden; }

/* Screens */
.screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .6s ease, transform .5s cubic-bezier(.4,0,.2,1); z-index:1; overflow-y:auto; padding:60px 80px; }
.screen.active { opacity:1; pointer-events:all; z-index:10; }
.slide-from-right { transform:translateX(50px); opacity:0; }
.slide-from-left  { transform:translateX(-50px); opacity:0; }
.slide-to-left    { transform:translateX(-50px); opacity:0; }
.slide-to-right   { transform:translateX(50px); opacity:0; }
.fade-in { animation:fadeIn .8s ease both; }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Password */
.password-screen { background:var(--dark); }
.pass-box { background:#1a0a0e; border:1px solid rgba(201,150,61,.3); border-radius:20px; padding:48px 40px; text-align:center; max-width:420px; width:100%; }
.pass-icon { font-size:3rem; margin-bottom:16px; }
.pass-box h2 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; margin-bottom:24px; color:var(--gold); }
.pass-input { width:100%; padding:13px 18px; background:rgba(255,255,255,.07); border:1px solid rgba(201,150,61,.3); border-radius:50px; color:#fff; font-size:1rem; outline:none; margin-bottom:16px; text-align:center; letter-spacing:4px; }
.btn-pass { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#fff; border:none; border-radius:50px; padding:13px 36px; font-size:1rem; cursor:pointer; }
.pass-err { color:var(--red); margin-top:10px; font-size:.9rem; }

/* Start */
.rose-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.start-center { text-align:center; }
.ring-preview { font-size:5rem; margin-bottom:20px; animation:ringFloat 3s ease-in-out infinite; }
@keyframes ringFloat { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-14px) rotate(5deg)} }
.start-name { font-family:'Cormorant Garamond',serif; font-size:3rem; color:var(--gold); margin-bottom:8px; }
.start-sub { font-size:1rem; color:rgba(255,255,255,.5); margin-bottom:36px; letter-spacing:3px; text-transform:uppercase; }
.btn-start { background:linear-gradient(135deg,var(--red),#e74c3c); color:#fff; border:none; border-radius:50px; padding:16px 52px; font-size:1.1rem; cursor:pointer; box-shadow:0 6px 24px rgba(192,57,43,.4); transition:transform .2s; }
.btn-start:hover { transform:translateY(-3px); }

/* Dark boxes */
.dark-screen { background:linear-gradient(160deg,var(--dark),var(--dark2)); }
.content-box { border-radius:20px; padding:48px 40px; max-width:700px; width:100%; text-align:center; max-height:calc(100vh - 80px); overflow-y:auto; }
.dark-box { background:rgba(255,255,255,.04); border:1px solid rgba(201,150,61,.2); backdrop-filter:blur(10px); }

/* Intro */
.quote-marks { font-family:'Cormorant Garamond',serif; font-size:5rem; color:var(--gold); opacity:.4; line-height:.6; }
.quote-marks.right { text-align:right; }
.intro-text { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:#fff; line-height:1.7; padding:12px 0; font-style:italic; }
.section-title-light { font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--gold); margin-bottom:24px; }

/* Capitole */
.chapters-wrap { position:relative; width:100%; max-width:680px; }
.chapter-card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease; transform:translateX(60px); }
.chapter-card.active { opacity:1; pointer-events:all; transform:translateX(0); }
.chapter-card.exit-left { opacity:0; transform:translateX(-60px); }
.chapter-img { width:100%; max-height:260px; object-fit:cover; border-radius:16px; margin-bottom:20px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.chapter-emoji { font-size:2.5rem; margin-bottom:8px; }
.chapter-date { font-size:.8rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.chapter-title { font-family:'Cormorant Garamond',serif; font-size:2rem; color:#fff; margin-bottom:12px; }
.chapter-text { font-size:1rem; color:rgba(255,255,255,.7); line-height:1.8; max-width:480px; }
.chapters-nav { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:20px; z-index:20; }
.btn-chap-prev, .btn-chap-next { background:rgba(201,150,61,.2); border:1px solid rgba(201,150,61,.4); color:var(--gold); font-size:1.8rem; width:48px; height:48px; border-radius:50%; cursor:pointer; transition:background .2s; display:flex; align-items:center; justify-content:center; }
.btn-chap-prev:hover, .btn-chap-next:hover { background:rgba(201,150,61,.4); }
.chap-dots { display:flex; gap:8px; }
.chap-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .3s; cursor:pointer; }
.chap-dot.active { background:var(--gold); }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:24px; }
.gallery-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; cursor:zoom-in; transition:transform .2s; opacity:0; }
.gallery-grid img.photo-in { animation:photoIn .5s ease forwards; }
@keyframes photoIn { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }

/* Video */
.video-wrap { border-radius:18px; overflow:hidden; margin:0 auto 16px; box-shadow:0 8px 32px rgba(0,0,0,.5); aspect-ratio:9/16; width:min(320px,70vw); background:#000; }
video { width:100%; height:100%; display:block; object-fit:cover; }
.caption-light { font-size:.95rem; color:rgba(255,255,255,.5); margin-bottom:24px; font-style:italic; }

/* Proposal */
.proposal-screen { background:radial-gradient(ellipse at center, #1a0510 0%, var(--dark) 70%); flex-direction:column; gap:40px; }
.ring-anim { position:relative; display:flex; align-items:center; justify-content:center; }
.ring-outer { width:160px; height:160px; border-radius:50%; border:3px solid var(--gold); animation:ringPulse 2s ease-in-out infinite; position:absolute; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.15);opacity:1} }
.ring-inner { font-size:5rem; animation:ringFloat 3s ease-in-out infinite; }
.proposal-text { text-align:center; max-width:600px; padding:0 20px; }
.proposal-question { font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:#fff; line-height:1.4; min-height:80px; }
.proposal-buttons { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.btn-da { background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#fff; border:none; border-radius:50px; padding:18px 52px; font-size:1.2rem; cursor:pointer; box-shadow:0 6px 24px rgba(201,150,61,.5); transition:transform .2s; font-family:'Cormorant Garamond',serif; font-size:1.4rem; }
.btn-da:hover { transform:scale(1.05); }
.btn-nu { background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.5); border-radius:50px; padding:18px 40px; font-size:1rem; cursor:pointer; transition:all .2s; position:relative; }

/* Reveal DA */
#confettiCanvas { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hearts-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.heart-particle { position:absolute; bottom:-50px; animation:floatUp linear infinite; opacity:.7; }
@keyframes floatUp { 0%{transform:translateY(0) rotate(0deg);opacity:.7} 100%{transform:translateY(-110vh) rotate(30deg);opacity:0} }
.da-box { background:rgba(255,255,255,.06); border:1px solid rgba(201,150,61,.3); position:relative; z-index:1; }
.da-ring { font-size:5rem; margin-bottom:20px; animation:ringFloat 2s ease-in-out infinite; }
.da-title { font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:var(--gold); margin-bottom:12px; }
.da-sub { font-size:1.1rem; color:rgba(255,255,255,.7); margin-bottom:20px; font-style:italic; }
.da-hearts { font-size:2rem; letter-spacing:12px; }

/* Lightbox */
#lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:999; align-items:center; justify-content:center; cursor:pointer; }
#lightbox.open { display:flex; }
#lightbox img { max-width:88vw; max-height:88vh; border-radius:10px; }
.lb-nav { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff; font-size:3rem; padding:10px 18px; cursor:pointer; border-radius:8px; z-index:1000; }
.lb-prev { left:12px; } .lb-next { right:12px; }
.lb-close { position:fixed; top:16px; right:16px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:1.4rem; width:40px; height:40px; border-radius:50%; cursor:pointer; z-index:1000; }

/* Buttons */
.btn-next { background:linear-gradient(135deg,var(--red),#e74c3c); color:#fff; border:none; border-radius:50px; padding:13px 36px; font-size:1rem; cursor:pointer; box-shadow:0 4px 18px rgba(192,57,43,.4); transition:transform .15s; }
.btn-next:hover { transform:translateY(-2px); }
.btn-light { background:linear-gradient(135deg,var(--gold),var(--gold2)); box-shadow:0 4px 18px rgba(201,150,61,.4); }

/* Music */
.music-player { position:fixed; top:20px; right:20px; z-index:100; }
.music-player.hidden { display:none; }
.music-btn { width:46px; height:46px; border-radius:50%; background:rgba(201,150,61,.8); border:none; color:#fff; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hidden { display:none !important; }

/* WhatsApp */
.btn-whatsapp { margin-top:20px; }

@media(max-width:600px) {
  .screen { padding:50px 12px 80px; }
  .content-box { padding:28px 16px; }
  .start-name { font-size:2.2rem; }
  .proposal-question { font-size:1.7rem; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
}