:root {
	--color-bg             : #000000;
	--color-text           : #666666;
	--color-text-dim       : #444444;
	--color-text-hovered   : #ffffff;
	--color-border-hovered : #172736;

	--padding-body-x: 3rem;
	--padding-body-y: 1rem;

	--fontsize-0: clamp(1.00rem, 0.90rem + 0.48vw, 1.25rem);  /* Основной текст (p) */
	--fontsize-9: clamp(2.25rem, 1.5rem  + 3.2vw,  4rem);     /* Огромный текст */

	--icon-factor: 1.3;

	--transition-time-text: 0.3s;

	--font: 'FiraSans', sans-serif;
}

* { box-sizing: border-box; }

a {
	text-decoration: none;
	color: inherit;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--font);
}

body {
	padding: var(--padding-body-y) var(--padding-body-x);
	background: var(--color-bg);
	font-size: var(--fontsize-0);
	-webkit-font-smoothing: antialiased;
}

main {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	gap: 2rem;
	width: 100%;
	height: calc(100% - var(--padding-body-y));
}

.tile {
	padding: 0.5rem 0;
	font-size: var(--fontsize-9);
	color: var(--color-text);
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 1rem;
	transition: all var(--transition-time-text) ease-in-out;
	border-color: var(--color-border-hovered);
}

.link:hover .tile {
	color: var(--color-text-hovered);
	padding-left: 2rem;
	border-left: 1rem groove var(--color-border-hovered);
	background: linear-gradient(90deg, #060606, #000000);
}

.title {
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
}

.title h1 {
	margin: 0;
	padding: 0;
	font-size: var(--fontsize-9);
}

.title small {
	font-size: var(--fontsize-0);
	color: var(--color-text-dim);
	transition: all var(--transition-time-text) ease-in-out;
}

.link:hover .tile small {
	color: var(--color-text-hovered);
}


.icon {
	display: inline-block;
	width: calc(var(--icon-factor) * var(--fontsize-9));
	height: calc(var(--icon-factor) * var(--fontsize-9));
	
	background-color: var(--color-text-dim);

	mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}


.link:hover .icon.c1 { background-color: #ff0000; }


@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes gradient-flow {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes spin {
	to { --angle: 360deg; }
}

@keyframes pulse-gradient {
	0%, 100% { background-position: 0% 0%; }
	50%      { background-position: 100% 100%; }
}


.link:hover .icon.c100 {
	background: linear-gradient(90deg, #ff3366, #ffcc00, #33ccff, #ff3366);
	background-size: 300% 300%;
	animation: gradient-flow 2s ease infinite;
}

.link:hover .icon.c200 {
	background: conic-gradient(from var(--angle), #ff3366, #ffcc00, #33ccff, #ff3366);
	animation: spin 3s linear infinite;
}

.link:hover .icon.c300 {
	background: linear-gradient(45deg, #08152c, #08152c, #00a2ff, #08152c, #08152c);
	background-size: 200% 200%;
	animation: gradient-flow 3s ease-in-out infinite;
}

.link:hover .icon.c400 {
	background: linear-gradient(135deg, #ffcc00, #33ccff);
	background-size: 200% 200%;
	animation: pulse-gradient 3s ease-in-out infinite;
}

.bcg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: -100;
	animation: 4s slow-appear ease-in;
}

.bcg-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../img/bcg/dots2.png') repeat;
	z-index: -99;
}

@keyframes slow-appear {
	0% { opacity: 0; }
	33% { opacity: 0; }
	100% { opacity: 1; }
}