/*
 * Devenir ([jc_devenir]): obra a pantalla completa en la portada, sin texto ni controles.
 * Esta hoja solo se carga en la portada.
 */

/* WoodMart reserva siempre el hueco de la barra de desplazamiento (html { overflow-y: scroll;
   scrollbar-gutter: stable }), que en escritorio deja una franja gris a la derecha. La portada no se
   desplaza: sin ese hueco, la obra llega al borde. :root gana a "html" aunque el tema cargue después. */
:root {
	overflow-y: auto;
	scrollbar-gutter: auto;
}

.jcd {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #000;
}

.jcd__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.jcd__canvas:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
}

/* La obra sigue bajo la cabecera y bajo la barra inferior del móvil: el tema pinta ambas de negro
   opaco y aquí se vuelven un degradado translúcido que solo protege el logotipo y el menú. */
body.home .whb-top-bar {
	background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

body.home .wd-toolbar {
	background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
	box-shadow: none;
}

/* Sin WebGL: el retrato quieto y velado (devenir.js pone la imagen). */
.jcd.is-fallback {
	background-position: center;
	background-size: cover;
}

.jcd.is-fallback .jcd__canvas {
	display: none;
}