:root{
  --bg:#0b0806;
  --bg-2:#15100c;
  --brown:#24160f;
  --brown-2:#382218;
  --gold:#c6a27a;
  --gold-light:#e4c9a5;
  --cream:#f1e7da;
  --muted:#b7a99c;
  --line:rgba(228,201,165,.22);
  --black:#080605;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:Inter,sans-serif;font-weight:300}
body.locked{overflow:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}

/* Opening screen */
.intro-screen{
    position:fixed;
    inset:0;
    z-index:50;
    display:grid;
    place-items:center;
    background:
        linear-gradient(
            rgba(8,5,3,.48),
            rgba(8,5,3,.72)
        ),
        url('../assets/images/intro-bg.jpg') center center / cover no-repeat;
    transition:opacity 1s,visibility 1s;
}
.intro-screen.hide{opacity:0;visibility:hidden}
.intro-inner{text-align:center;padding:24px;max-width:720px}
.eyebrow{letter-spacing:.38em;text-transform:uppercase;font-size:10px;color:var(--gold-light)}
.script{font-family:Parisienne,cursive}
.intro-name{font-size:clamp(72px,13vw,150px);line-height:.95;color:var(--cream);margin:22px 0 18px;text-shadow:0 0 28px rgba(228,201,165,.15)}
.heart{color:var(--gold-light);font-size:24px}
.intro-copy{color:var(--muted);line-height:1.9;max-width:520px;margin:0 auto 36px}
.btn{border:1px solid var(--gold);background:rgba(12,8,5,.35);color:var(--cream);padding:15px 28px;border-radius:100px;letter-spacing:.25em;text-transform:uppercase;font-size:10px;cursor:pointer;transition:.35s}
.btn:hover{background:var(--gold);color:#140c08;transform:translateY(-2px)}
.btn span{margin-left:8px}

/* Navigation */
.top-nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:26px 5vw;background:linear-gradient(rgba(8,5,3,.72),transparent);backdrop-filter:blur(3px)}
.nav-right{display:flex;gap:26px;align-items:center;font-size:11px;color:var(--gold-light)}
.nav-right button{background:none;border:0;color:inherit;cursor:pointer;font-size:17px}

.music-status{position:fixed;right:22px;bottom:22px;z-index:15;border:1px solid var(--line);background:rgba(8,5,3,.78);backdrop-filter:blur(10px);padding:10px 13px;border-radius:30px;color:var(--gold-light);font-size:10px;letter-spacing:.12em;opacity:.8}
.music-status.playing{border-color:rgba(228,201,165,.55);opacity:1}

/* Hero */
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:#080604}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.72) contrast(1.05)}
.hero-photo-left{right:48%;background-image:url('../assets/images/hero-left.jpg');background-position:center}
.hero-photo-right{left:48%;background-image:url('../assets/images/hero-right.jpg');background-position:center}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,4,3,.55) 0%,rgba(6,4,3,.84) 34%,rgba(6,4,3,.84) 66%,rgba(6,4,3,.42) 100%),linear-gradient(180deg,rgba(4,2,1,.28),rgba(4,2,1,.7))}
.hero-content{position:relative;z-index:2;padding:100px 24px 80px;max-width:850px}
.hero h1{font-family:Cormorant Garamond,serif;font-weight:500;font-size:clamp(64px,11vw,132px);line-height:.82;margin:20px 0;color:var(--cream);text-shadow:0 12px 40px rgba(0,0,0,.55)}
.hero h1 .script{color:var(--gold-light);font-size:1.08em}
.hero p{color:#d4c7bb;line-height:1.8}
.scroll{margin-top:70px;color:#b7a99c;font-size:9px;letter-spacing:.3em;text-transform:uppercase}

/* General sections */
.section{position:relative;padding:120px 7vw;border-top:1px solid var(--line);overflow:hidden}
.container{max-width:1200px;margin:auto;position:relative;z-index:2}
.section-label{font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-light);margin-bottom:18px}
h2{font-family:Cormorant Garamond,serif;font-size:clamp(46px,6vw,78px);font-weight:500;line-height:.95;margin:0 0 28px;color:var(--cream)}
p{line-height:1.9;color:var(--muted)}
.dark-section{background:radial-gradient(circle at 75% 50%,rgba(122,76,42,.18),transparent 32%),linear-gradient(135deg,#0c0806,#1a100b 55%,#090605)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.date-card{border-left:1px solid var(--line);padding-left:50px}
.date-big{font-family:Cormorant Garamond,serif;font-size:76px;line-height:.88;color:var(--gold-light)}
.date-small{letter-spacing:.3em;text-transform:uppercase;font-size:10px;color:#b8a99b;margin-top:18px}
.handwritten{font-family:Parisienne,cursive;font-size:30px!important;color:var(--gold-light)!important}

/* Countdown */
.countdown{position:relative;min-height:370px;display:grid;place-items:center;text-align:center;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#090705}
.countdown-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(5,3,2,.54),rgba(5,3,2,.76)),url('../assets/images/city-night.jpg');background-size:cover;background-position:center 48%;filter:saturate(.68)}
.countdown-content{padding:100px 7vw;width:100%}
.timer{display:flex;justify-content:center;gap:clamp(18px,5vw,70px);margin:50px 0 15px}
.unit{min-width:75px}
.num{font-family:Cormorant Garamond,serif;font-size:clamp(45px,7vw,75px);color:var(--gold-light)}
.unit span{display:block;color:#b0a195;font-size:9px;letter-spacing:.25em;text-transform:uppercase}

/* Story */
.story{position:relative;padding:120px 7vw;border-top:1px solid var(--line);overflow:hidden;background:#17100c}
.story-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(14,9,6,.93),rgba(14,9,6,.78),rgba(14,9,6,.92)),url('../assets/images/story-texture.jpg');background-size:cover;background-position:center;opacity:.85}
.story-content{position:relative}
.story-content>p{max-width:620px}
.polaroids{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:50px;align-items:start}
.photo-frame{aspect-ratio:4/5;background:#eee9e1;border:10px solid #eee9e1;box-shadow:0 18px 45px rgba(0,0,0,.5);transform:rotate(var(--r));overflow:hidden;position:relative}
.photo-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 38%);pointer-events:none}
.photo-frame:nth-child(1){--r:-4deg}.photo-frame:nth-child(2){--r:2deg}.photo-frame:nth-child(3){--r:-2deg}.photo-frame:nth-child(4){--r:4deg}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.photo-frame img[src]{opacity:1}

/* Plan */
.plan{position:relative;padding:120px 7vw;background:#070504;overflow:hidden;border-top:1px solid var(--line)}
.plan-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(5,3,2,.8),rgba(5,3,2,.88)),url('../assets/images/dinner-candles.jpg');background-size:cover;background-position:center;opacity:.85}
.plan-content{position:relative}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(5,3,2,.3)}
.plan-item{padding:38px 22px;border-right:1px solid var(--line);text-align:center}
.plan-item:last-child{border-right:0}
.plan-icon{font-size:21px;color:var(--gold-light);margin-bottom:14px}
.time{color:var(--gold-light);font-family:Cormorant Garamond,serif;font-size:28px}
.plan-item h3{font-family:Cormorant Garamond,serif;font-size:24px;font-weight:500;color:var(--cream)}
.plan-item p{font-size:12px}
.alt-note{margin:55px auto 0;max-width:800px;padding:26px 30px;border:1px solid var(--line);background:rgba(55,31,18,.32);text-align:center;color:var(--muted)}
.alt-note strong{color:var(--cream)}
.closing-line{text-align:center;margin-top:55px}

/* Reveal */
.reveal-section{position:relative;min-height:470px;display:grid;place-items:center;text-align:center;padding:110px 7vw;overflow:hidden;border-top:1px solid var(--line)}
.reveal-bg{position:absolute;inset:0;background-image:url('../assets/images/reveal-soft.jpg');background-size:cover;background-position:center;filter:saturate(.65)}
.reveal-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,226,210,.93),rgba(220,201,181,.78),rgba(240,226,210,.93))}
.reveal-content{position:relative;color:#1a100a}
.reveal-content h2{color:#1a100a}
.reveal-content p{color:#4d4037}
.dark-btn{border-color:#1a100a;color:#1a100a;background:rgba(255,255,255,.12)}
.dark-btn:hover{background:#1a100a;color:#f1e7da}
.secret{display:none;margin-top:40px}.secret.show{display:block;animation:fade .9s both}
.secret-box{max-width:720px;margin:auto;border:1px solid rgba(26,16,10,.28);padding:45px;background:rgba(250,242,232,.28)}
.secret-box h3{font-family:Cormorant Garamond,serif;font-size:44px;font-weight:500;margin:10px;color:#1a100a}
.secret-list{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:30px}
.secret-list div{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#4d4037}

/* Footer */
.footer{position:relative;min-height:310px;display:grid;place-items:center;text-align:center;padding:75px 20px;overflow:hidden;border-top:1px solid var(--line);background:#070504}
.footer-bg{position:absolute;inset:0;background-image:url('../assets/images/gift-footer.jpg');background-size:cover;background-position:center 62%;filter:saturate(.6)}
.footer-overlay{position:absolute;inset:0;background:linear-gradient(rgba(7,5,4,.72),rgba(7,5,4,.91))}
.footer-content{position:relative;z-index:2}
.footer-script{font-size:58px;color:var(--gold-light);margin:14px 0}
.links{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;margin-top:30px}
.links a{color:#c9b9a9;text-decoration:none;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.links a:hover{color:var(--cream)}

/* Motion */
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.reveal-on-scroll{opacity:0;transform:translateY(35px);transition:1s}.visible{opacity:1;transform:none}

/* Responsive */
@media(max-width:800px){
  .intro-grid{grid-template-columns:1fr;gap:40px}
  .date-card{border-left:0;border-top:1px solid var(--line);padding:35px 0 0}
  .polaroids{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
  .plan-item:nth-child(2){border-right:0}.plan-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .top-nav{padding:20px 5vw}
  .nav-right span{display:none}
  .section,.story,.plan,.reveal-section{padding:85px 6vw}
  .countdown-content{padding:85px 6vw}
  .timer{gap:12px}.unit{min-width:60px}
  .hero h1{font-size:72px}
  .hero-photo-left{right:40%}.hero-photo-right{left:40%}
}
@media(max-width:480px){
  .polaroids{gap:8px}.photo-frame{border-width:6px}
  .plan-grid{grid-template-columns:1fr}
  .plan-item{border-right:0!important;border-bottom:1px solid var(--line)}
  .plan-item:last-child{border-bottom:0}
  .footer-script{font-size:46px}
}
/* Abeer name animation */
.intro-screen .intro-name {
    animation: abeerReveal 1.8s ease-out 0.6s both;
}

@keyframes abeerReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
        letter-spacing: 12px;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        letter-spacing: normal;
    }
}




/* =========================================
   HERO ANIMATION — STARTS AFTER OPEN BUTTON
   ========================================= */

.hero h1 .script {
    display: inline-block;
}

/* Initial state before opening */
.hero h1 .script.animated {
    animation: abeerHeroReveal 2s cubic-bezier(.16,1,.3,1) both;
}

@keyframes abeerHeroReveal {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(.96);
        filter: blur(10px);
        letter-spacing: 12px;
        text-shadow: 0 0 0 rgba(228,201,165,0);
    }

    55% {
        opacity: 1;
        filter: blur(2px);
        text-shadow: 0 0 35px rgba(228,201,165,.35);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        letter-spacing: normal;
        text-shadow: 0 0 28px rgba(228,201,165,.15);
    }
}