@keyframes docandtee-fade-up {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes docandtee-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes docandtee-scale-in {
	from {
		opacity: 0;
		transform: translateY(1.25rem) scale(0.5);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.is-style-fade-up,
.is-style-fade-in,
.is-style-scale-in {
	animation-duration: 0.8s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode: both;
	animation-timeline: view();
	animation-range: entry 0% entry 35%;
}

.is-style-fade-up {
	animation-name: docandtee-fade-up;
}

.is-style-fade-in {
	animation-name: docandtee-fade-in;
}

.is-style-scale-in {
	animation-name: docandtee-scale-in;
}

/* Hover card: the card stays put and its image zooms inside it. */
.is-style-hover-card,
.is-style-hover-card :is(.wp-block-post-featured-image, .wp-block-image) {
	overflow: hidden;
}

/* Modern Image Formats can wrap the cover image in a display: contents <picture>. */
:is(.is-style-hover-card, .is-style-hover-card > picture) > :is(.wp-block-cover__image-background, .wp-block-cover__video-background),
.is-style-hover-card :is(.wp-block-post-featured-image, .wp-block-image) img {
	transition: transform 0.3s ease-in-out;
}

:is(.is-style-hover-card:is(:hover, :focus-within), .is-style-hover-card:is(:hover, :focus-within) > picture) > :is(.wp-block-cover__image-background, .wp-block-cover__video-background),
.is-style-hover-card:is(:hover, :focus-within) :is(.wp-block-post-featured-image, .wp-block-image) img {
	transform: scale(1.1);
}

@supports not (animation-timeline: view()) {
	.docandtee-js .is-style-fade-up,
	.docandtee-js .is-style-fade-in,
	.docandtee-js .is-style-scale-in {
		animation: none;
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.docandtee-js .is-style-scale-in {
		transform: translateY(1.25rem) scale(0.5);
	}

	.docandtee-js .is-style-fade-in {
		transform: none;
	}

	.docandtee-js .is-style-fade-up.is-in-view,
	.docandtee-js .is-style-fade-in.is-in-view,
	.docandtee-js .is-style-scale-in.is-in-view {
		opacity: 1;
		transform: none;
	}
}

/*
 * Carousel slides sit in a horizontal overflow scroller. view() uses that
 * scroller as the timeline source, and Firefox keeps the fill-mode "from"
 * keyframe (opacity 0, scale .5) for any slide that has not entered — so the
 * next card is invisible after the first page of slides. Chrome completes the
 * timeline anyway. Instead, blocks/carousel/view.js adds
 * .docandtee-carousel--reveal-pending while the carousel is below the fold and
 * removes it when it scrolls into view, so the slides transition in.
 *
 * The html prefix outranks the .docandtee-js fallback above in any order,
 * while staying below the reveal-pending rules.
 */
html .docandtee-carousel__track :is(.is-style-fade-up, .is-style-fade-in, .is-style-scale-in) {
	animation: none;
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.docandtee-carousel__track :is(.is-style-fade-up, .is-style-fade-in, .is-style-scale-in) {
		transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.docandtee-carousel--reveal-pending .docandtee-carousel__track :is(.is-style-fade-up, .is-style-fade-in, .is-style-scale-in) {
		opacity: 0;
	}

	.docandtee-carousel--reveal-pending .docandtee-carousel__track .is-style-fade-up {
		transform: translateY(1.25rem);
	}

	.docandtee-carousel--reveal-pending .docandtee-carousel__track .is-style-scale-in {
		transform: translateY(1.25rem) scale(0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-fade-up,
	.is-style-fade-in,
	.is-style-scale-in,
	.docandtee-js .is-style-fade-up,
	.docandtee-js .is-style-fade-in,
	.docandtee-js .is-style-scale-in {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	:is(.is-style-hover-card, .is-style-hover-card > picture) > :is(.wp-block-cover__image-background, .wp-block-cover__video-background),
	:is(.is-style-hover-card:is(:hover, :focus-within), .is-style-hover-card:is(:hover, :focus-within) > picture) > :is(.wp-block-cover__image-background, .wp-block-cover__video-background),
	.is-style-hover-card :is(.wp-block-post-featured-image, .wp-block-image) img,
	.is-style-hover-card:is(:hover, :focus-within) :is(.wp-block-post-featured-image, .wp-block-image) img {
		transition: none;
		transform: none;
	}
}