/*
	DouWère
	(c) 1992-2026 Frédéric Blondiau, DouWère s.r.l.
*/

html {
	scrollbar-gutter: stable;
}

html.animating,
html.animating body {
	overflow: hidden;
}

body {
	font-family: -apple-system, -apple-system-font, "Helvetica Neue", "Lucida Grande", Helvetica;
	font-size: 28px;
	margin: 0;
	text-align: center;
	padding: 16px;

	background-color: #FCFCFC;
	color: #333;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #333;
		color: #CCC;
	}
}

#container {
	max-width: 800px;
	margin: auto;
	min-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
}

.primary {
	text-align: center;
	font-weight: 200;
	font-size: 150%;
	line-height: 40px;
	white-space: normal;
}

.secondary {
	text-align: center;
	font-weight: 200;
	font-size: 32px;
	color: #999;
	line-height: 36px;
	white-space: normal;
}

.tertiary {
	font-weight: 200;
	font-size: 16px;
	white-space: normal;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

a {
	text-decoration: none;
}

#logo {
	padding-top: 8px;
}

/* --- Language menu --- */

.pure-menu-horizontal {
	padding-top: 4px;
}

.pure-menu-link {
	color: #999;
}

.pure-menu-children {
	background-color: #FCFCFC;
}

@media (prefers-color-scheme: dark) {
	.pure-menu-children {
		background-color: #333;
	}
}

/* --- Icon grid --- */

.icon-link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	margin: 0 24px;
}

.icon-label {
	display: block;
	margin-top: 8px;
	font-weight: 200;
	font-size: 18px;
}

/* --- Footer --- */

#footer {
	opacity: 0;
	transform: translateY(60px);
	animation: slideUpBounce 0.8s ease-out 2.5s forwards;
}

#footer hr {
	border: none;
	border-top: 1px solid #DDD;
}

@media (prefers-color-scheme: dark) {
	#footer hr {
		border-top-color: #555;
	}
}

/* --- Logo animation overlay --- */

#logo-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	pointer-events: none;
	background-color: #FCFCFC;
}

@media (prefers-color-scheme: dark) {
	#logo-overlay {
		background-color: #333;
	}
}

#logo-overlay .logo-animated {
	width: 50vw;
	max-width: 480pt;
	height: auto;
	/* Animation applied by JS with computed transform values */
	animation-delay: 1.0s;
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	animation-fill-mode: forwards;
}

#logo-overlay.hidden {
	display: none;
}

/* --- Real header (hidden until animation completes) --- */

#header {
	visibility: hidden;
}

#header.revealed {
	visibility: visible;
}

/* --- Center content (icons) --- */

#center {
	opacity: 0;
	transform: scale(0);
	animation: growIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s forwards;
	padding: 48px 0;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Animation keyframes --- */

@keyframes slideUpBounce {
	0% {
		opacity: 0;
		transform: translateY(60px);
	}
	40% {
		opacity: 1;
	}
	70% {
		transform: translateY(-8px);
	}
	85% {
		transform: translateY(3px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes growIn {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	80% {
		opacity: 1;
		transform: scale(1.08);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}