/*
 * Homepage hero (templates/element/Slider/slider.php, js/hero.js).
 * Animations only run once hero.js adds .is-ready, so without JS the first
 * slide is a plain static hero.
 */
.hero {
	--hero-back: cubic-bezier(.68, -.55, .27, 1.55); /* Back.easeInOut */
	--hero-power3: cubic-bezier(.65, 0, .35, 1);    /* Power3.easeInOut */
	--hero-delay: 9s;
	--mx: 0;
	--my: 0;
	position: relative;
	height: clamp(600px, 64.5vw, 800px); /* the old slider's 1240x800 grid */
	overflow: hidden;
	background: var(--brand-ink);
	perspective: 1200px;
	isolation: isolate;
}

.hero__slide { display: none; position: absolute; inset: 0; }
.hero__slide.is-active,
.hero__slide.is-next,
.hero__slide.is-leaving { display: block; }
.hero__slide.is-active { z-index: 2; }
.hero__slide.is-leaving { z-index: 1; }
.hero__slide.is-next { z-index: 0; visibility: hidden; }

.hero__bg,
.hero__brush {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Vertical swipes scroll the page; js/hero.js arms the brush after press-and-hold. No long-press callout or selection. */
.hero__brush { touch-action: pan-y; cursor: crosshair; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hero__slide.has-brush .hero__bg:not(.hero__bg--after) { visibility: hidden; }

/* Content: one plane tilted by the pointer (3D parallax), lines at different depths. */
.hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 90px 16px 140px; /* clears the fixed header and the wave below */
	text-align: center;
	pointer-events: none;
	transform-style: preserve-3d;
	transform: rotateX(calc(var(--my) * -4deg)) rotateY(calc(var(--mx) * 6deg));
	transition: transform .4s ease-out;
}
.hero__content a,
.hero__content button { pointer-events: auto; }

/* 3D: each 1px drop-shadow stacks on the last, building a darkening green side (4px deep, down-right), then a soft cast shadow. */
.hero__logo {
	position: relative;
	display: block;
	width: clamp(96px, 11vw, 136px);
	aspect-ratio: 1;
	margin-bottom: 8px;
	translate: 0 0 20px;
	filter:
		drop-shadow(1px 1px 0 #2f7a0c) drop-shadow(1px 1px 0 #2a6e0b)
		drop-shadow(1px 1px 0 #25620a) drop-shadow(1px 1px 0 #205609)
		drop-shadow(3px 7px 6px rgba(0, 0, 0, .35));
}
.hero__leaf { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 17.6% 92%; } /* origin = where the leaves meet */

.hero__title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__line { display: block; translate: 0 0 60px; }
.hero__line--b { translate: 0 0 40px; }
.hero__line > span {
	display: inline-block;
	padding: .08em .35em .12em;
	border-radius: 6px;
	background: linear-gradient(90deg, #0B5111 0%, #079600 75%);
	color: var(--brand-white);
	font-family: var(--brand-font);
	font-size: clamp(1.6rem, 4vw, 3.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
	box-shadow: 0 10px 30px rgba(22, 36, 10, .35);
}

.hero__hint {
	margin: 4px 0 0;
	padding: 10px 18px;
	border-radius: 6px;
	background: rgba(22, 36, 10, .72);
	color: var(--brand-white);
	font-size: 1rem;
	line-height: 1.5;
	translate: 0 0 30px;
}
.hero__hint strong { display: block; font-weight: 700; }
.hero__hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
	.hero__hint-mouse { display: inline; }
	.hero__hint-touch { display: none; }
}

.hero__btn {
	margin-top: 12px;
	padding: 12px 26px;
	border: 3px solid var(--brand-white);
	border-radius: 4px;
	background: rgba(22, 36, 10, .35);
	backdrop-filter: blur(4px);
	color: var(--brand-white) !important;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none !important;
	translate: 0 0 80px;
	box-shadow: 0 1px 2px #0006; /* ghost button: light contact shadow only (brand.css "Lit buttons") */
	transition: scale .2s ease, background-color .2s ease, color .2s ease, box-shadow .1s ease, translate .1s ease;
}
/* Press (brand.css sets the pressed shadow); keep the 80px depth the 3D entrance relies on. */
.hero .hero__btn:active { translate: 0 1px 80px; }
.hero__btn:hover,
.hero__btn:focus-visible { scale: 1.1; /* individual property: the entrance animation owns transform */ background: var(--brand-white); color: var(--brand-ink) !important; }

.hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(22, 36, 10, .35);
	color: var(--brand-white);
	cursor: pointer;
	transition: background-color .2s ease;
}
.hero__arrow:hover,
.hero__arrow:focus-visible { background: var(--brand-forest); }
.hero__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }
@media (max-width: 777px) {
	.hero__arrow { top: 110px; width: 40px; height: 40px; margin-top: 0; } /* beside the logo, clear of the headline */
	.hero__arrow--prev { left: 8px; }
	.hero__arrow--next { right: 8px; }
}

.hero__timer { display: none; }

/* ---- Motion (only after hero.js has set things up) ---- */
.hero.is-ready .hero__timer {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	height: 5px;
	width: 0;
	background: var(--brand-lime);
}
.hero.is-ready .is-active .hero__timer { animation: hero-timer var(--hero-delay) linear forwards; }
.hero.is-paused .hero__timer { animation-play-state: paused !important; }
@media (hover: hover) { .hero:hover .hero__timer { animation-play-state: paused !important; } } /* touch taps leave a sticky :hover */
.hero:has(:focus-visible) .hero__timer { animation-play-state: paused !important; } /* own rule: old browsers drop a list containing :has() */

/* Slide entrances (not on first load, so the opening photo paints immediately) */
.hero.has-moved .is-active[data-fx="fade"] { animation: hero-fade .9s var(--hero-power3); }
.hero.has-moved .is-active[data-fx="curtain-v"] { animation: hero-curtain-v 1s var(--hero-power3); }
.hero.has-moved .is-active[data-fx="curtain-h"] { animation: hero-curtain-h 1s var(--hero-power3); }
.hero.has-moved .is-active[data-fx="cube"] { animation: hero-cube 1s var(--hero-power3); transform-origin: 0 50%; }
.hero.is-ready .is-leaving { animation: hero-out 1s var(--hero-power3) forwards; }

/* Layer entrances (the old slider's frame timings) */
.hero.is-ready .hero__slide:not(.is-active) .hero__content > *,
.hero.is-ready .hero__slide:not(.is-active) .hero__line > span { opacity: 0; }
.hero.is-ready .is-active .hero__logo { animation: hero-drop 1.5s var(--hero-power3) both; }
/* The logo's leaves start folded behind the big leaf and unfurl about their shared stem point. */
.hero.is-ready .is-active .hero__leaf--2 { --leaf-closed: 13deg; animation: hero-leaf-open 1.5s var(--hero-back) 1s both; }
.hero.is-ready .is-active .hero__leaf--1 { --leaf-closed: 40deg; animation: hero-leaf-open 1.6s var(--hero-back) 1.4s both; }
.hero.is-ready .is-active .hero__line--a > span { animation: hero-in-left 1s var(--hero-back) .5s both; }
.hero.is-ready .is-active .hero__line--b > span { animation: hero-in-right 1s var(--hero-back) .9s both; }
.hero.is-ready .is-active .hero__hint { animation: hero-in-up 1s var(--hero-back) 1.5s both; }
.hero.is-ready .is-active .hero__btn { animation: hero-in-up 1s var(--hero-back) 1.7s both; }
.hero.is-ready .is-active.hero__slide--drift .hero__line--a { animation: hero-drift 10s linear 1.5s infinite alternate; }
.hero.is-ready .is-active.hero__slide--drift .hero__line--b { animation: hero-drift 10s linear 1.9s infinite alternate-reverse; }

/* Layer exits, played before the slide changes */
.hero.is-ready .is-leaving .hero__line--a > span { animation: hero-out-right .6s var(--hero-power3) forwards; }
.hero.is-ready .is-leaving .hero__line--b > span { animation: hero-out-left .6s var(--hero-power3) forwards; }
.hero.is-ready .is-leaving .hero__hint,
.hero.is-ready .is-leaving .hero__btn { animation: hero-out-down .6s var(--hero-power3) forwards; }
.hero.is-ready .is-leaving .hero__logo { animation: hero-fade .3s reverse forwards; }

@keyframes hero-timer { to { width: 100%; } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-curtain-v { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
@keyframes hero-curtain-h { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@keyframes hero-cube { from { transform: translateX(100%) rotateY(-90deg); } }
@keyframes hero-out { to { opacity: 0; transform: scale(.94); } }
@keyframes hero-drop { from { transform: translateY(-150%); opacity: 0; } }
@keyframes hero-leaf-open { from { rotate: var(--leaf-closed); } }
@keyframes hero-in-left { from { transform: translateX(-150px) rotateY(-45deg); opacity: 0; filter: blur(10px); } }
@keyframes hero-in-right { from { transform: translateX(150px) rotateY(45deg); opacity: 0; filter: blur(10px); } }
@keyframes hero-in-up { from { transform: translateY(100px) rotateX(-45deg); opacity: 0; filter: blur(10px); } }
@keyframes hero-out-right { to { transform: translateX(150px) rotateY(45deg); opacity: 0; filter: blur(10px); } }
@keyframes hero-out-left { to { transform: translateX(-150px) rotateY(-45deg); opacity: 0; filter: blur(10px); } }
@keyframes hero-out-down { to { transform: translateY(50px) rotateX(45deg); opacity: 0; filter: blur(10px); } }
@keyframes hero-drift { from { transform: translateX(-20px); } to { transform: translateX(20px); } }

@media (prefers-reduced-motion: reduce) {
	.hero *,
	.hero.is-ready .hero__slide { animation: none !important; transition: none !important; }
	.hero__content { transform: none; }
	.hero .hero__btn:active { translate: 0 0 80px; }
}