/* Caveat: magic numbers ahead */

:root {
	--animation-speed: 1;
	--strike-through-delay: 800ms;
	--write-on-delay: 1200ms;
	--color-text: #101011;
	--color-strikes: #3f9ceddd;
	--color-correction: #3f9ced;
}

/* parent box to contain text, strike-lines, and write-on text */
.text-container {
	position: relative;

	color: var(--color-text);
	font-family: 'Caveat', 'Segoe Script', cursive;
	font-weight: 700;
	font-size: min(9vmin, 5vw);
	white-space: nowrap;
	word-spacing: 0.25em;

	transform: rotate(-1deg);
	animation: squiggle steps(5) 400ms forwards infinite;
}

.text-container span {
	position: relative;
}

#squiggle-filters {
	position: absolute;
	left: 0;
	top: 0;
	clip-path: inset(0);
	pointer-events: none;
}

@keyframes squiggle {
	0% {
		filter: url(#squiggly-0);
	}
	25% {
		filter: url(#squiggly-1);
	}
	50% {
		filter: url(#squiggly-2);
	}
	75% {
		filter: url(#squiggly-3);
	}
	100% {
		filter: url(#squiggly-4);
	}
}

/* inline SVG for strike glyphs and mask */
.svg-strikes {
	position: absolute;
	left: 0;
	top: 50%;
	width: 97%;
	height: 48%;
	transform: translate(-3%, -50%) rotate(2deg);
	overflow: visible;
	pointer-events: none;
}

/* colorize the strikes */
#strikes {
	fill: var(--color-strikes);
	stroke: none;
}

#strike-through path {
	fill: none;
	stroke: #fff;
	stroke-width: 5.0535;
	stroke-linecap: round;
	stroke-dasharray: 154;
	stroke-dashoffset: 154;
	animation: strokeoffset ease calc(600ms / var(--animation-speed)) var(--strike-through-delay) forwards;
}

#strike-through path:nth-child(2) {
	animation-delay: calc(var(--strike-through-delay) + (100ms / var(--animation-speed)));
}

@keyframes strokeoffset {
	to {
		stroke-dashoffset: 0;
	}
}

/* inline SVG for write-on glyphs and mask */
.svg-write-on-text {
	position: absolute;
	left: 50%;
	top: 0;
	overflow: visible;
	word-spacing: 0;
	width: min(37vmin, 20.5555vw);
	transform: translate(-15%, -135%) rotate(-8deg);
}

.write-on-text-container {
	stroke: none;
	fill: var(--color-correction);
	font-family: 'Dancing Script', cursive;
	font-size: 17.938px;
	font-weight: bold;
	line-height: 1.25;
}

/* using a set of paths as a mask */
#write-on-mask-container {
	fill: none;
	stroke: #ffffff80;
	stroke-linecap: round;
	stroke-width: 1.2;
	stroke-dasharray: 186 186;
}

.write-on-path {
	--word-1-delay: 100ms;
	--word-2-delay: 400ms;
	stroke-dashoffset: 186;
	animation: stroke ease forwards calc(2s / var(--animation-speed));
}

.write-on-path:nth-child(2n) {
	--word-1-delay: 300ms;
	--word-2-delay: 600ms;
	stroke: rgb(255, 255, 255);
}

@keyframes stroke {
	to {
		stroke-dashoffset: 0;
		stroke-width: 3;
	}
}

/* animate the paths synchronously */
.path-Anyone {
	animation-delay: calc(var(--write-on-delay) + var(--word-1-delay));
	animation-timing-function: ease-out;
}

.letter-A-edge {
	animation-delay: calc(var(--write-on-delay) + (var(--word-1-delay) + 400ms) / var(--animation-speed));
}

.letter-B-edge {
	animation-delay: calc(var(--write-on-delay) + (var(--word-2-delay) + 1500ms) / var(--animation-speed));
}

.letter-B-line {
	animation-delay: calc(var(--write-on-delay) + (var(--word-2-delay) + 1900ms) / var(--animation-speed));
}

.path-etter {
	animation-delay: calc(var(--write-on-delay) + (var(--word-2-delay) + 2300ms) / var(--animation-speed));
}

.letter-t-horz {
	animation-delay: calc(var(--write-on-delay) + (var(--word-2-delay) + 3000ms) / var(--animation-speed));
}

/* layout */
html,
body {
	position: relative;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

html {
	display: block;
	background-image: radial-gradient(circle at 50%, #fff, #eee);
	background-size: 100% 100%;
	background-attachment: fixed;
}

body {
	display: grid;
	place-items: center;
	background-color: transparent;
}

/* Made with Coffee, Care, and Curiosity by @ShadowShahriar */