/**
 * Burbujas flotantes · la nube del equipo en el home
 * ---------------------------------------------------------------------------
 *
 * Variante desordenada de `.dk-burbujas`. La fila ordenada sigue existiendo y
 * es la que usa /estudio/, donde hay hasta 22 caras por área y una nube de 22
 * no se lee. Aquí son ocho como mucho, y el desorden es el punto.
 *
 * Vive en archivo aparte y no dentro de `equipo.css` a propósito: aquella hoja
 * la escribió la otra sesión y este efecto es un añadido, no una corrección de
 * lo suyo. Separadas, las dos se pueden tocar sin pisarse.
 *
 * Tres capas, y conviene no confundirlas:
 *
 *   1. El escenario (`.dk-equipo__nube`) pone la perspectiva. Es quien se
 *      inclina con el puntero, en bloque, para que la nube tenga volumen.
 *   2. La burbuja (`li`) se coloca en su sitio y se hunde o se acerca con
 *      `translateZ`. De ahí sale el paralaje: las de atrás se mueven menos.
 *   3. El enlace flota. Va dentro para que su animación no pelee con la
 *      colocación de la burbuja — dos animaciones sobre el mismo `transform`
 *      se anulan, y ése es el error clásico de este tipo de efecto.
 *
 * El vidrio es un disco detrás de la foto, no un filtro sobre ella: una foto es
 * opaca y `backdrop-filter` encima de ella no tiene nada que difuminar. Cómo se
 * consigue que se lea como cristal sobre un fondo negro está explicado abajo,
 * en la sección del vidrio.
 */

/* ------------------------------------------------------------ el escenario */

.dk-equipo__nube {
	position: relative;
	/* Alto fijo porque las burbujas van en posición absoluta: sin esto el
	   contenedor colapsa a cero y la sección se come al pie. */
	height: clamp(300px, 40vh, 430px);
	margin-top: clamp(1rem, 2.4vh, 2rem);
	perspective: 1100px;
	perspective-origin: 50% 45%;
}

.dk-burbujas--flotan {
	position: absolute;
	inset: 0;
	display: block;          /* deja de ser fila: cada burbuja va a su sitio */
	transform-style: preserve-3d;
	/* --gx y --gy los escribe motion.js con la posición del puntero, de -1 a 1.
	   Sin JavaScript valen 0 y la nube se queda de frente, que es un estado
	   válido: el efecto es un extra, no un requisito para ver las caras. */
	transform: rotateX(calc(var(--gy, 0) * -6deg)) rotateY(calc(var(--gx, 0) * 9deg));
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- la burbuja */

.dk-burbujas--flotan .dk-burbuja {
	position: absolute;
	left: var(--x);
	top: var(--y);
	/*
	 * El tamaño de cada burbuja va en el ANCHO, no en `scale`.
	 *
	 * Con `scale` se encogía el `<li>` entero, y dentro va el nombre: la burbuja
	 * más hundida dejaba su nombre en 9,2 px y su cargo en 7,3 px, ilegibles, y
	 * era justo la que más ayuda necesitaba. Cambiando el ancho, la cara encoge
	 * igual pero la letra conserva su tamaño, porque `width` no la toca.
	 */
	--base: clamp(88px, 11vw, 150px);
	width: calc(var(--base) * var(--s, 1));
	max-width: none;
	flex: none;
	/* `translate` es propiedad propia, no parte de `transform`. Por eso la
	   colocación convive con el `translateZ` de abajo sin que una borre a la
	   otra. La profundidad sigue en el `<li>` para que la cara y su nombre se
	   muevan juntos cuando la nube se inclina. */
	translate: -50% -50%;
	transform: translateZ(var(--z, 0px));
	/* Pinta en el orden de la profundidad, no en el del marcado. */
	z-index: var(--capa, 1);
}

/* Las que están al fondo pierden un poco de nitidez y de luz. Es lo que hace
   que la profundidad se note de verdad y no parezca sólo un cambio de tamaño. */
.dk-burbujas--flotan .dk-burbuja__enlace {
	position: relative;
	gap: 8px;
	animation: dk-burbuja-flota var(--dur, 10s) ease-in-out var(--del, 0s) infinite;
	will-change: transform;
}

@keyframes dk-burbuja-flota {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	33%      { transform: translate3d(calc(var(--amp) * .4), calc(var(--amp) * -1), 0) rotate(1.2deg); }
	66%      { transform: translate3d(calc(var(--amp) * -.5), calc(var(--amp) * .7), 0) rotate(-1deg); }
}

/* ------------------------------------------------------------- el vidrio */

/*
 * Vidrio de verdad sobre fondo negro: el truco.
 *
 * `backdrop-filter` desenfoca lo que hay detrás. Detrás de estas burbujas está
 * el fondo casi negro del sitio, y negro desenfocado sigue siendo negro: la
 * primera versión salió como un aro oscuro, no como cristal. El vidrio se ve
 * cuando hay COLOR que refractar, así que hay que ponerlo.
 *
 * De ahí las tres capas, de atrás hacia delante:
 *
 *   1. El derrame (`__enlace::before`). La propia foto, ampliada y muy
 *      desenfocada. Es de donde sale el color del halo, y por eso cada burbuja
 *      tiene el suyo: el que va de camisa clara derrama claro, el de fondo de
 *      ladrillo derrama naranja. Eso es lo «líquido».
 *   2. El cristal (`__enlace::after`). El disco que difumina ese derrame y le
 *      pone el canto. Aquí sí hay algo que difuminar.
 *   3. El brillo (`__foto::after`). La luz que recorre el borde.
 *
 * La foto llega por la variable --foto, que escribe la plantilla. Quien no
 * tiene foto se queda sin derrame y con el cristal a secas, que sobre el
 * naranja de su inicial funciona igual.
 */

.dk-burbujas--flotan .dk-burbuja__enlace::before,
.dk-burbujas--flotan .dk-burbuja__enlace::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: 50%;
	pointer-events: none;
}

/* 1 · el derrame de color */
.dk-burbujas--flotan .dk-burbuja__enlace::before {
	width: 152%;
	margin-top: calc(-76% - 19px);
	background-image: var(--foto, none);
	background-size: cover;
	background-position: center 35%;
	/* Discreto a propósito. A .62 el halo se comía los nombres de las burbujas
	   de al lado y la nube parecía un montón de luces, no un montón de gente. */
	filter: blur(22px) saturate(220%) brightness(1.1);
	opacity: .34;
	z-index: -2;
}

/* 2 · el cristal */
.dk-burbujas--flotan .dk-burbuja__enlace::after {
	width: 128%;
	margin-top: calc(-64% - 19px);
	background:
		radial-gradient(130% 130% at 28% 20%, rgb(255 255 255 / .30), rgb(255 255 255 / .05) 44%, transparent 62%),
		linear-gradient(150deg, rgb(255 255 255 / .16), rgb(255 255 255 / .02) 52%, rgb(255 61 20 / .10));
	backdrop-filter: blur(11px) saturate(190%) brightness(1.1);
	-webkit-backdrop-filter: blur(11px) saturate(190%) brightness(1.1);
	border: 1px solid rgb(255 255 255 / .2);
	box-shadow:
		inset 2px 2px 1px -1px rgb(255 255 255 / .55),
		inset -8px -12px 22px -12px rgb(0 0 0 / .65),
		0 26px 52px -22px rgb(0 0 0 / .85);
	z-index: -1;
}

/* 3 · el brillo especular, girando muy despacio por el canto */
.dk-burbujas--flotan .dk-burbuja__foto::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgb(255 255 255 / .5) 24deg,
		transparent 72deg,
		transparent 208deg,
		rgb(255 255 255 / .2) 244deg,
		transparent 290deg
	);
	mix-blend-mode: screen;
	opacity: .6;
	animation: dk-burbuja-brillo calc(var(--dur, 10s) * 2.4) linear infinite;
	pointer-events: none;
}

@keyframes dk-burbuja-brillo {
	to { rotate: 360deg; }
}

.dk-burbujas--flotan .dk-burbuja__foto {
	border-color: rgb(255 255 255 / .16);
	box-shadow: 0 10px 26px -12px rgb(0 0 0 / .85);
}

/* ------------------------------------------------- los nombres, legibles */

/*
 * Con las burbujas repartidas, un nombre puede caer sobre la foto de la de
 * atrás. La sombra de texto lo despega sin poner una caja, que rompería el
 * desorden. Y el `z-index` sube para que ningún disco de vidrio lo tape.
 */
.dk-burbujas--flotan .dk-burbuja__nombre,
.dk-burbujas--flotan .dk-burbuja__cargo {
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 10px rgb(11 9 8 / .95), 0 0 3px rgb(11 9 8 / .8);
}

/* Tamaño fijo, el mismo en las ocho: ya no depende de lo hundida que esté la
   burbuja. La perspectiva todavía las mueve un poco —de 13,2 px a 15,5 px con
   los 1100 px de `perspective`— y ese margen sí se lee. */
.dk-burbujas--flotan .dk-burbuja__nombre { font-size: .9rem; }
.dk-burbujas--flotan .dk-burbuja__cargo  { font-size: .72rem; }

/* Al pasar el puntero, esa burbuja se adelanta: sale del plano del resto. */
.dk-burbujas--flotan .dk-burbuja:hover,
.dk-burbujas--flotan .dk-burbuja:focus-within {
	z-index: 20;
	transform: translateZ(calc(var(--z, 0px) + 90px));
}

.dk-burbujas--flotan .dk-burbuja {
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- la entrada */

/*
 * Llegan desde el fondo, no desde abajo. Es la misma idea que el resto de las
 * revelaciones del sitio, pero en el eje que le toca a una nube con volumen:
 * aparecen lejos y desenfocadas y se acercan a su sitio, una detrás de otra.
 */
.dk-burbujas--flotan .dk-burbuja {
	opacity: 0;
	filter: blur(9px);
}

.dk-burbujas--flotan .dk-burbuja.dk-burbuja--entra {
	opacity: 1;
	filter: blur(0);
	transition:
		opacity .75s ease calc(var(--orden, 0) * 90ms),
		filter .75s ease calc(var(--orden, 0) * 90ms),
		translate .9s cubic-bezier(.16, .84, .34, 1) calc(var(--orden, 0) * 90ms),
		scale .9s cubic-bezier(.16, .84, .34, 1) calc(var(--orden, 0) * 90ms),
		transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* El estado de partida: más lejos, más pequeña y un poco descolocada. El `scale`
   de aquí es transitorio y vale igual para todas — el tamaño de cada burbuja ya
   no vive en `scale` sino en su ancho. */
.dk-burbujas--flotan .dk-burbuja:not(.dk-burbuja--entra) {
	translate: -50% -34%;
	scale: .55;
}

/* ------------------------------------------------------------- teléfono */

@media (max-width: 720px) {
	.dk-equipo__nube {
		height: clamp(290px, 36vh, 360px);
		perspective: 720px;
	}

	/* Las posiciones van en % del escenario, así que encoger el escenario mete
	   la nube hacia dentro sin tocar ni una de las ocho coordenadas. A 390 px,
	   la primera burbuja se salía por la izquierda y el nombre de la última
	   quedaba pisado por el botón. */
	.dk-burbujas--flotan {
		inset: 0 13% 30px;
		/* equipo.css convierte `.dk-burbujas` en fila deslizable a partir de aquí,
		   y con ella llega `overflow: auto`. En la nube eso hacía dos destrozos:
		   recortaba el nombre de la burbuja de más abajo, y convertía la lista en
		   contenedor de scroll, que el navegador rasteriza aparte — de ahí el
		   rectángulo claro que se veía detrás de las caras. La nube no desliza:
		   cada burbuja ya está en su sitio. */
		overflow: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.dk-burbujas--flotan .dk-burbuja {
		--base: clamp(64px, 19vw, 92px);
	}

	/* En 390 px, las profundidades de escritorio mandan las de atrás tan lejos
	   que se vuelven ilegibles. Se aplanan a la mitad. */
	.dk-burbujas--flotan .dk-burbuja {
		transform: translateZ(calc(var(--z, 0px) * .45));
	}

	.dk-burbujas--flotan .dk-burbuja__cargo { display: none; }

	/* Sin puntero no hay inclinación que seguir, así que la nube va de frente
	   y se ahorra el repintado. */
	.dk-burbujas--flotan { transform: none; }
}

/* --------------------------------------------------- movimiento reducido */

/*
 * Quien pide menos movimiento se queda con la nube quieta, pero la nube: las
 * posiciones, el vidrio y la profundidad siguen ahí. Lo que se apaga es lo que
 * se mueve solo.
 */
@media (prefers-reduced-motion: reduce) {
	.dk-burbujas--flotan .dk-burbuja__enlace,
	.dk-burbujas--flotan .dk-burbuja__foto::after {
		animation: none;
	}

	.dk-burbujas--flotan { transition: none; transform: none; }

	.dk-burbujas--flotan .dk-burbuja,
	.dk-burbujas--flotan .dk-burbuja:not(.dk-burbuja--entra) {
		opacity: 1;
		filter: none;
		translate: -50% -50%;
		scale: 1;
	}
}