/* perhelahti.fi: tumma ulkoasu, animaatiot (Claude 28.10.2026). Värit tulevat teeman paletista. */

/* --- Etusivun yläosa: leijuvat valopallot ja tähtipöly --- */
.perhe-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Alareuna häivytetään, ettei valopallojen reuna katkea terävästi */
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
	mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.perhe-hero::before,
.perhe-hero::after,
.perhe-hero > .perhe-hero-pallo {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .45;
	pointer-events: none;
}
.perhe-hero::before {
	width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
	left: -8%; top: -30%;
	background: var(--wp--preset--color--primary);
	animation: perhe-leiju-a 22s ease-in-out infinite alternate;
}
.perhe-hero::after {
	width: 36vw; height: 36vw; max-width: 480px; max-height: 480px;
	right: -6%; bottom: -15%;
	background: var(--wp--preset--color--primary-alt);
	opacity: .35;
	animation: perhe-leiju-b 26s ease-in-out infinite alternate;
}
/* Tähtipöly: kaksi kerrosta pieniä pisteitä, jotka liikkuvat hitaasti eri tahtiin */
.perhe-hero-tahdet,
.perhe-hero-tahdet::after {
	position: absolute;
	inset: -50%;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.55), transparent),
		radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.45), transparent),
		radial-gradient(1.5px 1.5px at 160px 60px, rgba(255,255,255,.35), transparent),
		radial-gradient(1px 1px at 230px 170px, rgba(255,255,255,.5), transparent);
	background-size: 260px 220px;
	animation: perhe-tahdet 120s linear infinite;
}
.perhe-hero-tahdet::after {
	content: "";
	inset: 0;
	background-size: 340px 300px;
	opacity: .6;
	animation: perhe-tahdet 180s linear infinite reverse, perhe-tuike 6s ease-in-out infinite alternate;
}
@keyframes perhe-leiju-a {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(18vw, 12vh) scale(1.15); }
	100% { transform: translate(6vw, 22vh) scale(.95); }
}
@keyframes perhe-leiju-b {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(-16vw, -10vh) scale(1.1); }
	100% { transform: translate(-4vw, -20vh) scale(1.2); }
}
@keyframes perhe-tahdet { to { transform: translate(260px, 220px); } }
@keyframes perhe-tuike { from { opacity: .25; } to { opacity: .7; } }

/* Otsikkoon hillitty liukuväri */
.perhe-hero h1 {
	background: linear-gradient(100deg, var(--wp--preset--color--main) 30%, var(--wp--preset--color--primary) 75%, var(--wp--preset--color--primary-alt));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Kuvat: pyöristys ja pieni suurennus hiiren alla --- */
.wp-block-image.has-custom-border,
.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.wp-block-image.has-custom-border img,
.wp-block-post-featured-image img {
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.wp-block-image.has-custom-border:hover img,
.wp-block-post-featured-image:hover img {
	transform: scale(1.04);
}

/* --- Painikkeet: kevyt nousu --- */
.wp-element-button {
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* --- Esiin liukuminen vierittäessä (vain kun JS on käytössä) --- */
.perhe-js .perhe-esiin {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.perhe-js .perhe-esiin.perhe-nakyy {
	opacity: 1;
	transform: none;
}

/* --- Lomakkeen kentät tummalla pohjalla --- */
.perhe-lomake input[type=text],
.perhe-lomake input[type=email],
.perhe-lomake textarea {
	background: color-mix(in srgb, var(--wp--preset--color--main) 4%, transparent);
	border-color: var(--wp--preset--color--border-dark);
}
.perhe-lomake input:focus,
.perhe-lomake textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

/* --- Vähennä liikettä -asetus: ei animaatioita --- */
@media (prefers-reduced-motion: reduce) {
	.perhe-hero::before, .perhe-hero::after,
	.perhe-hero-tahdet, .perhe-hero-tahdet::after { animation: none; }
	.perhe-js .perhe-esiin { opacity: 1; transform: none; transition: none; }
	.wp-element-button, .wp-block-image img, .wp-block-post-featured-image img { transition: none; }
}