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


html,
body {
    width: 100%;
    height: 100%;
}


body {
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   HOME PAGE
   ========================================= */

.home-page {

    position: relative;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    background-image: url("../images/homebc.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

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

    padding: 20px;

    overflow: hidden;
}


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

@media (max-width: 600px) {

    .home-page {

        background-image: url("../images/homebc-mobile.png");

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

}


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

.home-decoration {

    position: absolute;

    pointer-events: none;

    user-select: none;

    z-index: 1;
}


.home-star {

    color: rgba(255, 255, 255, 0.85);

    font-size: 24px;

    animation: floatingStar 4s ease-in-out infinite;
}


.star-1 {
    top: 12%;
    left: 12%;
}


.star-2 {
    top: 25%;
    right: 13%;

    font-size: 17px;

    animation-delay: 1s;
}


.star-3 {
    bottom: 23%;
    left: 10%;

    font-size: 18px;

    animation-delay: 2s;
}


.star-4 {
    bottom: 14%;
    right: 12%;

    font-size: 25px;

    animation-delay: 0.5s;
}


.home-heart {

    color: rgba(255, 255, 255, 0.6);

    font-size: 30px;

    animation: floatingHeart 5s ease-in-out infinite;
}


.heart-1 {

    top: 17%;
    right: 25%;
}


.heart-2 {

    bottom: 29%;
    left: 22%;

    font-size: 20px;

    animation-delay: 1.5s;
}


/* =========================================
   SOFT GLOW
   ========================================= */

.soft-glow {

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    filter: blur(50px);

    pointer-events: none;

    z-index: 0;
}


.glow-1 {

    top: 8%;
    left: -70px;
}


.glow-2 {

    bottom: 5%;
    right: -80px;
}


/* =========================================
   DATE
   ========================================= */

.birthday-date {

    position: absolute;

    top: 30px;
    left: 35px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: white;

    z-index: 5;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.15);
}


.date-number {

    font-size: 42px;

    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -2px;
}


.date-details {

    display: flex;

    flex-direction: column;

    gap: 3px;

    padding-left: 10px;

    border-left: 1px solid rgba(255, 255, 255, 0.55);
}


.date-details span {

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;
}


.date-details small {

    font-size: 9px;

    letter-spacing: 1.5px;

    opacity: 0.8;
}


/* =========================================
   MAIN CONTENT
   ========================================= */

.home-content {

    position: relative;

    z-index: 5;

    width: min(90%, 600px);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-top: 15px;
}


/* =========================================
   EYEBROW
   ========================================= */

.home-eyebrow {

    margin-bottom: 10px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15);
}


/* =========================================
   TITLE
   ========================================= */

.home-title {

    color: white;

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

    font-weight: 900;

    line-height: 1;

    letter-spacing: -1px;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.18);

    margin-bottom: 10px;
}


.home-subtitle {

    color: rgba(255, 255, 255, 0.92);

    font-size: 15px;

    letter-spacing: 0.4px;

    margin-bottom: 28px;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12);
}


/* =========================================
   3D PINK CLICK BUTTON
   ========================================= */

.click-button {

    position: relative;

    width: min(75vw, 320px);

    min-height: 70px;

    padding: 18px 30px;

    border: none;

    border-radius: 50px;

    background: linear-gradient(
        180deg,
        #ff8fba 0%,
        #ff6fa5 45%,
        #f45191 100%
    );

    color: #ffffff;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;

    box-shadow:
        0 9px 0 #c93670,
        0 14px 22px rgba(180, 45, 100, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.65),
        inset 0 -4px 7px rgba(190, 35, 100, 0.25);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;

    animation: buttonEntrance 0.8s ease-out;
}


/* =========================================
   BUTTON GLOSS
   ========================================= */

.click-button::before {

    content: "";

    position: absolute;

    top: 8px;
    left: 12%;

    width: 76%;
    height: 18px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.22);

    pointer-events: none;
}


/* =========================================
   BUTTON PRESS EFFECT
   ========================================= */

.click-button:active {

    transform: translateY(7px);

    box-shadow:
        0 2px 0 #c93670,
        0 5px 10px rgba(180, 45, 100, 0.25),
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        inset 0 -3px 6px rgba(190, 35, 100, 0.25);
}


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

.home-quote {

    width: min(90%, 470px);

    margin-top: 35px;

    padding: 18px 25px;

    position: relative;

    color: rgba(255, 255, 255, 0.92);

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12);
}


.home-quote::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    width: 45px;

    height: 1px;

    background: rgba(255, 255, 255, 0.6);
}


.quote-mark {

    position: absolute;

    left: 3px;

    top: 15px;

    font-family: Georgia, serif;

    font-size: 38px;

    opacity: 0.45;
}


.home-quote p {

    font-family: Georgia, serif;

    font-size: 15px;

    line-height: 1.6;

    font-style: italic;
}


.quote-author {

    display: block;

    margin-top: 8px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 9px;

    font-style: normal;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    opacity: 0.75;
}


/* =========================================
   FOOTER
   ========================================= */

.home-footer {

    position: absolute;

    bottom: 22px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    z-index: 5;

    white-space: nowrap;
}


.footer-heart {

    color: #ff477e;

    font-size: 13px;
}


.footer-cake {

    font-size: 13px;

    opacity: 0.85;
}


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

@keyframes floatingStar {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.65;
    }

    50% {
        transform: translateY(-10px) rotate(10deg);
        opacity: 1;
    }

}


@keyframes floatingHeart {

    0%,
    100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(-12px) rotate(8deg);
    }

}


@keyframes buttonEntrance {

    from {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }

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

}


/* =========================================
   CAKE MODAL OVERLAY
   ========================================= */

.cake-modal-overlay {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    display: flex;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 1000;
}


.cake-modal-overlay.active {

    opacity: 1;
    visibility: visible;
}


/* =========================================
   MODAL
   ========================================= */

.cake-modal {

    position: relative;

    width: 100%;
    max-width: 420px;

    max-height: 90dvh;

    overflow-y: auto;

    background: rgba(255, 255, 255, 0.96);

    border-radius: 28px;

    padding: 32px 24px 25px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25);

    transform: translateY(30px) scale(0.95);

    transition:
        transform 0.3s ease;
}


.cake-modal-overlay.active .cake-modal {

    transform: translateY(0) scale(1);
}


/* =========================================
   CLOSE BUTTON
   ========================================= */

.modal-close {

    position: absolute;

    top: 12px;
    right: 15px;

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.06);

    color: #555;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}


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

.cake-modal-header {

    text-align: center;

    margin-bottom: 28px;
}


.cake-modal-header h2 {

    margin-bottom: 8px;

    color: #222;

    font-size: 27px;

    font-weight: 800;

    text-transform: capitalize;
}


.cake-modal-header p {

    color: #888;

    font-size: 14px;
}


/* =========================================
   CRUST SECTION
   ========================================= */

.crust-section {

    margin-bottom: 22px;

    padding: 18px;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.07);
}


.crust-title {

    color: #222;

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 5px;
}


.color-label {

    color: #999;

    font-size: 13px;

    margin-bottom: 14px;
}


/* =========================================
   COLOR OPTIONS
   ========================================= */

.color-options {

    display: flex;

    gap: 14px;
}


.color-option {

    position: relative;

    width: 48px;
    height: 48px;

    border: 3px solid transparent;

    border-radius: 50%;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.color-option:active {

    transform: scale(0.9);
}


/* =========================================
   COLORS
   ========================================= */

.color-option.pink {
    background: #ff7fab;
}


.color-option.blue {
    background: #70c9e8;
}


.color-option.purple {
    background: #a98be8;
}


/* =========================================
   SELECTED COLOR
   ========================================= */

.color-option.selected {

    border-color: #222;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 1),
        0 0 0 6px rgba(0, 0, 0, 0.15);

    transform: scale(1.08);
}


/* =========================================
   START BAKING BUTTON
   ========================================= */

.start-baking-button {

    width: 100%;

    min-height: 58px;

    border: none;

    border-radius: 18px;

    background: linear-gradient(
        180deg,
        #ff8fba,
        #f45191
    );

    color: white;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 1.5px;

    cursor: pointer;

    box-shadow:
        0 6px 0 #c93670,
        0 10px 18px rgba(201, 54, 112, 0.25);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        opacity 0.2s ease;
}


.start-baking-button:disabled {

    opacity: 0.45;

    cursor: not-allowed;

    box-shadow:
        0 4px 0 #bbb;
}


.start-baking-button:not(:disabled):active {

    transform: translateY(5px);

    box-shadow:
        0 1px 0 #c93670,
        0 4px 10px rgba(201, 54, 112, 0.2);
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 600px) {

    .birthday-date {

        top: 20px;
        left: 20px;
    }


    .date-number {

        font-size: 34px;
    }


    .date-details span {

        font-size: 11px;
    }


    .date-details small {

        font-size: 8px;
    }


    .home-content {

        margin-top: 20px;
    }


    .home-eyebrow {

        font-size: 9px;

        letter-spacing: 2px;
    }


    .home-title {

        font-size: 42px;
    }


    .home-subtitle {

        font-size: 13px;

        margin-bottom: 25px;
    }


    .click-button {

        width: min(78vw, 300px);

        min-height: 64px;

        font-size: 20px;
    }


    .home-quote {

        margin-top: 28px;

        padding-left: 20px;
        padding-right: 20px;
    }


    .home-quote p {

        font-size: 13px;

        line-height: 1.5;
    }


    .home-footer {

        bottom: 15px;

        font-size: 8px;

        letter-spacing: 1px;
    }


    .home-star {

        font-size: 18px;
    }


    .home-heart {

        font-size: 23px;
    }

}


@media (max-width: 380px) {

    .birthday-date {

        top: 15px;
        left: 15px;
    }


    .date-number {

        font-size: 30px;
    }


    .home-eyebrow {

        margin-bottom: 8px;

        font-size: 8px;
    }


    .home-title {

        font-size: 36px;
    }


    .home-subtitle {

        font-size: 12px;

        margin-bottom: 21px;
    }


    .click-button {

        width: 78vw;

        min-height: 60px;

        font-size: 18px;
    }


    .home-quote {

        margin-top: 22px;
    }


    .home-quote p {

        font-size: 12px;
    }


    .cake-modal {

        padding: 28px 18px 20px;

        border-radius: 24px;
    }


    .cake-modal-header h2 {

        font-size: 24px;
    }


    .crust-section {

        padding: 15px;
    }


    .color-option {

        width: 44px;
        height: 44px;
    }

}