:root{
    --bg1:#ffdde1;
    --bg2:#ee9ca7;
    --card:#fff;
    --accent:#ff5e8a;
    --text:#4a2c2a;
}

/* Body & fonts */
body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:linear-gradient(135deg,var(--bg1),var(--bg2));
    color:var(--text);
    animation:pageFade .8s ease;
}

/* Center cards */
.center{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Titles & text */
.hero-title,
.section-title,
.memories-title{
    font-family:'Dancing Script', cursive;
    letter-spacing:1px;
}

.hero-text,
p{
    font-family:'Playfair Display', serif;
    font-size:1.05rem;
    line-height:1.8;
}

/* Card & letter-card */
.card,.letter-card{
    position:relative;
    background:linear-gradient(180deg,#fff,#fff6f9);
    padding:40px 35px 45px;
    border-radius:25px;
    text-align:center;
    width:min(90%,420px);
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    border:1px solid rgba(255,94,138,.25);
    animation:cardPop 1.2s ease forwards;
}

/* GIF inside letter */
.letter-gif{
    width:120px;
    margin:10px auto;
    border-radius:12px;
    display:block;
}

/* Buttons */
button,.next{
    margin-top:25px;
    padding:12px 28px;
    border:none;
    border-radius:30px;
    background:var(--accent);
    color:#fff;
    font-size:15px;
    cursor:pointer;
    text-decoration:none;
    transition:all .35s ease;
}

button:hover,
.next:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 15px 30px rgba(255,94,138,.45);
}

/* Memories page */
.memories-page{
    min-height:100vh;
    text-align:center;
    overflow:hidden;
    background:linear-gradient(135deg,#ffdde1,#ee9ca7);
}

/* Memories title */
.memories-title{
    margin-top:40px;
    font-size:3rem;
}

/* Sparkles */
.sparkles::before,
.sparkles::after{
    content:'✨';
    position:absolute;
    font-size:20px;
    animation:twinkle 3s infinite ease-in-out;
}

.sparkles::before{
    left:20%;
    top:30%;
}
.sparkles::after{
    left:70%;
    top:60%;
    animation-delay:1.5s;
}

@keyframes twinkle{
    0%,100%{opacity:0}
    50%{opacity:1}
}

/* Hearts */
.hearts span{
    position:fixed;
    bottom:-10vh;
    color:#ff5e8a;
    font-size:18px;
    animation:floatHeart linear infinite;
    opacity:.6;
}

@keyframes floatHeart{
    from{transform:translateY(0) translateX(0) scale(1); opacity:.8;}
    to{transform:translateY(-120vh) translateX(-30px) scale(1.4); opacity:0;}
}

/* Animations */
@keyframes cardPop{
    0%{opacity:0; transform:scale(.9) translateY(40px);}
    100%{opacity:1; transform:scale(1) translateY(0);}
}

@keyframes pageFade{
    from{opacity:0}
    to{opacity:1}
}

/* 3D slider */
.slider-premium{
    position:relative;
    width:220px;
    height:280px;
    margin:80px auto 40px;
    transform-style:preserve-3d;
    cursor:grab;
}

.slider-premium:active{
    cursor:grabbing;
}

.slider-premium span{
    position:absolute;
    inset:0;
    transform:rotateY(calc(var(--i) * var(--angle))) translateZ(var(--radius));
}

.slider-premium img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    transition:transform .35s ease;
}

.slider-premium span:hover img{
    transform:scale(1.12);
    box-shadow:0 25px 60px rgba(255,94,138,.55);
}

/* Fixed next button for memories */
.fixed-next{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
}

/* Mobile responsiveness */
@media (max-width:768px){
    .slider-premium{width:180px;height:240px;margin:60px auto 30px;}
    .memories-title{font-size:2.2rem;margin-top:30px;}
}

@media (max-width:480px){
    .slider-premium{width:160px;height:220px;}
}