/*======================================================
BELIS'S COCOON
Fairycore • Neocities • Björk Inspired
======================================================*/


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

:root{

    --pink:#F7C8DD;
    --rose:#F2AFC9;
    --cream:#FFF8F2;
    --white:#FFFFFF;
    --sage:#D9E5D1;
    --green:#BFD2B4;
    --text:#5D5459;

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

    --radius:22px;

}


/*=========================
RESET
=========================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


/*=========================
BODY
=========================*/

body{

    background:
    linear-gradient(rgba(255,255,255,.08),
    rgba(255,255,255,.08)),
    url("background.jpg");
    
    

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    color:var(--text);

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

    min-height:100vh;

    padding:45px;

    overflow-x:hidden;

}


/*=========================
CURSOR
=========================*/

body,
*{

cursor:url("cursor.png") 8 8,auto;

}


/*=========================
SPARKLES LAYER
=========================*/

.sparkles{

position:fixed;

inset:0;

pointer-events:none;

z-index:-1;

}


/*=========================
LINKS
=========================*/

a{

text-decoration:none;

color:inherit;

transition:.3s;

}


/*=========================
IMAGES
=========================*/

img{

max-width:100%;

display:block;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#F3BFD5;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#FFF7FA;

}

/*======================================================
HEADER
======================================================*/

.hero{

    max-width:1200px;

    margin:0 auto 60px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

}


/*=========================
LOGO
=========================*/

.hero h1{

    font-family:"Ingrid Darling", cursive;

    font-size:clamp(5rem,11vw,9rem);

    color:#FFD3E6;

    font-weight:400;

    line-height:.8;

    letter-spacing:2px;

    text-align:center;

    text-shadow:
        0 0 12px rgba(255,255,255,.45),
        0 0 30px rgba(255,180,220,.30);

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

}


/*=========================
SUBTITLE
=========================*/

.subtitle{

    font-family:"Cormorant Garamond", serif;

    font-size:1.5rem;

    font-style:italic;

    color:#FFF8FC;

    letter-spacing:1px;

    text-align:center;

    max-width:700px;

}


/*=========================
SOCIAL BAR
=========================*/

.social-bar{

    display:flex;

    gap:18px;

    margin-top:15px;

    padding:12px 22px;

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

    backdrop-filter:blur(12px);

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

    border-radius:50px;

    box-shadow:var(--shadow);

}


/*=========================
SOCIAL ICONS
=========================*/

.social-bar a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#705A63;

    font-size:1.2rem;

    transition:.35s;

}

.social-bar a:hover{

    background:#F8D3E4;

    color:#ffffff;

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

}


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

@keyframes floatLogo{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*======================================================
DASHBOARD
======================================================*/

.dashboard{

    max-width:1400px;

    margin:60px auto;

    display:grid;

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

    grid-auto-rows:170px;

    gap:24px;

}


/*======================================================
WIDGET BASE
======================================================*/

.widget{

    background:rgba(255,251,248,.88);

    backdrop-filter:blur(12px);

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

    border-radius:var(--radius);

    padding:22px;

    box-shadow:var(--shadow);

    transition:
    transform .35s,
    box-shadow .35s;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;

    position:relative;

}


/* Hover */

.widget:hover{

    transform:translateY(-8px);

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

}


/*======================================================
TÍTULOS DE WIDGET
======================================================*/

.widget h3{

    font-family:"Schoolbell",cursive;

    font-size:1.6rem;

    color:#8E6A77;

    margin-bottom:12px;

}


/*======================================================
TEXTOS
======================================================*/

.widget p{

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

    font-size:.98rem;

    line-height:1.7;

    color:#5D5459;

}


/*======================================================
BOTONES
======================================================*/

.widget-button{

    align-self:flex-start;

    margin-top:18px;

    padding:8px 18px;

    border-radius:50px;

    background:#F8D3E4;

    color:#6A5960;

    font-size:.9rem;

    transition:.3s;

}

.widget-button:hover{

    background:#EBC1D6;

    transform:translateX(4px);

}


/*======================================================
GRID LAYOUT
======================================================*/


.about{

    grid-column:span 4;

    grid-row:span 2;

}


.music-player{

    grid-column:span 8;

    grid-row:span 2;

}


.university{

    grid-column:span 3;

}


.music{

    grid-column:span 3;

}


.reading{

    grid-column:span 3;

}


.current-book{

    grid-column:span 3;

}


.journal{

    grid-column:span 6;

    grid-row:span 2;

}


.psychology{

    grid-column:span 3;

}


.films{

    grid-column:span 3;

}


.law{

    grid-column:span 3;

}


.poetry{

    grid-column:span 3;

}


.quote{

    grid-column:span 6;

}


.mood{

    grid-column:span 3;

}


.garden{

    grid-column:span 3;

}


.guestbook{

    grid-column:span 12;

}

/*======================================================
UNIVERSITY
======================================================*/

.university{

    background:
    linear-gradient(rgba(255,255,255,.65),
    rgba(255,255,255,.65)),
    #FDF8F4;

    border-left:10px solid #E9C8D7;

}

.university::after{

    content:"🎓";

    position:absolute;

    right:20px;

    bottom:15px;

    font-size:2.4rem;

}


/*======================================================
MUSIC
======================================================*/

.music{

    background:
    linear-gradient(rgba(255,255,255,.55),
    rgba(255,255,255,.55)),
    #FFF7FA;

}

.music::after{

    content:"🎧";

    position:absolute;

    right:18px;

    bottom:14px;

    font-size:2.3rem;

}


/*======================================================
READING
======================================================*/

.reading{

    background:#F9F1E8;

    border-left:12px solid #B68C6D;

}

.reading::before{

    content:"";

    position:absolute;

    left:16px;

    top:0;

    bottom:0;

    width:2px;

    background:rgba(120,90,70,.2);

}

.reading::after{

    content:"📖";

    position:absolute;

    right:18px;

    bottom:14px;

    font-size:2.2rem;

}


/*======================================================
CURRENT BOOK
======================================================*/

.current-book{

    background:#FFF9F4;

}

.current-book h4{

    font-family:"Cormorant Garamond",serif;

    font-size:1.8rem;

    color:#7D5F68;

}


/*======================================================
JOURNAL
======================================================*/

.journal{

    background:#FFFDF9;

    border:2px dashed #E6C6D3;

}

.journal::before{

    content:"📓";

    position:absolute;

    top:18px;

    right:18px;

    font-size:2rem;

}


/*======================================================
PSYCHOLOGY
======================================================*/

.psychology{

    background:#F5FBF3;

}

.psychology::after{

    content:"🦋";

    position:absolute;

    right:20px;

    bottom:18px;

    font-size:2.2rem;

}


/*======================================================
FILMS
======================================================*/

.films{

    background:#FFF5EE;

}

.films::after{

    content:"🎬";

    position:absolute;

    right:18px;

    bottom:15px;

    font-size:2.3rem;

}


/*======================================================
LAW
======================================================*/

.law{

    background:#FAF6F3;

    border-left:10px solid #C8B19B;

}

.law::after{

    content:"⚖";

    position:absolute;

    right:18px;

    bottom:15px;

    font-size:2.2rem;

}


/*======================================================
POETRY
======================================================*/

.poetry{

    background:#FFF8F7;

}

.poetry::after{

    content:"🖋";

    position:absolute;

    right:18px;

    bottom:15px;

    font-size:2rem;

}


/*======================================================
QUOTE
======================================================*/

.quote{

    background:#FFFDFB;

}

.quote blockquote{

    font-family:"Cormorant Garamond",serif;

    font-size:1.8rem;

    font-style:italic;

    color:#80636D;

}


/*======================================================
MOOD
======================================================*/

.mood{

    background:#F4FAF2;

}


/*======================================================
LITTLE GARDEN
======================================================*/

.garden{

    background:#F8FFF6;

}

.garden::after{

    content:"🌷";

    position:absolute;

    right:18px;

    bottom:18px;

    font-size:2.2rem;

}


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

.guestbook{

    background:#FFF9FB;

    text-align:center;

}

.guestbook::before{

    content:"💌";

    display:block;

    font-size:2.8rem;

    margin-bottom:10px;

}


/*======================================================
FLOATING DECORATIONS
======================================================*/

.sparkles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:9999;

}

.floating-item{

    position:fixed;

    top:-60px;

    opacity:.85;

    user-select:none;

    animation:fall linear forwards;

    filter:drop-shadow(0 0 10px rgba(255,255,255,.35));

}

@keyframes fall{

    0%{

        transform:
        translateY(-80px)
        translateX(0px)
        rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        transform:
        translateY(50vh)
        translateX(25px)
        rotate(180deg);

    }

    100%{

        transform:
        translateY(110vh)
        translateX(-30px)
        rotate(360deg);

        opacity:0;

    }

}

/*======================================================
NOW PLAYING - VINTAGE PLAYER
======================================================*/

.music-player{

    background:rgba(255,248,249,.88);

    backdrop-filter:blur(10px);
    
    background:url("background.jpg");
    

    border:2px solid rgba(255,220,230,.8);

    border-radius:26px;

    padding:25px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.18),
    inset 0 0 20px rgba(255,255,255,.45);

    overflow:hidden;

    position:relative;

}

/* Barra superior */

.player-header{

    display:flex;

    align-items:center;

    gap:12px;

    background:linear-gradient(90deg,#ffd8ea,#ffeef6);

    padding:12px 18px;

    border-radius:18px;

    font-family:'Schoolbell',cursive;

    font-size:1.25rem;

    color:#8d6475;

    margin-bottom:22px;

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

}

.led{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#76d66e;

    box-shadow:0 0 10px #76d66e;

}

/*======================================================
CONTENIDO
======================================================*/

.player-content{

    display:flex;

    align-items:center;

    gap:35px;

    margin-bottom:25px;

}
.album-container{

    position:relative;

    width:220px;

    height:180px;

    flex-shrink:0;

    display:flex;

    align-items:center;

}

.album-container::after{

    content:"";

    position:absolute;

    width:92px;

    height:5px;

    background:linear-gradient(to right,#d9d9d9,#8d8d8d);

    border-radius:20px;

    top:15px;

    right:-5px;

    transform-origin:left center;

    transform:rotate(32deg);

    transition:.5s;

    z-index:5;

}

.music-player:hover .album-container::after{

    transform:rotate(12deg);

}


/* Disco */

.vinyl{

    position:absolute;

    width:150px;

    height:150px;

    right:0;

    border-radius:50%;

    background:
    radial-gradient(circle,#5a5a5a 0%,#1b1b1b 18%,#050505 55%,#000 100%);

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

    z-index:1;

}

.vinyl::before{

    content:"";

    position:absolute;

    inset:18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.08);

}

.vinyl::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    background:#d8d8d8;

    border-radius:50%;

    top:50%;

    left:50%;

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

}

/* Portada */

.album-cover{

    position:absolute;

    left:0;

    width:145px;

    height:145px;

    object-fit:cover;

    border-radius:14px;

    box-shadow:

    0 12px 30px rgba(0,0,0,.28);

    z-index:2;

    transition:.5s;

}

/* Hover */

.music-player:hover .vinyl{

    animation:spinRecord 3s linear infinite;

    transform:translateX(38px);

}

.music-player:hover .album-cover{

    transform:translateY(-4px);

}

/*======================================================
TEXTOS
======================================================*/

.song-info{

    flex:1;

    text-align:left;

}

.song-info h3{

    margin:0;

    font-family:'Schoolbell',cursive;

    color:#8c6476;

    font-size:2rem;

}

.song-info h4{

    margin:8px 0;

    font-weight:600;

    color:#a58090;

}

.song-info p{

    margin-top:10px;

    color:#7d6c74;

    line-height:1.6;

}

/*======================================================
PROGRESS
======================================================*/

.progress-bar{

    width:100%;

    height:8px;

    background:#f1d9e5;

    border-radius:20px;

    margin:22px 0;

    overflow:hidden;

}

.progress{

    width:45%;

    height:100%;

    background:linear-gradient(90deg,#ff8fc4,#ffbfdc);

    border-radius:20px;

}

/*======================================================
BOTONES
======================================================*/

.controls{

    display:flex;

    gap:28px;

    font-size:1.6rem;

    color:#c67b9b;

}

.controls i{

    transition:.3s;

    cursor:pointer;

}

.controls i:hover{

    transform:scale(1.2);

    color:#ff6fae;

}

/*======================================================
SPOTIFY
======================================================*/

.music-player iframe{

    margin-top:10px;

    border:none;

    border-radius:18px;

}

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

@media(max-width:850px){

.player-content{

    flex-direction:column;

    text-align:center;

}

.song-info{

    text-align:center;

}

.album-container{

    margin:auto;

}

}

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

@keyframes spinRecord{

    from{
        transform:translateX(55px) rotate(0deg);
    }

    to{
        transform:translateX(55px) rotate(360deg);
    }

}

.music-player:hover .vinyl{

    animation:spinRecord 4s linear infinite;

}

/*======================================================
NEEDLE
======================================================*/

.album-container::after{

    content:"";

    position:absolute;

    width:90px;

    height:6px;

    background:#c9c9c9;

    border-radius:8px;

    top:12px;

    right:-30px;

    transform:rotate(28deg);

    transform-origin:left center;

    box-shadow:0 0 6px rgba(0,0,0,.2);

}

.music-player:hover .album-container::after{

    transform:rotate(15deg);

    transition:.6s;

}

/*======================================================
FLOATING NOTES
======================================================*/

.note{

    position:absolute;

    color:#ff8db8;

    font-size:18px;

    pointer-events:none;

    animation:musicFloat 4s linear forwards;

    opacity:.9;

}

@keyframes musicFloat{

    0%{

        transform:translateY(0) scale(.6);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        transform:translateY(-120px) translateX(30px) rotate(25deg);

        opacity:0;

    }

}