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

:root{
--pink:#ff4f9a;
--pink2:#ff8bc1;
--purple:#a66cff;
}

html,body{
min-height:100%;
}

body{
min-height:100vh;
font-family:"Segoe UI",Arial,sans-serif;
color:white;
overflow-x:hidden;

background:
radial-gradient(circle at 15% 15%,#55102f 0,transparent 32%),
radial-gradient(circle at 85% 80%,#34135d 0,transparent 35%),
linear-gradient(135deg,#08040b,#180817 48%,#0d0715);

display:flex;
align-items:center;
justify-content:center;
padding:35px;
}

/* BACKGROUND */

.aurora{
position:fixed;
border-radius:50%;
filter:blur(100px);
opacity:.45;
pointer-events:none;
}

.a1{
width:500px;
height:500px;
background:#ff277c;
top:-230px;
left:-180px;
animation:aura1 8s ease-in-out infinite alternate;
}

.a2{
width:600px;
height:600px;
background:#7b37ff;
right:-250px;
bottom:-300px;
animation:aura2 10s ease-in-out infinite alternate;
}

@keyframes aura1{
to{transform:translate(170px,150px) scale(1.2)}
}

@keyframes aura2{
to{transform:translate(-180px,-120px) scale(1.2)}
}

.star{
position:fixed;
width:3px;
height:3px;
background:white;
border-radius:50%;
opacity:.5;
animation:twinkle 2s infinite alternate;
}

@keyframes twinkle{
to{opacity:.08;transform:scale(.5)}
}


/* MAIN */

.hero{
width:min(1150px,96vw);
min-height:650px;

display:grid;
grid-template-columns:.9fr 1.1fr;
align-items:center;
gap:50px;

padding:60px;

border:1px solid rgba(255,255,255,.2);
border-radius:42px;

background:
linear-gradient(135deg,
rgba(255,255,255,.13),
rgba(255,255,255,.035));

backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);

box-shadow:
0 45px 120px rgba(0,0,0,.55),
inset 0 1px rgba(255,255,255,.25),
0 0 100px rgba(255,50,130,.08);

position:relative;
z-index:5;

animation:heroOpen 1.3s cubic-bezier(.16,.8,.2,1);
}

@keyframes heroOpen{
from{
opacity:0;
transform:translateY(50px) scale(.92);
filter:blur(15px);
}
}


/* LEFT */

.eyebrow{
font-size:12px;
letter-spacing:5px;
color:rgba(255,255,255,.6);
margin-bottom:20px;
}

.mainHeart{
font-size:60px;
width:max-content;
filter:drop-shadow(0 0 25px #ff387e);
animation:heartbeat 1.25s infinite;
}

@keyframes heartbeat{
0%,100%{transform:scale(1)}
15%{transform:scale(1.2)}
30%{transform:scale(1)}
45%{transform:scale(1.13)}
60%{transform:scale(1)}
}

h1{
font-size:clamp(52px,6vw,82px);
line-height:.92;
letter-spacing:-4px;
margin-top:20px;
}

h1 span,
h2 span{
display:block;

background:linear-gradient(
90deg,
#ff77b4,
#fff,
#d79aff,
#ff77b4);

background-size:300%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;

animation:textMove 4s linear infinite;
}

@keyframes textMove{
to{background-position:300% center}
}

.loveText{
margin-top:28px;
font-size:17px;
line-height:1.8;
color:rgba(255,255,255,.72);
}

.surpriseBtn{
margin-top:30px;
padding:16px 25px 16px 30px;

border-radius:100px;
border:1px solid rgba(255,255,255,.3);

background:
linear-gradient(135deg,
rgba(255,58,139,.72),
rgba(157,70,255,.45));

color:white;
font-size:15px;
font-weight:700;

cursor:pointer;

display:flex;
align-items:center;
gap:15px;

box-shadow:
0 15px 45px rgba(255,46,126,.28),
inset 0 1px rgba(255,255,255,.3);

transition:.35s;
}

.surpriseBtn b{
font-size:21px;
}

.surpriseBtn:hover{
transform:translateY(-5px) scale(1.04);
box-shadow:0 22px 60px rgba(255,46,126,.45);
}

.hint{
font-size:11px;
margin-top:13px;
color:rgba(255,255,255,.4);
}


/* GALLERY */

.gallery{
height:550px;
position:relative;
perspective:1200px;
}

.pic{
position:absolute;
width:215px;
height:285px;
padding:7px;

border-radius:27px;
overflow:hidden;

border:1px solid rgba(255,255,255,.3);
background:rgba(255,255,255,.1);

backdrop-filter:blur(15px);

box-shadow:
0 25px 60px rgba(0,0,0,.5),
inset 0 1px rgba(255,255,255,.3);

transition:.4s;
}

.pic img{
width:100%;
height:100%;
object-fit:cover;
border-radius:20px;
}

.p1{
top:5px;
left:30px;
animation:p1 5s ease-in-out infinite;
}

.p2{
top:35px;
right:5px;
animation:p2 6s ease-in-out infinite;
}

.p3{
bottom:0;
left:70px;
animation:p3 5.5s ease-in-out infinite;
}

.p4{
bottom:10px;
right:35px;
animation:p4 6.5s ease-in-out infinite;
}

@keyframes p1{
0%,100%{transform:rotate(-8deg) translateY(0)}
50%{transform:rotate(-5deg) translateY(-15px)}
}

@keyframes p2{
0%,100%{transform:rotate(8deg) translateY(0)}
50%{transform:rotate(5deg) translateY(15px)}
}

@keyframes p3{
0%,100%{transform:rotate(7deg) translateY(0)}
50%{transform:rotate(4deg) translateY(-15px)}
}

@keyframes p4{
0%,100%{transform:rotate(-7deg) translateY(0)}
50%{transform:rotate(-4deg) translateY(15px)}
}

.pic:hover{
z-index:30;
animation-play-state:paused;
transform:rotate(0) scale(1.12);
box-shadow:
0 35px 80px rgba(0,0,0,.6),
0 0 45px rgba(255,70,150,.3);
}

.loveOrb{
position:absolute;
left:50%;
top:50%;

transform:translate(-50%,-50%);

width:100px;
height:100px;

display:flex;
align-items:center;
justify-content:center;

font-size:45px;

border-radius:50%;
border:1px solid rgba(255,255,255,.3);

background:rgba(255,255,255,.12);
backdrop-filter:blur(20px);

box-shadow:
0 0 50px rgba(255,40,120,.5),
inset 0 1px rgba(255,255,255,.3);

z-index:20;

animation:orb 2s infinite;
}

@keyframes orb{
50%{
transform:translate(-50%,-50%) scale(1.12);
}
}


/* SURPRISE FULL SCREEN */

.surpriseScreen{
position:fixed;
inset:0;
z-index:100;

display:flex;
align-items:center;
justify-content:center;

background:
radial-gradient(circle at center,rgba(95,19,64,.95),rgba(8,3,13,.98) 70%);

backdrop-filter:blur(25px);

opacity:0;
visibility:hidden;

transition:.7s;
overflow:auto;
padding:50px 20px;
}

.surpriseScreen.show{
opacity:1;
visibility:visible;
}

.flash{
position:fixed;
inset:0;
background:white;
opacity:0;
pointer-events:none;
z-index:101;
}

.surpriseScreen.show .flash{
animation:flash .9s ease;
}

@keyframes flash{
0%{opacity:0}
25%{opacity:.85}
100%{opacity:0}
}

.closeBtn,
.musicBtn{
position:fixed;
z-index:110;

border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.1);
backdrop-filter:blur(15px);
color:white;

cursor:pointer;
}

.closeBtn{
right:25px;
top:20px;

width:48px;
height:48px;

border-radius:50%;
font-size:28px;
}

.musicBtn{
left:25px;
top:22px;

padding:11px 18px;
border-radius:100px;
}


/* GIFT */

.surpriseContent{
width:min(800px,96vw);
text-align:center;
position:relative;
z-index:105;
}

.gift{
width:180px;
height:170px;
position:relative;
margin:auto;
cursor:pointer;

transform:scale(0);
}

.surpriseScreen.show .gift{
animation:giftEnter .8s .7s forwards;
}

@keyframes giftEnter{
to{transform:scale(1)}
}

.giftBox{
position:absolute;
bottom:0;
left:10px;

width:160px;
height:125px;

display:flex;
align-items:center;
justify-content:center;

font-size:48px;

border-radius:15px;

background:linear-gradient(135deg,#ff4f94,#9a4cff);

box-shadow:0 20px 70px rgba(255,50,135,.5);
}

.giftLid{
position:absolute;
z-index:5;
top:25px;
left:0;

width:180px;
height:38px;

border-radius:10px;

background:linear-gradient(90deg,#ff83b8,#c980ff);
}

.giftRibbon{
position:absolute;
z-index:6;
left:75px;
bottom:0;

width:30px;
height:145px;

background:rgba(255,255,255,.35);
}

.gift.open{
animation:giftPop .7s forwards;
}

@keyframes giftPop{
to{
transform:scale(1.8);
opacity:0;
filter:blur(15px);
}
}


/* REVEAL */

.reveal{
display:none;
opacity:0;
}

.reveal.show{
display:block;
animation:reveal .9s forwards;
}

@keyframes reveal{
from{
opacity:0;
transform:translateY(40px) scale(.9);
filter:blur(15px);
}
to{
opacity:1;
transform:none;
filter:blur(0);
}
}

.birthdayMini{
font-size:11px;
letter-spacing:5px;
color:rgba(255,255,255,.55);
}

.cake{
font-size:70px;
margin:15px 0;
animation:cakeFloat 2s infinite ease-in-out;
}

@keyframes cakeFloat{
50%{transform:translateY(-10px)}
}

h2{
font-size:clamp(45px,8vw,76px);
line-height:.95;
letter-spacing:-3px;
}

.loveLine{
margin-top:20px;
font-size:22px;
font-weight:700;
}

.birthdayMessage{
max-width:550px;
margin:18px auto 30px;
line-height:1.7;
color:rgba(255,255,255,.7);
}

.countTitle{
font-size:13px;
font-weight:800;
letter-spacing:6px;
margin-bottom:14px;
color:#ffacd0;
}

.countdown{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.timeBox{
min-width:110px;
padding:18px 10px;

border:1px solid rgba(255,255,255,.22);
border-radius:22px;

background:rgba(255,255,255,.09);
backdrop-filter:blur(20px);

box-shadow:
inset 0 1px rgba(255,255,255,.2),
0 15px 40px rgba(0,0,0,.25);
}

.timeBox strong{
display:block;
font-size:40px;
}

.timeBox small{
font-size:9px;
letter-spacing:2px;
color:rgba(255,255,255,.5);
}

.colon{
font-size:30px;
opacity:.5;
}

.birthdayNow{
display:none;
font-size:clamp(30px,6vw,55px);
font-weight:900;
margin:30px 0;
}

.miniPhotos{
margin:35px auto 25px;
display:flex;
justify-content:center;
}

.miniPhotos img{
width:90px;
height:120px;
object-fit:cover;

border:4px solid rgba(255,255,255,.85);
border-radius:13px;

box-shadow:0 15px 35px rgba(0,0,0,.35);
transition:.3s;
}

.miniPhotos img:nth-child(1){
transform:rotate(-10deg);
}

.miniPhotos img:nth-child(2){
transform:rotate(-3deg) translateY(-8px);
}

.miniPhotos img:nth-child(3){
transform:rotate(4deg) translateY(-8px);
}

.miniPhotos img:nth-child(4){
transform:rotate(10deg);
}

.miniPhotos img:hover{
z-index:10;
transform:scale(1.2) rotate(0);
}

.finalLove{
font-size:18px;
font-weight:800;
letter-spacing:2px;
}


/* HEARTS + CONFETTI */

.floatingHeart{
position:fixed;
bottom:-50px;
z-index:102;
pointer-events:none;
animation:heartFly linear forwards;
}

@keyframes heartFly{
0%{
opacity:0;
transform:translateY(0) rotate(0) scale(.5);
}
10%{opacity:1}
100%{
opacity:0;
transform:translateY(-120vh) rotate(360deg) scale(1.4);
}
}

.confettiPiece{
position:fixed;
top:-20px;
z-index:103;
width:8px;
height:15px;
border-radius:3px;
animation:confettiFall linear forwards;
}

@keyframes confettiFall{
to{
transform:translateY(110vh) rotate(720deg);
}
}


/* MOBILE */

@media(max-width:900px){

body{
align-items:flex-start;
padding:20px 10px;
}

.hero{
grid-template-columns:1fr;
padding:40px 25px;
}

.left{
text-align:center;
}

.mainHeart{
margin:auto;
}

.surpriseBtn{
margin-left:auto;
margin-right:auto;
}

.gallery{
width:100%;
max-width:520px;
margin:auto;
}

}

@media(max-width:520px){

.hero{
padding:35px 14px;
border-radius:30px;
}

h1{
font-size:52px;
}

.gallery{
height:450px;
}

.pic{
width:150px;
height:205px;
}

.p1{left:5px}
.p2{right:5px}
.p3{left:25px}
.p4{right:25px}

.loveOrb{
width:75px;
height:75px;
font-size:32px;
}

.countdown{
gap:4px;
}

.timeBox{
min-width:70px;
padding:14px 5px;
}

.timeBox strong{
font-size:27px;
}

.colon{
font-size:20px;
}

.miniPhotos img{
width:65px;
height:90px;
}

}