/**
 * MSZ - Efecto 3D en las fotos compartidas
 * --------------------------------------------------
 * version 1.0
 *
 * Las imagenes grandes dentro del cuerpo del mensaje se inclinan en 3D
 * siguiendo el cursor y vuelven solas al retirarlo.
 *
 * El JS le pone/quita dos clases:
 *   .msz3d        -> "es una foto que admite el efecto"
 *   .msz3d-active -> "el cursor esta encima ahora mismo"
 *
 * NO tocamos nada mas: caritas, avatares, iconos y banners quedan fuera
 * porque el JS jamas les pone la clase .msz3d.
 */

/* --------------------------------------------------------------------------
   Estado base: preparamos la proyeccion y el "aterrizaje" suave al irse
   -------------------------------------------------------------------------- */
.post_body img.msz3d,
.attached_image img.msz3d,
.attachment_list img.msz3d {
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	transition: transform .45s cubic-bezier(.16, .84, .44, 1),
	            box-shadow .45s ease;
}

/* --------------------------------------------------------------------------
   Con el cursor encima: seguimos al puntero casi en tiempo real
   y soltamos una sombra para dar la sensacion de estar en el aire
   -------------------------------------------------------------------------- */
.post_body img.msz3d.msz3d-active,
.attached_image img.msz3d.msz3d-active,
.attachment_list img.msz3d.msz3d-active {
	position: relative;
	z-index: 6;
	will-change: transform;
	transition: transform .06s linear,
	            box-shadow .18s ease;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .40),
	            0 6px 14px rgba(0, 0, 0, .26);
}

/* --------------------------------------------------------------------------
   Quien pida menos movimiento: nada de efectos (el JS tambien lo comprueba)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.post_body img.msz3d,
	.attached_image img.msz3d,
	.attachment_list img.msz3d,
	.post_body img.msz3d.msz3d-active,
	.attached_image img.msz3d.msz3d-active,
	.attachment_list img.msz3d.msz3d-active {
		transform: none !important;
		transition: none !important;
		box-shadow: none !important;
		will-change: auto;
		position: static;
		z-index: auto;
	}
}