/**
 * Safe motion — additive only.
 * Nothing here runs unless JS adds body.motion-enabled AND body.motion-ready.
 * Default (no classes): content stays fully visible. No layout properties.
 *
 * Animation observer (read by motion-safe.js, not shared with preload):
 *   --ms-io-threshold: 0.18
 *   --ms-io-root-margin: 0px 0px -10% 0px
 * Preload observer is separate: 400px, never used to start the reveal.
 */

body.motion-enabled {
	--ms-io-threshold: 0.18;
	--ms-io-root-margin: 0px 0px -10% 0px;
	--ms-shift: 28px;
	--ms-dur: 750ms;
	--ms-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ms-img-shift: 26px;
	--ms-img-dur: 1000ms;
	--ms-hero-y: 38px;
	--ms-hero-dur: 1000ms;
	--ms-hero-in-dur: 800ms;
}

@media (max-width: 767px) {
	body.motion-enabled {
		--ms-shift: 20px;
		--ms-dur: 680ms;
		--ms-img-shift: 20px;
		--ms-img-dur: 700ms;
		--ms-hero-y: 20px;
		--ms-hero-dur: 700ms;
		--ms-hero-in-dur: 680ms;
	}
}

body.motion-enabled.motion-ready .ms-reveal:not(.is-visible),
body.motion-enabled.motion-ready .ms-reveal-up:not(.is-visible),
body.motion-enabled.motion-ready .ms-img:not(.is-visible),
body.motion-enabled.motion-ready .ms-fleet:not(.is-visible) {
	opacity: 0;
}

body.motion-enabled.motion-ready .ms-reveal-up:not(.is-visible),
body.motion-enabled.motion-ready .ms-fleet:not(.is-visible) {
	transform: translate3d(0, var(--ms-shift), 0);
}

body.motion-enabled.motion-ready .ms-img:not(.is-visible) {
	transform: translate3d(0, var(--ms-img-shift), 0) scale(0.97);
}

body.motion-enabled.motion-ready .ms-reveal-up.ms-btn-rise:not(.is-visible) {
	transform: translate3d(0, 12px, 0);
}

body.motion-enabled.motion-ready .ms-reveal.is-visible,
body.motion-enabled.motion-ready .ms-reveal-up.is-visible,
body.motion-enabled.motion-ready .ms-fleet.is-visible {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--ms-dur) var(--ms-ease),
		transform var(--ms-dur) var(--ms-ease);
	transition-delay: var(--ms-delay, 0ms);
}

body.motion-enabled.motion-ready .ms-img.is-visible {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--ms-img-dur) var(--ms-ease),
		transform var(--ms-img-dur) var(--ms-ease);
	transition-delay: var(--ms-delay, 0ms);
}

@media (min-width: 900px) {
	body.motion-enabled.motion-ready .ms-fleet:not(.is-visible) {
		transform: translate3d(0, 36px, 0) scale(0.97);
	}

	body.motion-enabled.motion-ready .ms-fleet.is-visible {
		transition-duration: 850ms;
	}

	body.motion-enabled.motion-ready .ms-from-left:not(.is-visible) {
		transform: translate3d(-34px, 0, 0);
	}

	body.motion-enabled.motion-ready .ms-from-right:not(.is-visible) {
		transform: translate3d(34px, 0, 0);
	}

	body.motion-enabled.motion-ready .ms-img.ms-from-left:not(.is-visible) {
		transform: translate3d(-34px, 0, 0) scale(0.972);
	}

	body.motion-enabled.motion-ready .ms-img.ms-from-right:not(.is-visible) {
		transform: translate3d(34px, 0, 0) scale(0.972);
	}
}

@media (max-width: 767px) {
	body.motion-enabled.motion-ready .ms-img:not(.is-visible) {
		transform: translate3d(0, var(--ms-img-shift), 0);
	}
}

/* Existing rule marks only. No new underline elements. */
body.motion-enabled.motion-ready .ms-rule:not(.is-visible) {
	transform: scaleX(0);
	transform-origin: left center;
}

body.motion-enabled.motion-ready .ms-rule.is-visible {
	transform: scaleX(1);
	transition: transform 750ms var(--ms-ease);
	transition-delay: var(--ms-delay, 0ms);
}

body.motion-disabled .ms-reveal,
body.motion-disabled .ms-reveal-up,
body.motion-disabled .ms-img,
body.motion-disabled .ms-fleet,
body.motion-disabled .ms-rule,
body.motion-disabled .ms-from-left,
body.motion-disabled .ms-from-right {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.motion-enabled .ms-reveal,
	body.motion-enabled .ms-reveal-up,
	body.motion-enabled .ms-img,
	body.motion-enabled .ms-fleet,
	body.motion-enabled .ms-rule {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

body.motion-debug .ms-reveal,
body.motion-debug .ms-reveal-up,
body.motion-debug .ms-img,
body.motion-debug .ms-fleet,
body.motion-debug .ms-hero-media,
body.motion-debug .ms-hero-in,
body.motion-debug .ms-card,
body.motion-debug .ms-360,
body.motion-debug .ms-360-hint,
body.motion-debug .ms-mask {
	outline: 1px dashed #d75b32;
	outline-offset: 2px;
}

/* Hero entrance — wrapper only. Never the locked <img> transform. */
@keyframes ms-hero-zoom {
	from { transform: scale(1.05); }
	to { transform: scale(1); }
}

@keyframes ms-hero-zoom-m {
	from { transform: scale(1.02); }
	to { transform: scale(1); }
}

@keyframes ms-hero-rise {
	from {
		opacity: 0;
		transform: translate3d(0, var(--ms-shift), 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ms-hero-title {
	from {
		opacity: 0;
		transform: translate3d(0, var(--ms-hero-y), 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 900px) {
	body.motion-enabled.motion-ready .ms-hero-media.ms-hero-play {
		transform-origin: center center;
		animation: ms-hero-zoom 1.7s var(--ms-ease) both;
	}

	body.motion-enabled.motion-ready .ms-hero-media.ms-hero-play.ms-mask.is-visible {
		animation:
			ms-hero-zoom 1.7s var(--ms-ease) both,
			ms-mask-in 1000ms var(--ms-ease) both;
	}
}

@media (max-width: 767px) {
	body.motion-enabled.motion-ready .ms-hero-media.ms-hero-play {
		transform-origin: center center;
		animation: ms-hero-zoom-m 700ms var(--ms-ease) both;
	}
}

body.motion-enabled.motion-ready .ms-hero-in {
	animation: ms-hero-rise var(--ms-hero-in-dur) var(--ms-ease) both;
	animation-delay: var(--ms-delay, 0ms);
}

body.motion-enabled.motion-ready .ms-hero-in.ms-hero-title {
	animation: ms-hero-title var(--ms-hero-dur) var(--ms-ease) both;
	animation-delay: var(--ms-delay, 0ms);
}

body.motion-enabled.motion-ready .ms-hero-media.ms-hero-play.ms-hero-done,
body.motion-enabled.motion-ready .ms-hero-media.ms-hero-play.ms-mask.is-visible.ms-hero-done,
body.motion-enabled.motion-ready .ms-hero-in.ms-hero-title.ms-hero-done,
body.motion-enabled.motion-ready .ms-hero-in.ms-hero-done {
	animation: none;
	opacity: 1;
	transform: none;
	clip-path: none;
}

/* Desktop mask on hero + two full-bleed banners only. Parents already clip. */
@keyframes ms-mask-in {
	from { clip-path: inset(6% 5% 6% 5%); }
	to { clip-path: inset(0); }
}

@keyframes ms-mask-scale {
	from { transform: scale(1.04); }
	to { transform: scale(1); }
}

@media (min-width: 900px) {
	body.motion-enabled.motion-ready .ms-mask.is-visible:not(.ms-hero-media) {
		animation: ms-mask-in 1000ms var(--ms-ease) both;
	}

	body.motion-enabled.motion-ready .ms-mask.is-visible:not(.ms-hero-media) > picture {
		transform-origin: center center;
		animation: ms-mask-scale 1000ms var(--ms-ease) both;
	}
}

body.motion-enabled.motion-ready .ms-mask.ms-mask-done {
	animation: none;
	clip-path: none;
}

body.motion-enabled.motion-ready .ms-mask.ms-mask-done > picture {
	animation: none;
	transform: none;
}

/* Header shell is not transformed. Logo + menu fade once, then lock. */
body.motion-enabled .ms-nav {
	transition: background 0.45s ease, backdrop-filter 0.45s ease, box-shadow 0.45s ease;
}

@keyframes ms-nav-in {
	from {
		opacity: 0;
		transform: translate3d(0, -12px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 900px) {
	body.motion-enabled.motion-ready .ms-nav-bit {
		animation: ms-nav-in 700ms var(--ms-ease) both;
	}
}

body.motion-enabled.motion-ready .ms-nav-bit.ms-nav-done {
	animation: none;
	opacity: 1;
	transform: none;
}

@keyframes ms-btn-in {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

body.motion-enabled.motion-ready .ms-btn-in {
	animation: ms-btn-in 700ms var(--ms-ease) both;
}

body.motion-enabled.motion-ready .ms-btn-in.ms-btn-done {
	animation: none;
	opacity: 1;
	transform: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
	body.motion-enabled .ms-btn {
		transition: transform 380ms var(--ms-ease), background 0.35s ease, box-shadow 0.4s ease;
	}

	body.motion-enabled.motion-ready .ms-card.is-visible {
		transition: transform 380ms var(--ms-ease), opacity var(--ms-dur) var(--ms-ease);
	}

	body.motion-enabled.motion-ready .ms-card.is-visible:hover {
		transform: translate3d(0, -4px, 0);
	}

	body.motion-enabled.motion-ready .ms-card.ms-card-zoom.is-visible:hover img {
		transform: scale(1.03);
		transition: transform 380ms var(--ms-ease);
	}
}

body.motion-disabled .ms-hero-media,
body.motion-disabled .ms-hero-in,
body.motion-disabled .ms-card,
body.motion-disabled .ms-btn,
body.motion-disabled .ms-btn-in,
body.motion-disabled .ms-mask,
body.motion-disabled .ms-nav-bit {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
	clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.motion-enabled .ms-hero-media,
	body.motion-enabled .ms-hero-in,
	body.motion-enabled .ms-card,
	body.motion-enabled .ms-btn,
	body.motion-enabled .ms-mask,
	body.motion-enabled .ms-nav-bit {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
		clip-path: none !important;
	}
}

/* 360: fade the viewer wrapper and the existing badge only.
   Opacity only. Never transform the viewer, stage, or canvas. */
@keyframes ms-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

body.motion-enabled.motion-ready .ms-360 {
	animation: ms-fade-in var(--ms-dur) var(--ms-ease) both;
}

body.motion-enabled.motion-ready .ms-360-hint {
	animation: ms-fade-in 480ms var(--ms-ease) 160ms both;
}

body.motion-enabled.motion-ready .ms-360.ms-360-done,
body.motion-enabled.motion-ready .ms-360-hint.ms-360-done {
	animation: none;
	opacity: 1;
}

body.motion-disabled .ms-360,
body.motion-disabled .ms-360-hint {
	opacity: 1 !important;
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.motion-enabled .ms-360,
	body.motion-enabled .ms-360-hint {
		opacity: 1 !important;
		animation: none !important;
		transition: none !important;
	}
}

/* Chat shell only. Custom panel, not an iframe. Opacity + transform.
   Open pose is applied before display; is-open lands on the next frame. */
body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat {
	transform-origin: right bottom;
	opacity: 0;
	transform: translate3d(6px, 12px, 0) scale(0.94);
	pointer-events: none;
	transition:
		opacity 480ms cubic-bezier(0.22, 0.85, 0.24, 1),
		transform 480ms cubic-bezier(0.22, 0.85, 0.24, 1);
}

body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-closing {
	opacity: 0;
	transform: translate3d(0, 8px, 0) scale(0.96);
	pointer-events: none;
	transition-duration: 280ms;
}

@keyframes ms-chat-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 6px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-open .woerland-assist__head {
	animation: ms-chat-rise 420ms cubic-bezier(0.22, 0.85, 0.24, 1) 80ms both;
}

body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-open .woerland-assist__form {
	animation: ms-chat-rise 420ms cubic-bezier(0.22, 0.85, 0.24, 1) 140ms both;
}

body.motion-enabled:not(.ms-chat-off) .woerland-assist__btn:active {
	transform: scale(0.97);
}

@media (max-width: 767px) {
	body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat {
		transform: translate3d(0, 10px, 0) scale(0.96);
		transition-duration: 360ms;
	}

	body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-open {
		transform: none;
	}

	body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-closing {
		transform: translate3d(0, 8px, 0) scale(0.96);
		transition-duration: 240ms;
	}

	body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-open .woerland-assist__head,
	body.motion-enabled.motion-ready:not(.ms-chat-off) .woerland-assist__panel.ms-chat.is-open .woerland-assist__form {
		animation-duration: 280ms;
	}
}

body.motion-disabled .woerland-assist__panel,
body.ms-chat-off .woerland-assist__panel,
body.motion-disabled .woerland-assist__head,
body.motion-disabled .woerland-assist__form,
body.ms-chat-off .woerland-assist__head,
body.ms-chat-off .woerland-assist__form {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.motion-enabled .woerland-assist__panel,
	body.motion-enabled .woerland-assist__head,
	body.motion-enabled .woerland-assist__form,
	body.motion-enabled .woerland-assist__btn:active {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}