html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

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

    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100vh;

    background-color: #FFF0F5;

    overflow-x: hidden;
}


/* =========================
   MAIN BOX
========================= */

.box {
    margin-top: 0px;
    width: 100%;
    max-width: 1600px;
    height: 160px;
    box-sizing: border-box;
    display: flex;
    font-size: 25px;

    justify-content: center;
    flex-direction: column;
    align-items: center;

    background-color: white;
}

.star {
    margin-top: 0px;
    font-size: 30px;
    margin-bottom: 20px;
}

.text {
    text-align: center;
}

#texti {
    text-align: center;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

#texti.hide {
    opacity: 0;
    transform: translateY(-25px);
}

#final {
    display: none;
    text-align: center;
    margin-bottom: 10px;
}

.buttons {
    display: none;

    font-size: 20px;
    margin: 0px;

    gap: 80px;

    justify-content: center;
}

.buttons button {
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
}

#no {
    position: relative;
}

.buttonns {
    display: flex;
}


/* =========================
   POPUP
========================= */

#popup {
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

    justify-content: center;
    align-items: center;
}

.popup-box {
    background-color: white;

    padding: 30px;

    border-radius: 15px;

    text-align: center;

    font-size: 22px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* =========================
   POPUP 2
========================= */

#popup2 {
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

    justify-content: center;
    align-items: center;
}

.please-gif {
    display: flex;
    width: 250px;
    flex-direction: row;
}


/* =========================
   CONFETTI
========================= */

#party {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;

    top: -20px;

    font-size: 25px;

    animation: fall 2s linear forwards;
}

@keyframes fall {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}


/* =========================
   COUNTDOWN
========================= */

#countdown {
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background-color: black;

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

    z-index: 99999;
}

#count {
    color: white;
    font-size: 100px;
}


/* =====================================================
   SURPRISE SCREEN
===================================================== */

#surprise {
    display: none;

    position: fixed;

    inset: 0;

    background-color: #FFF0F5;

    justify-content: center;
    align-items: center;
}


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

#envelope-area {
    text-align: center;
}
/* =========================
   ENVELOPE
========================= */

#envelope {
    width: 320px;
    height: 210px;
    position: relative;
    margin: auto;
    perspective: 800px;
}


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

.envelope-back {
    position: absolute;
    inset: 0;

    background-color: #e8b7b7;

    border-radius: 5px;

    z-index: 1;
}


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

#letter {
    position: absolute;

    width: 240px;
    height: 150px;

    background-color: white;

    left: 40px;
    top: 30px;

    padding: 15px;
    box-sizing: border-box;

    /*
       Letter stays INSIDE the envelope.
    */
    z-index: 5;

    cursor: pointer;

    transition: transform 1s ease;
}


/* =========================
   LEFT SIDE
========================= */

.envelope-side-left {
    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 0;

    border-top: 105px solid transparent;
    border-bottom: 105px solid transparent;
    border-left: 162px solid #d28f8f;

    z-index: 20;

    pointer-events: none;
}


/* =========================
   RIGHT SIDE
========================= */

.envelope-side-right {
    position: absolute;

    right: 0;
    top: 0;

    width: 0;
    height: 0;

    border-top: 105px solid transparent;
    border-bottom: 105px solid transparent;
    border-right: 162px solid #d28f8f;

    z-index: 20;

    pointer-events: none;
}


/* =========================
   FRONT BOTTOM
========================= */

.envelope-front {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 0;
    height: 0;

    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    border-bottom: 120px solid #d28f8f;

    z-index: 20;

    pointer-events: none;
}


/* =========================
   TOP FLAP
========================= */

#flap {
    position: absolute;

    top: 0;
    left: 0;

    width: 320px;
    height: 120px;

    background-color: #d28f8f;

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

    z-index: 8;

    transform-origin: top center;

    transition: transform 0.8s ease;

    pointer-events: none;
}


/* Lines going from top corners to center */

#flap::before {
    content: "";

    position: absolute;

    width: 200px;
    height: 2px;

    background-color: #bd7777;

    left: 0;
    top: 0;

    transform: rotate(36.87deg);

    transform-origin: left center;
}

#flap::after {
    content: "";

    position: absolute;

    width: 200px;
    height: 2px;

    background-color: #bd7777;

    right: 0;
    top: 0;

    transform: rotate(-36.87deg);

    transform-origin: right center;
}


/* =========================
   STAMP
========================= */

#stamp {
    position: absolute;

    width: 55px;
    height: 55px;

    left: 50%;
    top: 50%;

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

    background-color: #c94c4c;

    border-radius: 50%;

    z-index: 100;

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

    color: white;
    font-size: 25px;

    cursor: pointer;

    transition: transform 0.2s ease;
}

#stamp:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

#stamp::after {
    content: "♥";
    color: white;
}


/* =========================
   STAMP CLICK → FLAP OPENS
========================= */

#envelope.open #flap {
    transform: rotateX(180deg);

    /*
       Once open, flap goes behind everything.
       IMPORTANT: this does NOT change the letter.
    */
    z-index: 0;
}


/* =========================
   LETTER CLICK → COMES OUT
========================= */

#letter.out {
    /*
       ONLY now does the letter come
       above the envelope.
    */
    z-index: 10;

    transform: translateY(-200px);
}


/* =========================
   KEEP SIDES VISIBLE
========================= */

#envelope.open .envelope-side-left,
#envelope.open .envelope-side-right {
    z-index: 20;
}


/* Keep bottom/front triangle visible */

#envelope.open .envelope-front {
    z-index: 20;
}


/* =========================
   TEXT BELOW
========================= */

#open-text {
    font-size: 25px;
    margin-top: 30px;
}

#continue-btn {
    margin-top: 15px;
    padding: 8px 18px;
    background-color: #d28f8f;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s ease;
}
#continue-btn:hover {
    transform: scale(1.08);
    background-color: #d28f8f;
}
#memory-screen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("room.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 999;
}
#harry-book {
    position: absolute;
    left: 69.6%;
    top: 70%;
    width: 12%;
    height: 4%;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
    animation: bookGlow 1.5s infinite alternate;
    z-index: 50;
}
#harry-book:hover{
    transform: scale(1.05);
}
@keyframes bookGlow {
    from {
        border-color: transparent;
        box-shadow: 0 0 0px transparent;
    }
    to {
        border-color: #fff;
        box-shadow: 
        0 0 8px #fff,
        0 0 18px #ffb6c1,
        0 0 30px #ff8fab;
        
    }
}
#harry-screen {
    display: none;
    position: fixed;
    inset: 0;
    background-color: #FFF0F5;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.harry-content{
    width: 70%;
    max-width: 700px;
    min-height: 500px;
    background: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 
        0 0 15px #fff,
        0 0 30px #d28f8f,
        0 0 60px #c94c4c;
    position: relative;
}
.close-book{
    position: absolute;
    top: 15px;
    right: 20px;
    border: none;
    background: none;
    font-size: 30px;
    cursor: pointer;
}
/* =========================
   HARRY BOOK ANIMATION
========================= */

#harry-opening {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;

    perspective: 1800px;
    overflow: hidden;
}


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

#moving-book {
    position: absolute;

    /* SAME PLACE AS THE REAL BOOK */
    left: 69.6%;
    top: 70%;

    width: 190px;
    height: 45px;

    display: none;

    z-index: 10000;

    transform-style: preserve-3d;
    transform-origin: left center;
}


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

.book {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    /*
       VERY IMPORTANT:
       Don't create another Harry Potter cover.
       The actual room image is used below.
    */
}


/* =========================
   REAL BOOK IMAGE
========================= */

.book-cover {
    position: absolute;

    inset: 0;

    /*
       YOUR ORIGINAL ROOM IMAGE
       The book visible in room.png
       is being cropped here.
    */

    background-image: url("room.png");

    background-repeat: no-repeat;

    /*
       room.png is stretched to your screen
       just like #memory-screen
    */
    background-size: 1520px 670px;

    /*
       BOOK LOCATION IN YOUR ROOM IMAGE

       Adjust these two numbers ONLY if
       the crop is slightly off.
    */
    background-position: -1050px -465px;

    border: none;
    border-radius: 4px;

    transform: translateZ(10px);

    transform-origin: left center;

    backface-visibility: hidden;

    box-shadow:
        0 3px 5px rgba(0,0,0,0.5),
        0 8px 15px rgba(0,0,0,0.35);
}


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

.book-pages {
    position: absolute;

    left: 3px;
    top: 8px;

    width: calc(100% - 6px);
    height: calc(100% - 12px);

    background:
        repeating-linear-gradient(
            to bottom,
            #fff8df 0px,
            #fff8df 2px,
            #d1b47d 3px,
            #fff8df 4px
        );

    border-radius: 2px;

    transform: translateZ(0);

    box-shadow:
        0 2px 0 #d1b27c,
        0 4px 0 #b8945c,
        0 6px 0 #967343;

    transform-style: preserve-3d;
}


/* Hide your page content during the approach */

.page,
.final-page {
    visibility: hidden;
}


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

.back-cover {
    position: absolute;

    inset: 0;

    background-image: url("room.png");
    background-repeat: no-repeat;
    background-size: 1520px 670px;
    background-position: -1050px -465px;

    border: none;
    border-radius: 4px;

    transform: translateZ(-12px);

    box-shadow:
        0 8px 15px rgba(0,0,0,0.5);

    backface-visibility: hidden;
}


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

.book::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 12px;
    height: 100%;

    background: #4d1d11;

    border-left: 2px solid #c88945;

    transform-origin: left center;

    transform:
        rotateY(90deg)
        translateZ(-12px);

    z-index: 20;
}


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

.book::after {
    content: "";

    position: absolute;

    right: 0;
    top: 2px;

    width: 8px;
    height: calc(100% - 4px);

    background:
        repeating-linear-gradient(
            to bottom,
            #fff8df 0px,
            #fff8df 2px,
            #c9ab73 3px,
            #fff8df 4px
        );

    transform:
        rotateY(90deg)
        translateZ(3px);

    transform-origin: right center;

    z-index: 20;
}


/* =====================================================
   BOOK COMES OUT OF THE ROOM
===================================================== */

@keyframes bookComeOut {

    /* Sitting exactly where the real book is */
    0% {
        transform:
            translate(0, 0)
            rotateY(0deg)
            rotateZ(0deg)
            scale(1);

        opacity: 1;
    }


    /* First it lifts slightly */
    15% {
        transform:
            translate(-20px, -25px)
            rotateY(-10deg)
            rotateZ(-2deg)
            scale(1.15);
    }


    /* BOOK STARTS TURNING LEFT */
    35% {
        transform:
            translate(-100px, -100px)
            rotateY(-45deg)
            rotateZ(-3deg)
            scale(1.7);
    }


    /* HARRY POTTER COVER GOES TOWARDS LEFT */
    55% {
        transform:
            translate(-190px, -150px)
            rotateY(-90deg)
            rotateZ(-3deg)
            scale(2.3);
    }


    /* Book is now moving toward the centre */
    75% {
        transform:
            translate(-80px, -230px)
            rotateY(-120deg)
            rotateZ(0deg)
            scale(3.2);
    }


    /* FINAL POSITION — BIG BOOK IN FRONT */
    100% {
        transform:
            translate(-50px, -260px)
            rotateY(-90deg)
            rotateZ(0deg)
            scale(4);
    }
}