/* ==========================================================================
   TBE motion layer

   Two kinds of movement, both deliberately restrained:
     1. a scroll reveal - content rises as it comes into view
     2. hover motion on things that are already interactive

   Everything is scoped to the page content wrapper, so the header, footer and
   Revolution Slider are untouched.

   The pre-hidden state hangs off .tbe-motion on <html>, which motion.js adds
   before first paint. Without JS the class never appears and the page renders
   fully visible, so this can only ever add motion - never hide content.

   Distance and duration come from custom properties, so a block can change
   how it arrives without a more specific transform rule that would then
   out-rank .tbe-in and stop it landing.

   NOTE: the selector list below must stay in step with SELECTORS in motion.js.
   ========================================================================== */

.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-heading,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-text-editor,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-button,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-image,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-image-box,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-icon-box,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-icon-list,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-ucaddon_hover_text_reveal_content_box,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-accordion,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-nested-accordion,
.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-shortcode {
	opacity: 0;
	transform: translate3d(0, var(--tbe-from, 12px), 0);
}

/* Same specificity as the rule above, so source order decides - no !important. */
.tbe-motion [data-elementor-type="wp-page"] .tbe-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--tbe-dur, .55s) cubic-bezier(.22, .61, .36, 1),
	            transform var(--tbe-dur, .55s) cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--tbe-delay, 0ms);
}

/* --------------------------------------------------------------------------
   Workspace cards

   The row of hover-reveal cards converges instead of rising as one block:
   alternate cards drop in from above and lift in from below, and they all
   land together on the same line. These rules only set custom properties -
   never transform - so .tbe-in still wins when it is time to land.

   Each card sits in its own column, and the columns are siblings, so the
   alternation comes off the column index.
   -------------------------------------------------------------------------- */

.tbe-motion [data-elementor-type="wp-page"] .elementor-column:nth-child(odd)
	.elementor-widget-ucaddon_hover_text_reveal_content_box {
	--tbe-from: -52px;
	--tbe-dur: .78s;
}

.tbe-motion [data-elementor-type="wp-page"] .elementor-column:nth-child(even)
	.elementor-widget-ucaddon_hover_text_reveal_content_box {
	--tbe-from: 52px;
	--tbe-dur: .78s;
}

/* --------------------------------------------------------------------------
   Hover motion
   The cards on this site are flat - no background, border or shadow - so
   there is no card to lift. Motion goes on the parts that already read as
   interactive: the icon, the image, the button.
   -------------------------------------------------------------------------- */

[data-elementor-type="wp-page"] .elementor-widget-icon-box .elementor-icon {
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

[data-elementor-type="wp-page"] .elementor-widget-icon-box:hover .elementor-icon {
	transform: translateY(-3px);
}

/* Images breathe a little. The hover-reveal cards bring their own motion, so
   they are left out of this. */
[data-elementor-type="wp-page"] .elementor-widget-image .elementor-image,
[data-elementor-type="wp-page"] .elementor-widget-image figure,
[data-elementor-type="wp-page"] .elementor-widget-image-box .elementor-image-box-img {
	overflow: hidden;
}

[data-elementor-type="wp-page"] .elementor-widget-image img,
[data-elementor-type="wp-page"] .elementor-widget-image-box .elementor-image-box-img img {
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

[data-elementor-type="wp-page"] .elementor-widget-image:hover img,
[data-elementor-type="wp-page"] .elementor-widget-image-box:hover .elementor-image-box-img img {
	transform: scale(1.04);
}

/* Buttons already change colour on hover; this adds a touch of travel. */
[data-elementor-type="wp-page"] .elementor-button {
	transition: background-color .25s ease, color .25s ease,
	            border-color .25s ease, transform .25s ease;
}

[data-elementor-type="wp-page"] .elementor-button:hover {
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Anyone who has asked their system for less motion gets none of it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-heading,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-text-editor,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-button,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-image,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-image-box,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-icon-box,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-icon-list,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-ucaddon_hover_text_reveal_content_box,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-accordion,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-nested-accordion,
	.tbe-motion [data-elementor-type="wp-page"] .elementor-widget-shortcode {
		opacity: 1;
		transform: none;
		transition: none;
	}

	[data-elementor-type="wp-page"] .elementor-widget-icon-box:hover .elementor-icon,
	[data-elementor-type="wp-page"] .elementor-widget-image:hover img,
	[data-elementor-type="wp-page"] .elementor-widget-image-box:hover .elementor-image-box-img img,
	[data-elementor-type="wp-page"] .elementor-button:hover {
		transform: none;
	}
}