/* ==========================================================================
   Sauna4Soul motion layer
   Site-wide, restrained transitions for the public theme.
   ========================================================================== */

:root {
	--s4s-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--s4s-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
	--s4s-motion-fast: 340ms;
	--s4s-motion-medium: 920ms;
	--s4s-motion-slow: 1420ms;
	--s4s-reveal-distance: 28px;
	--s4s-reveal-blur: 8px;
	--s4s-shadow-soft: 0 18px 48px rgba(43, 43, 43, 0.08);
	--s4s-shadow-card: 0 16px 36px rgba(43, 43, 43, 0.10);
}

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: s4s-page-out 420ms var(--s4s-ease-soft) both;
}

::view-transition-new(root) {
	animation: s4s-page-in 820ms var(--s4s-ease-out) both;
}

@keyframes s4s-page-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes s4s-page-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@keyframes s4s-image-drift {
	from {
		transform: translate3d(0, var(--s4s-parallax-y, 0), 0) scale(1.035);
	}
	to {
		transform: translate3d(0, var(--s4s-parallax-y, 0), 0) scale(1.07);
	}
}

@keyframes s4s-modal-backdrop {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes s4s-modal-panel {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

html.s4s-motion-ready .s4s-reveal {
	opacity: 0;
	filter: blur(var(--s4s-reveal-blur));
	transform: translate3d(0, var(--s4s-reveal-distance), 0);
	transition:
		opacity var(--s4s-motion-slow) var(--s4s-ease-out),
		filter var(--s4s-motion-slow) var(--s4s-ease-out),
		transform var(--s4s-motion-slow) var(--s4s-ease-out);
	transition-delay: var(--s4s-reveal-delay, 0ms);
	will-change: opacity, filter, transform;
}

html.s4s-motion-ready .s4s-reveal--gentle {
	--s4s-reveal-distance: 18px;
	--s4s-reveal-blur: 4px;
}

html.s4s-motion-ready .s4s-reveal--image {
	--s4s-reveal-distance: 22px;
	--s4s-reveal-blur: 0;
	transform: translate3d(0, var(--s4s-reveal-distance), 0) scale(0.985);
}

html.s4s-motion-ready .s4s-reveal--line {
	--s4s-reveal-distance: 0;
	--s4s-reveal-blur: 0;
	transform: scaleX(0);
	transform-origin: left center;
}

html.s4s-motion-ready .s4s-reveal.is-in-view {
	opacity: 1;
	filter: blur(0);
	transform: translate3d(0, 0, 0) scale(1);
}

html.s4s-motion-ready .s4s-reveal--line.is-in-view {
	transform: scaleX(1);
}

html.s4s-motion-ready .s4s-footer .s4s-reveal,
html.s4s-motion-ready .s4s-footer .s4s-reveal.is-in-view {
	opacity: 1;
	filter: none;
	transform: none;
	will-change: auto;
}

body.s4s-page-leaving .s4s-main,
body.s4s-page-leaving .s4s-footer {
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 180ms var(--s4s-ease-soft),
		transform 180ms var(--s4s-ease-soft);
}

/* Global interaction polish */

.s4s-button {
	position: relative;
	overflow: hidden;
	transform: translateY(0);
	transition:
		background-color var(--s4s-motion-fast) var(--s4s-ease-soft),
		border-color var(--s4s-motion-fast) var(--s4s-ease-soft),
		color var(--s4s-motion-fast) var(--s4s-ease-soft),
		box-shadow var(--s4s-motion-fast) var(--s4s-ease-soft),
		transform var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-button:hover,
.s4s-button:focus-visible {
	box-shadow: 0 10px 24px rgba(43, 43, 43, 0.12);
	transform: translateY(-1px);
}

.s4s-button:active {
	box-shadow: none;
	transform: translateY(0);
}

.s4s-header {
	transition:
		background-color var(--s4s-motion-medium) var(--s4s-ease-soft),
		box-shadow var(--s4s-motion-medium) var(--s4s-ease-soft),
		opacity var(--s4s-motion-medium) var(--s4s-ease-soft),
		transform var(--s4s-motion-medium) var(--s4s-ease-soft);
}

.s4s-header__brand img {
	transition: opacity var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-header__brand:hover img,
.s4s-header__brand:focus-visible img {
	opacity: 0.78;
}

.s4s-header__menu a {
	position: relative;
	transition: color var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-header__menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -6px;
	block-size: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-header__menu a:hover::after,
.s4s-header__menu a:focus-visible::after,
.s4s-header__menu .current-menu-item > a::after,
.s4s-header__menu .current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.s4s-header__menu .current-menu-item > a,
.s4s-header__menu .current_page_item > a {
	text-decoration: none;
}

.s4s-lang a,
.s4s-mobile-menu__lang a,
.s4s-footer a,
.s4s-blog-card__title a,
.s4s-blog-featured__title a,
.s4s-sauna-grid-card__title a {
	transition: color var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-header__toggle svg {
	transition: transform var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-header__toggle:hover svg,
.s4s-header__toggle:focus-visible svg {
	transform: scale(1.06);
}

@media (max-width: 900px) {
	.s4s-mobile-menu {
		display: flex;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-12px);
		transition:
			opacity var(--s4s-motion-medium) var(--s4s-ease-soft),
			transform var(--s4s-motion-medium) var(--s4s-ease-soft),
			visibility 0s linear var(--s4s-motion-medium);
	}

	.s4s-mobile-menu[aria-hidden="false"] {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.s4s-mobile-menu__list a {
		transition:
			color var(--s4s-motion-fast) var(--s4s-ease-soft),
			padding-inline var(--s4s-motion-fast) var(--s4s-ease-soft);
	}

	.s4s-mobile-menu__list a:hover,
	.s4s-mobile-menu__list a:focus-visible {
		padding-inline-start: var(--space-sm);
	}
}

/* Atmospheric media motion */

.s4s-parallax-image {
	transform: translate3d(0, var(--s4s-parallax-y, 0), 0) scale(1.035);
	transition: transform 900ms var(--s4s-ease-out);
	will-change: transform;
}

.s4s-hero__bg img.s4s-parallax-image,
.s4s-cta-band__bg img.s4s-parallax-image,
.s4s-contact__bg.s4s-parallax-image {
	animation: s4s-image-drift 26s var(--s4s-ease-out) both;
}

/* Split image column: fade only — no translate — so the background frame stays put */
html.s4s-motion-ready .s4s-split__image.s4s-reveal--image {
	transform: none;
}

.s4s-hero:hover .s4s-hero__bg img.s4s-parallax-image,
.s4s-cta-band:hover .s4s-cta-band__bg img.s4s-parallax-image,
.s4s-contact__panel--info:hover .s4s-contact__bg.s4s-parallax-image {
	transform: translate3d(0, var(--s4s-parallax-y, 0), 0) scale(1.075);
}

.s4s-blog-card__image img,
.s4s-blog-featured__image img,
.s4s-sauna-grid-card__image,
.s4s-values-grid__media img,
.s4s-process-carousel__media img,
.s4s-clients-carousel__media img,
.s4s-product-section__slide img,
.s4s-product-single__slide img,
.s4s-video-block__facade {
	transition:
		opacity var(--s4s-motion-medium) var(--s4s-ease-soft),
		transform 1600ms var(--s4s-ease-out);
}

.s4s-blog-card:hover .s4s-blog-card__image img,
.s4s-blog-card:focus-within .s4s-blog-card__image img,
.s4s-blog-featured__image:hover img,
.s4s-blog-featured__image:focus-visible img,
.s4s-sauna-grid-card:hover .s4s-sauna-grid-card__image,
.s4s-sauna-grid-card:focus-within .s4s-sauna-grid-card__image,
.s4s-values-grid__card:hover .s4s-values-grid__media img,
.s4s-values-grid__card:focus-within .s4s-values-grid__media img,
.s4s-process-carousel__slide:hover .s4s-process-carousel__media img,
.s4s-process-carousel__slide:focus-within .s4s-process-carousel__media img,
.s4s-clients-carousel__slide:hover .s4s-clients-carousel__media img,
.s4s-clients-carousel__slide:focus-within .s4s-clients-carousel__media img {
	transform: scale(1.045);
}

.s4s-product-section__media:hover .s4s-product-section__slide img,
.s4s-product-section__media:focus-within .s4s-product-section__slide img,
.s4s-product-single__media:hover .s4s-product-single__slide img,
.s4s-product-single__media:focus-within .s4s-product-single__slide img {
	transform: scale(1.025);
}

.s4s-video-block__facade:hover,
.s4s-video-block__facade:focus-visible {
	transform: scale(1.012);
}

/* Cards and framed panels */

.s4s-blog-card,
.s4s-sauna-grid-card,
.s4s-values-grid__card,
.s4s-clients-carousel__card,
.s4s-contact__card,
.s4s-product-section__media,
.s4s-product-single__media {
	transition:
		background-color var(--s4s-motion-fast) var(--s4s-ease-soft),
		border-color var(--s4s-motion-fast) var(--s4s-ease-soft),
		box-shadow var(--s4s-motion-medium) var(--s4s-ease-soft),
		transform var(--s4s-motion-medium) var(--s4s-ease-soft);
}

.s4s-blog-card:hover,
.s4s-blog-card:focus-within,
.s4s-sauna-grid-card:hover,
.s4s-sauna-grid-card:focus-within,
.s4s-values-grid__card:hover,
.s4s-values-grid__card:focus-within {
	border-color: rgba(54, 69, 59, 0.28);
	box-shadow: var(--s4s-shadow-card);
	transform: translateY(-4px);
}

.s4s-contact__card {
	box-shadow: 0 12px 40px rgba(43, 43, 43, 0.06);
}

.s4s-contact__card:focus-within {
	box-shadow: var(--s4s-shadow-soft);
}

.s4s-blog-card__link,
.s4s-sauna-grid-card__link,
.s4s-blog-teaser__see-all {
	position: relative;
	text-decoration: none;
	transition: color var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-blog-card__link::after,
.s4s-sauna-grid-card__link::after,
.s4s-blog-teaser__see-all::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: -4px;
	block-size: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-blog-card__link:hover::after,
.s4s-blog-card__link:focus-visible::after,
.s4s-sauna-grid-card__link:hover::after,
.s4s-sauna-grid-card__link:focus-visible::after,
.s4s-blog-teaser__see-all:hover::after,
.s4s-blog-teaser__see-all:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.s4s-carousel-button,
.s4s-clients-carousel__arrow,
.s4s-process-carousel__arrow,
.s4s-product-modal__close {
	transition:
		color var(--s4s-motion-fast) var(--s4s-ease-soft),
		opacity var(--s4s-motion-fast) var(--s4s-ease-soft),
		transform var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-carousel-button:hover,
.s4s-carousel-button:focus-visible,
.s4s-clients-carousel__arrow:hover,
.s4s-clients-carousel__arrow:focus-visible,
.s4s-process-carousel__arrow:hover,
.s4s-process-carousel__arrow:focus-visible,
.s4s-product-modal__close:hover,
.s4s-product-modal__close:focus-visible {
	transform: translateY(-50%) scale(1.08);
}

.s4s-clients-carousel__arrow:hover,
.s4s-clients-carousel__arrow:focus-visible,
.s4s-process-carousel__arrow:hover,
.s4s-process-carousel__arrow:focus-visible,
.s4s-product-modal__close:hover,
.s4s-product-modal__close:focus-visible {
	transform: scale(1.08);
}

.s4s-product-modal[aria-hidden="false"] {
	animation: s4s-modal-backdrop 460ms var(--s4s-ease-soft) both;
}

.s4s-product-modal[aria-hidden="false"] .s4s-product-modal__panel {
	animation: s4s-modal-panel 680ms var(--s4s-ease-out) both;
}

/* Form details */

.s4s-field input,
.s4s-field textarea {
	transition:
		border-color var(--s4s-motion-fast) var(--s4s-ease-soft),
		box-shadow var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-field input:focus,
.s4s-field textarea:focus {
	box-shadow: 0 1px 0 var(--accent);
}

.s4s-field label,
.s4s-radio__dot,
.s4s-radio__dot::after {
	transition:
		border-color var(--s4s-motion-fast) var(--s4s-ease-soft),
		color var(--s4s-motion-fast) var(--s4s-ease-soft),
		transform var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-radio:hover .s4s-radio__dot,
.s4s-radio:focus-within .s4s-radio__dot {
	transform: scale(1.06);
}

/* Footer */

.s4s-footer__brand img,
.s4s-footer__social a {
	transition:
		color var(--s4s-motion-fast) var(--s4s-ease-soft),
		opacity var(--s4s-motion-fast) var(--s4s-ease-soft),
		transform var(--s4s-motion-fast) var(--s4s-ease-soft);
}

.s4s-footer__brand:hover img,
.s4s-footer__brand:focus-visible img {
	opacity: 0.82;
}

.s4s-footer__social a:hover,
.s4s-footer__social a:focus-visible {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
	}

	html.s4s-motion-ready .s4s-reveal,
	html.s4s-motion-ready .s4s-reveal.is-in-view,
	.s4s-parallax-image,
	body.s4s-page-leaving .s4s-main,
	body.s4s-page-leaving .s4s-footer {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}