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

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');


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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#0f0f10;

    color:#ece8e1;

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

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{
    display:block;
    width:100%;
}

button{
    font:inherit;
}


/* ==========================================================
        VARIABLES
========================================================== */

:root{

    --bg:#0f0f10;

    --paper:#f8f5ee;

    --paper-dark:#ebe4d8;

    --paper-text:#2d2d2d;

    --muted:#908d86;

    --accent:#8a6945;

    --shadow:
        0 20px 60px rgba(0,0,0,.18);

    --ease:
        cubic-bezier(.22,1,.36,1);

}


/* ==========================================================
        APP
========================================================== */

#app{

    opacity:0;

    visibility:hidden;

    transition:.8s;

}

#app.show{

    opacity:1;

    visibility:visible;

}


/* ==========================================================
        INTRO
========================================================== */

#intro{

    position:fixed;

    inset:0;

    background:
        radial-gradient(
            circle at top,
            #1b1b1d,
            #111111 45%,
            #090909
        );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:40px;

    z-index:9999;

    transition:.8s;

}

#intro.fade-out{

    opacity:0;

    visibility:hidden;

}

.intro-title{

    font-family:"Instrument Serif",serif;

    font-size:clamp(3rem,10vw,4.5rem);

    font-weight:400;

    letter-spacing:.02em;

}

.tap{

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.35em;

    color:var(--muted);

}


/* ==========================================================
        ENVELOPE
========================================================== */

#envelope{

    position:relative;

    width:280px;

    height:180px;

    cursor:pointer;

    perspective:1000px;

    transition:.5s var(--ease);

}

#envelope:hover{

    transform:translateY(-8px);

}


/* back */

.back{

    position:absolute;

    inset:0;

    background:#efe9df;

    border-radius:3px;

    box-shadow:var(--shadow);

}


/* letter */

.letter{

    position:absolute;

    left:50%;

    bottom:8px;

    transform:translateX(-50%);

    width:88%;

    height:88%;

    background:var(--paper);

    display:flex;

    justify-content:center;

    align-items:flex-end;

    padding-bottom:18px;

    border-radius:2px;

    transition:1s var(--ease);

    z-index:1;

}

.letter span{

    font-family:"Cormorant Garamond",serif;

    font-size:1.2rem;

    color:#555;

}


/* bottom fold */

.bottom-fold{

    position:absolute;

    inset:0;

    background:#e3dccf;

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

    z-index:2;

}


/* left */

.left-fold{

    position:absolute;

    inset:0;

    background:#ebe4d8;

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

    z-index:3;

}


/* right */

.right-fold{

    position:absolute;

    inset:0;

    background:#ebe4d8;

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

    z-index:3;

}


/* flap */

.flap{

    position:absolute;

    inset:0;

    background:#f5efe5;

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

    transform-origin:top;

    transition:1s var(--ease);

    z-index:5;

}


/* open animation */

#intro.open .flap{

    transform:rotateX(180deg);

}

#intro.open .letter{

    transform:
        translateX(-50%)
        translateY(-180px);

}


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

#letter-section{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:7rem 1.5rem;

}

.paper{

    width:min(680px,92vw);

    background:var(--paper);

    color:var(--paper-text);

    padding:4rem 3rem;

    border-radius:2px;

    box-shadow:var(--shadow);

    transform:rotate(-.7deg);

    transition:.5s;

}

.paper:hover{

    transform:rotate(0deg);

}

.paper-top{

    text-align:center;

    margin-bottom:3rem;

}

.paper-top span{

    color:#8a8378;

    text-transform:uppercase;

    letter-spacing:.35em;

    font-size:.75rem;

}

#letter-content{

    display:grid;

    gap:1.6rem;

}

#letter-content p{

    font-family:"Cormorant Garamond",serif;

    font-size:1.7rem;

    line-height:1.75;

}

#letter-content p:first-child{

    font-size:2rem;

}

#letter-content p:last-child{

    margin-top:2rem;

    text-align:right;

    color:#666;

}

/* ==========================================================
        STORY
========================================================== */

#story{

    width:min(1200px,95vw);

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:7rem;

    padding:2rem 0 8rem;

}


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

.memory{

    display:flex;

    opacity:0;

    transform:translateY(80px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.memory.show{

    opacity:1;

    transform:translateY(0);

}

.memory:nth-child(odd){

    justify-content:flex-start;

}

.memory:nth-child(even){

    justify-content:flex-end;

}


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

.polaroid{

    width:min(390px,90vw);

    background:#f8f5ee;

    border:1px solid #e8e2d6;

    padding:

        14px
        14px
        58px;

    box-shadow:

        0 10px 25px rgba(0,0,0,.10),

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

    transition:

        transform .5s var(--ease),

        box-shadow .5s var(--ease);

}


/* random-ish rotations */

.memory:nth-child(1) .polaroid{

    transform:rotate(-2.5deg);

}

.memory:nth-child(2) .polaroid{

    transform:rotate(1.6deg);

}

.memory:nth-child(3) .polaroid{

    transform:rotate(-1.1deg);

}

.memory:nth-child(4) .polaroid{

    transform:rotate(2.4deg);

}

.memory:nth-child(5) .polaroid{

    transform:rotate(-1.8deg);

}

.polaroid:hover{

    transform:

        rotate(0deg)

        translateY(-10px)

        scale(1.02);

}


/* ==========================================================
        PHOTO
========================================================== */

.polaroid img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    background:#ddd;

    user-select:none;

    pointer-events:none;

}


/* ==========================================================
        CAPTION
========================================================== */

.polaroid figcaption{

    margin-top:18px;

    display:flex;

    flex-direction:column;

    gap:.6rem;

}

.caption{

    font-family:

        "Cormorant Garamond",

        serif;

    font-size:1.35rem;

    line-height:1.55;

    color:#2c2c2c;

}



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

#timer{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:8rem 1.5rem;

}

#timer h2{

    font-family:

        "Instrument Serif",

        serif;

    font-size:3rem;

    font-weight:400;

}

.date{

    margin-top:1rem;

    color:var(--muted);

    letter-spacing:.25em;

    text-transform:uppercase;

    font-size:.75rem;

}


.timer{

    display:flex;

    gap:4rem;

    margin-top:5rem;

}

.timer div{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.timer span{

    font-family:

        "Instrument Serif",

        serif;

    font-size:4.5rem;

    line-height:1;

}

.timer small{

    margin-top:.8rem;

    color:var(--muted);

    letter-spacing:.25em;

    text-transform:uppercase;

}


/* ==========================================================
        ENDING
========================================================== */

#ending{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:4rem;

}

#ending h2{

    font-family:

        "Instrument Serif",

        serif;

    font-size:clamp(4rem,15vw,7rem);

    font-weight:400;

}

#ending p{

    margin-top:1rem;

    color:var(--muted);

    font-size:1rem;

}

#ending span{

    display:block;

    margin-top:2.5rem;

    color:var(--accent);

}


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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#2d2d2d;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#555;

}


/* ==========================================================
        SELECTION
========================================================== */

::selection{

    background:#d6c3a2;

    color:#111;

}


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

@media (max-width:900px){

    .timer{

        gap:2rem;

    }

    .timer span{

        font-size:3.4rem;

    }

}


@media (max-width:700px){

    .memory{

        justify-content:center !important;

    }

    .polaroid{

        width:92vw;

    }

    .paper{

        padding:

            3rem
            2rem;

    }

    #letter-content p{

        font-size:1.45rem;

    }

    .timer{

        width:100%;

        justify-content:space-around;

        gap:1rem;

    }

    .timer span{

        font-size:2.8rem;

    }

    #timer h2{

        font-size:2.3rem;

    }

    #ending h2{

        font-size:4rem;

    }

}


/* ==========================================================
        LITTLE POLISH
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at top,
            rgba(255,255,255,.02),
            transparent 60%
        );

    z-index:-1;

}