/* ==========================================================================
   41 · EFECTOS
   --------------------------------------------------------------------------
   Ambiente y textura de la superficie de marketing: orbes difuminados, texto
   recortado sobre degradado, cristal y el punto que late.

   Separados de 40-components.css a propósito: son capas decorativas que se
   añaden a un componente, no componentes en sí. Ninguna de estas clases
   aporta contenido, así que todas son invisibles para un lector de pantalla.

   Solo en el front, no en el editor (decisión 035): se usan en la portada,
   que es PHP, y en las landings, que se editan en la pestaña Texto. Ningún
   editor visual llega a pintar un orbe.

   NOTA: la elevación al pasar el ratón NO está aquí. Vive dentro de .card,
   en 40-components.css, y no se extrae a una utilidad: dos implementaciones
   del mismo gesto es exactamente lo que prohíbe la invariante 8.
   ========================================================================== */

/* ==========================================================================
   ORBES DE AMBIENTE
   --------------------------------------------------------------------------
   Manchas de color enormes y muy desenfocadas detrás del contenido. Es la
   textura característica del mundo oscuro: sin ellas, Night Green a pantalla
   completa se ve plano.

   Se apoyan en que .section ya declara `position: relative`,
   `isolation: isolate` y `overflow: hidden` (20-layout.css). El aislamiento
   es lo que impide que un orbe se derrame sobre la sección siguiente.

   El elemento va vacío y con aria-hidden en el marcado.
   ========================================================================== */

.orb {
	position: absolute;
	z-index: -1;
	width: 24rem;
	height: 24rem;
	border-radius: var(--radius-pill);
	filter: blur(var(--blur-orb));
	pointer-events: none;
}

.orb--brand {
	background-color: var(--c-accent);
	opacity: 0.12;
}

.orb--cta {
	background-color: var(--c-cta);
	opacity: 0.1;
}

/* ── Posición ──────────────────────────────────────────────────────────────
   Los orbes sobresalen del contenedor a propósito: se ve el borde difuso,
   nunca el círculo entero. Un círculo completo se lee como una forma; medio
   círculo desenfocado se lee como luz.
   ────────────────────────────────────────────────────────────────────────── */

.orb--tr {
	inset-block-start: 0;
	inset-inline-end: 0;
	transform: translate(25%, -35%);
}

.orb--bl {
	inset-block-end: 0;
	inset-inline-start: 0;
	transform: translate(-25%, 35%);
}

/* En móvil ocupan casi toda la pantalla y ensucian la lectura. */
@media (max-width: 767px) {
	.orb {
		width: 16rem;
		height: 16rem;
	}
}

/* ==========================================================================
   TEXTO EN DEGRADADO
   --------------------------------------------------------------------------
   Recorta el degradado de marca contra la forma de las letras. Se reserva
   para una o dos palabras de un titular: aplicado a un párrafo entero destroza
   el contraste y deja el texto ilegible.
   ========================================================================== */

.gradient-text {
	background-image: var(--g-brand);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* El degradado dual —verde a naranja— es de uso puntual según el manual. */
.gradient-text--dual {
	background-image: var(--g-dual);
}

/* En modo de alto contraste el sistema impone sus colores y un texto
   transparente desaparece por completo. Se devuelve a color sólido. */
@media (forced-colors: active) {
	.gradient-text,
	.gradient-text--dual {
		background-image: none;
		color: CanvasText;
	}
}

/* ==========================================================================
   CRISTAL
   --------------------------------------------------------------------------
   Superficie translúcida con desenfoque de lo que hay detrás. El alias
   --c-glass se reasigna en .is-dark (ver 00-tokens.css): en el mundo claro es
   blanco opaco, porque una capa translúcida sobre Mint Surface no se
   distinguiría del fondo. Un solo componente, dos resultados.
   ========================================================================== */

.is-glass {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	background-color: var(--c-glass);
	backdrop-filter: blur(var(--blur-glass));
}

/* ==========================================================================
   PUNTO QUE LATE
   --------------------------------------------------------------------------
   El indicador de «en directo» de los badges. El punto sólido se ve SIEMPRE;
   lo que se anima es el halo que se expande a su alrededor. Así, con el
   movimiento reducido, el indicador sigue estando: no desaparece, deja de
   moverse.
   ========================================================================== */

.pulse-dot {
	position: relative;
	display: inline-flex;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
}

.pulse-dot::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-pill);
	background-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.pulse-dot::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--radius-pill);
		background-color: currentColor;
		opacity: 0.75;
		animation: p2080-pulse 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
	}

	@keyframes p2080-pulse {
		75%,
		100% {
			transform: scale(2.4);
			opacity: 0;
		}
	}
}