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


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

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    overflow-x: hidden;

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

    color: #fff;

    background:
        radial-gradient(
            circle at 20% 20%,
            #5b1833 0%,
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 80%,
            #3a1025 0%,
            transparent 35%
        ),
        #140810;

}


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

.background {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -1;

}


.glow {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .25;

}


.glow-one {

    background: #ff477e;

    top: -180px;

    left: -150px;

}


.glow-two {

    background: #a62c64;

    right: -150px;

    bottom: -180px;

}



/* =====================================================
   ALBUM WRAPPER
===================================================== */

.album-wrapper {

    width: 100%;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding:
        45px
        20px
        80px;

}


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

.album-header {

    text-align: center;

    margin-bottom: 35px;

}


.tiny-title {

    font-size: 10px;

    letter-spacing: 4px;

    color: #f29ab3;

    margin-bottom: 10px;

}


.album-header h1 {

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(45px, 7vw, 75px);

    font-weight: 400;

    color: #fff7fa;

}


.album-header p:last-child {

    margin-top: 5px;

    font-size: 12px;

    color: #cbaeb9;

}



/* =====================================================
   BOOK SCENE
===================================================== */

.book-scene {

    width: 100%;

    max-width: 850px;

    height: 550px;

    display: flex;

    justify-content: center;

    perspective: 2500px;

}


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

.book {

    position: relative;

    width: 700px;

    height: 500px;

    margin-top: 20px;

    transform-style: preserve-3d;

    filter:
        drop-shadow(
            0 30px 45px
            rgba(0,0,0,.55)
        );

}


/* =====================================================
   BOOK COVER
===================================================== */

.book-cover {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border-radius:
        7px
        15px
        15px
        7px;

    transform-origin: left center;

    transform-style: preserve-3d;

    transition:
        transform
        .9s
        cubic-bezier(
            .645,
            .045,
            .355,
            1
        );

}


.front-cover {

    z-index: 100;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #651633,
            #351020
        );

    box-shadow:
        inset
        4px
        0
        0
        rgba(255,255,255,.08);

}


.front-cover.turned {

    transform:
        rotateY(-180deg);

}


/* =====================================================
   BACK COVER
===================================================== */

.back-cover {

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(
            135deg,
            #34101e,
            #180810
        );

}


.cover-inner {

    text-align: center;

    transform:
        translateZ(1px);

}


.cover-inner h2 {

    font-family:
        "Great Vibes",
        cursive;

    font-size: 65px;

    font-weight: 400;

}


.cover-inner p {

    color: #d6aab9;

    letter-spacing: 3px;

    font-size: 11px;

    text-transform: uppercase;

}



/* =====================================================
   COVER CONTENT
===================================================== */

.cover-content {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px;

    text-align: center;

    backface-visibility: hidden;

}


.cover-photo {

    width: 145px;

    height: 145px;

    border-radius: 50%;

    padding: 5px;

    background:
        linear-gradient(
            135deg,
            #ff6f9d,
            #ffc2d2
        );

    margin-bottom: 20px;

}


.cover-photo img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

}


.cover-small {

    font-size: 9px;

    letter-spacing: 5px;

    color: #e8a5b8;

    margin-bottom: 5px;

}


.cover-content h2 {

    font-family:
        "Great Vibes",
        cursive;

    font-size: 70px;

    font-weight: 400;

    line-height: 1;

}


.cover-line {

    width: 60px;

    height: 1px;

    background: #dc7192;

    margin: 18px 0;

}


.cover-content p {

    max-width: 280px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

    color: #d8bdc7;

}


.cover-heart {

    margin-top: 18px;

    font-size: 23px;

    animation:
        heartBeat
        2s
        infinite;

}



/* =====================================================
   PAGE STACK
===================================================== */

.page-stack {

    position: absolute;

    inset: 0;

    z-index: 20;

}


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

.memory-page {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    transform-origin: left center;

    transform-style: preserve-3d;

    transition:
        transform
        .9s
        cubic-bezier(
            .645,
            .045,
            .355,
            1
        );

    cursor: pointer;

}


.memory-page.turned {

    transform:
        rotateY(-180deg);

}


/* =====================================================
   PAGE FRONT
===================================================== */

.page-front {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            #fffdfb,
            #f7e9e5
        );

    color: #421b2b;

    border-radius:
        5px
        14px
        14px
        5px;

    padding:
        30px
        55px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    backface-visibility: hidden;

    box-shadow:
        inset
        -5px
        0
        10px
        rgba(80,20,40,.05);

}


/* =====================================================
   PAGE NUMBER
===================================================== */

.page-number {

    position: absolute;

    top: 20px;

    left: 30px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 16px;

    color: #b87c91;

}


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

.memory-photo {

    width: 65%;

    max-width: 360px;

    height: 260px;

    padding: 8px;

    background: #fff;

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

    transform:
        rotate(-1deg);

    margin-bottom: 20px;

}


.memory-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


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

.memory-caption {

    max-width: 500px;

    text-align: center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(20px, 3vw, 27px);

    line-height: 1.35;

    color: #5a273b;

}


.page-heart {

    margin-top: 14px;

    font-size: 16px;

}



/* =====================================================
   CONTROLS
===================================================== */

.album-controls {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 5px;

}


.control-btn {

    width: 48px;

    height: 48px;

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

    border-radius: 50%;

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

    color: white;

    font-size: 20px;

    cursor: pointer;

    transition: .3s;

}


.control-btn:hover {

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

    transform:
        scale(1.08);

}


.page-counter {

    min-width: 70px;

    text-align: center;

    font-size: 13px;

    color: #d9b6c3;

}


.counter-line {

    margin:
        0
        5px;

    color: #7d5363;

}


.swipe-hint {

    margin-top: 15px;

    font-size: 10px;

    color: #876170;

    letter-spacing: .5px;

}



/* =====================================================
   FINAL MESSAGE
===================================================== */

.final-message {

    width: min(
        700px,
        100%
    );

    text-align: center;

    margin-top: 50px;

    padding: 45px 30px;

    border-radius: 30px;

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

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

    backdrop-filter:
        blur(15px);

    opacity: 0;

    transform:
        translateY(30px);

    pointer-events: none;

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.final-message.visible {

    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;

}


.final-photo {

    width: 160px;

    height: 160px;

    padding: 5px;

    margin:
        0
        auto
        20px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff6c9c,
            #ffd0dc
        );

}


.final-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}


.final-heart {

    font-size: 35px;

    margin-bottom: 15px;

}


.final-message h2 {

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(
            38px,
            6vw,
            60px
        );

    font-weight: 400;

    color: #fff1f5;

}


.final-message p {

    max-width: 550px;

    margin:
        15px
        auto;

    line-height: 1.8;

    color: #c6aab5;

    font-size: 13px;

}


.final-signature {

    margin-top: 20px;

    font-family:
        "Cormorant Garamond",
        serif;

    color: #e49bb2;

    font-size: 20px;

}



/* =====================================================
   REPLAY
===================================================== */

.replay-btn {

    margin-top: 25px;

    padding:
        11px
        20px;

    border-radius: 30px;

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

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

    color: #d8bdc7;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    transition: .3s;

}


.replay-btn:hover {

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

}



/* =====================================================
   FLOATING HEARTS
===================================================== */

.floating-heart {

    position: absolute;

    bottom: -30px;

    opacity: 0;

    animation:
        floatHeart
        linear
        forwards;

}



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

@keyframes heartBeat {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.2);

    }

}


@keyframes floatHeart {

    0% {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: 0;

    }

    10% {

        opacity: .7;

    }

    100% {

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

        opacity: 0;

    }

}



/* =====================================================
   TABLET
===================================================== */

@media (
    max-width: 800px
) {

    .book-scene {

        height: 500px;

    }


    .book {

        width:
            min(
                92vw,
                650px
            );

        height:
            min(
                68vw,
                450px
            );

    }


    .memory-photo {

        width: 60%;

        height: 220px;

    }

}



/* =====================================================
   MOBILE
===================================================== */

@media (
    max-width: 600px
) {


    .album-wrapper {

        padding:
            30px
            12px
            60px;

    }


    .album-header {

        margin-bottom: 15px;

    }


    .album-header h1 {

        font-size: 48px;

    }


    .album-header p:last-child {

        font-size: 10px;

        max-width: 280px;

        margin-left: auto;

        margin-right: auto;

    }


    .book-scene {

        height:
            440px;

        perspective:
            1500px;

    }


    .book {

        width:
            94vw;

        height:
            400px;

        margin-top: 10px;

    }


    .cover-photo {

        width: 105px;

        height: 105px;

        margin-bottom: 15px;

    }


    .cover-content {

        padding: 20px;

    }


    .cover-content h2 {

        font-size: 57px;

    }


    .cover-content p {

        font-size: 15px;

        max-width: 220px;

    }


    .page-front {

        padding:
            25px
            25px;

    }


    .memory-photo {

        width: 82%;

        height: 190px;

        margin-bottom: 18px;

    }


    .memory-caption {

        font-size: 20px;

        max-width: 300px;

    }


    .page-number {

        top: 15px;

        left: 20px;

    }


    .album-controls {

        margin-top: 0;

        gap: 18px;

    }


    .control-btn {

        width: 43px;

        height: 43px;

    }


    .swipe-hint {

        font-size: 9px;

    }


    .final-message {

        margin-top: 35px;

        padding:
            35px
            20px;

    }


    .final-photo {

        width: 130px;

        height: 130px;

    }

}



/* =====================================================
   SMALL MOBILE
===================================================== */

@media (
    max-width: 380px
) {

    .book {

        height: 360px;

    }


    .book-scene {

        height: 395px;

    }


    .memory-photo {

        height: 155px;

    }


    .memory-caption {

        font-size: 18px;

    }


    .cover-content h2 {

        font-size: 50px;

    }

}