/**
 * V&J Works Studio — marcos de dispositivo compartidos.
 *
 * Usados en la portada (body.vj-home) y en /designs/ (body.vj-designs).
 * Dos componentes: navegador (.vj-device--browser) y teléfono
 * (.vj-device--phone), cada uno con una "pantalla" de altura fija donde el
 * track `.vj-scroller__track` (imagen completa de la demo) se desplaza en
 * vertical por JS (vj-motion.js) para simular el scroll de la web real.
 *
 * Aislamiento: cargado solo en esas dos páginas; no afecta a las demos.
 */

/* --- Navegador (escritorio) --- */
.vj-device--browser {
	position: relative;
	background: #fff;
	border: 1px solid #d6d6d6;
	border-radius: 10px;
	box-shadow: 0 46px 80px -42px rgba(10, 10, 10, 0.6);
	overflow: hidden;
	transform: rotateY(6.5deg) rotateX(1.2deg);
	transform-style: preserve-3d;
	transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.vj-device--browser.is-alt {
	transform: rotateY(-6.5deg) rotateX(1.2deg);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.vj-device--browser:hover,
	.vj-device--browser.is-alt:hover {
		transform: rotateY(0deg) rotateX(0deg);
		box-shadow: 0 54px 90px -46px rgba(10, 10, 10, 0.7);
	}
}
.vj-device__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	margin: 0;
	background: var(--paper, #fff);
	border-bottom: 1px solid #e7e7e7;
}
/* Los tres puntos de la barra del navegador, vía ::before (sin elementos extra). */
.vj-device__bar::before {
	content: "";
	flex: none;
	width: 44px;
	height: 9px;
	background:
		radial-gradient(circle at 6px 5px, #d9d9d9 0 3px, transparent 4px),
		radial-gradient(circle at 20px 5px, #d9d9d9 0 3px, transparent 4px),
		radial-gradient(circle at 34px 5px, #d9d9d9 0 3px, transparent 4px);
}
.vj-device__dot {
	display: none;
}
.vj-device__url {
	flex: 1;
	margin: 0 6px 0 10px;
	height: 22px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: #f1f1f1;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--mid, #6e6e6e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vj-device__screen {
	position: relative;
	overflow: hidden;
	height: clamp(300px, 30vw, 460px);
	background: #ececec;
}

/* --- Teléfono (móvil) --- */
.vj-device--phone {
	position: relative;
	width: clamp(148px, 15vw, 200px);
	margin-inline: auto;
	background: #111;
	border: 1px solid #202020;
	border-radius: 26px;
	padding: 10px;
	box-shadow: 0 34px 60px -34px rgba(10, 10, 10, 0.65);
}
.vj-device--phone::before {
	content: "";
	display: block;
	width: 42px;
	height: 4px;
	margin: 0 auto 8px;
	border-radius: 999px;
	background: #333;
}
.vj-device--phone .vj-device__screen {
	height: clamp(320px, 34vw, 420px);
	border-radius: 18px;
	background: #ececec;
}

/* --- Scroller: la "web" se desplaza dentro de la pantalla --- */
.vj-scroller {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.vj-scroller__track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	will-change: transform;
	line-height: 0;
}
.vj-scroller img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	filter: none !important;
	transition: none !important;
	pointer-events: none;
}

/* Estado final visible si JS no arranca o hay movimiento reducido: primera vista.
   El script vj-motion.js pone el track en translateY(0) y lo anima; si JS falta,
   la primera pantalla de la demo queda visible y estática. */
.vj-scroller__track {
	transform: translateY(0);
}

/* --- Contenedores de presentación --- */
.vj-media {
	position: relative;
	perspective: 1600px;
}
@media (max-width: 781px) {
	.vj-device--browser,
	.vj-device--browser.is-alt {
		transform: none;
	}
	.vj-device__screen {
		height: 400px;
	}
	.vj-device--phone {
		width: clamp(160px, 42vw, 200px);
	}
	.vj-device--phone .vj-device__screen {
		height: 340px;
	}
}

/* Movimiento reducido: pantalla estática (primera vista de la demo). */
@media (prefers-reduced-motion: reduce) {
	.vj-scroller__track {
		transform: none !important;
		transition: none !important;
	}
	.vj-device--browser,
	.vj-device--browser.is-alt {
		transform: none !important;
		transition: none !important;
		box-shadow: 0 30px 60px -36px rgba(10, 10, 10, 0.4) !important;
	}
}