:root
	{
	/* anchor initial zoom-in */
	--zoom-in_start: 0ms;
	/* name color shift */
	--init_delay: 750ms;
	--name_color_duration: 1000ms;
	/* name compression */
	--collapse_duration: 750ms;
	/* horn appearance */
	--horn_delay: 1000ms;
	--horn_duration: 750ms;
	/* final pause */
	--final_pause: 750ms;
	/* anchor move to final position */
	--final_move_duration: 600ms;
	--initial_move_left: 0px;
	--initial_move_top: 0px;
	--final_move_top: 0px;

	--zoom-in_duration: calc(var(--init_delay) + var(--horn_delay) + var(--horn_duration) + var(--final_pause));
	--anim_duration: calc(var(--zoom-in_duration) + var(--final_move_duration));
	}

body.animated
	{
	animation-name: body_anim;
	animation-duration: var(--anim_duration);
	animation-timing-function: linear;
	}
@keyframes body_anim
	{
	0%, 89%
		{
		overflow: hidden;
		}
	90%, 100%
		{
		overflow-x: hidden;
		overflow-y: auto;
		}
	}
body.animated .anim
	{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	max-height: 100dvh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	color: var(--black);
	animation-name: core_anim;
	animation-duration: var(--anim_duration);
	animation-timing-function: linear;
	}
@keyframes core_anim
	{
	0%, 90%
		{
		background-color: var(--white);
		}
	100%
		{
		background-color: transparent;
		}
	}
body.animated h1
	{
	animation-name: h1_anim;
	animation-duration: var(--anim_duration);
	animation-timing-function: linear;
	}
@keyframes h1_anim
	{
	0%, 100%
		{
		visibility: hidden;
		}
	}
body.animated .anim .anim_anchor
	{
	animation-name: anchor_zoom-in, anchor_final_move;
	animation-duration: var(--zoom-in_duration), var(--final_move_duration);
	animation-delay: var(--zoom-in_start), var(--zoom-in_duration);
	animation-timing-function: linear, ease-in-out;
	animation-fill-mode: forwards;
	}
@keyframes anchor_zoom-in
	{
	0%
		{
		transform: scale(0.8);
		}
	100%
		{
		transform: scale(1.0);
		}
	}
@keyframes anchor_final_move
	{
	0%
		{
		position: absolute;
		left: var(--initial_move_left);
		top: var(--initial_move_top);
		}
	100%
		{
		position: absolute;
		left: var(--gutter);
		top: var(--final_move_top);
		}
	}
.h1_name
	{
	color: var(--red);
	}
body.animated .anim .h1_name
	{
	animation-name: name_anim;
	animation-duration: var(--name_color_duration);
	animation-delay: var(--init_delay);
	animation-direction: normal;
	animation-timing-function: linear;
	animation-fill-mode: both;
	}
@keyframes name_anim
	{
	0%
		{
		color: var(--black);
		}
	100%
		{
		color: var(--red);
		}
	}
body.animated .anim .h1_collapse
	{
	animation-name: collapse_anim, collapse_anim;
	animation-duration: var(--collapse_duration);
	animation-delay: var(--init_delay), var(--zoom-in_duration);
	animation-direction: normal, reverse;
	animation-timing-function: linear;
	animation-fill-mode: both, forwards;
	}
@keyframes collapse_anim
	{
	0%, 20%
		{
		font-size: 100%;
		}
	100%
		{
		font-size: 0%;
		}
	}
.h1_v
	{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	}
h1 .h1_v
	{
	background-image: url(../images/DVC_hornedV.svg);
	color: transparent;
	}
body.animated .anim .h1_v
	{
	animation-name: horn_anim;
	animation-duration: var(--horn_duration);
	animation-delay: calc(var(--init_delay) + var(--horn_delay));
	animation-direction: normal;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	}
@keyframes horn_anim
	{
	0%
		{
		color: var(--red);
		background-image: url(../images/DVC_hornedV.svg);
		background-clip: text;
		clip-path: polygon(nonzero, 3% 21%, 16% 21%, 49% 71%, 51% 71%, 84% 21%, 97% 21%, 58% 80%, 50% 80%, 42% 80%);
		}
	20%
		{
		background-clip: padding-box;
		color: transparent;
		}
	40%
		{
		clip-path: polygon(nonzero, 3% 21%, 16% 21%, 49% 71%, 51% 71%, 84% 21%, 97% 21%, 108% 80%, 50% 100%, 0% 80%);
		}
	100%
		{
		clip-path: polygon(nonzero, 0% 0%, 40% 0%, 40% 40%, 60% 40%, 60% 0%, 100% 0%, 108% 80%, 50% 100%, 0% 80%);
		background-image: url(../images/DVC_hornedV.svg);
		color: transparent;
		}
	}
.h1_le
	{
	color: var(--black);
	}