/**
 * The accommodation-types drawing, drawn and highlighted. See
 * assets/js/line-draw.js for the contract; the inline <svg> comes from
 * miraigo_line_draw_image() (inc/render-filters.php).
 *
 * Without the script, in the editor or with reduced motion, the drawing is
 * simply there, whole and static.
 */
/* An <svg> has no intrinsic width to size a shrink-to-fit parent, as the <img> had. */
.is-line-draw {
	width: 100%;
	color: var(--wp--preset--color--text-dark);
}

.line-draw {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The pen that leads the line. */
.line-draw__nib {
	fill: var(--wp--preset--color--background-brand);
}

.line-draw__word {
	transition: transform var(--wp--custom--transition--hover);
}

.line-draw__ink {
	transition: opacity var(--wp--custom--transition--hover);
}

.line-draw__highlight {
	color: var(--wp--preset--color--text-brand);
}

.line-draw__highlight use {
	opacity: 0;
	transition: opacity var(--wp--custom--transition--hover);
}

.line-draw__highlight .is-on {
	opacity: 1;
}

.line-draw.is-highlighting .line-draw__ink {
	opacity: var(--wp--custom--line-draw--dim-opacity);
}

.line-draw__word.is-on {
	color: var(--wp--preset--color--text-brand);
	transform: translateY(calc(-1 * var(--wp--custom--line-draw--lift)));
}

@media (prefers-reduced-motion: no-preference) {

	/*
	 * Hidden until the script has set the first frame, so the finished drawing
	 * never flashes before it starts. The fallback shows it anyway if the
	 * script has not run after 3s (slow connection, blocked script).
	 */
	.miraigo-reveal-ready .is-line-draw:not(.is-line-draw-ready) .line-draw {
		opacity: 0;
		animation: line-draw-fallback 0s 3s forwards;
	}
}

@keyframes line-draw-fallback {

	to {
		opacity: 1;
	}
}