@import "./colour-scheme-button.css";
@import "./header-bar.css";
@import "./scroll-hint.css";

#header-bar {
	--trans-timing: .1s linear;

	&.visible {
		--trans-timing: .5s linear;
	}
}

#header-bar:not(.visible) .logo {
	opacity: 0;
}

#hero {
	--spotlight-shadow: 0 0 .5rem var(--colour-background);

	padding-top: 35dvh;
	padding-bottom: 15dvh;
	position: relative;
	display: grid;
	justify-content: center;
	text-align: center;
	background: linear-gradient(to bottom, color-mix(light-dark(silver, black) 15%, var(--colour-background)), var(--colour-background));
	z-index: var(--header-index);
}

@property --anim-logo-gradient1-angle {
	syntax: "<angle>";
	initial-value: 135deg;
	inherits: false;
}
@property --anim-logo-gradient1-colour1 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --anim-logo-gradient1-colour2 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --anim-logo-gradient1-colour3 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}
@property --anim-logo-gradient2-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@property --anim-logo-gradient2-colour2 {
	syntax: "<color>";
	initial-value: transparent;
	inherits: false;
}

@keyframes anim-logo-intro {
	100% {
		--anim-logo-gradient1-colour1: light-dark(hsl(350 80% 45%), hsl(350 80% 55%));
		--anim-logo-gradient1-colour2: light-dark(hsl(300 60% 40%), hsl(300 65% 55%));
		--anim-logo-gradient1-colour3: light-dark(hsl(35 85% 45%), hsl(35 80% 55%));
		--anim-logo-gradient2-colour2: hsl(40 100% 80% / 0);
	}
}

@keyframes anim-logo {
	/* gradient 1 : main */
	0% {
		--anim-logo-gradient1-angle: 135deg;
		--anim-logo-gradient1-colour1: light-dark(hsl(350 80% 45%), hsl(350 80% 55%));
		--anim-logo-gradient1-colour2: light-dark(hsl(300 60% 40%), hsl(300 65% 55%));
		--anim-logo-gradient1-colour3: light-dark(hsl(35 85% 45%), hsl(35 80% 55%));
	}
	30% {
		--anim-logo-gradient1-colour1: light-dark(hsl(350 80% 45%), hsl(350 80% 55%));
		--anim-logo-gradient1-colour2: light-dark(hsl(35 90% 45%), hsl(35 80% 55%));
	}
	40% {
		--anim-logo-gradient1-colour1: light-dark(hsl(35 90% 45%), hsl(35 80% 55%));
	}
	50% {
		--anim-logo-gradient1-colour2: light-dark(hsl(10 80% 55%), hsl(10 70% 50%));
		--anim-logo-gradient1-colour3: light-dark(hsl(330 75% 45%), hsl(330 70% 50%));
	}
	55% {
		--anim-logo-gradient1-colour1: light-dark(hsl(350 80% 45%), hsl(350 80% 55%));
	}
	100% {
		--anim-logo-gradient1-angle: calc(1turn + 135deg);
		--anim-logo-gradient1-colour1: light-dark(hsl(350 80% 45%), hsl(350 80% 55%));
		--anim-logo-gradient1-colour2: light-dark(hsl(300 60% 40%), hsl(300 65% 55%));
		--anim-logo-gradient1-colour3: light-dark(hsl(35 85% 45%), hsl(35 80% 55%));
	}

	/* gradient 2 : shadow */
	55% {
		--anim-logo-gradient2-angle: 170deg;
		--anim-logo-gradient2-colour2: hsl(200 70% 35% / 0);
	}
	65% {
		--anim-logo-gradient2-colour2: hsl(200 70% 35%);
	}
	75% {
		--anim-logo-gradient2-angle: 240deg;
		--anim-logo-gradient2-colour2: hsl(200 70% 35% / 0);
	}
	/* gradient 2 : sheen */
	75.001% {
		--anim-logo-gradient2-angle: -15deg;
		--anim-logo-gradient2-colour2: hsl(40 100% 80% / 0);
	}
	80% {
		--anim-logo-gradient2-colour2: hsl(40 100% 80% / .5);
	}
	90% {
		--anim-logo-gradient2-angle: 50deg;
		--anim-logo-gradient2-colour2: hsl(40 100% 80% / 0);
	}
}

#hero>.logo {
	--logo-height: 8rem;
	--logo-width: calc(var(--logo-height) * 6.25);

	width: calc(var(--logo-height) * 6.25);
	height: var(--logo-height);
	max-width: 90dvw;
	max-height: calc(90dvw / 6.25);
	position: relative;
	filter: drop-shadow(var(--spotlight-shadow));

	&:after {
		--anim-logo-gradient1-colour1: var(--colour-text);
		--anim-logo-gradient1-colour2: var(--colour-text);
		--anim-logo-gradient1-colour3: var(--colour-text);

		content: "";
		width: inherit;
		height: inherit;
		max-width: inherit;
		max-height: inherit;
		position: relative;
		display: block;
		background: linear-gradient(var(--anim-logo-gradient2-angle), transparent,
		                            var(--anim-logo-gradient2-colour2) 120%),
		            linear-gradient(var(--anim-logo-gradient1-angle),
		                            var(--anim-logo-gradient1-colour1),
		                            var(--anim-logo-gradient1-colour2) min(calc(var(--logo-height) * (6.25 * 3 / 4)), 90dvw),
		                            var(--anim-logo-gradient1-colour3) calc(var(--logo-height) * 6.25),
		                            var(--anim-logo-gradient1-colour1) calc(var(--logo-height) * 7.25));
		mask: url("/assets/no-cache/media/logos/vupulupu_animated.svg") 0 0 / 100% 100%;
		animation: 1.5s linear 2s 1 anim-logo-intro, 20s linear 3.5s infinite anim-logo;
	}
}

#hero>.tagline {
	margin: 1rem;
	opacity: 0;
	color: color-mix(var(--colour-text) 40%, var(--colour-background));
	font-size: 2.75rem;
	letter-spacing: .1rem;
	text-shadow: var(--spotlight-shadow);
	transform-origin: center 0;
	transition: transform .25s ease-in-out, color .25s ease-in-out;
	animation: 3s fade-in 3.5s forwards;
	&:hover {
		color: var(--colour-text);
		transform: scale(1.025);
		transition: transform .25s ease-in-out, color .75s ease-in-out;
	}
}