/*======================================
        FRIENDS.CSS
======================================*/

/* ---------- PALETA ---------- */

:root{

    --pink:#f8d9e3;
    --pink2:#f3bfd0;
    --pink3:#ffeaf1;

    --green:#8ca96b;

    --cream:#fffdf9;

    --red:#b64263;

    --shadow:rgba(0,0,0,.15);

}

/* ---------- BODY ---------- */

body{

    margin:0;

    font-family:'Quicksand',sans-serif;

    background:url("images/backgrounds/paper.jpg");

    background-size:400px;

    background-attachment:fixed;

    color:#5e4a4a;

    overflow-x:hidden;

}

/*========== SCROLLBAR ==========*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#f7d8e5;

}

::-webkit-scrollbar-thumb{

    background:#d98da8;

    border-radius:30px;

}

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

.friends-hero{

    width:min(1200px,90%);

    margin:90px auto;

    text-align:center;

    position:relative;

}

.hero-mini{

    font-family:'Caveat',cursive;

    font-size:34px;

    color:var(--green);

    margin-bottom:10px;

}

.friends-hero h1{

    font-size:95px;

    color:var(--red);

    margin:0;

    letter-spacing:8px;

    animation:glow 4s infinite;

}

.hero-description{

    font-size:22px;

    margin:20px auto 45px;

    line-height:1.8;

    max-width:500px;

}

/*========== POLAROID ==========*/

.hero-polaroid{

    width:420px;

    background:white;

    margin:auto;

    padding:12px 12px 45px;

    border-radius:10px;

    box-shadow:0 18px 35px var(--shadow);

    transform:rotate(-3deg);

    transition:.4s;

    position:relative;

}

.hero-polaroid:hover{

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

}

.hero-polaroid img{

    width:100%;

    border-radius:6px;

    display:block;

}

.hero-polaroid p{

    margin-top:15px;

    font-family:'Caveat',cursive;

    font-size:34px;

}

.tape{

    position:absolute;

    width:95px;

    height:24px;

    background:rgba(255,245,245,.9);

    top:-10px;

}

.tape-left{

    left:25px;

    transform:rotate(-12deg);

}

.tape-right{

    right:25px;

    transform:rotate(12deg);

}

/*========== TITLES ==========*/

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading span{

    font-size:35px;

}

.section-heading h2{

    font-size:60px;

    margin:15px;

    color:var(--red);

}

.section-heading p{

    font-size:18px;

    color:#8a7272;

}

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

.scrapbook-gallery{

    width:min(1450px,95%);

    margin:auto;

    display:grid;

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

    grid-auto-rows:70px;

    gap:25px;

}

/*========== PHOTOS ==========*/

.photo{

    position:relative;

    background:white;

    padding:10px 10px 35px;

    border-radius:8px;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    transition:.35s;

}

.photo:hover{

    transform:translateY(-10px) scale(1.03);

}

.photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:5px;

}

/* tamaños */

.large{

    grid-column:span 4;

    grid-row:span 6;

}

.tall{

    grid-column:span 3;

    grid-row:span 7;

}

.square{

    grid-column:span 3;

    grid-row:span 4;

}

.wide{

    grid-column:span 5;

    grid-row:span 4;

}

/*========== ROTACIONES ==========*/

.rotate-left{

    transform:rotate(-3deg);

}

.rotate-right{

    transform:rotate(3deg);

}

.rotate-left:hover,

.rotate-right:hover{

    transform:scale(1.05);

}

/*========== LIKE ==========*/

.like-btn{

    position:absolute;

    top:15px;

    right:15px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    color:#d45478;

    cursor:pointer;

    font-size:20px;

    transition:.3s;

    box-shadow:0 4px 10px rgba(0,0,0,.12);

}

.like-btn:hover{

    background:#f7bfd0;

    color:white;

    transform:scale(1.15);

}

/*======================================
        STICKY NOTES
======================================*/

.sticky-note{

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

    font-family:'Caveat',cursive;
    font-size:32px;

    padding:20px;

    border-radius:10px;

    box-shadow:0 10px 20px rgba(0,0,0,.12);

    transform:rotate(-4deg);

    transition:.35s;

    line-height:1.3;

}

.sticky-note:hover{

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

}

.pink{

    background:#ffd8e7;

}

.yellow{

    background:#fff4b7;

}

/*======================================
        FIGCAPTION
======================================*/

.photo figcaption{

    text-align:center;

    margin-top:12px;

    font-family:'Caveat',cursive;

    font-size:28px;

    color:#6f5b5b;

}

/*======================================
        PLAYLIST
======================================*/

.playlist-section{

    width:min(1200px,90%);

    margin:170px auto;

}

.vinyl-layout{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:90px;

    flex-wrap:wrap;

}

/*======================================
        VINYL
======================================*/

.record-player{

    width:330px;

    height:330px;

    border-radius:50%;

    background:#f5d0dd;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.record{

    width:240px;

    height:240px;

    border-radius:50%;

    background:
    radial-gradient(circle,#444 0%,#111 45%,#222 75%,#000 100%);

    animation:spin 8s linear infinite;

}

.record-center{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#d98ca8;

    border:8px solid white;

    position:absolute;

    left:50%;
    top:50%;

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

}

.player-arm{

    width:130px;

    height:6px;

    background:#b7b7b7;

    position:absolute;

    right:15px;

    top:80px;

    transform:rotate(30deg);

    border-radius:30px;

}

/*======================================
        PLAYLIST BUTTONS
======================================*/

.playlist-box{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.song{

    padding:15px 25px;

    border:none;

    border-radius:15px;

    background:white;

    cursor:pointer;

    font-family:'Quicksand',sans-serif;

    font-size:17px;

    transition:.3s;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

}

.song:hover{

    transform:translateX(10px);

}

.song.active{

    background:#f3bfd0;

    color:white;

}

#audio-player{

    display:block;

    margin:45px auto;

}

/*======================================
        MEMORY BOOK
======================================*/

.memory-book{

    width:min(1200px,90%);
    margin:180px auto;

}

.book-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}

.page{

    background:#fffdf9;

    padding:35px;

    min-height:260px;

    border-radius:18px;

    border:2px solid #f2d9e2;

    position:relative;

    transition:.35s;

    box-shadow:12px 12px 0 #f4d8e3;

}

.page:hover{

    transform:rotate(-2deg) translateY(-8px);

}

.page::before{

    content:"";

    position:absolute;

    left:20px;
    right:20px;
    top:20px;
    bottom:20px;

    border:1px dashed #f0c3d3;

    border-radius:10px;

    pointer-events:none;

}

.page h3{

    color:#b64263;

    margin-bottom:20px;

}

.page p{

    line-height:1.8;

}

/*======================================
        PASSPORT
======================================*/

.passport-section{

    width:min(1100px,90%);
    margin:180px auto;

}

.passport-card{

    display:flex;

    gap:50px;

    flex-wrap:wrap;

    align-items:center;

    background:white;

    border-radius:25px;

    padding:35px;

    box-shadow:0 15px 30px rgba(0,0,0,.12);

}

.passport-photo{

    position:relative;

}

.passport-photo img:first-child{

    width:230px;

    height:300px;

    object-fit:cover;

    border-radius:15px;

}

.sticker{

    position:absolute;

    width:55px;

}

.sticker1{

    top:-15px;

    left:-15px;

}

.sticker2{

    right:-15px;

    bottom:-15px;

}

.passport-info{

    flex:1;

}

.passport-info h3{

    margin-top:22px;

    color:#b64263;

}

.passport-info p{

    line-height:1.7;

}

/*======================================
        GUESTBOOK
======================================*/

.guestbook{

    width:min(1200px,90%);
    margin:180px auto;

}

.guestbook-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}

.envelope{

    position:relative;

    background:#ffdce8;

    height:210px;

    border-radius:12px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 12px 22px rgba(0,0,0,.15);

}

.envelope:hover{

    transform:translateY(-8px);

}

.envelope-top{

    position:absolute;

    width:100%;
    height:90px;

    background:#f6bfd1;

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

}

.letter{

    position:absolute;

    left:18px;
    right:18px;
    bottom:18px;
    top:48px;

    background:white;

    border-radius:8px;

    padding:15px;

    overflow:auto;

}

.envelope.open .letter{

    transform:translateY(-35px);

    transition:.4s;

}

/*======================================
        LIGHTBOX
======================================*/

.lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.lightbox img{

    max-width:85vw;

    max-height:85vh;

    border-radius:15px;

    box-shadow:0 20px 45px rgba(0,0,0,.5);

}

.close{

    position:absolute;

    right:35px;

    top:25px;

    color:white;

    font-size:45px;

    cursor:pointer;

}


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

.footer{

    text-align:center;

    padding:90px 20px 70px;

}

.footer-stars{

    font-size:28px;

    color:#f3a6c3;

    margin-bottom:15px;

    letter-spacing:10px;

}

.footer h2{

    font-size:55px;

    color:#b64263;

    margin-bottom:15px;

}

.footer p{

    font-size:18px;

    line-height:1.8;

}

.copyright{

    margin-top:35px;

    font-size:15px;

    opacity:.7;

}

/*======================================
        FLOATING STARS
======================================*/

.floating-stars{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:5;

}

.floating-stars span{

    position:absolute;

    color:#ffd7e6;

    animation:floatStar 8s infinite ease-in-out;

    font-size:28px;

}

.floating-stars span:nth-child(1){

    top:8%;
    left:10%;

}

.floating-stars span:nth-child(2){

    top:18%;
    right:12%;

}

.floating-stars span:nth-child(3){

    top:55%;
    left:6%;

}

.floating-stars span:nth-child(4){

    bottom:15%;
    right:10%;

}

.floating-stars span:nth-child(5){

    bottom:8%;
    left:45%;

}

/*======================================
        ANIMATIONS
======================================*/

@keyframes glow{

0%{

text-shadow:0 0 8px white;

}

50%{

text-shadow:
0 0 18px white,
0 0 35px #ffc8dc,
0 0 55px #ffdfea;

}

100%{

text-shadow:0 0 8px white;

}

}

@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes floatStar{

0%{

transform:translateY(0px);

opacity:.6;

}

50%{

transform:translateY(-18px);

opacity:1;

}

100%{

transform:translateY(0px);

opacity:.6;

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes heartbeat{

0%{

transform:scale(1);

}

25%{

transform:scale(1.15);

}

50%{

transform:scale(1);

}

75%{

transform:scale(1.1);

}

100%{

transform:scale(1);

}

}

/*======================================
        SCROLL EFFECTS
======================================*/

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.show{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:1100px){

.scrapbook-gallery{

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

}

.large{

grid-column:span 3;

}

.wide{

grid-column:span 3;

}

.tall{

grid-column:span 2;

}

.square{

grid-column:span 2;

}

}

@media(max-width:800px){

.friends-hero h1{

font-size:65px;

}

.hero-polaroid{

width:300px;

}

.vinyl-layout{

flex-direction:column;

gap:40px;

}

.passport-card{

flex-direction:column;

text-align:center;

}

.book-container{

grid-template-columns:1fr;

}

.guestbook-grid{

grid-template-columns:1fr;

}

.scrapbook-gallery{

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

grid-auto-rows:180px;

}

.large,
.tall,
.square,
.wide{

grid-column:span 2;

grid-row:span 1;

}

}

@media(max-width:500px){

.friends-hero{

margin-top:40px;

}

.friends-hero h1{

font-size:48px;

letter-spacing:3px;

}

.hero-description{

font-size:17px;

}

.section-heading h2{

font-size:40px;

}

.hero-polaroid{

width:250px;

}

.like-btn{

width:36px;

height:36px;

font-size:18px;

}

}

/*========================

SCRAPBOOK DETAILS

=========================*/

.photo{

overflow:visible;

}

.photo .sticker{

position:absolute;

width:55px;

pointer-events:none;

animation:floatSticker 5s ease-in-out infinite;

}

.flower{

top:-20px;

right:-15px;

}

.star{

bottom:-15px;

left:-20px;

}

.bow{

top:45%;

left:-20px;

}


@keyframes floatSticker{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}


.photo:hover{

transform:

translateY(-12px)

rotate(1deg)

scale(1.04);

box-shadow:

0 25px 45px rgba(0,0,0,.18);

}

/*======================================

CUSTOM CURSOR

======================================*/

body{

cursor:none;

}

#cursor{

position:fixed;

width:18px;

height:18px;

border-radius:50%;

background:#f8a7c2;

pointer-events:none;

z-index:99999;

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

box-shadow:
0 0 15px #ffd3e3,
0 0 25px #ffd3e3;

transition:
transform .12s;

}

.cursor-particle{

position:fixed;

pointer-events:none;

font-size:18px;

z-index:99998;

animation:particleFade .9s linear forwards;

}

@keyframes particleFade{

0%{

opacity:1;

transform:
translateY(0px)
scale(1);

}

100%{

opacity:0;

transform:
translateY(-25px)
scale(.3);

}

}

button:hover,
a:hover{

cursor:none;

}

button:hover~#cursor{

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

}


/*=============================

BOOK

=============================*/

.book{

width:700px;

max-width:90%;

margin:auto;

position:relative;

height:500px;

}

.page{

position:absolute;

width:100%;

height:100%;

background:#fffdf8;

padding:35px;

border-radius:20px;

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

display:none;

animation:pageAppear .5s;

}

.page.active{

display:block;

}

.page img{

width:100%;

height:250px;

object-fit:cover;

border-radius:15px;

margin:20px 0;

}

.page h3{

color:#b64263;

font-size:35px;

}

.page p{

line-height:1.8;

font-size:18px;

}

.book-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

}

.book-buttons button{

padding:12px 28px;

border:none;

border-radius:15px;

background:#f6bfd1;

font-size:17px;

cursor:pointer;

transition:.3s;

}

.book-buttons button:hover{

background:#e89db8;

color:white;

}

@keyframes pageAppear{

from{

opacity:0;

transform:rotateY(-20deg);

}

to{

opacity:1;

transform:rotateY(0);

}

}

/*==============================

GUESTBOOK

==============================*/

.letters-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:40px;

margin-top:60px;

}

.envelope{

position:relative;

height:220px;

background:#ffd6e6;

border-radius:12px;

cursor:pointer;

transition:.4s;

box-shadow:0 12px 25px rgba(0,0,0,.15);

overflow:hidden;

}

.envelope:hover{

transform:translateY(-10px);

}

.flap{

position:absolute;

width:100%;

height:100px;

background:#f7bfd3;

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

transition:.5s;

z-index:2;

}

.letter{

position:absolute;

left:18px;

right:18px;

bottom:18px;

height:150px;

background:white;

border-radius:10px;

padding:18px;

transition:.5s;

z-index:1;

}

.envelope.open .flap{

transform:rotateX(180deg);

transform-origin:top;


}

.envelope.open .letter{

transform:translateY(-40px);

}

.letter h3{

color:#b64263;

margin-bottom:10px;

}

.letter p{

line-height:1.7;

font-size:16px;

}

/*========================

FALLING FLOWERS

=========================*/

.falling-flowers{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

z-index:2;

}

.falling-flowers span{

position:absolute;

font-size:28px;

opacity:.75;

animation:flowersFall linear infinite;

}

.falling-flowers span:nth-child(1){

left:5%;

animation-duration:11s;

}

.falling-flowers span:nth-child(2){

left:18%;

animation-duration:14s;

animation-delay:2s;

}

.falling-flowers span:nth-child(3){

left:34%;

animation-duration:12s;

}

.falling-flowers span:nth-child(4){

left:48%;

animation-duration:16s;

}

.falling-flowers span:nth-child(5){

left:65%;

animation-duration:13s;

}

.falling-flowers span:nth-child(6){

left:78%;

animation-duration:15s;

}

.falling-flowers span:nth-child(7){

left:90%;

animation-duration:11s;

}

.falling-flowers span:nth-child(8){

left:55%;

animation-duration:17s;

}

@keyframes flowersFall{

0%{

transform:
translateY(-120px)
rotate(0deg);

}

100%{

transform:
translateY(120vh)
rotate(360deg);

}

}

.sparkles{

position:fixed;

inset:0;

pointer-events:none;

z-index:1;

}

.sparkles span{

position:absolute;

font-size:22px;

color:#fff5d2;

animation:twinkle 2.5s infinite;

}

.sparkles span:nth-child(1){

top:12%;

left:12%;

}

.sparkles span:nth-child(2){

top:25%;

right:18%;

}

.sparkles span:nth-child(3){

top:60%;

left:8%;

}

.sparkles span:nth-child(4){

bottom:18%;

right:15%;

}

.sparkles span:nth-child(5){

bottom:30%;

left:48%;

}

@keyframes twinkle{

0%{

opacity:.2;

transform:scale(.7);

}

50%{

opacity:1;

transform:scale(1.3);

}

100%{

opacity:.2;

transform:scale(.7);

}

}

.photo::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.55),

transparent

);

transform:translateX(-130%);

transition:.8s;

border-radius:8px;

}

.photo:hover::before{

transform:translateX(130%);

}

.corner-bow{

position:absolute;

width:55px;

top:-18px;

left:-15px;

animation:bounceBow 4s infinite;

}

@keyframes bounceBow{

0%{

transform:rotate(-8deg);

}

50%{

transform:
rotate(8deg)
translateY(-6px);

}

100%{

transform:rotate(-8deg);

}

}