/*
 * Front page only (and in the editor): the hero over the header, the
 * dusk-to-night sky driven by --p (0 → 1 as the hero scrolls away, set by
 * assets/js/front.js) and the entrance animations.
 */

/* The header floats over the hero on the front page. */
body.home .wp-site-blocks {
	position: relative;
}

body.home .wp-site-blocks > header.wp-block-template-part {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 5;
}

body.home .snrtech-header {
	background: transparent !important;
}

.snrtech-hero {
	--p: 0;
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

/* Sky layers. */
.snrtech-hero__sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
}

.snrtech-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 200px;
	/* Keeps the copy above the range, which grows with the viewport width. */
	padding-bottom: max(300px, calc(24vw - 40px));
	transform: translateY(calc(var(--p) * 90px));
	opacity: calc(1 - var(--p) * 0.8);
}

.snrtech-hero__inner > * {
	margin: 0;
	animation: snrtech-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.snrtech-hero__inner > :nth-child(2) { animation-delay: 0.12s; }
.snrtech-hero__inner > :nth-child(3) { animation-delay: 0.24s; }
.snrtech-hero__inner > :nth-child(4) { animation-delay: 0.36s; }

.snrtech-hero__title {
	max-width: 900px;
	line-height: 1.25;
}

.snrtech-hero__lead {
	max-width: 640px;
}

/* Hashtag chips. */
.snrtech-tag {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 999px;
	font-weight: 500;
	line-height: 1.6;
}

.snrtech-tag--accent {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Mountain range. Height follows the width (viewBox 1440×360, sliced) so
   wide screens don't crop Damavand's peak off the top. */
.snrtech-hero__range {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: none !important;
	height: max(340px, 24vw);
	margin: 0 !important;
}

/* Scroll cue. */
.snrtech-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	transform: translateX(-50%);
	color: var(--wp--preset--color--muted-light);
	font-size: 12px;
	opacity: calc(1 - var(--p) * 3);
}

.snrtech-hero__cue:hover {
	color: var(--wp--preset--color--contrast);
}

.snrtech-hero__mouse {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	width: 22px;
	height: 34px;
	padding-top: 6px;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	border-radius: 12px;
}

.snrtech-hero__cue-dot {
	width: 4px;
	height: 7px;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
	animation: snrtech-cue 1.6s ease-in-out infinite;
}

/* Ambient animations. */
.snrtech-hero__twinkle { animation: snrtech-twinkle 3.2s ease-in-out infinite alternate; }
.snrtech-hero__cloud { animation: snrtech-drift 22s ease-in-out infinite alternate; }
.snrtech-hero__birds { animation: snrtech-fly 34s linear infinite; }
.snrtech-hero__wing { transform-box: fill-box; transform-origin: center; animation: snrtech-flap 0.5s ease-in-out infinite alternate; }
.snrtech-hero__sun { animation: snrtech-pulse 6s ease-in-out infinite alternate; }
.snrtech-hero__plume { opacity: 0; animation: snrtech-plume 6s ease-in-out infinite; }

@keyframes snrtech-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes snrtech-twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes snrtech-drift { from { transform: translateX(0); } to { transform: translateX(-90px); } }
@keyframes snrtech-fly { from { transform: translate(0, 0); } to { transform: translate(125vw, -60px); } }
@keyframes snrtech-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
@keyframes snrtech-pulse {
	from { box-shadow: 0 0 60px 18px rgba(246, 200, 119, 0.35), 0 0 160px 60px rgba(233, 165, 91, 0.18); }
	to { box-shadow: 0 0 80px 26px rgba(246, 200, 119, 0.45), 0 0 200px 80px rgba(233, 165, 91, 0.24); }
}
@keyframes snrtech-plume { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes snrtech-cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 900px) {
	.snrtech-hero__inner {
		padding-top: 150px;
	}
}

@media (max-width: 640px) {
	.snrtech-hero__sun,
	.snrtech-hero__sun-red {
		left: 12% !important;
		width: 84px !important;
		height: 84px !important;
	}

	.snrtech-hero__cue,
	.snrtech-hero__cloud {
		display: none !important;
	}

	.snrtech-hero__inner {
		padding-top: 130px;
		padding-bottom: 350px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snrtech-hero__inner,
	.snrtech-hero__inner > *,
	.snrtech-hero__twinkle,
	.snrtech-hero__cloud,
	.snrtech-hero__birds,
	.snrtech-hero__wing,
	.snrtech-hero__sun,
	.snrtech-hero__cue-dot,
	.snrtech-hero__plume {
		animation: none !important;
	}

	.snrtech-hero__inner {
		transform: none;
	}
}

/* Editor: no floating header, no entrance animation. */
.editor-styles-wrapper .snrtech-hero__inner {
	padding-top: 96px;
}

.editor-styles-wrapper .snrtech-hero__inner > * {
	animation: none;
}