:root {

    --ojkita-bg: #0D0D0D;
    --ojkita-text: #F5F5F5;
    --ojkita-acid: #A3FF12;
    --ojkita-purple: #6C2BFF;

    --container: 1400px;

    --radius: 20px;

}

html, body {
    
    /* QUITAR SCROLL CUANDO DESPEGA EL COHETE */
	overflow-x:hidden;
}

body {
    background: var(--ojkita-bg);
    color: var(--ojkita-text);
    font-family: 'Inter', sans-serif;
}

/* EFECTO RUIDO */
body::before{

	content:'';

	position:fixed;

	inset:0;

	background:url('../img/noise/noise.webp');

	background-repeat:repeat;

	opacity:1;

	pointer-events:none;

	z-index:9999;
}

/* ************************** SMILE ******************* */

.ojkita-smiley{

	animation: ojkitaFloat 6s ease-in-out infinite;

	will-change:transform;
}

@keyframes ojkitaFloat{

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

	50%{
		transform:
		translateY(-18px)
		rotate(2deg);
	}

	100%{
		transform:
		translateY(0px)
		rotate(0deg);
	}
}

/* *************************** ************************** */
/* ************************** COHETE ******************* */
.elementor-icon-box-icon {

    overflow: visible;
    position: relative;
}

.e-fas-rocket {

    width: 80px;

    transform-origin: center center;

    will-change: transform, opacity;

}

/* Clase que activa el despegue */

.e-fas-rocket.launch {

    animation: ojkitaRocketLaunch 2.5s cubic-bezier(.22, .61, .36, 1) forwards;

    filter:
        drop-shadow(0 0 10px #A3FF12) drop-shadow(0 0 25px #A3FF12);
}

.e-fas-rocket::after {
    content: '';
}

/* Animación */

@keyframes ojkitaRocketLaunch {

    0% {
        transform:
            translate(0, 0) rotate(0deg) scale(1);
    }

    8% {
        transform:
            translate(5px, -5px) rotate(-2deg);
    }

    16% {
        transform:
            translate(10px, -10px) rotate(2deg);
    }

    24% {
        transform:
            translate(20px, -20px) rotate(-1deg);
    }

    35% {

        transform:
            translate(60px, -60px) rotate(6deg) scale(1.03);

    }

    100% {

        transform:
            translate(1200px, -1200px) rotate(18deg) scale(.6);

        opacity: 10;
        filter:
            blur(4px) drop-shadow(0 0 25px #A3FF12);
    }
}

/* ***************** CURSOR ************* */
.cursor-glow{

	position:fixed;

	width:20px;
	height:20px;

	border-radius:50%;

	background:#A3FF12;

	filter:blur(10px);

	pointer-events:none;

	z-index:99999;

	opacity:.55;

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