/*=========================
FONTS
=========================*/

@font-face{
    font-family:Persian;
    src:url("fonts/IRNazliBold.ttf");
}

@font-face{
    font-family:English;
    src:url("fonts/English.ttf");
}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Persian;

    background:#120712;

    color:white;

    overflow-x:hidden;

}


/*=========================
BACKGROUND
=========================*/

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top,#ff77c644,transparent 40%),

radial-gradient(circle at bottom,#ff3c8d33,transparent 40%);

filter:blur(120px);

z-index:-2;

}



/*=========================
GLASS
=========================*/

.glass{

background:rgba(255,255,255,.08);

backdrop-filter:blur(25px);

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

box-shadow:

0 0 40px rgba(255,80,160,.15);

}



/*=========================
FLOWERS
=========================*/

.lily{

position:fixed;

pointer-events:none;

opacity:.45;

z-index:-1;

}

.lily1{

top:0;

left:0;

width:220px;

}

.lily2{

top:0;

right:0;

width:220px;

transform:scaleX(-1);

}

.lily3{

bottom:0;

left:0;

width:220px;

transform:scaleY(-1);

}

.lily4{

bottom:0;

right:0;

width:220px;

transform:scale(-1);

}



/*=========================
HERO
=========================*/

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px;

}

.hero-card{

width:100%;

max-width:1100px;

padding:60px;

border-radius:35px;

text-align:center;

}

.hero h1{

font-size:60px;

margin-bottom:15px;

}

.hero p{

font-size:20px;

opacity:.75;

margin-bottom:45px;

}



/*=========================
TIMER
=========================*/

.timer{

display:grid;

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

gap:20px;

margin:auto;

max-width:700px;

}

.box{

padding:30px;

border-radius:25px;

background:rgba(255,255,255,.05);

transition:.35s;

}

.box:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.1);

}

.box h2{

font-family:English;

font-size:55px;

font-weight:bold;

color:#ff97c9;

margin-bottom:10px;

}

.box span{

font-size:17px;

opacity:.8;

}



/*=========================
SECTION TITLE
=========================*/

.section-title{

text-align:center;

font-size:42px;

margin-bottom:60px;

}



/*=========================
LETTER
=========================*/

.letter-section{

padding:120px 30px;

text-align:center;

}

.envelope{

width:300px;

cursor:pointer;

transition:.4s;

filter:drop-shadow(0 0 35px rgba(255,120,190,.4));

}

.envelope:hover{

transform:scale(1.05);

}



/*=========================
LETTER OVERLAY
=========================*/

#overlay{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.88);

backdrop-filter:blur(15px);

z-index:999;

}

#letterBox{

position:relative;

width:90%;

max-width:720px;

animation:letter .7s ease;

}

.paper{

width:100%;

display:block;

}

.letter-content{

position:absolute;

top:12%;

left:11%;

right:11%;

bottom:18%;

overflow:auto;

color:#463131;

font-size:20px;

line-height:2.2;

}

#close{

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

padding:12px 40px;

border:none;

border-radius:40px;

background:#ff6fb2;

color:white;

cursor:pointer;

}



/*=========================
GALLERY
=========================*/

.gallery{

padding:120px 40px;

}

.photos{

display:flex;

justify-content:center;

gap:70px;

flex-wrap:wrap;

}

.photo-card{

width:260px;

text-align:center;

}

.rope{

width:2px;

height:70px;

background:white;

margin:auto;

opacity:.5;

}

.polaroid{

background:white;

padding:12px 12px 45px;

box-shadow:0 18px 30px rgba(0,0,0,.4);

transition:.4s;

}

.photo-card:nth-child(1) .polaroid{

transform:rotate(-5deg);

}

.photo-card:nth-child(2) .polaroid{

transform:rotate(5deg);

}

.photo-card:nth-child(3) .polaroid{

transform:rotate(-3deg);

}

.polaroid:hover{

transform:rotate(0deg) scale(1.05);

}

.polaroid img{

display:block;

width:100%;

height:320px;

object-fit:cover;

}

.photo-card p{

margin-top:25px;

line-height:2;

font-size:18px;

}



/*=========================
FOOTER
=========================*/

footer{

padding:120px 20px;

text-align:center;

font-size:24px;

opacity:.45;

}



/*=========================
ANIMATION
=========================*/

@keyframes letter{

from{

opacity:0;

transform:translateY(80px) scale(.9);

}

to{

opacity:1;

transform:none;

}

}



/*=========================
RESPONSIVE
=========================*/

@media(max-width:900px){

.hero h1{

font-size:42px;

}

.timer{

grid-template-columns:1fr;

max-width:320px;

}

.photos{

gap:50px;

}

.lily{

width:150px!important;

}

}

@media(max-width:600px){

.hero-card{

padding:35px 25px;

}

.section-title{

font-size:32px;

}

.envelope{

width:220px;

}

.polaroid img{

height:260px;

}

.photo-card{

width:220px;

}

footer{

font-size:18px;

}

}