@font-face {
    font-family: 'DarumadropOne';
    src: url('/fonts/DFVNDarumadropOne/DFVN-DarumadropOne.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'GochiHand';
    src: url('/fonts/DFVNGochiHand/DFVN-GochiHand.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

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

html, body {
    font-family: 'GochiHand', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    background-color: #8c3c3c;
    background-image: url('/assets/red-fabric.png');
    background-repeat: repeat;
    background-size: 300px auto;
}

.music-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
}

.music-btn svg {
    position: absolute;
    inset: 0;
    margin: auto;
}

.icon-play {
    display: none;
}

.music-btn.paused .icon-play {
    display: block;
}

.music-btn.paused .icon-pause {
    display: none;
}

/* section */
.section {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.scrapbook-page {
    position: relative;
    width: 90vw;
    max-width: 600px;
    height: 100vh;
}

.scrapbook-page img {
    position: absolute;
    height: auto;
    object-fit: contain;
}

/* section 1 */
.scrapbook-page img.us-3 {
    width: 45%;
    right: 10%;
    top: 15%;
    rotate: 2deg;
    z-index: 30;
}

.scrapbook-page img.rose-flower {
    width: 67%;
    right: 3%;
    top: 5%;
    z-index: 5;
}

.scrapbook-page img.star-1 {
    width: 15%;
    left: 61%;
    top: 25%;
    rotate: -11deg;
    z-index: 33;
}

.scrapbook-page img.record {
    width: 42%;
    top: 34%;
    left: -6%;
}

.scrapbook-page img.poster-2 {
    width: 32%;
    left: 20%;
    top: 31%;
    rotate: 5deg;
    z-index: 33;
}

.scrapbook-page img.star-2 {
    width: 15%;
    left: 12%;
    top: 38%;
    rotate: 51deg;
    z-index: 33;
}

.scrapbook-page img.torn-paper {
    width: 57%;
    left: 45%;
    top: 37%;
    z-index: 6;
}

.scrapbook-page img.ani-text {
    width: 30%;
    left: 4%;
    top: 50%;
    rotate: -6deg;
    z-index: 38;
}

.scrapbook-page img.love-text {
    width: 25%;
    left: 5%;
    top: 55%;
    z-index: 10;
}

.scrapbook-page img.hand-camera {
    width: 20%;
    top: 45%;
    left: 63%;
    z-index: 24;
}

.scrapbook-page img.sunflower {
    width: 20%;
    left: 75%;
    top: 50%;
    rotate: -41deg;
    z-index: 17;
}

.scrapbook-page img.cd {
    width: 88%;
    left: 47%;
    top: 61%;
    rotate: 20deg;
    z-index: 5;
    animation: spin 10s linear infinite;
}

.scrapbook-page img.ticket {
    width: 45%;
    left: 47%;
    top: 56%;
    rotate: -14deg;
    z-index: 10;
}

.scrapbook-page img.vintage-7 {
    width: 62%;
    left: 0%;
    top: 60%;
    z-index: 10;
}

.scrapbook-page img.dun-3 {
    width: 25%;
    left: 36%;
    top: 73%;
    z-index: 27;
    rotate: -10deg;

    padding: 2px;
    background: wheat;
    border-radius: 4px;
}

.scrapbook-page img.music-note {
    width: 18%;
    left: 37%;
    top: 68%;
    z-index: 44;
    rotate: -10deg;
}

/* ============================================================
   LETTER BOX
   ============================================================ */
.scrapbook-page .letter-box {
    position: absolute;
    width: 55%;
    left: -4%;
    top: 12%;
}

.scrapbook-page .letter-box img.letter {
    position: relative;
    display: block;
    width: 100%;
    rotate: -10deg;
    z-index: 10;
}

.scrapbook-page .letter-box img.heart-seal-wax {
    position: absolute;
    width: 17%;
    left: 6%;
    bottom: 11%;
    z-index: 32;
}

.scrapbook-page .letter-box .letter-note {
    position: absolute;
    width: 60%;
    height: 45%;
    border-radius: 4px;
    background-color: white;
    left: 18%;
    top: 17%;
    rotate: -12deg;
    z-index: 29;
    clip-path: polygon(0 0, 100% 0, 100% 67%, 70% 100%, 29% 100%, -21% 37%);
    text-align: center;
    padding: 20px 5px 0 5px;
    
     /* Mask ban đầu chỉ hiện 0% chiều cao */
    -webkit-mask-image: linear-gradient(
        to top,
        black 100%,
        black 100%
    );

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    -webkit-mask-size: 100% 0%;

    animation: revealFromBottom .8s ease-out forwards;
}

@keyframes revealFromBottom {
    from {
        -webkit-mask-size: 100% 0%;
    }

    to {
        -webkit-mask-size: 100% 100%;
    }
}

.scrapbook-page .letter-box .letter-note {
    color: oklch(63.7% 0.237 25.331);
    font-size: 24px;
}

/* ============================================================
   LOCKET BOX
   ============================================================ */
.scrapbook-page .locket-box {
    position: absolute;
    width: 28%;
    left: 67%;
    top: 38%;
    z-index: 100;
}

.scrapbook-page .locket-box img.necklace {
    position: relative;
    display: block;
    width: 100%;
    z-index: 30;
}

.heart-frame {
    position: absolute;

    /* Kích thước trái tim */
    width: 180px;
    height: 180px;

    overflow: hidden;

    /* Scale path lên cho vừa container */
    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
}

.heart-frame img {
    position: absolute;

    /* Zoom ảnh */
    width: 140%;
    height: 140%;

    object-fit: cover;

    /* Căn khuôn mặt */
    left: -20%;
    top: -10%;
}

/* .scrapbook-page .locket-box img.dun-8 {
    position: absolute;
    width: 30%;
    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
} */

.scrapbook-page .locket-box img.vinh-1 {
    position: absolute;
    width: 30%;
    top: 10%;

    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");

    object-fit: cover;
    object-position: center 20%;
}

/* ============================================================
   POLAROID BOX
   ============================================================ */
.scrapbook-page .polaroid-box {
    position: absolute;
    width: 43%;
    left: 27%;
    top: 39%;
    z-index: 35;
}

.scrapbook-page .polaroid-box img.polaroid {
    position: relative;
    display: block;
    width: 100%;
    rotate: 22deg;
}

.scrapbook-page .polaroid-box img.pol-1 {
    position: absolute;
    width: 26%;
    top: 4.4%;
    left: 62.8%;
    rotate: 13deg;
    padding: 1px;
    background: oklch(27.9% 0.077 45.635);
    border-radius: 4px;
}

.scrapbook-page .polaroid-box img.pol-2 {
    position: absolute;
    width: 26%;
    top: 22.4%;
    left: 49.8%;
    rotate: 13deg;
    padding: 1px;
    background: oklch(27.9% 0.077 45.635);
    border-radius: 4px;
}

.scrapbook-page .polaroid-box img.pol-3 {
    position: absolute;
    width: 26%;
    top: 40%;
    left: 37%;
    rotate: 13deg;
    padding: 1px;
    background: oklch(27.9% 0.077 45.635);
    border-radius: 4px;
}

.scrapbook-page .polaroid-box img.pol-4 {
    position: absolute;
    width: 26%;
    top: 57.8%;
    left: 25.2%;
    rotate: 32deg;
    padding: 1px;
    background: oklch(27.9% 0.077 45.635);
    border-radius: 4px;
}

.scrapbook-page .polaroid-box img.pol-5 {
    position: absolute;
    width: 26%;
    top: 76.4%;
    left: 11.8%;
    rotate: 32deg;
    padding: 1px;
    background: oklch(27.9% 0.077 45.635);
    border-radius: 4px;
}

/* section 2 */
.scrapbook-page img.book-note {
    width: 100%;
    top: 2%;
    z-index: 3;
}

.scrapbook-page img.booknote-vintage {
    width: 74%;
    top: -5%;
    left: 21%;
    z-index: 0;
    rotate: -69deg;
}

.scrapbook-page img.newspaper-flowers {
    width: 57%;
    top: -3%;
    left: 5%;
    rotate: 257deg;
    z-index: 0;
}

.scrapbook-page img.pin {
    width: 7%;
    top: 9%;
    left: 21%;
    z-index: 5;
}

.scrapbook-page img.us-2 {
    width: 35%;
    top: 9%;
    left: 14%;
    rotate: -6deg;
    z-index: 3;
    padding: 2px;
    background: white;
    border-radius: 4px;
}

.scrapbook-page img.metallic-paper-clip {
    width: 6%;
    top: 18%;
    left: 42%;
    rotate: 33deg;
    z-index: 7;
}

.scrapbook-page img.notebooks-journal {
    width: 10%;
    top: 5%;
    left: 13%;
    rotate: 3deg;
    z-index: 7;
}


.scrapbook-page img.dun-7 {
    width: 32%;
    top: 19%;
    left: 17%;
    rotate: 5deg;
    z-index: 6;
    padding: 2px;
    background: white;
    border-radius: 4px;
}

.scrapbook-page img.minimal-travel {
    width: 20%;
    top: 7%;
    left: 55%;
    rotate: -40deg;
    z-index: 7;
}

.scrapbook-page img.music-note {
    width: 20%;
    top: 24%;
    left: 14%;
    rotate: -40deg;
    z-index: 3;
}

.scrapbook-page img.ales-plate {
    width: 20%;
    top: 22%;
    left: 56%;
    rotate: 0deg;
    z-index: 8;
}

.scrapbook-page img.love-plate {
    width: 20%;
    top: 24%;
    left: 56%;
    rotate: -7deg;
    z-index: 3;
}

.scrapbook-page img.olympus {
    width: 32%;
    top: 23%;
    left: 72%;
    rotate: -75deg;
    z-index: 18;
}

.scrapbook-page img.poster-1 {
    width: 40%;
    top: 39%;
    left: 4%;
}

.scrapbook-page img.tickety-boo {
    width: 57%;
    top: 35%;
    left: 41%;
    z-index: 10;
    rotate: -151deg;
}

.scrapbook-page img.us-1 {
    width: 52%;
    top: 45%;
    left: 24%;
    z-index: 40;
    rotate: 5deg;
    padding: 2px;
    background: wheat;
    border-radius: 4px;
}

.scrapbook-page img.high-end-fashion {
    width: 14%;
    top: 41%;
    left: 34%;
    z-index: 41;
    rotate: -15deg;
}

.scrapbook-page img.fav-person {
    width: 24%;
    top: 39%;
    left: 45%;
    z-index: 40;
    rotate: 7deg;
}

.scrapbook-page img.zero1 {
    width: 6%;
    top: 63%;
    left: 17%;
    z-index: 40;
    rotate: 7deg;
}

.scrapbook-page img.four {
    width: 6%;
    top: 63%;
    left: 23%;
    z-index: 40;
    rotate: 7deg;
}

.scrapbook-page img.zero2 {
    width: 6%;
    top: 63%;
    left: 32%;
    z-index: 40;
    rotate: 7deg;
}

.scrapbook-page img.six {
    width: 6%;
    top: 63%;
    left: 38%;
    z-index: 40;
    rotate: 7deg;
}

.scrapbook-page img.wit-camera {
    width: 25%;
    top: 57%;
    left: 73%;
}

.scrapbook-page img.retro-1 {
    width: 80%;
    top: 63%;
    left: 16%;
    rotate: 90deg;
}

/* ============================================================
   STICKY NOTE BOX
   ============================================================ */
.scrapbook-page .sticky-note-box {
    position: absolute;
    width: 24%;
    left: 65%;
    top: 5%;
    z-index: 35;
}

.scrapbook-page .sticky-note-box img.sticky-note {
    position: relative;
    display: block;
    width: 100%;
    rotate: 7deg;
    z-index: 10;
}

/* ============================================================
   FILM PAPER BOX
   ============================================================ */
.scrapbook-page .film-paper-box {
    position: absolute;
    width: 11%;
    left: 90%;
    top: 17%;
    z-index: 14;
    rotate: 23deg;
}

.scrapbook-page .film-paper-box img.film-paper {
    position: relative;
    width: 100%;
    rotate: -8deg;
    z-index: 10;
}

.scrapbook-page .film-paper-box img.dun-9 {
    position: absolute;
    width: 85%;
    top: 1%;
    left: 3%;
    rotate: -8deg;
    z-index: 10;
    padding: 3px 0;
    background-color: black;
}

.scrapbook-page .film-paper-box img.dun-6 {
    position: absolute;
    width: 85%;
    top: 40%;
    left: 13%;
    rotate: -8deg;
    z-index: 10;
    padding: 3px 0;
    background-color: black;
}

/* something sến súa */
.anniversary-section {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.anniversary-letter {
    width: 70vw;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.anniversary-letter .anniversary-img {
    position: relative;
}

.anniversary-letter .anniversary-img img.we{
    width: 300px;
}

.anniversary-letter .anniversary-img img.cake{
    position: absolute;
    width: 50px;
    top: 93px;
    left: 158px;
    rotate: -10deg;
}

.anniversary-letter .anniversary-text {
    padding-bottom: 100px;
}

.anniversary-letter .anniversary-text span {
    display: block;
    font-size: 14px;
    color: white;
    text-align: justify;
}

/* Base */
/* .animate-on-scroll {
    opacity: 0;
} */

/* Scale */
.animate-on-scroll.animate-scale-up.show {
    animation: scaleUp 1s ease forwards;
}

/* Fade */
.animate-on-scroll.animate-fade-up.show {
    animation: fadeUp .8s ease forwards;
}

.animate-on-scroll.animate-fade-down.show {
    animation: fadeDown .8s ease forwards;
}

.animate-on-scroll.animate-fade-left.show {
    animation: fadeLeft .8s ease forwards;
}

.animate-on-scroll.animate-fade-right.show {
    animation: fadeRight .8s ease forwards;
}

/* Stop Motion */
.animate-on-scroll.animate-fly-right.show {
    animation: stopMotionFlyRight .8s steps(3) forwards;
}

.animate-on-scroll.animate-fly-left.show {
    animation: stopMotionFlyLeft .8s steps(3) forwards;
}

.animate-on-scroll.animate-fly-up.show {
    animation: stopMotionFlyUp .8s steps(3) forwards;
}

.animate-on-scroll.animate-fly-down.show {
    animation: stopMotionFlyDown .8s steps(3) forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes stopMotionFlyRight {
    0% {
        opacity: 0;
        transform: translateX(400px) rotate(30deg) scale(.8);
    }

    25% {
        opacity: 1;
        transform: translateX(250px) rotate(22deg) scale(.85);
    }

    50% {
        transform: translateX(120px) rotate(16deg) scale(.9);
    }

    75% {
        transform: translateX(80px) rotate(8deg) scale(.95);
    }

    100% {
        transform: translateX(0) rotate(10deg) scale(1);
    }
}

@keyframes stopMotionFlyLeft {
    0% {
        opacity: 0;
        transform: translateX(-400px) rotate(-30deg) scale(.8);
    }

    25% {
        opacity: 1;
        transform: translateX(-250px) rotate(-22deg) scale(.85);
    }

    50% {
        transform: translateX(-120px) rotate(-16deg) scale(.9);
    }

    75% {
        transform: translateX(-80px) rotate(-8deg) scale(.95);
    }

    100% {
        transform: translateX(0) rotate(-10deg) scale(1);
    }
}

@keyframes stopMotionFlyUp {
    0% {
        opacity: 0;
        transform: translateY(400px) rotate(-20deg) scale(.8);
    }

    25% {
        opacity: 1;
        transform: translateY(250px) rotate(-15deg) scale(.85);
    }

    50% {
        transform: translateY(120px) rotate(-12deg) scale(.9);
    }

    75% {
        transform: translateY(20px) rotate(-8deg) scale(.95);
    }

    100% {
        transform: translateY(0) rotate(-10deg) scale(1);
    }
}

@keyframes stopMotionFlyDown {
    0% {
        opacity: 0;
        transform: translateY(-400px) rotate(20deg) scale(.8);
    }

    25% {
        opacity: 1;
        transform: translateY(-250px) rotate(15deg) scale(.85);
    }

    50% {
        transform: translateY(-120px) rotate(12deg) scale(.9);
    }

    75% {
        transform: translateY(-80px) rotate(8deg) scale(.95);
    }

    100% {
        transform: translateY(0) rotate(10deg) scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}