/*
 * home.php's inline <style> block (lines 94-124), lifted verbatim.
 *
 * PAGE-SCOPED ON PURPOSE. These selectors are generic — `.hero-slide`,
 * `.image-radius`, `.solutions-carousel .vstack .desc` — and `.image-radius` in
 * particular is also used by the use-case related cards
 * (src/app/use-cases/[slug]/page.tsx) and by ArchiveGrid. Folding this into
 * sleektap-cascade.css would apply the homepage's rules site-wide, so it is
 * <link>ed from src/app/page.tsx only.
 *
 * `.hero-slider-wrapper` is kept even though home.php never uses that class on
 * any element: it is part of the block that was authored here, and dropping it
 * would be a silent edit to the stylesheet rather than a port of it.
 */

.image-radius {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.solutions-carousel .vstack .desc {
	min-height: 100px;
}

.hero-slider-wrapper {
	width: 100%;
	height: 650px;
	position: relative;
}

/* The crossfade. It used to fade the old slide out while the new one faded
   in, so halfway through both were half transparent and the background showed
   through: the picture dipped on every change. Now the incoming slide fades in
   ON TOP, and the outgoing one stays fully visible underneath until it is
   covered, then drops out instantly (the 1.5s delay on its opacity change). */
.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;

	opacity: 0;
	z-index: 0;
	transition: opacity 0s linear 1.5s;
}

.hero-slide.active {
	opacity: 1;
	z-index: 1;
	transition: opacity 1.5s ease-in-out;
}

/* The two floating cards over the hero photo: a fade-and-rise that runs from
   the first paint, so nothing is drawn in place first and then moved. */
@keyframes st-hero-float-in {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}
.st-hero-float {
	animation: st-hero-float-in .75s cubic-bezier(.33, 1, .68, 1) .75s both;
}
/* Scroll parallax on the card images (the wrappers above carry the entrance,
   so the two never fight over one transform). --st-hero-par runs 0 -> 1 as the
   page scrolls (sleektap-home.js). The curve is the one home.php's onscroll
   anime drew, measured: each card starts 94px out, passes its rest position
   and ends 20px past it as the hero leaves the screen. Defaulting to 0 in CSS
   is what keeps the first frame and the script's first frame identical. */
.hero-five-contries img {
	transform: translate3d(0, calc(-94px + 114px * var(--st-hero-par, 0)), 0);
	will-change: transform;
}
.hero-five-account img {
	transform: translate3d(0, calc(94px - 114px * var(--st-hero-par, 0)), 0);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.st-hero-float { animation: none; }
	.hero-five-contries img, .hero-five-account img { transform: none; }
	.hero-slide, .hero-slide.active { transition: none; }
}