/* Hessian's entrance animations. A component whose data-hessian-animation attribute names one of these (set with the
   page editor's Animation trait) slides in when it scrolls into view, or straight away if it is already on screen when
   the page loads, such as a hero heading.

   hessian-animations.js marks the page as ready and adds the hessian-in class to each animated component as it comes
   into view; the transitions below do the movement. Without that script, every component is shown where it is.

   This replaced the earlier scroll-driven version (animation-timeline: view()), which never ran inside any section
   styled overflow: hidden, because that section became the element's scroll timeline and it never scrolls, and which
   never animated anything already on screen at load.

   A component can switch its animation off on tablet or on mobile (data-hessian-animation-tablet or
   data-hessian-animation-mobile set to off), and is then shown in place at those widths. The page editor's canvas does
   not load this file. */

.hessian-animations-ready [data-hessian-animation="slide-left"],
.hessian-animations-ready [data-hessian-animation="slide-right"],
.hessian-animations-ready [data-hessian-animation="slide-bottom"] {
	opacity: 0;
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hessian-animations-ready [data-hessian-animation="slide-left"] {
	transform: translateX(-80px);
}

.hessian-animations-ready [data-hessian-animation="slide-right"] {
	transform: translateX(80px);
}

.hessian-animations-ready [data-hessian-animation="slide-bottom"] {
	transform: translateY(80px);
}

/* In view: slide into place. */
.hessian-animations-ready [data-hessian-animation].hessian-in {
	opacity: 1;
	transform: none;
}

/* Switched off on tablet or on mobile, set with the editor's "No animation on tablet" and "No animation on mobile"
   traits. The widths are the page editor's devices: Tablet up to 992px, Mobile up to 768px. */
@media (min-width: 769px) and (max-width: 992px) {
	.hessian-animations-ready [data-hessian-animation][data-hessian-animation-tablet="off"] {
		opacity: 1;
		transform: none;
		transition: none;
	}

}

@media (max-width: 768px) {
	.hessian-animations-ready [data-hessian-animation][data-hessian-animation-mobile="off"] {
		opacity: 1;
		transform: none;
		transition: none;
	}

}