*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --wine:#3b0715;
    --rose:#b40d35;
    --petal:#ff3f6f;
    --gold:#ffd36a;
    --amber:#ff9f45;
    --cream:#fff2dc;
    --glass:rgba(255,255,255,0.13);
    --glass-strong:rgba(255,255,255,0.23);
    --line:rgba(255,232,194,0.30);
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    overflow-x:hidden;
    color:var(--cream);
    font-family:'Poppins',sans-serif;
    background:
        radial-gradient(circle at 15% 12%, rgba(255,211,106,0.22), transparent 18rem),
        radial-gradient(circle at 86% 18%, rgba(255,63,111,0.22), transparent 22rem),
        radial-gradient(circle at 50% 100%, rgba(180,13,53,0.34), transparent 28rem),
        linear-gradient(135deg, #17050b 0%, #3b0715 42%, #6f1023 72%, #160408 100%);
    background-attachment:fixed;
}

body::before,
body::after{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
}

body::before{
    z-index:-3;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.08), transparent 22%, rgba(255,211,106,0.08) 55%, transparent 78%),
        radial-gradient(circle at 12% 80%, rgba(255,159,69,0.18), transparent 18rem);
}

body::after{
    z-index:-2;
    opacity:0.45;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, transparent, black 18%, black 80%, transparent);
}

button{
    border:0;
    font:inherit;
}

.ambient-lights{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 30%, rgba(255,220,116,0.22), transparent 8rem),
        radial-gradient(circle at 92% 62%, rgba(255,63,111,0.18), transparent 9rem),
        radial-gradient(circle at 55% 18%, rgba(255,255,255,0.12), transparent 14rem);
    animation:roomGlow 6s ease-in-out infinite alternate;
}

main{
    position:relative;
}

.hero{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(0,0.95fr) minmax(360px,1.05fr);
    gap:44px;
    align-items:center;
    width:min(1180px,92vw);
    margin:0 auto;
    padding:54px 0 40px;
}

.hero-content{
    animation:fadeUp 0.9s ease both;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:rgba(255,224,171,0.88);
    font-size:13px;
    font-weight:700;
    letter-spacing:2.8px;
    text-transform:uppercase;
}

.eyebrow::before{
    content:'';
    width:28px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold));
}

h1,
h2{
    font-family:'Cormorant Garamond',serif;
    font-weight:700;
    letter-spacing:0;
}

h1{
    max-width:650px;
    font-size:clamp(58px,9vw,116px);
    line-height:0.86;
    text-shadow:0 18px 45px rgba(0,0,0,0.42);
}

.hero-text{
    max-width:600px;
    margin:26px 0 30px;
    color:rgba(255,242,220,0.88);
    font-size:18px;
    line-height:1.85;
}

.gf-name,
.modal-name{
    font-family:'Dancing Script',cursive;
    color:#ffe3a3;
    letter-spacing:0;
    text-shadow:
        0 0 16px rgba(255,211,106,0.46),
        0 12px 28px rgba(0,0,0,0.34);
}

.gf-name{
    margin-top:18px;
    font-size:clamp(46px,7vw,78px);
    line-height:1;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.primary-btn,
.ghost-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:54px;
    padding:14px 28px;
    border-radius:999px;
    color:white;
    cursor:pointer;
    transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.primary-btn{
    background:
        linear-gradient(135deg, rgba(255,211,106,0.95), rgba(255,63,111,0.86)),
        linear-gradient(135deg, rgba(255,255,255,0.22), transparent);
    box-shadow:0 18px 42px rgba(180,13,53,0.34), 0 0 34px rgba(255,211,106,0.20);
    font-weight:700;
}

.ghost-btn{
    border:1px solid var(--line);
    background:linear-gradient(135deg, rgba(255,255,255,0.17), rgba(255,255,255,0.07));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.primary-btn:hover,
.ghost-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 48px rgba(180,13,53,0.42);
}

.romantic-scene{
    position:relative;
    min-height:620px;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(255,232,194,0.22);
    background:
        linear-gradient(180deg, rgba(22,5,8,0.08), rgba(22,5,8,0.68)),
        radial-gradient(circle at 72% 18%, rgba(255,211,106,0.20), transparent 12rem),
        linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    box-shadow:0 35px 90px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.23);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    animation:fadeUp 1s ease 0.12s both;
}

.window-view{
    position:absolute;
    top:38px;
    left:38px;
    right:38px;
    height:230px;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,232,194,0.22);
    background:
        radial-gradient(circle at 18% 72%, rgba(255,211,106,0.9) 0 3px, transparent 4px),
        radial-gradient(circle at 34% 55%, rgba(255,255,255,0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 62% 68%, rgba(255,63,111,0.9) 0 3px, transparent 4px),
        radial-gradient(circle at 80% 40%, rgba(255,211,106,0.8) 0 2px, transparent 3px),
        linear-gradient(180deg, #07111e, #140710 74%, #2b0a12);
    box-shadow:inset 0 -28px 40px rgba(0,0,0,0.34);
}

.window-view::before,
.window-view::after{
    content:'';
    position:absolute;
    background:rgba(255,232,194,0.16);
}

.window-view::before{
    left:50%;
    top:0;
    width:1px;
    height:100%;
}

.window-view::after{
    left:0;
    top:48%;
    width:100%;
    height:1px;
}

.window-view span{
    position:absolute;
    bottom:0;
    width:13%;
    background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.36));
}

.window-view span:nth-child(1){
    left:14%;
    height:48%;
}

.window-view span:nth-child(2){
    left:38%;
    height:64%;
}

.window-view span:nth-child(3){
    right:18%;
    height:42%;
}

.photo-frame{
    position:absolute;
    top:154px;
    left:50%;
    width:220px;
    aspect-ratio:1;
    padding:12px;
    border-radius:20px;
    transform:translateX(-50%) rotate(-2deg);
    background:linear-gradient(135deg, rgba(255,242,220,0.92), rgba(255,211,106,0.74));
    box-shadow:0 0 34px rgba(255,211,106,0.35), 0 22px 44px rgba(0,0,0,0.35);
    z-index:3;
}

.photo-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:14px;
    display:block;
}

.bed{
    position:absolute;
    left:7%;
    right:7%;
    bottom:42px;
    height:290px;
    border-radius:34px 34px 24px 24px;
    background:
        radial-gradient(circle at 28% 44%, rgba(255,63,111,0.55) 0 8px, transparent 9px),
        radial-gradient(circle at 35% 53%, rgba(180,13,53,0.72) 0 7px, transparent 8px),
        radial-gradient(circle at 52% 45%, rgba(255,63,111,0.62) 0 9px, transparent 10px),
        radial-gradient(circle at 62% 56%, rgba(180,13,53,0.72) 0 8px, transparent 9px),
        linear-gradient(145deg, rgba(255,242,220,0.88), rgba(255,208,176,0.72));
    box-shadow:inset 0 8px 40px rgba(255,255,255,0.28), 0 28px 70px rgba(0,0,0,0.38);
}

.petal-heart{
    position:absolute;
    inset:52px 16% 60px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    color:#7c071e;
    font-family:'Dancing Script',cursive;
    font-size:58px;
    text-shadow:0 2px 0 rgba(255,255,255,0.25);
}

.petal-heart::before{
    content:'';
    position:absolute;
    width:210px;
    height:185px;
    background:
        radial-gradient(circle at 35% 32%, var(--rose) 0 35%, transparent 36%),
        radial-gradient(circle at 65% 32%, var(--rose) 0 35%, transparent 36%),
        linear-gradient(45deg, var(--rose) 0 50%, transparent 51%);
    transform:rotate(-45deg);
    opacity:0.72;
    filter:drop-shadow(0 12px 20px rgba(92,7,24,0.28));
}

.petal-heart span{
    position:relative;
    z-index:2;
}

.fairy-lights{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.fairy-lights i{
    position:absolute;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 18px var(--gold), 0 0 42px rgba(255,211,106,0.72);
    animation:twinkle 1.8s ease-in-out infinite alternate;
}

.fairy-lights i:nth-child(1){left:9%;top:18%;}
.fairy-lights i:nth-child(2){left:20%;bottom:26%;animation-delay:0.2s;}
.fairy-lights i:nth-child(3){right:13%;top:24%;animation-delay:0.4s;}
.fairy-lights i:nth-child(4){right:20%;bottom:24%;animation-delay:0.6s;}
.fairy-lights i:nth-child(5){left:43%;top:10%;animation-delay:0.8s;}
.fairy-lights i:nth-child(6){right:42%;bottom:14%;animation-delay:1s;}

.message-section,
.gallery,
.surprise{
    width:min(1080px,92vw);
    margin:0 auto;
    padding:96px 0;
}

.message-box,
.surprise-box{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:52px;
    border:1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
        radial-gradient(circle at 80% 12%, rgba(255,211,106,0.16), transparent 16rem);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:0 28px 70px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.28);
}

.message-box h2,
.gallery h2,
.surprise-box h2{
    max-width:760px;
    margin-bottom:22px;
    font-size:clamp(42px,6vw,70px);
    line-height:0.98;
    text-shadow:0 16px 35px rgba(0,0,0,0.30);
}

.message-box p,
.surprise-box p{
    max-width:820px;
    margin-top:18px;
    color:rgba(255,242,220,0.88);
    font-size:17px;
    line-height:1.9;
}

.shayari-card,
.modal-shayari{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,232,194,0.28);
    background:
        linear-gradient(135deg, rgba(255,211,106,0.14), rgba(255,63,111,0.08)),
        rgba(255,255,255,0.07);
    box-shadow:
        0 18px 44px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.22);
}

.shayari-card{
    max-width:760px;
    margin:34px auto 0;
    padding:34px 34px 32px;
    border-radius:24px;
    text-align:center;
}

.shayari-card::before,
.modal-shayari::before{
    content:'';
    position:absolute;
    inset:auto 18% 0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,211,106,0.9), transparent);
}

.shayari-card i{
    display:inline-grid;
    place-items:center;
    width:42px;
    height:42px;
    margin-bottom:8px;
    border-radius:50%;
    color:#ffd36a;
    background:rgba(255,255,255,0.10);
    box-shadow:0 0 24px rgba(255,211,106,0.22);
}

.shayari-card p,
.modal-shayari p{
    margin:0;
    color:#fff5e6;
    font-family:'Dancing Script',cursive;
    letter-spacing:0;
    text-shadow:0 10px 24px rgba(0,0,0,0.28);
}

.shayari-card p{
    font-size:clamp(27px,4vw,38px);
    line-height:1.45;
}

.gallery{
    position:relative;
    text-align:center;
    overflow:hidden;
    border-radius:34px;
    padding-left:24px;
    padding-right:24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)),
        radial-gradient(circle at 50% 34%, rgba(255,211,106,0.14), transparent 22rem),
        radial-gradient(circle at 18% 72%, rgba(255,63,111,0.12), transparent 18rem);
    border:1px solid rgba(255,232,194,0.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
}

.gallery .eyebrow{
    justify-content:center;
}

.gallery-heading{
    max-width:760px;
    margin:0 auto;
}

.gallery-heading p:last-child{
    margin:16px auto 0;
    max-width:660px;
    color:rgba(255,242,220,0.78);
    font-size:17px;
    line-height:1.8;
}

.gallery-container{
    width:min(92vw,620px);
    height:500px;
    margin:58px auto 0;
    position:relative;
    perspective:1450px;
    transform-style:preserve-3d;
    animation:gallerySpin 22s linear infinite;
}

.gallery-container::before{
    content:'';
    position:absolute;
    inset:36px 18px;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(255,211,106,0.24), transparent 60%),
        radial-gradient(circle at 50% 78%, rgba(255,63,111,0.16), transparent 54%);
}

.gallery-container::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:20px;
    width:min(86vw,520px);
    height:54px;
    border-radius:50%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse, rgba(0,0,0,0.36), transparent 70%);
}

.photo-card{
    position:absolute;
    inset:0;
    margin:auto;
    width:min(70vw,340px);
    height:430px;
    overflow:hidden;
    padding:10px;
    border-radius:28px;
    border:1px solid rgba(255,232,194,0.42);
    background:
        linear-gradient(145deg, rgba(255,242,220,0.24), rgba(255,255,255,0.06)),
        linear-gradient(145deg, rgba(255,211,106,0.18), rgba(180,13,53,0.18));
    box-shadow:
        0 30px 70px rgba(0,0,0,0.42),
        0 0 38px rgba(255,211,106,0.11),
        inset 0 1px 0 rgba(255,255,255,0.42);
    transform-style:preserve-3d;
    backface-visibility:visible;
    transition:filter 0.35s ease, box-shadow 0.35s ease;
}

.photo-card:nth-child(1){
    transform:rotateY(0deg) translateZ(360px);
}

.photo-card:nth-child(2){
    transform:rotateY(90deg) translateZ(360px);
}

.photo-card:nth-child(3){
    transform:rotateY(180deg) translateZ(360px);
}

.photo-card:nth-child(4){
    transform:rotateY(270deg) translateZ(360px);
}

.gallery-container:hover{
    animation-play-state:paused;
}

.photo-card:hover{
    filter:saturate(1.14) brightness(1.05);
    box-shadow:
        0 34px 78px rgba(0,0,0,0.48),
        0 0 52px rgba(255,211,106,0.18),
        inset 0 1px 0 rgba(255,255,255,0.48);
}

.photo-card img{
    width:100%;
    height:calc(100% - 74px);
    display:block;
    object-fit:cover;
    border-radius:20px;
    filter:none;
}

.photo-card::after{
    content:'';
    position:absolute;
    inset:10px 10px 84px;
    border-radius:20px;
    background:
        linear-gradient(120deg, transparent 0 34%, rgba(255,255,255,0.26) 46%, transparent 58%),
        linear-gradient(180deg, transparent 58%, rgba(22,5,8,0.34));
    opacity:0.72;
    pointer-events:none;
}

.photo-caption{
    height:74px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:0 10px 2px;
    text-align:left;
}

.photo-caption span{
    color:rgba(255,224,171,0.72);
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.photo-caption strong{
    margin-top:5px;
    color:#fff8ed;
    font-family:'Cormorant Garamond',serif;
    font-size:25px;
    line-height:1;
    letter-spacing:0;
}

.gallery-note{
    width:max-content;
    max-width:100%;
    margin:26px auto 0;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:10px 16px;
    border-radius:999px;
    color:rgba(255,242,220,0.78);
    border:1px solid rgba(255,232,194,0.20);
    background:rgba(255,255,255,0.07);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-size:13px;
    font-weight:600;
}

.gallery-note i{
    color:var(--gold);
}

.surprise{
    padding-bottom:120px;
}

.surprise-box{
    text-align:center;
}

.surprise-box .eyebrow{
    justify-content:center;
}

.surprise-box h2,
.surprise-box p{
    margin-left:auto;
    margin-right:auto;
}

.surprise-box .primary-btn{
    margin-top:28px;
}

.hearts{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:4;
    pointer-events:none;
}

.heart{
    position:absolute;
    color:rgba(255,224,171,0.78);
    text-shadow:0 0 18px rgba(255,211,106,0.44);
    animation:floatHeart 8s linear infinite;
}

.modal{
    position:fixed;
    inset:0;
    z-index:20;
    display:grid;
    place-items:center;
    padding:22px;
    overflow-y:auto;
    background:rgba(12,2,5,0.62);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.35s ease, visibility 0.35s ease;
}

.modal.open{
    opacity:1;
    visibility:visible;
}

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

.petal,
.spark,
.sky-shot,
.firework-bit,
.fire-particle{
    position:absolute;
    pointer-events:none;
}

.fire-particle{
    bottom:-30px;
    left:50vw;
    width:var(--fire-size,9px);
    height:var(--fire-size,9px);
    border-radius:50% 50% 46% 46%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.92), transparent 24%),
        radial-gradient(circle, var(--fire-color,#ff9f45), transparent 68%);
    box-shadow:
        0 0 14px var(--fire-color,#ff9f45),
        0 0 34px var(--fire-color,#ff9f45),
        0 0 62px rgba(255,255,255,0.18);
    filter:blur(var(--fire-blur,0px));
    mix-blend-mode:screen;
    animation:fireParticleRise var(--fire-duration,3.6s) ease-out forwards;
}

.sky-shot{
    left:50vw;
    bottom:-40px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff7c7;
    box-shadow:
        0 0 18px #fff7c7,
        0 0 34px var(--gold),
        0 0 70px rgba(255,63,111,0.72);
    animation:skyShot var(--shot-duration,1.15s) cubic-bezier(0.18,0.82,0.26,1) forwards;
}

.sky-shot::before{
    content:'';
    position:absolute;
    left:50%;
    bottom:-190px;
    width:4px;
    height:210px;
    border-radius:999px;
    transform:translateX(-50%);
    background:linear-gradient(to top, transparent, rgba(255,63,111,0.34), rgba(255,247,199,0.95));
    filter:blur(0.2px);
}

.sky-shot::after{
    content:'';
    position:absolute;
    inset:-16px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.45), transparent 64%);
    animation:shotGlow 0.42s ease-in-out infinite alternate;
}

.firework-bit{
    width:var(--bit-size,6px);
    height:var(--bit-size,6px);
    border-radius:50%;
    background:var(--bit-color,#ffd36a);
    box-shadow:
        0 0 16px var(--bit-color,#ffd36a),
        0 0 36px rgba(255,255,255,0.45);
    animation:fireworkBlast var(--blast-duration,1.1s) ease-out forwards;
}

.firework-bit::before{
    content:'';
    position:absolute;
    top:50%;
    right:50%;
    width:var(--trail-length,76px);
    height:2px;
    border-radius:999px;
    transform:translateY(-50%);
    transform-origin:right center;
    background:linear-gradient(90deg, transparent, var(--bit-color,#ffd36a));
    filter:blur(0.25px);
    opacity:0.92;
}

.firework-bit.ring{
    background:transparent;
    border:1px solid var(--bit-color,#ffd36a);
    box-shadow:
        0 0 14px var(--bit-color,#ffd36a),
        inset 0 0 10px var(--bit-color,#ffd36a);
}

.petal{
    top:-70px;
    width:18px;
    height:28px;
    border-radius:70% 8% 70% 8%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.22), transparent 28%),
        linear-gradient(135deg, #ff6a88, #b40732 72%);
    box-shadow:0 8px 18px rgba(90,4,20,0.22);
    animation:petalFall var(--fall-duration,4s) linear forwards;
}

.spark{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 16px var(--gold), 0 0 34px rgba(255,211,106,0.8);
    animation:sparkCrackle var(--spark-duration,0.9s) ease-out forwards;
}

.modal-box{
    position:relative;
    width:min(92vw,620px);
    max-height:calc(100dvh - 44px);
    overflow-y:auto;
    overflow-x:hidden;
    text-align:center;
    padding:58px 42px 50px;
    border-radius:30px;
    border:1px solid rgba(255,232,194,0.38);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)),
        radial-gradient(circle at 50% 0%, rgba(255,211,106,0.20), transparent 18rem),
        linear-gradient(135deg, rgba(180,13,53,0.48), rgba(59,7,21,0.72));
    box-shadow:0 42px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.34);
    transform:translateY(24px) scale(0.96);
    transition:transform 0.35s ease;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,211,106,0.68) rgba(255,255,255,0.08);
}

.modal-box::-webkit-scrollbar{
    width:8px;
}

.modal-box::-webkit-scrollbar-track{
    background:rgba(255,255,255,0.08);
    border-radius:999px;
}

.modal-box::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(255,211,106,0.85), rgba(255,63,111,0.72));
    border-radius:999px;
}

.modal.open .modal-box{
    transform:translateY(0) scale(1);
}

.close-btn{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:white;
    cursor:pointer;
    background:rgba(255,255,255,0.13);
    border:1px solid rgba(255,255,255,0.22);
}

.modal-box h2{
    font-family:'Dancing Script',cursive;
    font-size:clamp(62px,11vw,104px);
    line-height:0.95;
    color:#fff6e9;
    text-shadow:0 0 28px rgba(255,211,106,0.44), 0 18px 42px rgba(0,0,0,0.42);
}

.modal-box p{
    max-width:500px;
    margin:24px auto 0;
    color:rgba(255,242,220,0.90);
    font-size:18px;
    line-height:1.8;
}

.modal-box .modal-name{
    margin-top:10px;
    font-size:clamp(42px,8vw,68px);
    line-height:1;
}

.modal-photo{
    width:min(78vw,260px);
    aspect-ratio:1;
    margin:22px auto 0;
    padding:9px;
    border-radius:26px;
    border:1px solid rgba(255,232,194,0.38);
    background:
        linear-gradient(145deg, rgba(255,242,220,0.32), rgba(255,255,255,0.08)),
        radial-gradient(circle at 50% 0, rgba(255,211,106,0.22), transparent 70%);
    box-shadow:
        0 20px 48px rgba(0,0,0,0.35),
        0 0 34px rgba(255,211,106,0.18),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

.modal-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:19px;
}

.modal-shayari{
    max-width:520px;
    margin:24px auto 0;
    padding:20px 22px;
    border-radius:20px;
}

.modal-shayari p{
    font-size:clamp(25px,5vw,34px);
    line-height:1.45;
}

.modal-heart{
    margin-top:24px;
    font-size:76px;
    filter:drop-shadow(0 0 20px rgba(255,63,111,0.5));
    animation:pulseHeart 1.2s ease-in-out infinite;
}

@keyframes roomGlow{
    from{opacity:0.72;}
    to{opacity:1;}
}

@keyframes twinkle{
    from{transform:scale(0.8); opacity:0.55;}
    to{transform:scale(1.18); opacity:1;}
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(34px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes photoOrbit{
    0%{
        transform:rotateY(0deg) translateZ(390px) scale(0.82);
        opacity:0.42;
        z-index:1;
    }
    25%{
        transform:rotateY(90deg) translateZ(390px) scale(0.90);
        opacity:0.64;
        z-index:2;
    }
    50%{
        transform:rotateY(180deg) translateZ(390px) scale(1.08);
        opacity:1;
        z-index:5;
    }
    75%{
        transform:rotateY(270deg) translateZ(390px) scale(0.90);
        opacity:0.64;
        z-index:2;
    }
    100%{
        transform:rotateY(360deg) translateZ(390px) scale(0.82);
        opacity:0.42;
        z-index:1;
    }
}

@keyframes gallerySpin{
    from{
        transform:rotateY(0deg);
    }
    to{
        transform:rotateY(360deg);
    }
}

@keyframes floatHeart{
    0%{
        transform:translateY(100vh) translateX(0) scale(0);
        opacity:0;
    }
    20%,72%{
        opacity:1;
    }
    100%{
        transform:translateY(-12vh) translateX(38px) scale(1.45);
        opacity:0;
    }
}

@keyframes petalFall{
    0%{
        transform:translate3d(0,-8vh,0) rotate(0deg);
        opacity:0;
    }
    12%{
        opacity:1;
    }
    100%{
        transform:translate3d(var(--drift,40px),112vh,0) rotate(680deg);
        opacity:0;
    }
}

@keyframes sparkCrackle{
    0%{
        transform:translate(-50%,-50%) scale(0.35);
        opacity:1;
    }
    100%{
        transform:translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0);
        opacity:0;
    }
}

@keyframes fireParticleRise{
    0%{
        transform:translate3d(0,0,0) scale(0.45);
        opacity:0;
    }
    10%{
        opacity:1;
    }
    72%{
        opacity:0.92;
    }
    100%{
        transform:translate3d(var(--fire-drift,0), var(--fire-rise,-105vh), 0) scale(0);
        opacity:0;
    }
}

@keyframes skyShot{
    0%{
        transform:translate3d(0,0,0) scale(0.8);
        opacity:0;
    }
    10%{
        opacity:1;
    }
    76%{
        opacity:1;
    }
    100%{
        transform:translate3d(var(--shot-x,0), var(--shot-y,-78vh), 0) scale(1.28);
        opacity:0;
    }
}

@keyframes shotGlow{
    from{opacity:0.38; transform:scale(0.88);}
    to{opacity:0.9; transform:scale(1.22);}
}

@keyframes fireworkBlast{
    0%{
        transform:translate(-50%,-50%) rotate(var(--bit-angle,0deg)) translateZ(0) scale(0.35);
        opacity:1;
    }
    64%{
        opacity:1;
    }
    100%{
        transform:translate(calc(-50% + var(--blast-x)), calc(-50% + var(--blast-y))) rotate(var(--bit-angle,0deg)) scale(0);
        opacity:0;
    }
}

@keyframes pulseHeart{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.12);}
}

@media(max-width:900px){
    .hero{
        grid-template-columns:1fr;
        padding-top:34px;
    }

    .romantic-scene{
        min-height:560px;
    }
}

@media(max-width:620px){
    .hero{
        width:min(100% - 32px,580px);
        gap:34px;
    }

    .hero-actions{
        width:100%;
    }

    .primary-btn,
    .ghost-btn{
        width:100%;
    }

    .romantic-scene{
        min-height:500px;
        border-radius:24px;
    }

    .window-view{
        top:24px;
        left:22px;
        right:22px;
        height:190px;
    }

    .photo-frame{
        top:132px;
        width:174px;
    }

    .bed{
        left:6%;
        right:6%;
        bottom:30px;
        height:250px;
    }

    .petal-heart{
        inset:50px 10% 58px;
        font-size:42px;
    }

    .petal-heart::before{
        width:160px;
        height:145px;
    }

    .message-section,
    .gallery,
    .surprise{
        width:min(100% - 32px,580px);
        padding:72px 0;
    }

    .message-box,
    .surprise-box,
    .modal-box{
        padding:38px 22px;
        border-radius:22px;
    }

    .gallery-container{
        width:100%;
        height:390px;
        perspective:820px;
    }

    .photo-card{
        width:245px;
        max-width:76vw;
        height:330px;
    }

    .photo-card:nth-child(1){
        transform:rotateY(0deg) translateZ(235px);
    }

    .photo-card:nth-child(2){
        transform:rotateY(90deg) translateZ(235px);
    }

    .photo-card:nth-child(3){
        transform:rotateY(180deg) translateZ(235px);
    }

    .photo-card:nth-child(4){
        transform:rotateY(270deg) translateZ(235px);
    }

    .photo-card img{
        height:calc(100% - 66px);
    }

    .photo-caption{
        height:66px;
    }

    .photo-caption strong{
        font-size:22px;
    }
}

@keyframes photoOrbitMobile{
    0%{
        transform:rotateY(0deg) translateZ(230px) scale(0.84);
        opacity:0.46;
        z-index:1;
    }
    25%{
        transform:rotateY(90deg) translateZ(230px) scale(0.90);
        opacity:0.68;
        z-index:2;
    }
    50%{
        transform:rotateY(180deg) translateZ(230px) scale(1.05);
        opacity:1;
        z-index:5;
    }
    75%{
        transform:rotateY(270deg) translateZ(230px) scale(0.90);
        opacity:0.68;
        z-index:2;
    }
    100%{
        transform:rotateY(360deg) translateZ(230px) scale(0.84);
        opacity:0.46;
        z-index:1;
    }
}