/* ==========================================================================
   DSMS — Motion (all pages)
   - Scroll reveal: sections, headings and cards fade up as they enter the screen,
     cards in a row one after another (stagger). Only opacity / transform are animated,
     so nothing moves the layout.
   - Hero: photo eases from a slight zoom, text box fades up on load.
   - Hover: photos zoom inside their frame, buttons lift, arrows nudge.
   - Header gets a soft shadow once the page is scrolled; "Back to top" button.
   The hidden start state only applies when <html> has .dsms-motion: a tiny inline script
   in <head> adds it (not for visitors who prefer reduced motion) and removes it again
   after 3 s if motion.js never started, so content can't stay hidden.
   ========================================================================== */

:root {
	--mo-ease: cubic-bezier(.22, .61, .36, 1);
	--mo-dur: .8s;
	--mo-shift: 28px;
}

/* ---------- Scroll reveal ---------- */
.dsms-motion :is(
	/* headings + single blocks */
	.hm-head, .bl2-list__head, .pf2__tabs,
	.hm-intro__photos, .hm-intro__mphoto, .hm-staging__stage, .hm-leasing__content, .hm-explore__body,
	.ab-intro__lead, .ab-intro__text, .ab-breathe__text, .ab-breathe__img,
	.sv-gallery__stage,
	.bl2-post__head, .bl2-share, .bl2-follow, .bl2-related__stage,
	/* card grids / lists (each item) */
	.hm-services__grid > *, .hm-interior__grid > *, .hm-why__grid > *, .hm-leasing__list > li,
	.ab-believe__grid > *, .ab-services__list > *,
	.sv-cards__grid > *, .sv-units__grid > *, .sv-steps__grid > *, .sv-rows__list > *,
	.pf2__grid > *, .bl2-grid > *, .bl2-latest__grid > *,
	/* older templates */
	.wcu__row, .ct-card, .ref-intro, .ref-partner__grid > *, .ref-program, .ref-affiliates, .pf-grid > *, .pg-children__grid > *
):not(.mo-done) {
	opacity: 0;
	transform: translate3d(0, var(--mo-shift), 0);
	transition:
		opacity var(--mo-dur) var(--mo-ease) var(--mo-delay, 0ms),
		transform var(--mo-dur) var(--mo-ease) var(--mo-delay, 0ms);
	will-change: opacity, transform;
}

/* Phone carousels/slides (homepage Interior, About believe + services): cards scroll sideways
   or sit on top of each other, so they are never revealed one by one. */
@media (max-width: 767.98px) {
	.dsms-motion .dsms-ui2--home .hm-interior__grid > *:not(.mo-done) { opacity: 1; transform: none; transition: height .35s ease; }
	.dsms-motion .dsms-ui2--about .ab-believe__grid > *:not(.mo-done) { opacity: 1; transform: none; transition: height .35s ease; }
	.dsms-motion .dsms-ui2--about .ab-services__list > *:not(.mo-done) { opacity: 1; transform: none; transition: none; }
	.dsms-motion .sv-cards__grid > *:not(.mo-done) { opacity: 1; transform: none; transition: height .35s ease; }
	.dsms-motion .sv-units__grid > *:not(.mo-done) { opacity: 1; transform: none; transition: none; }
}

/* Photo blocks: fade + the photo settles from a slight zoom inside its frame. */
.dsms-motion :is(.hm-leasing__media, .ab-intro__media, .bl2-post__featured):not(.mo-done) {
	opacity: 0;
	transition: opacity 1s var(--mo-ease) var(--mo-delay, 0ms);
}
.dsms-motion :is(.hm-leasing__media, .ab-intro__media, .bl2-post__featured):not(.mo-done) img {
	transform: scale(1.08);
	transition: transform 1.4s var(--mo-ease) var(--mo-delay, 0ms);
}
.dsms-motion :is(.hm-leasing__media, .ab-intro__media, .bl2-post__featured) { overflow: hidden; }

/* Alternating rows slide in from their own side. */
.dsms-motion :is(.ab-services__list, .sv-rows__list) > :nth-child(odd):not(.mo-done) { transform: translate3d(calc(var(--mo-shift) * -1.4), 0, 0); }
.dsms-motion :is(.ab-services__list, .sv-rows__list) > :nth-child(even):not(.mo-done) { transform: translate3d(calc(var(--mo-shift) * 1.4), 0, 0); }

/* In view → final state. */
/* (html + doubled class: must out-rank every start-state selector above.) */
html.dsms-motion .mo-in.mo-in:not(.mo-done) { opacity: 1; transform: none; }
html.dsms-motion .mo-in.mo-in:not(.mo-done) img { transform: none; }

/* ---------- Hero on load ---------- */
.dsms-motion :is(.hm-hero__bg, .sv-hero__bg, .ab-hero__bg, .ct-hero__bg, .wcu-hero__bg, .ref-hero__bg, .pf-hero img, .pg-hero img) {
	animation: mo-hero-zoom 1.8s var(--mo-ease) both;
}
.dsms-motion :is(.hm-hero__box, .sv-hero__box, .ct-hero__content, .wcu-hero__content, .ref-hero__content, .pf-hero__inner, .pg-hero__content) {
	animation: mo-fade-up 1s var(--mo-ease) .25s both;
}
@keyframes mo-hero-zoom {
	from { transform: scale(1.07); }
	to   { transform: scale(1); }
}
@keyframes mo-fade-up {
	from { opacity: 0; transform: translate3d(0, 24px, 0); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Hover ---------- */
/* Photos zoom inside their frame. */
:is(.sv-card, .sv-unit__media, .ab-believe__card, .ab-service__media, .sv-row__media, .bl2-card__media, .bl2-thumb__media, .ab-breathe__img) { overflow: hidden; }
:is(.sv-card, .sv-unit__media, .ab-believe__card, .ab-service__media, .sv-row__media, .bl2-card__media, .bl2-thumb__media) img {
	transition: transform .7s var(--mo-ease);
}
:is(.sv-card, .sv-unit, .ab-believe__card, .ab-service, .sv-row, .bl2-card, .bl2-thumb):hover :is(.sv-card, .sv-unit__media, .ab-believe__card, .ab-service__media, .sv-row__media, .bl2-card__media, .bl2-thumb__media) img,
:is(.sv-card, .ab-believe__card):hover > img {
	transform: scale(1.05);
}
.hm-service__media img,
.hm-interior__media img,
.pf2-card__media img { transition-duration: .7s; transition-timing-function: var(--mo-ease); }
.hm-service:hover .hm-service__media img,
a.hm-interior__card:hover .hm-interior__media img,
.pf2-card:hover .pf2-card__media img { transform: scale(1.05); }

/* Card titles pick up the brand colour. */
:is(.bl2-card__title, .bl2-thumb__title, .pf2-card__title) a { transition: color .25s ease; }
:is(.bl2-card, .bl2-thumb, .pf2-card):hover :is(.bl2-card__title, .bl2-thumb__title, .pf2-card__title) a { color: var(--hm-primary, #fa925a); }

/* Buttons lift a little; arrows nudge forward. */
:is(.hm-btn, .hdr-cta, .ftr-cta .hm-btn, .bl2-share__btn, .dsms-comment-form__submit) {
	transition: transform .25s var(--mo-ease), box-shadow .25s var(--mo-ease), background-color .25s ease, color .25s ease, border-color .25s ease, filter .25s ease;
}
:is(.hm-btn, .hdr-cta, .dsms-comment-form__submit):hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -10px rgba(28, 15, 19, .45);
}
.hm-btn-outline .dsms-icon { transition: transform .25s var(--mo-ease); }
.hm-btn-outline:hover .dsms-icon { transform: translateX(3px); }

/* Steps / reasons: icon floats up a touch on hover. */
:is(.sv-step, .hm-why__item) { transition: transform .35s var(--mo-ease); }
:is(.sv-step, .hm-why__item):hover { transform: translateY(-4px); }

/* ---------- Header on scroll ---------- */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(28, 15, 19, .25); }

/* ---------- Back to top ---------- */
.mo-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1030;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hm-black, #1c0f13);
	box-shadow: 0 8px 20px -8px rgba(28, 15, 19, .5);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .3s ease, transform .3s var(--mo-ease), visibility .3s, background-color .25s ease;
}
.mo-top svg { width: 20px; height: 20px; }
.mo-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.mo-top:hover { background: var(--hm-primary, #fa925a); }
.mo-top:focus-visible { outline: 2px solid var(--hm-primary, #fa925a); outline-offset: 3px; }
@media (max-width: 767.98px) {
	.mo-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* ---------- Smooth anchor scrolling (below the sticky header) ---------- */
html { scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ---------- Reduced motion ----------
   The head script doesn't add .dsms-motion for these visitors, so nothing above is hidden
   or animated; only the small hover movements are switched off here. */
@media (prefers-reduced-motion: reduce) {
	:is(.hm-btn, .hdr-cta, .dsms-comment-form__submit, .sv-step, .hm-why__item):hover,
	.hm-btn-outline:hover .dsms-icon { transform: none; }
}