/*
Theme Name: Hello Molino Child V3
Template: hello-elementor
Version: 3.0
*/

/* Scrollbar completa */
::-webkit-scrollbar {
	width: 12px;
}
/* Fondo */
::-webkit-scrollbar-track {
	background: #000000;
}
/* Botón desplazable */
::-webkit-scrollbar-thumb {
	background: #ff0000;
	border-radius: 0;
	border: 2px solid #000000;
}
/* Hover */
::-webkit-scrollbar-thumb:hover {
	background: #cc0000;
}
/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #ff0000 #000000;
}
/* BASE */
body	{
	margin:0;
	background:#000;
	color:#fff;
	font-family: ui-sans-serif, system-ui, sans-serif, 
				   "Apple Color Emoji", 
				   "Segoe UI Emoji", 
				   "Segoe UI Symbol", 
				   "Noto Color Emoji";
	letter-spacing:0.04em;
}
#the-void, #the-rebellion, #the-lab, #the-node, #the-signal {
	scroll-margin-top: 120px;
}

#cinematicCut {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	transform: scaleY(0);
	transform-origin: top;
	z-index: 99999;
	pointer-events: none;
	transition: transform 0.45s cubic-bezier(.77,0,.18,1);
}
/* Activo */
#cinematicCut.active {
	transform: scaleY(1);
}
/* Contenedor */
#brutalCut {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	overflow: hidden;
}

.cut-black {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
}

/* Negro activo */
#brutalCut.black .cut-black {
	opacity: 1;
}

/* Cuando empieza el cierre */
#brutalCut.closing .cut-black {
	opacity: 0;
	transition: opacity 0.7s ease;
}

/* CÍRCULO ROJO */
.cut-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200vmax;
	height: 200vmax;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(255,0,0,0.95) 0%,
		rgba(255,0,0,0.6) 20%,
		rgba(255,0,0,0.25) 40%,
		rgba(0,0,0,1) 70%
	);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.7s cubic-bezier(.9,0,.1,1);
}

/* ABRIR */
#brutalCut.active .cut-glow {
	transform: translate(-50%, -50%) scale(1);
	animation: microInterference 0.08s infinite alternate;
}

/* CERRAR */
#brutalCut.closing .cut-glow {
	transform: translate(-50%, -50%) scale(0);
	animation: none;
}

/* MICRO VIBRACIÓN */
@keyframes microInterference {
	0%   { transform: translate(-50.4%, -49.6%) scale(1); }
	100% { transform: translate(-49.6%, -50.4%) scale(1); }
}

/* SIGNAL */
.signal{
	display:flex;
	align-items:center;
	gap:12px;
}
.text-zinc-400 {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / 1);
}
.text-zinc-800 {
    --tw-text-opacity: 1;
    color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.text-10px {
    font-size: 10px;
}
.section-sub-underline-offset-8 {
    text-underline-offset: 8px;
}
.section-middle-line{
	background-color: var(--e-global-color-17f21ca)!important;
	width: 13%;
    display: inline-block;
    vertical-align: middle;
	border: none;
	height:1px;
}
/* DOT */
.pulse{
	width:8px;
	height:8px;
	background:#ff0000;
	border-radius:50%;
	animation:molinoPulse 3s ease-in-out infinite;
}
@keyframes molinoPulse{
	0%{transform:scale(1);}
	30%{transform:scale(1.7);}
	55%{transform:scale(1.1);}
	75%{transform:scale(1.5);}
	100%{transform:scale(1);}
}
/* Glow brutal limpio */
.signal-video-content1:hover {
	color: #ffffff;
	text-shadow:
	0 0 4px rgba(255,255,255,0.4),
	0 0 12px rgba(255,255,255,0.3),
	0 0 32px rgba(255,255,255,0.2);
}
/* Glow industrial más crudo (tipo LED frío) */
.signal-video-content2:hover {
	color: #ffffff;
	text-shadow:
	0 0 2px rgba(255,255,255,0.8),
	0 0 6px rgba(255,255,255,0.6),
	0 0 18px rgba(180,220,255,0.5),
	0 0 40px rgba(120,180,255,0.4);
}
/* Vibración eléctrica sutil */
@keyframes industrialFlicker {
	0% { opacity: 1; }
	48% { opacity: 1; }
	49% { opacity: 0.92; }
	50% { opacity: 1; }
	98% { opacity: 1; }
	99% { opacity: 0.95; }
	100% { opacity: 1; }
}
.signal-video-content:hover {
	animation: industrialFlicker 6s infinite;
}
/* HAMBURGUESA BOTON */
.menu-toggle {
    width: 35px;
    height: 15px;
    position: relative;
    cursor: pointer;
    display: block;
}
/* LINEAS */
.menu-toggle span {
    display: block;
    position: absolute;
    right: 0;
    height: 1px;
    background: rgb(255 255 255 / 1) !important;
    transition: all 0.35s ease;
}
/* LINEA SUPERIOR */
.menu-toggle span:nth-child(1) {
    width: 40px;
    top: 0;
}
/* LINEA MEDIA (mitad tamaño alineada derecha) */
.menu-toggle span:nth-child(2) {
    width: 20px;
    top: 7px;
}
/* LINEA INFERIOR */
.menu-toggle span:nth-child(3) {
    width: 40px;
    bottom: 0;
}
/* ===== MENU ABIERTO ===== */
/* linea superior baja */
.menu-toggle.active span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}
/* linea medio desaparece */
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
/* linea inferior sube */
.menu-toggle.active span:nth-child(3) {
    top: 13px;
    bottom: auto;
    transform: rotate(-45deg);
}
/* FULLSCREEN MENU */
.fullscreen-menu{
	position:fixed;
	top:75px;
	left:0;
	width:100vw;
	height:100vh;
	background:#000000;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9998;
	/* OCULTO */
	transform: translateY(-100%);
	transition: transform 1s cubic-bezier(.77,0,.18,1);
}
/* VISIBLE */
.fullscreen-menu.active{
	transition-duration: 700ms;
	transform: translateY(0);
}
/* MENU */
.fullscreen-menu ul{
	list-style:none;
	padding:0;
	margin:0;
	text-align:center;
}
.fullscreen-menu li{
	margin:30px 0;
}
.fullscreen-menu a{
	color: white;
    text-decoration: none;
    font-size: 4.5rem;
    letter-spacing: 1px;
    font-weight: 300;
    transition: .25s;
    letter-spacing: -0.05em;
    line-height: 1;
}
.fullscreen-menu a:hover{
	--tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.signal-social {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-left: 16px;
}
.signal-social a {
	color: #71717a;
	transition: color 0.3s ease;
}
.signal-social a:hover {
	color: #ff0000;
	text-shadow:
	0 0 4px rgba(255,0,0,0.6),
	0 0 8px rgba(255,0,0,0.4);
}
.signal-social svg {
	width: 20px;
	height: 20px;
}
@media (max-width: 767px) {
	.text-10px {
		font-size: 7px;
	}
	.pulse{
		width:6px;
		height:6px;
	}
	.fullscreen-menu a{	
		font-size: 2.5rem;
	}
	.fullscreen-menu {
		top:0;
	}
}
/* ============================= */
/* ENTER THE REBELLION - GLITCH */
/* ============================= */
.enter-rebellion .elementor-button {
	position: relative;
	overflow: hidden;
	background: #000000;
	color: #ffffff;
	border: 1px solid #ff0000;
	transition: 0.3s ease;
}
/* Layer rojo glitch */
.enter-rebellion .elementor-button::before,
.enter-rebellion .elementor-button::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
}
.enter-rebellion .elementor-button::before {
	color: #ff0000;
	transform: translate(0);
}
.enter-rebellion .elementor-button::after {
	color: #ffffff;
}
/* Hover base */
.enter-rebellion .elementor-button:hover {
	background: #050505;
	box-shadow:
	0 0 8px rgba(255,0,0,0.6),
	0 0 18px rgba(255,0,0,0.4);
}
/* Activar glitch */
.enter-rebellion .elementor-button:hover::before {
	opacity: 1;
	animation: glitchTop 0.4s infinite;
}
.enter-rebellion .elementor-button:hover::after {
	opacity: 1;
	animation: glitchBottom 0.4s infinite;
}
@media (max-width: 767px) {
	.enter-rebellion .elementor-button::before {
		opacity: 1;
		animation: glitchTop 0.4s infinite;
	}
	.enter-rebellion .elementor-button::after {
		opacity: 1;
		animation: glitchBottom 0.4s infinite;
	}
}
/* ============================= */
/* ANIMACIONES                   */
/* ============================= */
@keyframes glitchTop {
	0% { transform: translate(0); }
	20% { transform: translate(-2px, -1px); }
	40% { transform: translate(2px, 1px); }
	60% { transform: translate(-1px, 0); }
	80% { transform: translate(1px, -1px); }
	100% { transform: translate(0); }
}
@keyframes glitchBottom {
	0% { transform: translate(0); }
	20% { transform: translate(2px, 1px); }
	40% { transform: translate(-2px, -1px); }
	60% { transform: translate(1px, 0); }
	80% { transform: translate(-1px, 1px); }
	100% { transform: translate(0); }
}



.menu-mail {
	position: absolute;
	bottom: 6rem;
	right: 3rem;
	width: 160px;
	text-decoration: none;
}
@media (max-width: 767px) {
	.menu-mail {
		bottom: 1rem;
		right: auto;
		width: 130px;
	}
}
.signal-svg {
	width: 100%;
	height: auto;
	animation: flicker 4s infinite;
}

.wave {
	fill: none;
	stroke: #ffffff;
	stroke-width: 2;
	opacity: 0.4;
	animation: wavePulse 3s ease-in-out infinite;
}

/* Delay para que no pulsen igual */
.wave:nth-of-type(1) { animation-delay: 0s; }
.wave:nth-of-type(2) { animation-delay: 0.5s; }
.wave:nth-of-type(3) { animation-delay: 1s; }

@keyframes wavePulse {
	0%,100% { opacity: 0.3; }
	50% { opacity: 0.8; }
}

/* Núcleo */
.signal-core {
	fill: #ff0000;
	animation: pulseCore 1.2s infinite;
}

/* Sobre */
.envelope-body,
.envelope-flap {
	fill: none;
	stroke: #ffffff;
	stroke-width: 2;
}

/* Texto */
.rebellion-text {
	fill: #ffffff;
	font-size: 17px;
	letter-spacing: 2px;
	font-family: monospace;
}

/* Hover hackeo */
.menu-mail:hover .envelope-body,
.menu-mail:hover .envelope-flap {
	stroke: #ff0000;
}

.menu-mail:hover .rebellion-text {
	fill: #ff0000;
}

/* Animaciones */
@keyframes radarSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes pulseCore {
	0%,100% { r:6; opacity:1; }
	50% { r:9; opacity:0.6; }
}

@keyframes flicker {
	0%,100% { opacity:1; }
	3% { opacity:0.7; }
	5% { opacity:1; }
	8% { opacity:0.8; }
	9% { opacity:1; }
}

/* Imagen The REbellion animacion */
/************/
.glitch-image{
position:relative;
display:inline-block;
overflow:hidden;
}

.glitch-image img{
display:block;
width:100%;
}

.glitch-image canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
mix-blend-mode:screen;
}

/* CRT scanlines */

.glitch-image::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;

background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.05),
rgba(255,255,255,0.05) 1px,
transparent 1px,
transparent 3px
);

opacity:.35;
}

/****************/
.glitch-broadcast{
position:relative;
display:inline-block;
overflow:hidden;
}

.glitch-broadcast img{
display:block;
width:100%;
}

.glitch-broadcast canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
mix-blend-mode:screen;
}

/* CRT scanlines */

.glitch-broadcast::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;

background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 3px
);

opacity:.35;
}

/* broadcast flicker */

.glitch-broadcast{
animation:broadcastFlicker 8s infinite;
}

@keyframes broadcastFlicker{

0%,100%{opacity:1}
48%{opacity:1}
49%{opacity:.85}
50%{opacity:1}
51%{opacity:.92}
52%{opacity:1}

}

/****************************/

.glitch-img{
position:relative;
display:inline-block;
overflow:hidden;
}

.glitch-img canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}