/* ==========================================================================
   CUOH - AMBIENTACIÓN DÍA DE MUERTOS (CEMPASÚCHIL & VELADORA CALAVERITA) v3.0
   Centro Universitario del Oriente de Hidalgo
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Capa de Atmósfera Crepuscular (Luz Radial que emana de la Calaverita)
   -------------------------------------------------------------------------- */
#cuoh_cempasuchil_overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	/* Viñeta crepuscular limpia: 100% transparente sobre la calaverita (sin tinte amarillo)
	   para que se aprecie su diseño puro y fondos vectoriales */
	background: radial-gradient(
		circle 110vmax at 72px calc(100% - 150px),
		transparent 0%,
		transparent 22%,
		rgba(32, 14, 38, 0.35) 48%,
		rgba(16, 6, 24, 0.62) 75%,
		rgba(8, 3, 14, 0.76) 100%
	);
	pointer-events: none !important;
	z-index: 998;
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0.85s ease;
}

#cuoh_cempasuchil_overlay.cuoh-off {
	opacity: 0;
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   2. Canvas de Pétalos, Suelo y Colchón
   -------------------------------------------------------------------------- */
#cuoh_cempasuchil_canvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	pointer-events: none !important;
	z-index: 999;
}

/* --------------------------------------------------------------------------
   3. Botón / Contenedor de la Calaverita SVG con Veladora
   -------------------------------------------------------------------------- */
#cuoh_veladora_container {
	position: fixed;
	bottom: 100px;
	left: 20px;
	z-index: 1001;
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	user-select: none;
	-webkit-user-select: none;
}

/* El botón de la veladora calaverita (sin bordes ni outline al hacer clic) */
.cuoh-veladora-btn {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0;
	margin: 0;
	cursor: pointer;
	position: relative;
	width: 105px;
	height: 105px;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.65));
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	border-radius: 50%;
	-webkit-tap-highlight-color: transparent !important;
}

.cuoh-veladora-btn:hover {
	transform: scale(1.08) translateY(-3px);
}

.cuoh-veladora-btn:focus,
.cuoh-veladora-btn:active,
.cuoh-veladora-btn:focus-visible {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.cuoh-veladora-btn::-moz-focus-inner {
	border: 0 !important;
}

/* SVG Oficial de la Calaverita */
.cuoh-veladora-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* --------------------------------------------------------------------------
   4. Animación en Capas de la Flama (Grupo #lumbre y componentes)
   -------------------------------------------------------------------------- */
#lumbre {
	transform-origin: 388px 245px;
	animation: cuoh_calavera_flame 2.4s ease-in-out infinite alternate;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

#lumbre-fondo {
	transform-origin: 388px 245px;
	animation: cuoh_flame_outer 1.8s ease-in-out infinite alternate;
}

#lumbre-frente {
	transform-origin: 388px 245px;
	animation: cuoh_flame_core 1.2s ease-in-out infinite alternate;
}

#lumbre-fondo-reflejo,
#lumbre-frente-reflejo {
	transform-origin: 388px 245px;
	animation: cuoh_flame_glow 1.9s ease-in-out infinite alternate;
}

/* Al pasar el cursor: la llama "baila" y se agita más rápido */
.cuoh-veladora-btn:hover #lumbre {
	animation: cuoh_flame_dance_fast 0.22s ease-in-out infinite alternate;
	transform: scale(1.1) rotate(-5deg);
}

/* Cursor interactivo de "soplo/apagar" en hover */
.cuoh-veladora-btn.is-active:hover {
	cursor:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ff9e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2'/></svg>")
			16 16,
		pointer;
}

/* Cuando se apaga la veladora */
.cuoh-veladora-btn.is-off #lumbre {
	opacity: 0;
	transform: scale(0.05) translateY(45px);
	pointer-events: none;
}

/* Brasa roja tenue en la punta de la mecha cuando está apagada */
.cuoh-mecha-ember {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.cuoh-veladora-btn.is-off .cuoh-mecha-ember {
	opacity: 0.9;
	animation: cuoh_ember_pulse 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   5. Tooltip / Píldora de Estado
   -------------------------------------------------------------------------- */
.cuoh-veladora-tooltip {
	background: rgba(18, 10, 26, 0.92);
	color: #ffbe6a;
	padding: 7px 14px;
	border-radius: 20px;
	font-family:
		'Open Sans',
		'Raleway',
		-apple-system,
		sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	border: 1px solid rgba(255, 160, 20, 0.38);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateX(-6px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.cuoh-veladora-container:hover .cuoh-veladora-tooltip,
.cuoh-veladora-btn:focus-visible + .cuoh-veladora-tooltip {
	opacity: 1;
	transform: translateX(0);
}

.cuoh-veladora-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff7700;
	box-shadow: 0 0 8px #ff9e00;
	animation: cuoh_dot_pulse 1.2s infinite;
}

.cuoh-veladora-btn.is-off + .cuoh-veladora-tooltip .cuoh-veladora-badge-dot {
	background: #777;
	box-shadow: none;
	animation: none;
}

/* --------------------------------------------------------------------------
   6. Keyframes de Flama en Calaverita
   -------------------------------------------------------------------------- */
@keyframes cuoh_calavera_flame {
	0% {
		transform: scale(1) rotate(-1.5deg);
		opacity: 0.96;
	}
	25% {
		transform: scale(1.05, 0.95) rotate(2deg);
		opacity: 1;
	}
	50% {
		transform: scale(0.96, 1.06) rotate(-2.5deg);
		opacity: 0.94;
	}
	75% {
		transform: scale(1.03, 0.98) rotate(1.8deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0deg);
		opacity: 0.98;
	}
}

@keyframes cuoh_flame_outer {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.04, 0.97) rotate(-1deg);
	}
}

@keyframes cuoh_flame_core {
	0%,
	100% {
		transform: scale(1) translate(0, 0);
	}
	50% {
		transform: scale(1.08, 0.93) translate(1px, -2px);
	}
}

@keyframes cuoh_flame_glow {
	0%,
	100% {
		opacity: 0.85;
	}
	50% {
		opacity: 1;
		transform: scale(1.06);
	}
}

@keyframes cuoh_flame_dance_fast {
	0% {
		transform: scale(1.08, 0.93) rotate(-6deg);
	}
	50% {
		transform: scale(0.92, 1.1) rotate(5deg);
	}
	100% {
		transform: scale(1.1, 0.9) rotate(-5deg);
	}
}

@keyframes cuoh_ember_pulse {
	0%,
	100% {
		fill: #852000;
	}
	50% {
		fill: #ff3b00;
	}
}

@keyframes cuoh_dot_pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.5;
		transform: scale(0.8);
	}
}

/* --------------------------------------------------------------------------
   7. Responsividad y Accesibilidad
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	#cuoh_veladora_container {
		bottom: max(80px, env(safe-area-inset-bottom, 12px));
		left: max(12px, env(safe-area-inset-left, 12px));
	}
	.cuoh-veladora-btn {
		width: 72px;
		height: 72px;
	}
	.cuoh-veladora-tooltip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cuoh_cempasuchil_canvas {
		display: none !important;
	}
	#lumbre,
	#lumbre-fondo,
	#lumbre-frente,
	#lumbre-fondo-reflejo,
	#lumbre-frente-reflejo {
		animation: none !important;
	}
}