@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');


/* =========================================
   CONFIGURACIÓN GENERAL
   ========================================= */

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

body {

    min-height: 100vh;

    overflow: hidden;

    font-family: 'Quicksand', sans-serif;

    background:
        radial-gradient(
            circle at 50% 40%,
            #fff7d6 0%,
            #ffe9a8 45%,
            #f6d477 100%
        );

    color: #654b20;

}


/* =========================================
   FONDO ANIMADO
   ========================================= */

.background {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


/* Brillos */

.sparkle {

    position: absolute;

    color: rgba(255, 255, 255, .9);

    font-size: 28px;

    animation: sparkleFloat 4s ease-in-out infinite;

}

.sparkle:nth-child(1) {
    top: 12%;
    left: 15%;
    animation-delay: 0s;
}

.sparkle:nth-child(2) {
    top: 25%;
    right: 15%;
    animation-delay: 1s;
}

.sparkle:nth-child(3) {
    bottom: 25%;
    left: 10%;
    animation-delay: 2s;
}

.sparkle:nth-child(4) {
    bottom: 15%;
    right: 20%;
    animation-delay: .5s;
}

.sparkle:nth-child(5) {
    top: 8%;
    right: 40%;
    animation-delay: 1.5s;
}


@keyframes sparkleFloat {

    0%, 100% {

        opacity: .3;

        transform: scale(.8) rotate(0deg);

    }

    50% {

        opacity: 1;

        transform: scale(1.3) rotate(25deg);

    }

}


/* Burbujas */

.bubble {

    position: absolute;

    bottom: -100px;

    width: 45px;
    height: 45px;

    border-radius: 50%;

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

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

    animation: bubbleUp 12s linear infinite;

}

.bubble:nth-child(6) {

    left: 10%;

    width: 35px;
    height: 35px;

    animation-delay: 2s;

}

.bubble:nth-child(7) {

    left: 45%;

    width: 65px;
    height: 65px;

    animation-delay: 5s;

}

.bubble:nth-child(8) {

    right: 15%;

    width: 25px;
    height: 25px;

    animation-delay: 1s;

}

.bubble:nth-child(9) {

    right: 35%;

    width: 50px;
    height: 50px;

    animation-delay: 7s;

}


@keyframes bubbleUp {

    0% {

        transform: translateY(0) scale(.7);

        opacity: 0;

    }

    15% {

        opacity: .8;

    }

    85% {

        opacity: .6;

    }

    100% {

        transform: translateY(-120vh) scale(1.3);

        opacity: 0;

    }

}


/* =========================================
   CONTENIDO PRINCIPAL
   ========================================= */

.home {

    position: relative;

    z-index: 2;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 25px;

}


/* Texto superior */

.top-message {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #a17b35;

    margin-bottom: 22px;

    animation: fadeDown 1s ease both;

}

.top-message span {

    color: #d7a629;

    margin: 0 8px;

}


/* =========================================
   CARITA KAWAII
   ========================================= */

.cute-character {

    position: relative;

    width: 220px;

    height: 210px;

    margin-bottom: 15px;

    animation: characterFloat 4s ease-in-out infinite;

}


/* Cabeza */

.face {

    position: absolute;

    width: 175px;
    height: 165px;

    top: 20px;
    left: 22px;

    border-radius: 48% 48% 45% 45%;

    background:
        linear-gradient(
            145deg,
            #fffdf1,
            #ffe8a0
        );

    border: 3px solid #e5bb55;

    box-shadow:

        inset -8px -10px 0 rgba(220, 169, 45, .12),

        0 12px 0 rgba(198, 146, 36, .12),

        0 15px 25px rgba(164, 115, 27, .15);

}


/* Orejas */

.ear {

    position: absolute;

    top: 35px;

    width: 55px;
    height: 65px;

    border-radius: 60% 60% 35% 35%;

    background: #ffe9a4;

    border: 3px solid #e5bb55;

    z-index: -1;

}

.left-ear {

    left: 5px;

    transform: rotate(-25deg);

}

.right-ear {

    right: 5px;

    transform: rotate(25deg);

}


/* Cabello */

.hair {

    position: absolute;

    top: -7px;
    left: 28px;

    width: 115px;
    height: 38px;

    background: #dcae3b;

    border-radius: 50% 50% 25% 25%;

    transform: rotate(-3deg);

}

.hair::after {

    content: "";

    position: absolute;

    left: 40px;
    top: 15px;

    width: 35px;
    height: 40px;

    background: #dcae3b;

    border-radius: 50%;

}


/* Ojos */

.eye {

    position: absolute;

    top: 70px;

    width: 14px;
    height: 20px;

    border-radius: 50%;

    background: #60451f;

    animation: blink 5s infinite;

}

.left-eye {

    left: 43px;

}

.right-eye {

    right: 43px;

}


/* Brillos en ojos */

.eye::after {

    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 5px;
    height: 6px;

    border-radius: 50%;

    background: white;

}


/* Mejillas */

.blush {

    position: absolute;

    top: 100px;

    width: 25px;
    height: 12px;

    border-radius: 50%;

    background: rgba(245, 164, 102, .45);

}

.left-blush {

    left: 18px;

}

.right-blush {

    right: 18px;

}


/* Boca */

.mouth {

    position: absolute;

    left: 50%;
    top: 103px;

    transform: translateX(-50%);

    font-size: 30px;

    font-weight: 700;

    color: #8d642b;

    line-height: 1;

}


/* Brillo en la cara */

.shine {

    position: absolute;

    top: 45px;
    left: 20px;

    width: 14px;
    height: 25px;

    border-radius: 50%;

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

    transform: rotate(35deg);

}


/* Flor sobre la cabeza */

.character-flower {

    position: absolute;

    right: -4px;
    top: 2px;

    font-size: 45px;

    transform: rotate(15deg);

    animation: flowerRotate 5s ease-in-out infinite;

}


/* =========================================
   ANIMACIONES DE LA CARITA
   ========================================= */

@keyframes characterFloat {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}


@keyframes flowerRotate {

    0%, 100% {

        transform: rotate(15deg);

    }

    50% {

        transform: rotate(-10deg) scale(1.1);

    }

}


@keyframes blink {

    0%, 44%, 48%, 100% {

        transform: scaleY(1);

    }

    46% {

        transform: scaleY(.1);

    }

}


/* =========================================
   MENSAJE
   ========================================= */

.welcome-text {

    animation: fadeUp 1s ease .3s both;

}

.welcome-text h1 {

    font-size: 32px;

    font-weight: 700;

    color: #805c21;

    margin-bottom: 12px;

}

.welcome-text p {

    font-size: 17px;

    font-weight: 600;

    color: #a17b35;

}

.small-text {

    font-size: 13px !important;

    font-weight: 500 !important;

    margin-top: 8px;

    opacity: .8;

}


/* =========================================
   BOTÓN INTERACTIVO
   ========================================= */

.action-area {

    margin-top: 30px;

    animation: fadeUp 1s ease .6s both;

}


.start-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 16px 25px;

    border-radius: 50px;

    text-decoration: none;

    color: white;

    font-size: 15px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #e5b632,
            #c9921f
        );

    box-shadow:

        0 6px 0 #a67819,

        0 10px 25px rgba(171, 120, 23, .25);

    transition:

        transform .2s ease,

        box-shadow .2s ease,

        background .2s ease;

}


.start-button:hover {

    transform: translateY(-5px) scale(1.04);

    background:
        linear-gradient(
            135deg,
            #f0ca55,
            #dba52b
        );

    box-shadow:

        0 10px 0 #a67819,

        0 15px 30px rgba(171, 120, 23, .3);

}


.start-button:active {

    transform: translateY(3px);

    box-shadow:

        0 3px 0 #a67819;

}


.arrow {

    font-size: 20px;

    transition: transform .2s ease;

}


.start-button:hover .arrow {

    transform: translateX(5px);

}


/* Texto debajo del botón */

.button-hint {

    margin-top: 16px;

    font-size: 12px;

    color: #a17b35;

    opacity: .8;

}


/* Decoración inferior */

.bottom-decoration {

    display: flex;

    gap: 20px;

    margin-top: 35px;

    font-size: 25px;

    color: #c89b32;

    animation: fadeUp 1s ease .9s both;

}

.bottom-decoration span:nth-child(2) {

    animation: heartBeat 2s infinite;

}


@keyframes heartBeat {

    0%, 100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.3);

    }

}


/* =========================================
   ANIMACIONES DE ENTRADA
   ========================================= */

@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* Brillo del cursor */

.cursor-glow {

    position: fixed;

    width: 180px;
    height: 180px;

    border-radius: 50%;

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

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

    pointer-events: none;

    z-index: 1;

    filter: blur(30px);

}


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

@media (max-width: 600px) {

    .home {

        padding: 20px;

    }

    .top-message {

        font-size: 10px;

        letter-spacing: 2px;

        margin-bottom: 15px;

    }

    .cute-character {

        transform: scale(.85);

        margin-top: -10px;

        margin-bottom: 0;

    }

    .welcome-text h1 {

        font-size: 25px;

    }

    .welcome-text p {

        font-size: 15px;

    }

    .small-text {

        font-size: 12px !important;

    }

    .action-area {

        margin-top: 25px;

    }

    .start-button {

        padding: 14px 20px;

        font-size: 13px;

    }

    .bottom-decoration {

        margin-top: 25px;

    }

}