/* communicaziun.ch – Motion init styles
   Initial hidden states applied via CSS to avoid FOUC before JS evaluates.
   The JS removes/overrides these once animations run.
*/

[data-motion="fade"],
[data-motion="fade-up"],
[data-motion="fade-down"],
[data-motion="slide-left"],
[data-motion="slide-right"],
[data-motion="zoom-in"] {
	opacity: 0;
	will-change: opacity, transform;
}

[data-motion="fade-up"]     { transform: translateY(32px); }
[data-motion="fade-down"]   { transform: translateY(-32px); }
[data-motion="slide-left"]  { transform: translateX(48px); }
[data-motion="slide-right"] { transform: translateX(-48px); }
[data-motion="zoom-in"]     { transform: scale(0.92); }

[data-motion="intro"] > [data-motion-child] {
	opacity: 0;
	transform: translateY(24px);
	will-change: opacity, transform;
}

[data-motion="progress"] {
	transform: scaleX(0);
	transform-origin: 0% 50%;
	will-change: transform;
}

/* Hero blur reveal: section becomes scroll-runway, inner stage stays sticky 100vh while blur clears */
/* Bricks sets overflow-x: hidden on html/body which breaks position:sticky.
   overflow-x: clip prevents horizontal overflow without making body a scroll container.
   Wir wenden das auf ALLE Seiten an (nicht nur hero-blur), damit der Header
   ueberall sticky bleiben kann. */
html, body {
	overflow-x: clip !important;
}

[data-motion="hero-blur"] {
	position: relative;
	display: block;
	height: 130vh;
	width: 100vw;
	overflow: visible;
	padding: 0;
}
[data-motion="hero-blur"] .motion-hero-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
[data-motion="hero-blur"] .bricks-background-video-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(100% + var(--motion-top-offset, 0px));
}
[data-motion="hero-blur"] .motion-blur-mask {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
	backdrop-filter:         blur(var(--hero-blur, 48px));
	-webkit-backdrop-filter: blur(var(--hero-blur, 48px));
	will-change: backdrop-filter, -webkit-backdrop-filter;
	-webkit-mask-image: var(--logo-url);
	mask-image:         var(--logo-url);
	-webkit-mask-position: var(--mask-x) var(--mask-y);
	mask-position:         var(--mask-x) var(--mask-y);
	-webkit-mask-size: var(--mask-size) var(--mask-size);
	mask-size:         var(--mask-size) var(--mask-size);
	-webkit-mask-repeat: no-repeat;
	mask-repeat:         no-repeat;
	-webkit-mask-mode: luminance;
	mask-mode:         luminance;
}

@property --mask-x    { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mask-y    { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mask-size { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --hero-blur { syntax: '<length>'; inherits: false; initial-value: 0px; }

@media (prefers-reduced-motion: reduce) {
	[data-motion],
	[data-motion] *,
	[data-motion="intro"] > [data-motion-child] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Hide everything until JS has booted, so Bricks builder previews look right */
html:not(.motion-ready) [data-motion="intro"] > [data-motion-child] { visibility: hidden; }
html.motion-ready  [data-motion="intro"] > [data-motion-child] { visibility: visible; }

/* === Referenzen: Minimal Cinematic (Listing + Detail) === */
/* Initial-States gegen FOUC (JS uebernimmt, sobald motion-ready gesetzt) */
html:not(.motion-ready) section#brxe-refsec > .brxe-refloop,
html:not(.motion-ready) body.single-referenzen #brx-content > section {
	opacity: 0;
}
html:not(.motion-ready) section#brxe-refsec > .brxe-refloop img,
html:not(.motion-ready) body.single-referenzen #brx-content > section img {
	filter: brightness(0.7) saturate(0.6);
}

/* Reduced motion: alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
	section#brxe-refsec > .brxe-refloop,
	section#brxe-refsec > .brxe-refloop img,
	body.single-referenzen #brx-content > section,
	body.single-referenzen #brx-content > section img {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
	}
}

/* SPA-Swap: alle CSS-Transitions/Animationen kurzzeitig unterbinden, damit
 * Bricks-Header und andere Elemente nicht durch den Body-Class-Wechsel
 * (home → single-leistungen) ins „reinfahren" getriggert werden. */
html.spa-swapping,
html.spa-swapping *,
html.spa-swapping *::before,
html.spa-swapping *::after {
	transition: none !important;
	animation-duration: 0s !important;
	animation-delay: 0s !important;
}

/* Header soll auf ALLEN Seiten (auch Unterseiten) sticky bleiben.
 * Bricks' globaler CSS-Block setzt fuer body:not(.home):not(.front-page) den
 * Header auf position:relative — wir ueberschreiben das hier mit hoeherer
 * Spezifitaet, damit das Sticky-Verhalten erhalten bleibt. */
body:not(.home):not(.front-page) header.brx-sticky,
body:not(.home):not(.front-page) #brx-header.brx-sticky {
	position: sticky !important;
	top: 0 !important;
}

/* Startseite: Header-Section transparent, damit das Hero-Video durchscheint. */
body.home .header-section.brxe-section,
body.front-page .header-section.brxe-section {
	background-color: transparent !important;
}


/* Video-Animation: auf Tablet & kleiner Höhe von 100vh auf 66vw reduzieren
   (kein riesiger schwarzer Rand mehr unter dem 16:9-Video auf hohen Schmal-Viewports) */
@media (max-width: 991px) {
	[data-motion="hero-blur"] .motion-hero-stage {
		height: 66vw;
	}
}

/* Tablet & kleiner: auch die Hero-Section (Scroll-Runway) auf 66vw kürzen.
   Bricks JS setzt die Höhe inline aus data-motion-scroll-length; deshalb !important.
   Scrub-Animationen sind an section-Top/Bottom gebunden, bleiben proportional korrekt. */
@media (max-width: 991px) {
	[data-motion=hero-blur] {
		height: 66vw !important;
	}
}