/**
 * Scroll-triggered entrance animations (Statron-style).
 * Triggered by site/template/js/spiro-motion.js via .is-inview.
 * See planning/2026-09-02-statron-motion-reference.md
 *
 * html.spiro-motion is set by an inline head script so known targets stay
 * hidden from the first paint (no visible → jump → slide flash).
 *
 * General hero (CMS sectionClass "hero"):
 *   .hero .img_cont  → media: scale 110%→100% + fade
 *   .hero h2         → caption: fade-in (HP slider style), slightly delayed
 */

:root {
	--spiro-come-x: 100px;
}

/* Smaller slide on narrow viewports — less horizontal overflow before clip */
@media (max-width: 640px) {
	:root {
		--spiro-come-x: 40px;
	}
}

.spiro-come-right,
.spiro-come-left,
.spiro-come-down,
.spiro-hero-media,
.spiro-hero-caption {
	opacity: 0;
	will-change: transform, opacity;
}

.spiro-come-right {
	transform: translateX(var(--spiro-come-x));
}

.spiro-come-left {
	transform: translateX(calc(-1 * var(--spiro-come-x)));
}

.spiro-come-down {
	transform: translateY(40px);
}

/* Hero media — 110% left-aligned → 100% */
.spiro-hero-media {
	transform: scale(1.1);
	transform-origin: left center;
}

/* Hero caption — fade + slide in from the right (HP / Statron text pattern) */
.spiro-hero-caption {
	transform: translateX(var(--spiro-come-x));
}

/* --------------------------------------------------------------------------
   CSS-first hides — applied before deferred motion.js runs
   -------------------------------------------------------------------------- */

html.spiro-motion .hero .img_cont {
	opacity: 0;
	transform: scale(1.1);
	transform-origin: left center;
	will-change: transform, opacity;
}

/* PDF 55 — history hero image slides from the right (override scale hide) */
html.spiro-motion #history .hero .img_cont {
	transform: translateX(var(--spiro-come-x));
	transform-origin: center;
}

html.spiro-motion .hero h2 {
	opacity: 0;
	transform: translateX(var(--spiro-come-x));
	will-change: transform, opacity;
}

html.spiro-motion .regular_box_title > h2,
html.spiro-motion .regular_box_title > .description_content,
html.spiro-motion .spiro-history__year,
html.spiro-motion .spiro-history__title,
html.spiro-motion .spiro-history__media,
html.spiro-motion .spiro-history__text,
html.spiro-motion .spiro-item-hero__media,
html.spiro-motion .spiro-item-hero__title,
html.spiro-motion .spiro-item-intro__claim,
html.spiro-motion .spiro-item-intro__lead,
html.spiro-motion .spiro-about-hero__media,
html.spiro-motion .spiro-about-hero__title,
html.spiro-motion .spiro-about-hero__swiss,
html.spiro-motion .spiro-about-intro__claim,
html.spiro-motion .spiro-about-intro__body,
html.spiro-motion .spiro-svc-inside-hero__media,
html.spiro-motion .spiro-svc-inside-hero__title,
html.spiro-motion .spiro-svc-inside-hero__swiss,
html.spiro-motion #services .regular_box_title .box_background::before,
html.spiro-motion #services .regular_box_title .box_caption h1,
html.spiro-motion #services .regular_box_title .box_caption h2,
html.spiro-motion #services .spiro-services-hero__swiss,
html.spiro-motion .spiro-svc-inside-intro__claim,
html.spiro-motion .spiro-svc-inside-intro__body,
html.spiro-motion .spiro-career-hero__media,
html.spiro-motion .spiro-career-hero__title,
html.spiro-motion .spiro-career-hero__swiss,
html.spiro-motion .spiro-career-intro__claim,
html.spiro-motion .spiro-career-intro__body,
html.spiro-motion .spiro-contact__title,
html.spiro-motion .spiro-contact__jump,
html.spiro-motion .spiro-contact__region-boxes .spiro-blue-box--contact,
html.spiro-motion .spiro-contact__form-title,
html.spiro-motion .spiro-contact__fields,
html.spiro-motion .spiro-contact__form-footer,
html.spiro-motion .spiro-contact__maps .map_region,
html.spiro-motion .spiro-warranty__back,
html.spiro-motion .spiro-warranty__title,
html.spiro-motion .spiro-warranty__intro,
html.spiro-motion .spiro-warranty__info,
html.spiro-motion .spiro-warranty__claim,
html.spiro-motion .spiro-care__back,
html.spiro-motion .spiro-care__hero-title,
html.spiro-motion .spiro-care__claim,
html.spiro-motion .spiro-care__copy,
html.spiro-motion .spiro-care__benefits-title,
html.spiro-motion .spiro-care__benefits,
html.spiro-motion .spiro-care__actions,
html.spiro-motion .spiro-support__back,
html.spiro-motion .spiro-support__title,
html.spiro-motion .spiro-support__intro,
html.spiro-motion .spiro-support__info,
html.spiro-motion .spiro-support__fields,
html.spiro-motion .spiro-support__form-footer,
html.spiro-motion .spiro-upgrades__back,
html.spiro-motion .spiro-upgrades__title,
html.spiro-motion .spiro-upgrades__intro,
html.spiro-motion .spiro-upgrades__card {
	opacity: 0;
	transform: translateX(var(--spiro-come-x));
	will-change: transform, opacity;
}

html.spiro-motion .spiro-footer__headline-connect,
html.spiro-motion .spiro-footer__headline-with {
	opacity: 0;
	transform: translateX(var(--spiro-come-x));
	will-change: transform, opacity;
}

html.spiro-motion .main_text .description_content,
html.spiro-motion .hp_products h2,
html.spiro-motion .hp_products .description_content,
html.spiro-motion .hp_connectivity h2,
html.spiro-motion .hp_connectivity .description_content,
html.spiro-motion .hp_highlights h2,
html.spiro-motion .hp_highlights .description_content,
html.spiro-motion [data-spiro-highlights]:not([data-spiro-item-gallery]) .spiro-highlights__title,
html.spiro-motion [data-spiro-highlights]:not([data-spiro-item-gallery]) .spiro-highlights__track,
html.spiro-motion .spiro-products__title,
html.spiro-motion .spiro-products__filters {
	opacity: 0;
	transform: translateX(var(--spiro-come-x));
	will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Play states
   -------------------------------------------------------------------------- */

.spiro-come-right.is-inview,
html.spiro-motion .regular_box_title > h2.is-inview,
html.spiro-motion .spiro-item-intro__claim.is-inview,
html.spiro-motion .spiro-item-hero__media.is-inview,
html.spiro-motion .spiro-about-hero__media.is-inview,
html.spiro-motion .spiro-about-intro__claim.is-inview,
html.spiro-motion .spiro-svc-inside-hero__media.is-inview,
html.spiro-motion #services .regular_box_title .box_background.is-inview::before,
html.spiro-motion .spiro-svc-inside-intro__claim.is-inview,
html.spiro-motion .spiro-career-hero__media.is-inview,
html.spiro-motion .spiro-career-intro__claim.is-inview,
html.spiro-motion .spiro-contact__title.is-inview,
html.spiro-motion .spiro-contact__region-boxes .spiro-blue-box--contact.is-inview,
html.spiro-motion .spiro-contact__form-title.is-inview,
html.spiro-motion .spiro-contact__maps .map_region.is-inview,
html.spiro-motion .spiro-care__back.is-inview,
html.spiro-motion .spiro-care__claim.is-inview,
html.spiro-motion .spiro-care__benefits-title.is-inview,
html.spiro-motion .spiro-support__back.is-inview,
html.spiro-motion .spiro-support__info.is-inview,
html.spiro-motion .main_text .description_content.is-inview,
html.spiro-motion .hp_products h2.is-inview,
html.spiro-motion .hp_products .description_content.is-inview,
html.spiro-motion .hp_connectivity h2.is-inview,
html.spiro-motion .hp_connectivity .description_content.is-inview,
html.spiro-motion .hp_highlights h2.is-inview,
html.spiro-motion .hp_highlights .description_content.is-inview,
html.spiro-motion [data-spiro-highlights]:not([data-spiro-item-gallery]) .spiro-highlights__title.is-inview,
html.spiro-motion [data-spiro-highlights]:not([data-spiro-item-gallery]) .spiro-highlights__track.is-inview,
html.spiro-motion .spiro-products__title.is-inview,
html.spiro-motion .spiro-products__filters.is-inview {
	animation: spiro-come-x 1.2s ease forwards;
}

.spiro-come-left.is-inview {
	animation: spiro-come-x 1.2s ease forwards;
}

.spiro-come-down.is-inview {
	animation: spiro-come-y 0.6s ease forwards;
}

.spiro-come-right--delay-02.is-inview {
	animation: spiro-come-x 1.2s ease 0.4s both;
}

/* Footer headline: CONNECT first, WITH US after 0.4s (beats .spiro-contact__title play rule) */
html.spiro-motion .spiro-footer__headline-connect.is-inview {
	animation: spiro-come-x 1.2s ease forwards;
}

html.spiro-motion .spiro-footer__headline-with.is-inview,
html.spiro-motion .spiro-footer__headline-with.spiro-come-right--delay-02.is-inview {
	animation: spiro-come-x 1.2s ease 0.25s both;
}

.spiro-come-right--delay-hero.is-inview,
html.spiro-motion .spiro-item-hero__title.is-inview,
html.spiro-motion .spiro-about-hero__title.is-inview,
html.spiro-motion .spiro-about-hero__swiss.is-inview,
html.spiro-motion .spiro-svc-inside-hero__title.is-inview,
html.spiro-motion .spiro-svc-inside-hero__swiss.is-inview,
html.spiro-motion #services .regular_box_title .box_caption h1.is-inview,
html.spiro-motion #services .regular_box_title .box_caption h2.is-inview,
html.spiro-motion #services .spiro-services-hero__swiss.is-inview,
html.spiro-motion .spiro-career-hero__title.is-inview,
html.spiro-motion .spiro-career-hero__swiss.is-inview,
html.spiro-motion .spiro-contact__jump.is-inview,
html.spiro-motion .spiro-contact__fields.is-inview,
html.spiro-motion .spiro-care__hero-title.is-inview,
html.spiro-motion .spiro-care__copy.is-inview,
html.spiro-motion .spiro-care__benefits.is-inview,
html.spiro-motion .spiro-support__title.is-inview,
html.spiro-motion .spiro-support__fields.is-inview {
	animation: spiro-come-x 1.2s ease 0.35s both;
}

.spiro-come-right--delay-contact-2.is-inview {
	animation: spiro-come-x 1.2s ease 0.7s both;
}

.spiro-come-right--delay-1s.is-inview,
html.spiro-motion .regular_box_title > .description_content.is-inview,
html.spiro-motion .spiro-contact__form-footer.is-inview,
html.spiro-motion .spiro-support__intro.is-inview,
html.spiro-motion .spiro-support__form-footer.is-inview,
html.spiro-motion .spiro-care__actions.is-inview {
	animation: spiro-come-x 1.2s ease 1s both;
}

/* History intro lead: 2s after title (PDF 55) — beats the generic 1s rule above */
.spiro-come-right--delay-2s.is-inview,
html.spiro-motion #history .regular_box_title > .description_content.is-inview,
html.spiro-motion .spiro-item-intro__lead.is-inview,
html.spiro-motion .spiro-about-intro__body.is-inview,
html.spiro-motion .spiro-svc-inside-intro__body.is-inview,
html.spiro-motion .spiro-career-intro__body.is-inview {
	animation: spiro-come-x 1.2s ease 2s both;
}

/* General hero media */
.spiro-hero-media.is-inview,
html.spiro-motion .hero .img_cont.is-inview {
	animation: spiro-hero-media 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* PDF 55 — history hero media uses come-right, not scale */
html.spiro-motion #history .hero .img_cont.is-inview {
	animation: spiro-come-x 1.2s ease forwards;
}

/* General hero caption — fade in, slightly delayed with the image */
.spiro-hero-caption.is-inview,
html.spiro-motion .hero h2.is-inview {
	animation: spiro-hero-caption 1.2s ease 0.45s both;
}

@keyframes spiro-come-x {
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes spiro-come-y {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes spiro-hero-media {
	from {
		opacity: 0;
		transform: scale(1.1);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes spiro-hero-caption {
	from {
		opacity: 0;
		transform: translateX(var(--spiro-come-x));
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.spiro-come-right,
	.spiro-come-left,
	.spiro-come-down,
	.spiro-hero-media,
	.spiro-hero-caption,
	html.spiro-motion .hero .img_cont,
	html.spiro-motion .hero h2,
	html.spiro-motion .regular_box_title > h2,
	html.spiro-motion .regular_box_title > .description_content,
	html.spiro-motion .spiro-history__year,
	html.spiro-motion .spiro-history__title,
	html.spiro-motion .spiro-history__media,
	html.spiro-motion .spiro-history__text,
	html.spiro-motion .spiro-item-hero__media,
	html.spiro-motion .spiro-item-hero__title,
	html.spiro-motion .spiro-item-intro__claim,
	html.spiro-motion .spiro-item-intro__lead,
	html.spiro-motion .spiro-about-hero__media,
	html.spiro-motion .spiro-about-hero__title,
	html.spiro-motion .spiro-about-hero__swiss,
	html.spiro-motion .spiro-about-intro__claim,
	html.spiro-motion .spiro-about-intro__body,
	html.spiro-motion .spiro-svc-inside-hero__media,
	html.spiro-motion .spiro-svc-inside-hero__title,
	html.spiro-motion .spiro-svc-inside-hero__swiss,
	html.spiro-motion #services .regular_box_title .box_background::before,
	html.spiro-motion #services .regular_box_title .box_caption h1,
	html.spiro-motion #services .regular_box_title .box_caption h2,
	html.spiro-motion #services .spiro-services-hero__swiss,
	html.spiro-motion .spiro-svc-inside-intro__claim,
	html.spiro-motion .spiro-svc-inside-intro__body,
	html.spiro-motion .spiro-career-hero__media,
	html.spiro-motion .spiro-career-hero__title,
	html.spiro-motion .spiro-career-hero__swiss,
	html.spiro-motion .spiro-career-intro__claim,
	html.spiro-motion .spiro-career-intro__body,
	html.spiro-motion .spiro-contact__title,
	html.spiro-motion .spiro-contact__jump,
	html.spiro-motion .spiro-contact__region-boxes .spiro-blue-box--contact,
	html.spiro-motion .spiro-contact__form-title,
	html.spiro-motion .spiro-contact__fields,
	html.spiro-motion .spiro-contact__form-footer,
	html.spiro-motion .spiro-contact__maps .map_region,
	html.spiro-motion .spiro-warranty__back,
	html.spiro-motion .spiro-warranty__title,
	html.spiro-motion .spiro-warranty__intro,
	html.spiro-motion .spiro-warranty__info,
	html.spiro-motion .spiro-warranty__claim,
	html.spiro-motion .spiro-care__back,
	html.spiro-motion .spiro-care__hero-title,
	html.spiro-motion .spiro-care__claim,
	html.spiro-motion .spiro-care__copy,
	html.spiro-motion .spiro-care__benefits-title,
	html.spiro-motion .spiro-care__benefits,
	html.spiro-motion .spiro-care__actions,
	html.spiro-motion .spiro-support__back,
	html.spiro-motion .spiro-support__title,
	html.spiro-motion .spiro-support__intro,
	html.spiro-motion .spiro-support__info,
	html.spiro-motion .spiro-support__fields,
	html.spiro-motion .spiro-support__form-footer,
	html.spiro-motion .spiro-upgrades__back,
	html.spiro-motion .spiro-upgrades__title,
	html.spiro-motion .spiro-upgrades__intro,
	html.spiro-motion .spiro-upgrades__card,
	html.spiro-motion .main_text .description_content,
	html.spiro-motion .hp_products h2,
	html.spiro-motion .hp_products .description_content,
	html.spiro-motion .hp_connectivity h2,
	html.spiro-motion .hp_connectivity .description_content,
	html.spiro-motion .hp_highlights h2,
	html.spiro-motion .hp_highlights .description_content,
	html.spiro-motion [data-spiro-highlights]:not([data-spiro-item-gallery]) .spiro-highlights__title,
	html.spiro-motion [data-spiro-highlights]:not([data-spiro-item-gallery]) .spiro-highlights__track,
	html.spiro-motion .spiro-products__title,
	html.spiro-motion .spiro-products__filters,
	.spiro-come-right.is-inview,
	.spiro-come-left.is-inview,
	.spiro-come-down.is-inview,
	.spiro-come-right--delay-1s.is-inview,
	.spiro-come-right--delay-2s.is-inview,
	.spiro-come-right--delay-02.is-inview,
	.spiro-come-right--delay-hero.is-inview,
	.spiro-come-right--delay-contact-2.is-inview,
	html.spiro-motion .spiro-footer__headline-connect.is-inview,
	html.spiro-motion .spiro-footer__headline-with.is-inview,
	.spiro-hero-media.is-inview,
	.spiro-hero-caption.is-inview {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}