/* ══════════════════════════════════════════════════════════════
   09 · AMBIENTE YOKAI — "TOKIO NOCTURNO"
   ──────────────────────────────────────────────────────────────
   El fondo del sitio NO es negro plano. Es un cielo de neón
   continuo que recorre toda la página, sin franjas: rosa, morado
   y cian difuminados sobre #0a0a0c, con una trama de puntos
   estilo manga por encima que cose las secciones entre sí.

   Todo en CSS. Cero imágenes, cero peticiones, sin impacto en LCP.

   Se carga el ÚLTIMO a propósito: necesita ganarle al fondo plano
   que los componentes traen por defecto.
   ══════════════════════════════════════════════════════════════ */

/* ── Lienzo global continuo ──
   UNA SOLA capa fija, no dos. El cielo y la trama de puntos viajan
   en el mismo pseudo-elemento como capas de background-image, así el
   compositor gestiona un único plano en lugar de dos.

   `translateZ(0)` lo promociona a su propia capa de GPU: se rasteriza
   UNA vez y durante el scroll solo se compone, sin repintar. Es la
   diferencia entre un fondo gratis y uno que arrastra el scroll en
   iOS. `contain: strict` impide que nada de aquí afecte al layout. ── */
body.yk-body { position: relative; background: var(--yk-night); }

body.yk-body::before {
	content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
	background-image:
		/* trama manga (semitono) */
		radial-gradient(circle, rgba(255, 255, 255, .045) 1px, transparent 1.4px),
		/* cielo de neón */
		radial-gradient(45% 30% at 10%  4%, rgba(255,   0, 156, .26) 0%, transparent 52%),
		radial-gradient(42% 28% at 90% 16%, rgba(120,  40, 255, .22) 0%, transparent 55%),
		radial-gradient(48% 32% at 20% 34%, rgba(255,   0, 156, .16) 0%, transparent 52%),
		radial-gradient(46% 30% at 82% 50%, rgba(120,  40, 255, .20) 0%, transparent 55%),
		radial-gradient(50% 34% at 16% 68%, rgba(255,   0, 156, .18) 0%, transparent 54%),
		radial-gradient(46% 32% at 86% 82%, rgba(  0, 200, 255, .16) 0%, transparent 54%),
		radial-gradient(52% 36% at 40% 96%, rgba(120,  40, 255, .16) 0%, transparent 52%);
	background-size: 14px 14px, auto, auto, auto, auto, auto, auto, auto;
	background-color: var(--yk-night);

	transform: translateZ(0);
	will-change: transform;
	contain: strict;
}

/* ── Las secciones son transparentes: dejan ver el cielo ── */
.yk-section { background: transparent; position: relative; }

/* ── Speed lines de manga, radiando desde una esquina ── */
.yk-atmo--speed { position: relative; }
.yk-atmo--speed > * { position: relative; z-index: 1; }
.yk-atmo--speed::after {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	opacity: .4;
	background: repeating-conic-gradient(from 35deg at 108% -8%,
		transparent 0deg, transparent 2.2deg,
		rgba(255, 255, 255, .05) 2.2deg, rgba(255, 255, 255, .05) 2.6deg);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
	        mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.yk-atmo--speed-left::after {
	background: repeating-conic-gradient(from 215deg at -8% 108%,
		transparent 0deg, transparent 2.2deg,
		rgba(255, 255, 255, .05) 2.2deg, rgba(255, 255, 255, .05) 2.6deg);
}

/* ── Kanji de marca de agua ──
   Uso: <section class="yk-section yk-watermark" data-watermark="鬼"> */
.yk-watermark { position: relative; overflow: hidden; }
.yk-watermark > * { position: relative; z-index: 1; }
.yk-watermark::after {
	content: attr(data-watermark);
	position: absolute; right: -2%; top: 2%; z-index: 0;
	font-family: var(--yk-f-display), 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
	font-weight: 900; font-size: clamp(180px, 42vw, 400px); line-height: .8;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 0, 156, .22);
	pointer-events: none; user-select: none;
}
.yk-watermark--left::after { right: auto; left: -2%; }

/* ── Legibilidad sobre el cielo y el kanji ──
   Sombra suave en lugar de una caja opaca: mantiene el ambiente
   y sube el contraste del texto lo justo. ── */
.yk-section h1, .yk-section h2,
.yk-section .yk-h1, .yk-section .yk-h2,
.yk-section .yk-lede, .yk-section .yk-body-text {
	text-shadow: 0 2px 16px rgba(10, 10, 12, .85), 0 0 26px rgba(10, 10, 12, .55);
}

/* ── Superficies translúcidas ──
   SIN backdrop-filter. Desenfocar el fondo es el efecto más caro que
   existe en CSS: se recalcula por elemento y por fotograma. Con la
   opacidad justa se consigue el mismo efecto de "se ve el cielo
   detrás" a coste cero. ── */
.yk-card { background: rgba(10, 10, 12, .72); }
.yk-faq__item { background: rgba(10, 10, 12, .45); }

/* ── Banda CTA con resplandor de esquina ── */
.yk-ctaband { position: relative; overflow: hidden; }
.yk-ctaband::after {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(80% 120% at 100% 0%, rgba(255, 0, 156, .20) 0%, transparent 60%);
}
.yk-ctaband > * { position: relative; z-index: 1; }

/* ── Ahorro de batería y de GPU ──
   Con reduced-motion se conserva el cielo pero se retira la trama:
   es el efecto que más cuesta repintar durante el scroll. ── */
@media (prefers-reduced-motion: reduce) {
	.yk-atmo--speed::after { display: none; }
}

/* ── Móvil: se retiran los efectos que cuestan rasterizado ──
   El cielo se queda (es una sola capa promocionada y sale gratis).
   Fuera las speed lines cónicas y el kanji gigante, que sí obligan
   a rasterizar superficies grandes en dispositivos con poca GPU. ── */
@media (max-width: 768px) {
	.yk-atmo--speed::after { display: none; }
	.yk-watermark::after { font-size: clamp(140px, 50vw, 220px); opacity: .6; }
}