:root{
    --deep-emerald:#12352F;
    --muted-emerald:#2C5148;
    --dusty-sage:#718077;
    --olive-greige:#929488;
    --warm-stone:#B8B3A8;
    --soft-ivory:#E7E1D7;
    --muted-gold:#B59A62;
    /* Compatibility aliases keep existing components on the final palette. */
    --w-emerald:var(--deep-emerald);
    --w-emerald-deep:var(--deep-emerald);
    --w-emerald-muted:var(--muted-emerald);
    --w-sage:var(--dusty-sage);
    --w-stone:var(--warm-stone);
    --w-greige:var(--olive-greige);
    --w-ivory:var(--soft-ivory);
    --w-cream:var(--olive-greige);
    --w-gold:var(--muted-gold);
    --w-gold-ink:var(--deep-emerald);
    --w-body:var(--deep-emerald);
    --w-dark-body:var(--soft-ivory);
    --w-border:rgba(181,154,98,.55);
}
body{
    margin:0;
    padding:0;
    background:var(--w-greige);
    font-family:'Poppins', sans-serif;
}

body.invitation-locked{
    overflow:hidden;
}

body.invitation-locked #invitationContent{
    display:none;
}

#invitationContent{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;
}

h1{
    font-family:'Bodoni Moda', serif;
    font-size:48px;
    font-weight:600;
    line-height:1.05;
    letter-spacing:0.5px;
    color:#8b6d4a;
    text-align:center;
    margin: 0;
}

h2{
    font-size:36px;
    margin:10px 0;
}

p{
    margin:0;
}

button{

    margin-top:40px;

    padding:16px 45px;

    background:#1F6B52;

    color:white;

    border:none;

    border-radius:50px;

    font-size:16px;

    font-family:'Poppins',sans-serif;

    font-weight:500;

    cursor:pointer;

    transition:.3s;
}
.cover{
    position:fixed;
    inset:0;
    z-index:10000;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    box-sizing:border-box;
    overflow:hidden;
    isolation:isolate;
    color:#f8f2e7;
    background:
        linear-gradient(90deg, rgba(2,31,26,.34) 0%, rgba(5,61,50,.08) 30%, rgba(5,61,50,.08) 70%, rgba(2,31,26,.34) 100%),
        url("images/cover/cover-01.jpg.jfif") center/cover no-repeat,
        #073c32;
    opacity:1;
    visibility:visible;
    transition:opacity .75s ease, visibility 0s linear .75s;
}

.cover::before,
.cover::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
}

.cover::before{
    z-index:-2;
    background:url("images/cover/cover-01.jpg.jfif") center/cover no-repeat;
    opacity:.92;
}

.cover::after{
    z-index:-1;
    background:
        radial-gradient(circle at 50% 38%, rgba(10,78,64,.05) 0%, rgba(3,37,31,.2) 62%, rgba(2,28,24,.5) 100%),
        linear-gradient(180deg, rgba(2,31,26,.22) 0%, rgba(3,42,34,.06) 42%, rgba(2,28,24,.56) 100%);
}

.cover.is-open{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.cover-frame{
    position:absolute;
    inset:13px;
    border:1px solid rgba(214,183,119,.62);
    pointer-events:none;
    opacity:.8;
}

.cover-frame::before,
.cover-frame::after{
    content:"";
    position:absolute;
    width:34px;
    height:34px;
    border-color:#d4b26b;
    opacity:.9;
}

.cover-frame::before{
    top:7px;
    left:7px;
    border-top:2px solid #d4b26b;
    border-left:2px solid #d4b26b;
}

.cover-frame::after{
    right:7px;
    bottom:7px;
    border-right:2px solid #d4b26b;
    border-bottom:2px solid #d4b26b;
}

.overlay{
    position:relative;
    z-index:1;
    width:min(100%, 430px);
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:clamp(64px, 13dvh, 110px);
    padding:46px 12px 32px;
    box-sizing:border-box;
    text-align:center;
}

.cover-heading{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.cover-eyebrow{
    color:rgba(248,242,231,.82);
    font-size:10px;
    font-weight:400;
    line-height:1.4;
    letter-spacing:.42em;
    text-transform:uppercase;
    text-shadow:0 2px 14px rgba(0,0,0,.25);
}

.cover-names{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:clamp(7px, 2.5vw, 14px);
    margin-top:14px;
    color:#fffaf0;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(39px, 12.2vw, 64px);
    font-weight:500;
    line-height:.95;
    letter-spacing:-.035em;
    white-space:nowrap;
    text-shadow:0 4px 22px rgba(0,0,0,.35);
}

.cover-ampersand{
    color:#d8ba78;
    font-family:'Great Vibes',cursive;
    font-size:.86em;
    font-weight:400;
    letter-spacing:0;
}

.cover-date{
    margin-top:20px;
    color:#d8ba78;
    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.24em;
    text-transform:uppercase;
    text-shadow:0 2px 12px rgba(0,0,0,.3);
}

.cover-invitation{
    width:100%;
    max-width:350px;
    padding:15px 17px 16px;
    box-sizing:border-box;
    border:1px solid rgba(218,190,131,.34);
    border-radius:17px;
    background:linear-gradient(135deg, rgba(5,57,47,.46), rgba(2,36,30,.3));
    box-shadow:0 14px 36px rgba(0,0,0,.14);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.cover-recipient-label{
    color:rgba(248,242,231,.72);
    font-size:10px;
    line-height:1.6;
    letter-spacing:.08em;
}

.guest-name{
    margin-top:5px;
    color:#fffaf0;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(22px, 7vw, 27px);
    font-weight:600;
    line-height:1.2;
    overflow-wrap:anywhere;
    text-shadow:0 2px 12px rgba(0,0,0,.28);
}

.open-button{
    min-height:41px;
    margin-top:16px;
    padding:10px 23px;
    border:1px solid rgba(255,247,224,.42);
    border-radius:999px;
    background:linear-gradient(135deg, #e2c98f, #caa65c);
    box-shadow:0 9px 24px rgba(0,0,0,.2);
    color:#123d33;
    font-size:10px;
    font-weight:600;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.open-button:hover{
    background:linear-gradient(135deg, #ecd9ad, #d5b66f);
    transform:translateY(-2px);
}

.open-button:focus-visible{
    outline:2px solid #fff6df;
    outline-offset:4px;
}

.cover.is-ready .cover-frame{
    animation:coverFrameReveal 1s ease both;
}

.cover.is-ready .cover-heading{
    animation:coverContentReveal .85s cubic-bezier(.22,.61,.36,1) .08s both;
}

.cover.is-ready .cover-invitation{
    animation:coverContentReveal .85s cubic-bezier(.22,.61,.36,1) .24s both;
}

@keyframes coverContentReveal{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes coverFrameReveal{
    from{
        opacity:0;
        transform:scale(.985);
    }

    to{
        opacity:.8;
        transform:scale(1);
    }
}

@media (max-width:340px){
    .cover-frame{
        inset:9px;
    }

    .overlay{
        gap:52px;
        padding:38px 8px 26px;
    }

    .cover-invitation{
        padding-inline:13px;
    }
}

@media (max-height:620px){
    .overlay{
        gap:42px;
        padding-top:32px;
        padding-bottom:24px;
    }

    .cover-names{
        margin-top:10px;
    }

    .cover-date{
        margin-top:14px;
    }
}

@media (min-width:768px){
    .cover-frame{
        inset:24px 0;
        width:min(calc(100% - 48px), 720px);
        margin-inline:auto;
    }

    .overlay{
        width:min(100%, 520px);
        gap:clamp(78px, 12dvh, 118px);
    }

    .cover-invitation{
        max-width:370px;
        padding:18px 22px 19px;
    }

    .cover-recipient-label{
        font-size:11px;
    }
}

@media (min-width:1024px){
    .cover::before{
        inset:0 auto;
        left:50%;
        width:min(100%, calc(100vh * .667));
        width:min(100%, calc(100dvh * .667));
        transform:translateX(-50%);
        background-size:cover;
        -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
        mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    }
}

@media (prefers-reduced-motion:reduce){
    .cover,
    .cover.is-ready .cover-frame,
    .cover.is-ready .cover-heading,
    .cover.is-ready .cover-invitation{
        animation:none;
        transition-duration:.01ms;
    }
}
button:hover{

    background:#8b6d4a;

    transform:translateY(-2px);

}
.leaves{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;

}

@keyframes fall{
    0%{
        transform:translate(0,-100px) rotate(0deg);
    }

    25%{
        transform:translate(-20px,25vh) rotate(45deg);
    }

    50%{
        transform:translate(20px,50vh) rotate(90deg);
    }

    75%{
        transform:translate(-15px,75vh) rotate(180deg);
    }

    100%{
        transform:translate(15px,110vh) rotate(360deg);
    }
}
.fall-item{
    position:absolute;
    top:-100px;
    display:flex;
    align-items:center;
    gap:5px;
    animation:fall linear infinite;
}

.love{
    position:absolute;
    top:-100px;
    opacity:0.8;
    width:40px;
    animation:fall linear infinite;
}
/* ===========================
   OPENING SECTION
=========================== */

.opening{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:grid;
    place-items:center;
    overflow:hidden;
    box-sizing:border-box;
    padding:clamp(68px, 11vh, 108px) clamp(20px, 6vw, 56px);
    color:#f8f2e7;
    background:
        radial-gradient(circle at 50% 34%, rgba(15,92,75,.5) 0%, rgba(5,57,47,.2) 44%, rgba(2,35,29,.82) 100%),
        linear-gradient(180deg, rgba(3,48,39,.18), rgba(2,35,29,.72)),
        url("images/bg/bg-01.jpg.jfif") center/cover no-repeat,
        #063d32;
    border-top:1px solid rgba(216,186,120,.26);
}

.opening::after{
    content:"";
    position:absolute;
    right:50%;
    bottom:0;
    width:1px;
    height:clamp(28px, 6vh, 54px);
    background:linear-gradient(180deg, transparent, rgba(216,186,120,.72));
}

.opening-content{
    position:relative;
    z-index:1;
    width:min(100%, 680px);
    text-align:center;
    opacity:0;
    transform:translateY(18px);
}

body:not(.invitation-locked) .opening-content{
    animation:openingReveal .95s cubic-bezier(.22,.61,.36,1) .2s both;
}

.bismillah{
    margin-bottom:22px;
    color:#d8ba78;
    font-size:clamp(42px, 11vw, 60px);
    line-height:1;
    text-shadow:0 5px 24px rgba(0,0,0,.24);
}

.opening-kicker{
    color:rgba(248,242,231,.72);
    font-size:10px;
    font-weight:400;
    line-height:1.5;
    letter-spacing:.4em;
    text-transform:uppercase;
}

.opening-names{
    margin:11px 0 0;
    color:#fffaf0;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(44px, 13vw, 68px);
    font-weight:500;
    line-height:1;
    letter-spacing:-.035em;
    text-shadow:0 5px 24px rgba(0,0,0,.28);
}

.opening-names span{
    display:inline-block;
    margin-inline:clamp(3px, 1.4vw, 10px);
    color:#d8ba78;
    font-family:'Great Vibes',cursive;
    font-size:.88em;
    font-weight:400;
}

.opening-title{
    margin:0;
    color:#f5ecdc;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(21px, 5.7vw, 30px);
    font-weight:500;
    line-height:1.45;
    letter-spacing:.01em;
}

.divider{
    width:68px;
    height:1px;
    margin:24px auto;
    background:linear-gradient(90deg, transparent, #d8ba78, transparent);
}

.opening-text{
    max-width:560px;
    margin:0 auto;
    color:rgba(248,242,231,.76);
    font-family:'Poppins',sans-serif;
    font-size:clamp(13px, 3.7vw, 15px);
    font-weight:300;
    line-height:1.9;
    text-align:center;
}

.scroll-indicator{
    margin-top:clamp(38px, 7vh, 60px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.mouse{
    position:relative;
    width:22px;
    height:36px;
    border:1px solid rgba(216,186,120,.72);
    border-radius:20px;
}

.mouse span{
    position:absolute;
    left:50%;
    top:7px;
    width:3px;
    height:6px;
    background:#d8ba78;
    border-radius:50%;
    transform:translateX(-50%);
    animation:scrollMouse 2s infinite;
}

.scroll-indicator p{
    color:rgba(248,242,231,.58);
    font-size:9px;
    letter-spacing:.28em;
    text-transform:uppercase;
}

@keyframes scrollMouse{
    0%{
        opacity:1;
        top:7px;
    }

    100%{
        opacity:0;
        top:21px;
    }
}

@keyframes openingReveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===========================
   COUNTDOWN
=========================== */

.countdown{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    box-sizing:border-box;
    padding:clamp(82px, 12vh, 118px) clamp(20px, 6vw, 56px);
    text-align:center;
    background:
        radial-gradient(circle at 8% 12%, rgba(202,166,92,.11), transparent 25%),
        radial-gradient(circle at 92% 88%, rgba(7,61,50,.09), transparent 28%),
        #fffaf2;
}

.countdown::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:1px;
    height:clamp(28px, 6vh, 54px);
    background:linear-gradient(180deg, rgba(7,61,50,.55), transparent);
}

.countdown-subtitle{
    margin-bottom:14px;
    color:#a47d35;
    font-family:'Poppins',sans-serif;
    font-size:clamp(10px, 2.9vw, 12px);
    font-weight:500;
    line-height:1.5;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.countdown-title{
    margin:0;
    color:#164f41;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(38px, 10.5vw, 54px);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.025em;
}

.countdown-text{
    max-width:560px;
    margin:24px auto clamp(34px, 6vh, 48px);
    color:#6f685e;
    font-family:'Poppins',sans-serif;
    font-size:clamp(13px, 3.5vw, 15px);
    font-weight:300;
    line-height:1.9;
    text-align:center;
}

.countdown-box{
    width:min(100%, 620px);
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    overflow:hidden;
    border:1px solid rgba(180,145,77,.34);
    border-radius:20px;
    background:rgba(255,253,248,.72);
    box-shadow:0 18px 50px rgba(36,65,55,.09);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.time-box{
    min-width:0;
    min-height:96px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:14px 3px;
    box-sizing:border-box;
}

.time-box + .time-box{
    border-left:1px solid rgba(180,145,77,.22);
}

.time-box span{
    color:#164f41;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(30px, 9vw, 43px);
    font-weight:600;
    font-variant-numeric:tabular-nums;
    line-height:1;
}

.time-box small{
    margin-top:9px;
    color:#91713b;
    font-family:'Poppins',sans-serif;
    font-size:clamp(8px, 2.3vw, 10px);
    font-weight:500;
    line-height:1.4;
    letter-spacing:.13em;
    text-transform:uppercase;
}

/* ===========================
   COUPLE
=========================== */

.couple{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    box-sizing:border-box;
    padding:clamp(84px, 11vh, 120px) clamp(20px, 6vw, 64px) clamp(100px, 13vh, 138px);
    text-align:center;
    background:
        radial-gradient(circle at 10% 16%, rgba(216,186,120,.14), transparent 24%),
        radial-gradient(circle at 90% 84%, rgba(7,61,50,.08), transparent 25%),
        #f4eee3;
    border-top:1px solid rgba(180,145,77,.2);
}

.couple-subtitle{
    color:#a47d35;
    font-size:clamp(20px, 5vw, 25px);
    line-height:1.7;
    direction:rtl;
}

.couple-title{
    margin:12px 0 0;
    color:#164f41;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(40px, 10.5vw, 54px);
    font-weight:500;
    line-height:1.1;
    letter-spacing:-.025em;
}

.couple-text{
    max-width:640px;
    margin:22px auto clamp(54px, 8vh, 76px);
    color:#6f685e;
    font-size:clamp(13px, 3.5vw, 15px);
    font-weight:300;
    line-height:1.9;
}

.couple-wrapper{
    width:min(100%, 940px);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    justify-items:center;
    gap:44px;
}

.person{
    width:100%;
    max-width:360px;
    display:grid;
    justify-items:center;
}

.person-photo{
    position:relative;
    width:min(74vw, 248px);
    aspect-ratio:4 / 5;
    margin:0;
    padding:6px;
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid rgba(180,145,77,.5);
    border-radius:92px 92px 22px 22px;
    background:#faf6ed;
    box-shadow:0 22px 50px rgba(35,60,51,.14);
}

.person-photo::after{
    content:"";
    position:absolute;
    inset:10px;
    z-index:1;
    border:1px solid rgba(245,229,194,.6);
    border-radius:82px 82px 15px 15px;
    pointer-events:none;
}

.person-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center bottom;
    border-radius:85px 85px 16px 16px;
    filter:contrast(.98) saturate(.78) sepia(.08);
    transform:scale(1.08);
    transform-origin:center bottom;
}

.person h3{
    max-width:340px;
    margin:28px 0 0;
    color:#8c672d;
    font-family:'Great Vibes',cursive;
    font-size:clamp(31px, 8.8vw, 40px);
    font-weight:400;
    line-height:1.2;
}

.parent{
    margin-top:16px;
    color:#174f41;
}

.parent-label{
    display:block;
    margin-bottom:9px;
    color:#a47d35;
    font-size:9px;
    font-weight:500;
    line-height:1.5;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.parent-names{
    display:block;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(17px, 4.7vw, 20px);
    font-weight:500;
    line-height:1.55;
}

.parent-ampersand{
    display:inline-block;
    margin-block:1px;
    color:#b28b45;
    font-family:'Great Vibes',cursive;
    font-size:1.12em;
}

.ampersand{
    width:min(55vw, 190px);
    display:flex;
    align-items:center;
    gap:16px;
    color:#b28b45;
    font-family:'Great Vibes',cursive;
    font-size:48px;
    line-height:1;
}

.ampersand::before,
.ampersand::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(178,139,69,.62));
}

.ampersand::after{
    transform:scaleX(-1);
}

@media (max-width:359px){
    .opening,
    .countdown,
    .couple{
        padding-left:16px;
        padding-right:16px;
    }

    .opening-names{
        font-size:41px;
    }

    .time-box{
        min-height:88px;
        padding-inline:1px;
    }

    .time-box small{
        letter-spacing:.08em;
    }

    .person-photo{
        width:min(76vw, 232px);
    }
}

@media (min-width:768px){
    .opening-content{
        padding-inline:24px;
    }

    .divider{
        margin-block:30px;
    }

    .countdown-box{
        border-radius:22px;
    }

    .time-box{
        min-height:118px;
        padding-block:20px;
    }

    .couple-wrapper{
        grid-template-columns:minmax(0, 1fr) 70px minmax(0, 1fr);
        align-items:start;
        gap:18px;
    }

    .person-photo{
        width:min(28vw, 280px);
    }

    .ampersand{
        width:70px;
        margin-top:128px;
        gap:9px;
        font-size:50px;
    }
}

@media (prefers-reduced-motion:reduce){
    body:not(.invitation-locked) .opening-content{
        animation:none;
        opacity:1;
        transform:none;
    }

    .mouse span{
        animation:none;
    }
}
/* ===========================
   EVENT
=========================== */

.event{
    min-height:100vh;
    background:#fffdf9;
    padding:90px 25px;
    text-align:center;
}

.event-subtitle{
    font-family:'Poppins';
    letter-spacing:4px;
    text-transform:uppercase;
    color:#8b6d4a;
    font-size:13px;
}

.event-title{
    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    color:#7b6244;
    margin:18px 0 60px;
}

.event-wrapper{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.event-card{
    width:320px;
    background:white;
    padding:40px;
    border-radius:25px;
    border:1px solid #e6d8c8;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.event-card h3{
    font-family:'Great Vibes',cursive;
    font-size:40px;
    color:#8b6d4a;
    margin-bottom:20px;
}

.event-card h4{
    font-family:'Cormorant Garamond',serif;
    font-size:30px;
    color:#7b6244;
    margin:15px 0;
}

.event-card p{
    color:#777;
    line-height:1.8;
}

.location{
    margin-top:80px;
}

.location h3{
    font-family:'Cormorant Garamond',serif;
    font-size:36px;
    color:#7b6244;
}

.location p{
    margin:25px 0;
    color:#777;
    line-height:2;
}

.maps-btn{
    display:inline-block;
    padding:14px 34px;
    background:#8b6d4a;
    color:white;
    text-decoration:none;
    border-radius:50px;
    transition:.3s;
}

.maps-btn:hover{
    background:#6f5437;
}
/* ===========================
   LOVE STORY
=========================== */

.story{
    background:var(--dusty-sage);
    padding:100px 25px;
    text-align:center;
}

.story-subtitle{
    font-size:13px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--w-gold-ink);
}

.story-title{
    font-family:'Cormorant Garamond',serif;
    font-size:20px;
    color:var(--w-emerald);
    margin:20px 0;
}

.story-text{
    max-width:700px;
    margin:0 auto;
    line-height:2;
    color:var(--w-body);
    font-style:italic;
}

.story-verse{
    margin-top:15px;
    color:var(--w-gold-ink);
    font-weight:600;
}

.timeline{
    margin-top:70px;
    max-width:800px;
    margin-inline:auto;
}

.timeline-item{
    display:flex;
    gap:30px;
    align-items:flex-start;
    margin-bottom:45px;
}

.timeline-date{
    min-width:90px;
    font-family:'Cormorant Garamond',serif;
    font-size:30px;
    color:var(--w-gold-ink);
}

.timeline-content{
    flex:1;
    text-align:left;
    background:var(--w-cream);
    padding:25px;
    border-radius:18px;
    border:1px solid var(--w-border);
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.timeline-content h3{
    margin-top:0;
    color:var(--w-emerald);
}

.timeline-content p{
    line-height:1.8;
    color:var(--w-body);
}

#musicBtn{
    position:fixed;
    right:calc(20px + env(safe-area-inset-right, 0px));
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    width:44px;
    height:44px;
    margin:0;
    padding:0;
    display:grid;
    place-items:center;
    box-sizing:border-box;
    border:1px solid rgba(216,186,120,.6);
    border-radius:50%;
    background:rgba(3,42,35,.8);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:#e4ce9d;
    font-size:14px;
    box-shadow:0 4px 16px rgba(3,42,35,.16), inset 0 1px 0 rgba(255,244,219,.08);
    cursor:pointer;
    z-index:10001;
    transition:transform .25s ease, border-color .25s ease, background-color .25s ease;
}

#musicBtn:hover{
    background:rgba(8,57,46,.92);
    border-color:#e4ce9d;
    transform:scale(1.035);
}

#musicBtn:active{ transform:scale(.96); }
#musicBtn:focus-visible{ outline:2px solid #fff2d5; outline-offset:5px; }
#musicBtn::after{
    content:"";
    position:absolute;
    inset:-4px;
    border:1px solid rgba(216,186,120,.3);
    border-radius:50%;
    pointer-events:none;
    opacity:0;
}
#musicBtn[aria-pressed="true"]::after{
    animation:musicBreath 6s ease-in-out infinite;
}
/* Explicit play/pause shapes stay legible even if the icon font is unavailable. */
#musicBtn i{ display:block; width:12px; height:14px; box-sizing:border-box; }
#musicBtn i::before{ content:none; }
#musicBtn[aria-pressed="false"] i{
    width:0;
    height:0;
    margin-left:3px;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:9px solid currentColor;
}
#musicBtn[aria-pressed="true"] i{
    border-left:3px solid currentColor;
    border-right:3px solid currentColor;
}

/* Atmosphere is confined to the cover and opening, behind their content. */
.cover{
    overflow-y:auto;
    align-items:safe center;
    padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px));
}
.cover::after{
    background:
        radial-gradient(ellipse at 50% 40%, rgba(53,133,101,.12), transparent 55%),
        radial-gradient(ellipse at center, transparent 28%, rgba(2,28,24,.48) 100%),
        linear-gradient(180deg, rgba(2,31,26,.22), rgba(3,42,34,.06) 42%, rgba(2,28,24,.56));
}
.cover-frame{
    inset:max(13px, env(safe-area-inset-top)) max(13px, env(safe-area-inset-right)) max(13px, env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left));
}
.cover-frame::before{
    box-shadow:0 0 24px rgba(216,186,120,.05);
}
.cover .overlay::before,
.opening::before{
    content:"";
    position:absolute;
    inset:-8%;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 40% 38%, rgba(54,150,113,.18), transparent 58%),
        linear-gradient(115deg, transparent 36%, rgba(229,199,136,.045) 49%, transparent 62%);
    animation:emeraldAtmosphere 18s ease-in-out infinite alternate;
}
.cover .overlay{ isolation:isolate; }
.cover-invitation{
    box-shadow:0 12px 32px rgba(2,45,36,.18), inset 0 1px 0 rgba(242,220,175,.06);
}
.cover.is-open .overlay::before{ animation-play-state:paused; }
.opening{
    isolation:isolate;
    padding-top:max(48px, env(safe-area-inset-top));
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
}
.opening::before{ z-index:0; animation-duration:22s; }
.opening-content{ box-sizing:border-box; }
.opening .scroll-indicator{
    width:fit-content;
    margin-inline:auto;
    gap:9px;
    margin-top:clamp(28px, 5vh, 44px);
}
.opening .mouse{
    width:18px;
    height:30px;
    border-color:rgba(216,186,120,.5);
}
.opening .mouse span{
    top:7px;
    width:3px;
    height:3px;
    background:rgba(245,232,204,.8);
    animation:refinedScroll 3.8s ease-in-out infinite;
}
.opening .scroll-indicator::after{
    content:"";
    width:1px;
    height:19px;
    background:linear-gradient(rgba(216,186,120,.4), transparent);
}
.opening .scroll-indicator p{
    font-size:8px;
    line-height:1.5;
    letter-spacing:.32em;
    color:rgba(248,242,231,.62);
}
@keyframes emeraldAtmosphere{
    from{ transform:translate(-.6%, -.4%) scale(1); opacity:.55; }
    to{ transform:translate(.6%, .5%) scale(1.025); opacity:.95; }
}
@keyframes refinedScroll{
    0%, 15%{ transform:translate(-50%, 0); opacity:0; }
    30%{ opacity:.8; }
    75%, 100%{ transform:translate(-50%, 8px); opacity:0; }
}
@keyframes musicBreath{
    0%, 100%{ transform:scale(.98); opacity:.15; }
    50%{ transform:scale(1.035); opacity:.5; }
}
@media (min-width:768px){
    .cover-frame{ inset:max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
}
@media (max-height:620px){
    .cover .overlay{ gap:28px; padding-block:20px 12px; }
    .opening{ padding-top:max(28px, env(safe-area-inset-top)); }
    .opening .bismillah{ margin-bottom:14px; }
    .opening .divider{ margin-block:16px; }
    .opening .scroll-indicator{ margin-top:22px; }
}
@media (prefers-reduced-motion:reduce){
    .cover .overlay::before,
    .opening::before,
    .opening .mouse span,
    #musicBtn[aria-pressed="true"]::after{ animation:none; }
    #musicBtn{ transition:none; }
    #musicBtn:hover,
    #musicBtn:active{ transform:none; }
}