/* styles.css */

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

:root {
    --bubble-r: 244;
    --bubble-g: 114;
    --bubble-b: 182;
}

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

body {
    min-height: 100vh;

    overflow: hidden;

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    color: #27272a;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(244, 114, 182, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(236, 72, 153, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 55% 105%,
            rgba(251, 207, 232, 0.30),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffafb 55%,
            #fdf2f8 100%
        );
}


/*
|--------------------------------------------------------------------------
| FONDO
|--------------------------------------------------------------------------
*/

.background-glow {
    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.background-glow::before,
.background-glow::after {
    content: "";

    position: absolute;

    border-radius: 50%;
}

.background-glow::before {
    width: 520px;
    height: 520px;

    left: -220px;
    top: -190px;

    background:
        radial-gradient(
            circle,
            rgba(244, 114, 182, 0.12),
            transparent 65%
        );

    filter: blur(35px);
}

.background-glow::after {
    width: 600px;
    height: 600px;

    right: -280px;
    bottom: -260px;

    background:
        radial-gradient(
            circle,
            rgba(236, 72, 153, 0.10),
            transparent 65%
        );

    filter: blur(45px);
}


/*
|--------------------------------------------------------------------------
| BURBUJAS
|--------------------------------------------------------------------------
*/

.bubbles {
    position: fixed;
    inset: 0;

    z-index: 3;

    overflow: hidden;

    pointer-events: none;
}

.bubble {
    position: absolute;

    left: var(--left);
    bottom: -300px;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    pointer-events: auto;
    cursor: pointer;

    border:
        1.5px solid
        rgba(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b),
            0.58
        );

    background:
        radial-gradient(
            circle at 28% 24%,

            rgba(255, 255, 255, 0.98) 0%,

            rgba(255, 255, 255, 0.76) 8%,

            rgba(
                var(--bubble-r),
                var(--bubble-g),
                var(--bubble-b),
                0.54
            ) 28%,

            rgba(
                var(--bubble-r),
                var(--bubble-g),
                var(--bubble-b),
                0.38
            ) 50%,

            rgba(
                var(--bubble-r),
                var(--bubble-g),
                var(--bubble-b),
                0.23
            ) 72%,

            rgba(
                var(--bubble-r),
                var(--bubble-g),
                var(--bubble-b),
                0.10
            ) 100%
        );

    box-shadow:
        inset -14px -14px 30px
        rgba(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b),
            0.32
        ),

        inset 8px 8px 22px
        rgba(255, 255, 255, 0.88),

        inset 0 0 8px
        rgba(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b),
            0.22
        ),

        0 0 0 1px
        rgba(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b),
            0.12
        ),

        0 12px 30px
        rgba(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b),
            0.24
        ),

        0 5px 12px
        rgba(0, 0, 0, 0.09);

    backdrop-filter: blur(2px);

    opacity: 0;

    filter:
        blur(
            var(--blur)
        );

    will-change:
        transform,
        opacity;

    animation:
        bubble-rise
        var(--duration)
        linear
        forwards;
}

.bubble::before {
    content: "";

    position: absolute;

    width: 30%;
    height: 18%;

    left: 20%;
    top: 16%;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0.35)
        );

    transform:
        rotate(-35deg);

    filter:
        blur(0.5px);

    box-shadow:
        0 0 8px
        rgba(255, 255, 255, 0.45);
}

.bubble::after {
    content: "";

    position: absolute;

    width: 9%;
    height: 9%;

    right: 19%;
    bottom: 20%;

    border-radius: 50%;

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

    box-shadow:
        0 0 5px
        rgba(255, 255, 255, 0.50);
}


/*
|--------------------------------------------------------------------------
| ANIMACIÓN DE SUBIDA
|--------------------------------------------------------------------------
*/

@keyframes bubble-rise {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(var(--start-scale));

        opacity: 0;
    }

    7% {
        opacity: var(--opacity);
    }

    22% {
        transform:
            translate3d(
                var(--x1),
                -30vh,
                0
            )
            scale(0.92);
    }

    44% {
        transform:
            translate3d(
                var(--x2),
                -60vh,
                0
            )
            scale(1);
    }

    66% {
        transform:
            translate3d(
                var(--x3),
                -90vh,
                0
            )
            scale(1.04);
    }

    88% {
        transform:
            translate3d(
                var(--x4),
                -120vh,
                0
            )
            scale(1);

        opacity: var(--opacity);
    }

    100% {
        transform:
            translate3d(
                var(--x5),
                -150vh,
                0
            )
            scale(0.88);

        opacity: 0;
    }
}


/*
|--------------------------------------------------------------------------
| EXPLOSIÓN
|--------------------------------------------------------------------------
*/

.bubble.is-popping {
    animation:
        bubble-pop
        180ms
        ease-out
        forwards !important;

    pointer-events: none;
}

@keyframes bubble-pop {

    0% {
        opacity: 1;
        transform: scale(1);
    }

    35% {
        opacity: 1;
        transform: scale(1.12);
    }

    100% {
        opacity: 0;
        transform: scale(0.15);
    }
}

.bubble-burst {
    position: fixed;

    z-index: 50;

    width: 1px;
    height: 1px;

    pointer-events: none;

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

.bubble-burst-ring {
    position: absolute;

    left: 0;
    top: 0;

    width: var(--burst-size);
    height: var(--burst-size);

    border:
        2px solid
        rgba(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b),
            0.75
        );

    border-radius: 50%;

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

    opacity: 1;

    animation:
        burst-ring
        450ms
        ease-out
        forwards;
}

@keyframes burst-ring {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0.2);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.7);

        opacity: 0;
    }
}

.burst-flash {
    position: absolute;

    left: 0;
    top: 0;

    width: var(--flash-size);
    height: var(--flash-size);

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,

            rgba(255, 255, 255, 0.95) 0%,

            rgba(
                var(--bubble-r),
                var(--bubble-g),
                var(--bubble-b),
                0.50
            ) 35%,

            transparent 72%
        );

    animation:
        burst-flash
        260ms
        ease-out
        forwards;
}

@keyframes burst-flash {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0.2);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.6);

        opacity: 0;
    }
}

.burst-particle {
    position: absolute;

    left: 0;
    top: 0;

    width: var(--particle-size);
    height: var(--particle-size);

    border-radius: 50%;

    background:
        rgb(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b)
        );

    box-shadow:
        0 0 8px
        rgba(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b),
            0.55
        );

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

    animation:
        burst-particle
        var(--particle-duration)
        cubic-bezier(.15, .7, .25, 1)
        forwards;
}

@keyframes burst-particle {

    0% {
        transform:
            translate(-50%, -50%)
            translate(0, 0)
            scale(1);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            translate(
                var(--particle-x),
                var(--particle-y)
            )
            scale(0);

        opacity: 0;
    }
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero {
    position: relative;

    z-index: 10;

    min-height: 100vh;

    display: flex;

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

    padding:
        40px
        24px;

    text-align: center;

    pointer-events: none;
}

.hero-content {
    position: relative;

    z-index: 20;

    max-width: 850px;
}

.eyebrow {
    display: inline-flex;

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

    margin-bottom: 28px;

    padding:
        9px
        18px;

    border:
        1px solid
        rgba(236, 72, 153, 0.18);

    border-radius: 999px;

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

    backdrop-filter:
        blur(12px);

    color:
        #be185d;

    font-size:
        0.72rem;

    font-weight:
        600;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;

    box-shadow:
        0
        8px
        30px
        rgba(236, 72, 153, 0.05);
}

h1 {
    font-size:
        clamp(
            4rem,
            11vw,
            9rem
        );

    font-weight:
        800;

    line-height:
        0.86;

    letter-spacing:
        -0.07em;

    color:
        #18181b;
}

h1 span {
    color:
        #db2777;
}

.subtitle {
    max-width:
        560px;

    margin:
        34px
        auto
        0;

    color:
        #71717a;

    font-size:
        clamp(
            1rem,
            2vw,
            1.25rem
        );

    line-height:
        1.7;
}

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        52px;

    margin-top:
        40px;

    padding:
        0
        28px;

    border-radius:
        999px;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        0.95rem;

    font-weight:
        600;

    background:
        linear-gradient(
            135deg,
            #db2777,
            #ec4899
        );

    box-shadow:
        0
        12px
        30px
        rgba(219, 39, 119, 0.22);

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

    pointer-events: auto;
}

.button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0
        18px
        40px
        rgba(219, 39, 119, 0.28);
}

.button-arrow {
    transition:
        transform
        0.3s ease;
}

.button:hover
.button-arrow {
    transform:
        translateX(4px);
}


/*
|--------------------------------------------------------------------------
| LUZ INFERIOR
|--------------------------------------------------------------------------
*/

.bottom-light {
    position: fixed;

    z-index: 2;

    left: 50%;
    bottom: -180px;

    transform:
        translateX(-50%);

    width: 80%;
    height: 350px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,

            rgba(244, 114, 182, 0.13),

            rgba(251, 207, 232, 0.06)
            45%,

            transparent
            72%
        );

    filter:
        blur(25px);

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| PANEL RGB
|--------------------------------------------------------------------------
*/

.bubble-controls {
    position: fixed;

    right: 26px;
    bottom: 26px;

    z-index: 100;

    width: 280px;

    padding:
        20px
        22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.75);

    border-radius:
        20px;

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

    backdrop-filter:
        blur(20px);

    box-shadow:
        0
        20px
        55px
        rgba(24, 24, 27, 0.10);
}

.controls-header {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom:
        20px;
}

.color-preview {
    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    border-radius:
        50%;

    background:
        rgb(
            var(--bubble-r),
            var(--bubble-g),
            var(--bubble-b)
        );

    border:
        3px solid
        #ffffff;

    box-shadow:
        0
        4px
        15px
        rgba(0, 0, 0, 0.14);
}

.controls-title strong {
    display: block;

    font-size:
        0.78rem;

    color:
        #27272a;
}

.controls-title span {
    display: block;

    margin-top:
        3px;

    font-size:
        0.68rem;

    color:
        #a1a1aa;
}

.control {
    display: grid;

    grid-template-columns:
        22px
        minmax(0, 1fr)
        40px;

    align-items:
        center;

    gap:
        11px;
}

.control +
.control {
    margin-top:
        17px;
}

.control label {
    font-size:
        0.75rem;

    font-weight:
        800;
}

.control span {
    font-size:
        0.7rem;

    font-weight:
        600;

    font-variant-numeric:
        tabular-nums;

    text-align:
        right;

    color:
        #71717a;
}

.control
input[type="range"] {
    -webkit-appearance:
        none;

    appearance:
        none;

    width: 100%;
    height: 5px;

    border: none;

    border-radius:
        999px;

    outline:
        none;

    cursor:
        pointer;
}

.control-red {
    color:
        #ef4444;
}

.control-red
input[type="range"] {
    background:
        linear-gradient(
            90deg,
            #450a0a,
            #ef4444
        );
}

.control-green {
    color:
        #22c55e;
}

.control-green
input[type="range"] {
    background:
        linear-gradient(
            90deg,
            #052e16,
            #22c55e
        );
}

.control-blue {
    color:
        #3b82f6;
}

.control-blue
input[type="range"] {
    background:
        linear-gradient(
            90deg,
            #172554,
            #3b82f6
        );
}

.control-red
input[type="range"]::-webkit-slider-thumb,
.control-green
input[type="range"]::-webkit-slider-thumb,
.control-blue
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:
        none;

    appearance:
        none;

    width:
        18px;

    height:
        18px;

    border:
        3px solid
        #ffffff;

    border-radius:
        50%;

    box-shadow:
        0
        2px
        8px
        rgba(0, 0, 0, 0.20);
}

.control-red
input[type="range"]::-webkit-slider-thumb {
    background:
        #ef4444;
}

.control-green
input[type="range"]::-webkit-slider-thumb {
    background:
        #22c55e;
}

.control-blue
input[type="range"]::-webkit-slider-thumb {
    background:
        #3b82f6;
}

.rgb-result {
    margin-top:
        19px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.07);

    font-family:
        monospace;

    font-size:
        0.72rem;

    color:
        #71717a;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media
(max-width: 768px) {

    .hero {
        padding:
            32px
            22px;
    }

    h1 {
        font-size:
            clamp(
                4rem,
                20vw,
                6.8rem
            );
    }

    .subtitle {
        max-width:
            380px;

        margin-top:
            28px;

        font-size:
            1rem;
    }

    .bubble-controls {
        right:
            14px;

        bottom:
            14px;

        width:
            245px;

        padding:
            16px
            18px;
    }
}

@media
(prefers-reduced-motion: reduce) {

    .bubble {
        display:
            none;
    }
}