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

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

body {
    background: #000;
    color: white;
    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;
}




#inicio {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: #000;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}

#inicio.hidden {

    opacity: 0;

    visibility: hidden;
}


.sunflower {

    width: min(280px, 68vw);

    height: auto;

    filter:
        drop-shadow(0 0 12px rgba(255,217,0,.6))
        drop-shadow(0 0 38px rgba(255,179,0,.35));

    animation:
        flowerPulse 2.5s ease-in-out infinite;
}


#inicio h2 {

    margin-top: 25px;

    color: #ffe66b;

    font-size: 28px;

    font-weight: normal;

    text-shadow:
        0 0 5px #fff000,
        0 0 15px #ffc400,
        0 0 35px #ff9900;

    animation:
        textPulse 2s ease-in-out infinite;
}


#inicio p {

    margin-top: 12px;

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

    font-size: 14px;
}


@keyframes flowerPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes textPulse {

    0% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }

    100% {
        opacity: 1;
    }
}




#experiencia {

    position: fixed;

    inset: 0;

    opacity: 0;

    background:

        radial-gradient(
            circle at center,
            rgba(255,180,0,.10),
            transparent 30%
        ),

        radial-gradient(
            circle at center,
            rgba(255,210,50,.04),
            transparent 55%
        ),

        #000;

    transition:
        opacity 2s ease;
}


#experiencia.active {
    opacity: 1;
}




:root {

    --letra: "Shadows Into Light", "Comic Sans MS", cursive;

}




#galaxy {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}


.scene {

    position: absolute;

    inset: 0;

    cursor: grab;

    touch-action: none;

}


#experiencia.dragging .scene {
    cursor: grabbing;
}


body {

    user-select: none;

    -webkit-user-select: none;

}



.title {

    position: absolute;

    top: 11%;

    left: 50%;

    transform:
        translateX(-50%);

    width: 95%;

    text-align: center;

    pointer-events: none;

    z-index: 100;

    font-family: var(--letra);
}


.title h1 {

    font-size:
        clamp(
            34px,
            3.6vw,
            66px
        );

    font-weight: 700;

    color: #fff7d6;

    text-shadow:
        0 0 6px #fff,
        0 0 18px #ffd000,
        0 0 40px #ff9800;
}


.title p {

    margin-top: 2px;

    font-size:
        clamp(
            22px,
            2.2vw,
            40px
        );

    color: #fff;

    text-shadow:
        0 0 10px rgba(255,255,255,.7),
        0 0 24px rgba(255,200,60,.6);
}




.music-player {

    position: fixed;

    left: 50%;

    bottom: 22px;

    transform:
        translateX(-50%);

    width:
        min(620px, calc(100% - 30px));

    min-height: 70px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    border:

        1px solid
        rgba(255,210,50,.35);

    border-radius: 18px;

    background:

        rgba(10,10,10,.72);

    backdrop-filter:
        blur(15px);

    box-shadow:

        0 0 25px
        rgba(255,180,0,.12);

    z-index: 500;
}


.music-btn {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background:

        rgba(255,205,50,.15);

    color: #ffe55b;

    font-size: 18px;

    cursor: pointer;

    flex-shrink: 0;
}


.music-info {

    flex: 1;

    min-width: 0;
}


.music-name {

    color: #ffe66b;

    font-size: 13px;

    margin-bottom: 5px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}




#progress {

    width: 100%;

    height: 4px;

    cursor: pointer;

    accent-color: #ffd21f;
}


.music-time {

    display: flex;

    justify-content: space-between;

    margin-top: 3px;

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

    font-size: 10px;
}


.volume-button {

    background: none;

    border: none;

    color: white;

    font-size: 18px;

    cursor: pointer;
}


#volume {

    width: 75px;

    accent-color: #ffd21f;

    cursor: pointer;
}




.interaction-help {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 300;

    padding: 8px 13px;

    border-radius: 15px;

    background:
        rgba(0,0,0,.45);

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

    font-size: 12px;

    pointer-events: none;
}




@media (max-width: 700px) {


    .title {

        top: 4%;

    }


    .title h1 {

        font-size: 28px;

    }


    .title p {

        font-size: 20px;

    }


    .music-player {

        bottom: 10px;

        min-height: 62px;

        padding: 9px;

    }


    #volume {

        width: 55px;

    }


    .interaction-help {

        display: none;

    }

}




@media (max-width: 700px) {

    .title h1 {

        font-size: 36px;

    }


    .title p {

        font-size: 23px;

    }

}