/**
 * SISt – animation styles (front end). Content is only hidden when JS is running
 * (html.sist-js) and the visitor has not asked for reduced motion.
 */
:root {
	--sist-anim-dur: .9s;
	--sist-anim-ease: cubic-bezier(.16, 1, .3, 1);
	--sist-anim-dist: 32px;
}

@media (prefers-reduced-motion: no-preference) {
	.sist-js .sist-anim-fade-up,
	.sist-js .sist-anim-fade,
	.sist-js .sist-anim-left,
	.sist-js .sist-anim-right,
	.sist-js .sist-anim-zoom {
		opacity: 0;
		transition: opacity var(--sist-anim-dur) var(--sist-anim-ease), transform var(--sist-anim-dur) var(--sist-anim-ease);
		will-change: opacity, transform;
	}
	.sist-js .sist-anim-fade-up { transform: translate3d(0, var(--sist-anim-dist), 0); }
	.sist-js .sist-anim-left    { transform: translate3d(calc(-1 * var(--sist-anim-dist)), 0, 0); }
	.sist-js .sist-anim-right   { transform: translate3d(var(--sist-anim-dist), 0, 0); }
	.sist-js .sist-anim-zoom    { transform: scale(.94); }
	.sist-js [class*="sist-anim-"].is-inview { opacity: 1; transform: none; }

	.sist-js .sist-anim-delay-1 { transition-delay: .12s; }
	.sist-js .sist-anim-delay-2 { transition-delay: .24s; }
	.sist-js .sist-anim-delay-3 { transition-delay: .36s; }

	/* Stagger: children appear one after another */
	.sist-js .sist-anim-stagger > *,
	.sist-js .sist-anim-stagger > .wp-block-post-template > * {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
		transition: opacity .8s var(--sist-anim-ease), transform .8s var(--sist-anim-ease);
		transition-delay: calc(var(--sist-i, 0) * 90ms);
	}
	.sist-js .sist-anim-stagger.is-inview > *,
	.sist-js .sist-anim-stagger.is-inview > .wp-block-post-template > * { opacity: 1; transform: none; }

	/* Hero: slow zoom-out of the background image + staggered text on load */
	.sist-kenburns .wp-block-cover__image-background {
		animation: sist-kenburns 14s var(--sist-anim-ease) both;
	}
	.sist-page-hero .sist-hero-content > *,
	.sist-hero-intro .sist-hero-content > * {
		animation: sist-rise 1.1s var(--sist-anim-ease) both;
	}
	.sist-page-hero .sist-hero-content > *:nth-child(2),
	.sist-hero-intro .sist-hero-content > *:nth-child(2) { animation-delay: .15s; }
	.sist-page-hero .sist-hero-content > *:nth-child(3),
	.sist-hero-intro .sist-hero-content > *:nth-child(3) { animation-delay: .3s; }
	.sist-page-hero .sist-hero-content > *:nth-child(4),
	.sist-hero-intro .sist-hero-content > *:nth-child(4) { animation-delay: .45s; }
}

@keyframes sist-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes sist-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes sist-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes sist-scroll-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Marquee ---------- */
.sist-marquee { overflow: hidden; }
.sist-marquee__inner { display: flex; width: max-content; }
.sist-marquee__track { display: flex; flex-shrink: 0; align-items: center; padding-right: 3rem; gap: 3rem; }
.sist-marquee__track > * { margin: 0 !important; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
	.sist-marquee__track { animation: sist-marquee 40s linear infinite; }
	.sist-marquee:hover .sist-marquee__track { animation-play-state: paused; }
}

/* ---------- Scroll cue under the hero ---------- */
.sist-scroll-cue { position: relative; }
.sist-scroll-cue::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	width: 1px;
	height: 56px;
	background: rgba(255, 255, 255, .75);
	z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
	.sist-scroll-cue::after { animation: sist-scroll-cue 2.4s ease-in-out infinite; }
}
@media (max-width: 781px) { .sist-scroll-cue::after { display: none; } }

/* Blueprint grid drifts very slowly */
@keyframes sist-grid-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 48px 48px, 48px 48px; } }
@media (prefers-reduced-motion: no-preference) {
	.sist-blueprint { animation: sist-grid-drift 18s linear infinite; }
}

/* Download preview: fade in only, no scaling */
.sist-js .sist-doc-preview.sist-anim-zoom { transform: none; }