/* Temporary front-page splash. Remove with front-page.php when the real site lands. */

@font-face {
	font-family: "Portrait";
	src: url("../assets/fonts/Portrait-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.kapta-core-splash {
	/* Design knobs. */
	--splash-scrim: 0.45;
	--splash-text-size: clamp(2rem, 4vw, 4rem);
	--splash-text-width: 44ch;
	--splash-line-height: 1.15;
	--splash-color: #fff;
	/* Carousel timing. An image sits at full opacity for --splash-slide-hold,
	   then cross-fades to the next over --splash-slide-fade. --splash-slide-intro
	   is extra hold given to image 1 only, once per loop, so the page settles
	   before anything moves. Loop = (hold + fade) x 6 + intro. */
	--splash-slide-hold: 3.5s;
	--splash-slide-fade: 1s;
	--splash-slide-intro: 1.5s;

	margin: 0;
	background-color: #000;
}

.splash {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(1.5rem, 6vw, 5rem);
}

.splash__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.splash__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	animation: splash-slide
		calc((var(--splash-slide-hold) + var(--splash-slide-fade)) * 6 + var(--splash-slide-intro))
		linear infinite;
}

/* Image 1 runs its own keyframe: same shape, longer hold by --splash-slide-intro.
   Its negative delay puts it at full opacity on load rather than fading up. */
.splash__slide:nth-child(1) {
	background-image: url("/wp-content/uploads/2026/09/viaporin-panimo-1-scaled.jpg");
	animation-name: splash-slide-first;
	animation-delay: calc(var(--splash-slide-fade) * -1);
}

/* The rest start one step apart, pushed back by the intro. */
.splash__slide:nth-child(2) {
	background-image: url("/wp-content/uploads/2026/09/viaporin-panimo-2-scaled.jpg");
	animation-delay: calc((var(--splash-slide-hold) + var(--splash-slide-fade)) * 1 + var(--splash-slide-intro) - var(--splash-slide-fade));
}

.splash__slide:nth-child(3) {
	background-image: url("/wp-content/uploads/2026/09/viaporin-panimo-3-scaled.jpg");
	animation-delay: calc((var(--splash-slide-hold) + var(--splash-slide-fade)) * 2 + var(--splash-slide-intro) - var(--splash-slide-fade));
}

.splash__slide:nth-child(4) {
	background-image: url("/wp-content/uploads/2026/09/viaporin-panimo-4-scaled.jpg");
	animation-delay: calc((var(--splash-slide-hold) + var(--splash-slide-fade)) * 3 + var(--splash-slide-intro) - var(--splash-slide-fade));
}

.splash__slide:nth-child(5) {
	background-image: url("/wp-content/uploads/2026/09/viaporin-panimo-5-scaled.jpg");
	animation-delay: calc((var(--splash-slide-hold) + var(--splash-slide-fade)) * 4 + var(--splash-slide-intro) - var(--splash-slide-fade));
}

.splash__slide:nth-child(6) {
	background-image: url("/wp-content/uploads/2026/09/viaporin-panimo-6-scaled.jpg");
	animation-delay: calc((var(--splash-slide-hold) + var(--splash-slide-fade)) * 5 + var(--splash-slide-intro) - var(--splash-slide-fade));
}

/* Percentages are fractions of the whole loop, so they follow the knobs above
   and can't be expressed in calc(). At 3.5s + 1s + 1.5s the loop is 28.5s:
     fade in ends   = fade / loop                 = 3.5088%
     hold ends      = (fade + hold) / loop        = 15.7895%   (+ intro for image 1)
     fade out ends  = (fade + hold + fade) / loop = 19.2982%
   Change a knob by much and these four numbers need recomputing. */
@keyframes splash-slide {
	0% { opacity: 0; }
	3.5088% { opacity: 1; }
	15.7895% { opacity: 1; }
	19.2982% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes splash-slide-first {
	0% { opacity: 0; }
	3.5088% { opacity: 1; }
	21.0526% { opacity: 1; }
	24.5614% { opacity: 0; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.splash__slide {
		animation: none;
	}

	.splash__slide:nth-child(1) {
		opacity: 1;
	}
}

/* Black overlay: the photos are bright and busy, white type needs the contrast. */
.splash::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, var(--splash-scrim));
}

.splash__inner {
	position: relative;
	z-index: 2;
	min-width: 0;
	max-width: min(var(--splash-text-width), 100%);
	color: var(--splash-color);
	font-family: "Portrait", Georgia, "Times New Roman", serif;
	font-size: var(--splash-text-size);
	font-weight: 700;
	line-height: var(--splash-line-height);
	letter-spacing: -0.01em;
	text-align: left;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
	text-wrap: pretty;
}

.splash__message {
	margin: 0;
	/* Optical: drop the half-leading above the first line so the gap above the
	   text reads the same as the gap to its left. */
	margin-top: calc((1 - var(--splash-line-height)) * 0.5em);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.splash__message span {
	display: block;
}

.splash__contact {
	margin: 1em 0 0;
	overflow-wrap: break-word;
}

.splash__contact a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.18em;
	transition: opacity 0.2s ease;
}

.splash__contact a:hover,
.splash__contact a:focus {
	opacity: 0.7;
}