body{
margin:0;
font-family:'Inter',sans-serif;
background:#0b0000;
color:#ffe5e5;
min-height:100vh;
overflow-x:hidden;
opacity:0;
transition:opacity 1s ease;
}

/* main site hidden */

#mainSite{
opacity:0;
pointer-events:none;
transition:opacity 2s ease;
width:100%;
}

/* PASSWORD SCREEN */

#passwordScreen{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 20% 30%,rgba(255,80,80,.15),transparent 60%),
radial-gradient(circle at 80% 70%,rgba(255,60,60,.15),transparent 60%),
#0b0000;
z-index:9999;
}

#passwordScreen.fadeOut{
opacity:0;
pointer-events:none;
transition:opacity 1s ease;
}

/* wrapper */

.passwordWrapper{
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
padding:40px 20px;
}

/* ENVELOPE */

.envelope{
position:relative;
width:340px;
height:220px;
background:#2b0000;
border-radius:12px;
box-shadow:
0 0 40px rgba(255,80,80,.4),
0 0 80px rgba(255,60,60,.2);
overflow:visible;
z-index:10;

/* 3D effect */
perspective:1000px;
transform-style:preserve-3d;
}

.flap{
position:absolute;
top:0;
left:0;

width:100%;
height:120px;

background:linear-gradient(180deg,#3b0000,#240000);

clip-path:polygon(0 0,100% 0,50% 100%);

transform-origin:top;
transition:transform 1.1s ease;

z-index:10; /* below letter */

box-shadow:0 6px 20px rgba(0,0,0,.4);
}

/* when envelope opens, flap goes behind */

.envelope.open .flap{
transform:rotateX(-180deg);
z-index:0;
}

.letter{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;

padding:34px 30px;
box-sizing:border-box;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:14px;

background:linear-gradient(180deg,#220000,#140000);

border-radius:10px;

z-index:50; /* above the flap */

font-family:'Cormorant Garamond',serif;

box-shadow:
0 10px 30px rgba(0,0,0,.45),
inset 0 0 25px rgba(255,80,80,.08);
}

/* paper texture */

.letter::before{

content:"";

position:absolute;
inset:0;

background-image:url("https://www.transparenttextures.com/patterns/paper-fibers.png");

opacity:.15;

pointer-events:none;

}

/* title */

.letter h2{
margin:0;
color:#ffbaba;

text-shadow:
0 0 10px rgba(255,120,120,.4),
0 0 30px rgba(255,80,80,.25);
}

/* input */

.letter input{
padding:12px 18px;
border-radius:30px;
border:none;
outline:none;

background:#120000;

color:#ffdede;

font-size:14px;

box-shadow:
inset 0 0 10px rgba(255,80,80,.15);

width:180px;

text-align:center;
}

/* button */

.letter button{

padding:10px 26px;

border:none;

border-radius:30px;

background:linear-gradient(135deg,#ff9c9c,#ff6f6f);

color:white;

font-weight:500;

cursor:pointer;

transition:.25s;

box-shadow:
0 6px 16px rgba(255,80,80,.35);

}

.letter button:hover{

transform:translateY(-2px);

box-shadow:
0 10px 22px rgba(255,80,80,.5);

}

/* open animation */

.envelope.open .flap{
transform:rotateX(-180deg);
}

/* hearts particles */

.heart{

position:fixed;

font-size:20px;

pointer-events:none;

color:#ff4b4b;

animation:heartBurst 2.5s forwards;

filter:
drop-shadow(0 0 8px rgba(255,60,60,.9));

}

@keyframes heartBurst{

0%{
opacity:1;
transform:translate(0,0) scale(.8);
}

100%{
opacity:0;
transform:translate(var(--x),var(--y)) scale(1.6);
}

}

/* title */

.title{

text-align:center;

font-family:'Cormorant Garamond',serif;

font-size:60px;

}

/* ambient */

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 30%,rgba(255,80,80,.18),transparent 60%),
radial-gradient(circle at 80% 70%,rgba(255,60,60,.18),transparent 60%);
pointer-events:none;
z-index:0;
}

body::after{
content:"";
position:fixed;
inset:0;
background:radial-gradient(circle at center,transparent 55%,rgba(0,0,0,.7) 100%);
pointer-events:none;
z-index:1;
}

.navbar{
padding:14px 24px;
font-family:'Cormorant Garamond',serif;
font-size:22px;
color:#ffb3b3;
background:rgba(0,0,0,.35);
z-index:5;
position:relative;
}

/* wrapper */

.wrapper{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
padding:60px 20px;
z-index:5;
position:relative;
}

.wrapper.blur{
filter:blur(8px);
}

/* card */

.container{

background-image:
radial-gradient(circle at 30% 20%, rgba(255,80,80,.18), transparent 60%),
radial-gradient(circle at 80% 70%, rgba(255,60,60,.15), transparent 60%),
url("background.jpg");

background-size:140%,140%,110%;
background-position:center;

position:relative;
padding:70px 30px;
border-radius:20px;
width:90%;
max-width:360px;

border:1px solid rgba(255,120,120,.4);

box-shadow:
0 0 30px rgba(255,80,80,.35),
0 0 80px rgba(255,60,60,.2);

text-align:center;
overflow:hidden;
}

/* card dark layer */

.container::before{
content:"";
position:absolute;
inset:0;
background:rgba(20,0,0,.6);
border-radius:20px;
pointer-events:none;
}

/* spotlight effect */

.container::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at var(--x,50%) var(--y,50%),
rgba(255,120,120,.18),
transparent 40%
);
pointer-events:none;
}

/* text */

.monthStack{
font-family:'Cormorant Garamond',serif;
position:relative;
z-index:2;
}

.happy{font-size:64px;}

.number{
font-size:100px;
color:#ffdede;

text-shadow:
0 0 10px rgba(255,120,120,.8),
0 0 30px rgba(255,90,90,.8),
0 0 70px rgba(255,60,60,1);

animation:numberGlow 3s infinite alternate;
}

@keyframes numberGlow{
0%{text-shadow:0 0 10px rgba(255,120,120,.6)}
100%{text-shadow:0 0 90px rgba(255,80,80,1)}
}

.months{font-size:64px;}
.with{font-size:32px;}

.hearts{
margin-top:10px;
font-size:22px;
letter-spacing:4px;
animation:heartbeat 1.6s infinite;
}

@keyframes heartbeat{
0%{transform:scale(1)}
30%{transform:scale(1.2)}
60%{transform:scale(.9)}
100%{transform:scale(1)}
}

.counter{
margin-top:20px;
font-size:15px;
color:#ffbaba;
position:relative;
z-index:2;
}

/* button */

.secretBtn{
margin-top:25px;
padding:12px 26px;
border:none;
border-radius:30px;
background:linear-gradient(135deg,#ff9c9c,#ff6f6f);
font-weight:600;
cursor:pointer;
position:relative;
z-index:2;
transition:.25s;
}

.secretBtn:hover{
transform:translateY(-2px);
box-shadow:0 5px 14px rgba(255,80,80,.5);
}

/* stories title */

.storiesTitle{
font-family:'Cormorant Garamond',serif;
font-size:26px;
color:#ffbaba;
margin-top:10px;
letter-spacing:1px;
}

/* gallery */

.memorySection{

max-width:440px;
width:100%;

display:grid;
grid-template-columns:repeat(3,1fr);

gap:20px;
padding:20px;

background:rgba(30,0,0,.35);

border-radius:18px;

box-shadow:0 0 25px rgba(255,80,80,.25);

transform-style:preserve-3d;
}

.memory{
perspective:1000px;
}

.memory img{

width:100%;
aspect-ratio:1/1;
object-fit:cover;

border-radius:12px;

box-shadow:
0 10px 20px rgba(0,0,0,.35),
0 0 15px rgba(255,90,90,.25);

cursor:pointer;

transform-style:preserve-3d;
will-change:transform;
transition:transform .2s ease;
}

/* particles */

.particle{
position:fixed;
width:5px;
height:5px;
border-radius:50%;
pointer-events:none;
z-index:30;

box-shadow:
0 0 6px rgba(255,120,120,.8),
0 0 14px rgba(255,80,80,.6);
}

/* floating hearts */

.heart{
position:fixed;
bottom:-20px;
color:#ff4b4b;
pointer-events:none;
z-index:30;

animation:floatUp linear forwards;

filter:
drop-shadow(0 0 6px rgba(255,80,80,.8))
drop-shadow(0 0 12px rgba(255,60,60,.6));
}

@keyframes floatUp{

0%{
transform:translateX(0) translateY(0) scale(.8);
opacity:0;
}

20%{opacity:1;}

100%{
transform:translateX(var(--drift,0px)) translateY(-110vh) scale(1.4);
opacity:0;
}

}

/* love burst */

.loveBurst{
position:fixed;
pointer-events:none;
color:#ff3b3b;
font-size:22px;
z-index:40;

animation:loveBurstAnim 2.8s ease forwards;

filter:
drop-shadow(0 0 8px rgba(255,70,70,.9))
drop-shadow(0 0 16px rgba(255,40,40,.7));
}

@keyframes loveBurstAnim{

0%{
transform:translate(0,0) scale(.6);
opacity:1;
}

100%{
transform:translate(var(--x),var(--y)) scale(1.6);
opacity:0;
}

}

/* photo viewer */

.photoViewer{
position:fixed;
inset:0;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:.3s;
z-index:50;
}

.photoViewer.active{
opacity:1;
pointer-events:auto;
}

.photoViewer img{
max-width:90%;
max-height:90%;
border-radius:16px;
}

/* viewer buttons */

.viewerBtn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:none;
border:none;
color:white;
font-size:40px;
cursor:pointer;
}

#prevBtn{left:20px;}
#nextBtn{right:20px;}

/* modal */

.modalOverlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(10px);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:60;
}

.modalOverlay.active{
opacity:1;
pointer-events:auto;
}

.modalOverlay.active .modalBox{
opacity:1;
transform:scale(1);
}

.modalBox{
background:#200000;
padding:35px;
border-radius:18px;
text-align:center;
font-family:'Cormorant Garamond',serif;
box-shadow:0 0 40px rgba(255,80,80,.4);
transform:scale(.8);
opacity:0;
transition:.4s cubic-bezier(.2,.8,.2,1);
}

.modalBox button{
margin-top:15px;
padding:12px 26px;
border:none;
border-radius:30px;
background:linear-gradient(135deg,#ff9c9c,#ff6f6f);
color:white;
cursor:pointer;
}

/* music player */

.musicPlayer{
position:fixed;
bottom:20px;
right:20px;
background:#200000;
border-radius:50px;
padding:10px 16px;
display:flex;
align-items:center;
gap:10px;
box-shadow:0 0 20px rgba(255,80,80,.4);
z-index:40;
}

.musicPlayer span{
font-size:13px;
color:#ffbaba;
}

.musicPlayer button{
border:none;
background:none;
color:#ffbaba;
font-size:20px;
cursor:pointer;
}

.musicPlayer.playing{
box-shadow:
0 0 20px rgba(255,80,80,.8),
0 0 40px rgba(255,60,60,.6);
}

/* footer */

.footer{
text-align:center;
padding:80px 18px;
font-size:12px;
color:#ff9a9a;
}