.bricks-element-storm-heading {
	--storm-duration: 1000ms;
	--storm-delay: 0ms;
	--storm-speed: 1;
	--storm-part-delay: 100ms;
	--storm-real-duration: calc(var(--storm-duration) / var(--storm-speed));
	--storm-real-part-delay: calc(var(--storm-part-delay) / var(--storm-speed));
	--storm-char-duration: var(--storm-real-duration);

	.word {
		display: inline-block;
		white-space: nowrap;
	}

	&[class*='animation-'] {
		.storm-animate {
			display: inline;
		}
	}

	/* Common styles for animated elements */

	&.animation-sequential-reveal,
	&.animation-blur-reveal,
	&.animation-character-stagger,
	&.animation-3d-flip,
	&.animation-typing {
		&.target-part .word,
		&.target-word .word,
		&.target-letter .char {
			display: inline-block;
		}

		&.target-part .word {
			transition-delay: calc(var(--storm-delay) + var(--storm-real-part-delay) * var(--storm-index, 0));
		}
	}

	&.animation-sequential-reveal {
		&.target-part .word,
		&.target-word .word,
		&.target-letter .char {
			transition-timing-function: ease;
			transition-duration: var(--storm-real-duration);
			transition-property: translate, opacity;
			opacity: 0;
		}

		&.origin-bottom {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: 0 20px;
			}
		}

		&.origin-top {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: 0 -20px;
			}
		}

		&.origin-left {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: -20px 0;
			}
		}

		&.origin-right {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: 20px 0;
			}
		}

		&.is-animated {
			&.target-part .word,
			&.target-word .word,
			&.target-letter .char {
				opacity: 1;
				translate: 0 0;
			}
		}
	}

	&.animation-blur-reveal {
		&.target-part .word,
		&.target-word .word,
		&.target-letter .char {
			transition-timing-function: ease;
			transition-duration: var(--storm-real-duration);
			transition-property: opacity, filter;
			opacity: 0;
			filter: blur(12px);
		}

		&.is-animated {
			&.target-part .word,
			&.target-word .word,
			&.target-letter .char {
				opacity: 1;
				filter: blur(0);
			}
		}
	}

	&.animation-character-stagger {
		&.target-part .word,
		&.target-word .word,
		&.target-letter .char {
			transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
			transition-duration: var(--storm-char-duration, var(--storm-real-duration));
			transition-property: translate, opacity;
			opacity: 0;
		}

		&.origin-bottom {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: 0 0.5em;
			}
		}

		&.origin-top {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: 0 -0.5em;
			}
		}

		&.origin-left {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: -0.5em 0;
			}
		}

		&.origin-right {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				translate: 0.5em 0;
			}
		}

		&.is-animated {
			&.target-part .word,
			&.target-word .word,
			&.target-letter .char {
				opacity: 1;
				translate: 0 0;
			}
		}
	}

	&.animation-3d-flip {
		perspective: 1000px;

		&.target-part .word,
		&.target-word .word,
		&.target-letter .char {
			transition-timing-function: ease;
			transition-duration: var(--storm-real-duration);
			transition-property: rotate, opacity;
			opacity: 0;
			backface-visibility: hidden;
		}

		&.origin-top {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				transform-origin: top;
				rotate: x -90deg;
			}
		}

		&.origin-bottom {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				transform-origin: bottom;
				rotate: x 90deg;
			}
		}

		&.origin-left {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				transform-origin: left;
				rotate: y 90deg;
			}
		}

		&.origin-right {
			&.target-part .word, &.target-word .word, &.target-letter .char {
				transform-origin: right;
				rotate: y -90deg;
			}
		}

		&.is-animated {
			&.target-part .word,
			&.target-word .word,
			&.target-letter .char {
				opacity: 1;
				rotate: 0deg;
			}
		}
	}

	&.animation-typing {
		.storm-cursor {
			display: inline-block;
			width: 2px;
			height: 1.1em;
			margin-left: 1px;
			transition: opacity 0.2s ease;
			animation: storm-blink 0.8s ease-in-out infinite;
			vertical-align: middle;
			opacity: 0;
			background-color: currentColor;
		}

		&.is-animated .storm-cursor {
			opacity: 1;
		}

		&.is-finished .storm-cursor {
			display: none;
			animation: none;
			opacity: 0;
		}

		.char {
			transition-timing-function: ease;
			transition-duration: 0.1s;
			transition-property: opacity;
			opacity: 0;
		}

		&.is-animated {
			.is-visible {
				opacity: 1 !important;
			}
		}
	}
}

@keyframes storm-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}