/*
 * Motion preview pages (inc/motion.php). Loaded only on the two preview templates,
 * after main.css. Everything is scoped to .motion or the motion-* body classes.
 *
 * .motion--faithful : the prototype's look (Jost, wide-tracked caps, full-bleed hero).
 * .motion--house    : DESIGN.md's look (Cormorant + Manrope, framed hero, real content).
 */

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-var-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

.motion {
	--m-display: "Jost", "Futura", "Century Gothic", sans-serif;
	--m-weight: 300;
	--m-thin: 200;
	--m-track: 0.32em;
	--m-case: uppercase;
	--m-mist: #f4f4f2;
	--m-accent: #7d6d56; /* only for placeholder marks; 5.0:1 on white */
}
.motion--house {
	--m-display: var(--serif);
	--m-weight: 400;
	--m-thin: 400;
	--m-track: 0;
	--m-case: none;
}

/* Copy that waits for its reveal. motion-fallback (set if scripts never run) shows it. */
.js:not(.motion-fallback) .motion [data-hero-copy],
.js:not(.motion-fallback) .motion [data-masked-heading]:not([data-hero-copy] *),
.js:not(.motion-fallback) .motion [data-blur-text]:not([data-hero-copy] *) { visibility: hidden; }

.motion [data-masked-heading] .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.motion [data-masked-heading] .line > span { display: inline-block; }
.motion [data-blur-text] .word { display: inline-block; white-space: pre; }

/* ---------- Shared section heads ---------- */

.m-head { max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); padding-inline: var(--margin); text-align: center; }
.m-title {
	font-family: var(--m-display);
	font-weight: var(--m-weight);
	font-size: clamp(1.875rem, 3.2vw, 2.75rem);
	letter-spacing: var(--m-track);
	padding-left: var(--m-track);
	text-transform: var(--m-case);
	line-height: 1.2;
}
.m-lede { margin-top: 1rem; color: var(--grey); }

/* ---------- Faithful: header over the full-bleed hero ---------- */

.motion-faithful .site-header {
	position: fixed;
	inset: 0 0 auto;
	background: transparent;
	color: var(--paper);
	transition: background-color 0.6s var(--ease), color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.motion-faithful .site-header:not(.is-solid) .site-nav__list,
.motion-faithful .site-header:not(.is-solid) .wordmark__sub { color: rgba(255, 255, 255, 0.88); }
.motion-faithful .site-header:not(.is-solid) .site-nav__toggle:hover,
.motion-faithful .site-header:not(.is-solid) .site-nav__group.is-current .site-nav__toggle { color: var(--paper); }
.motion-faithful .site-header.is-solid,
.motion-faithful .site-header:has(.site-nav.is-open) { background: rgba(255, 255, 255, 0.97); color: var(--ink); box-shadow: 0 1px 0 var(--hair); }
.motion-faithful .wordmark__name { font-family: var(--m-display, "Jost"), sans-serif; font-weight: 300; }
.motion--faithful { font-family: var(--sans); }

/* ---------- Faithful hero ---------- */

.m-hero { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; color: var(--paper); background: #2a3a3a; }
.m-hero__media, .m-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-hero__media img { object-fit: cover; object-position: 50% 60%; }
.m-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 18, 18, 0.35) 0%, rgba(10, 18, 18, 0) 28%, rgba(10, 18, 18, 0) 50%, rgba(10, 18, 18, 0.5) 100%);
}
.m-hero__copy { position: absolute; z-index: 2; left: var(--margin); right: var(--margin); bottom: clamp(3.5rem, 9vh, 6rem); max-width: 62rem; }
.m-hero__title {
	font-family: var(--m-display); font-weight: var(--m-thin);
	font-size: clamp(2.6rem, 8.2vw, 7rem); line-height: 0.98;
	letter-spacing: 0.04em; text-transform: uppercase;
}
.m-hero__sub { max-width: 30rem; margin-top: 1.5rem; font-size: clamp(0.95rem, 1.3vw, 1.0625rem); }
.m-hero__scroll {
	position: absolute; z-index: 2; right: var(--margin); bottom: clamp(3.5rem, 9vh, 6rem);
	padding-block: 0.5rem;
	font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em;
	text-decoration-color: transparent; transition: text-decoration-color 0.4s var(--ease);
}
@media (hover: hover) { .m-hero__scroll:hover { text-decoration-color: currentColor; } }

/* House hero keeps main.css's framed hero; the title just gains a mask. */
.motion--house .hero__title .line { display: inline-block; vertical-align: bottom; }

/* ---------- Services: Accordion Gallery ---------- */

.m-services { padding-top: var(--space); }
.m-accordion { display: flex; gap: 0.75rem; height: clamp(26rem, 72vh, 44rem); padding-inline: var(--margin); }
.m-accordion__panel {
	position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
	background: var(--m-mist); color: var(--paper);
	transition: flex-grow 1.1s var(--ease);
}
.m-accordion__panel.is-active { flex-grow: 4.2; }
.m-accordion__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.06); filter: saturate(0.85) brightness(0.86);
	transition: transform 1.6s var(--ease), filter 1.1s var(--ease);
}
.m-accordion__panel.is-active .m-accordion__img { transform: scale(1); filter: none; }
.m-accordion__panel::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
}
.m-accordion__trigger {
	position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%;
	padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.m-accordion__trigger:focus-visible { outline: 1px solid var(--paper); outline-offset: -0.75rem; }
.m-accordion__label {
	position: absolute; left: clamp(1.25rem, 2.5vw, 2rem); bottom: clamp(1.25rem, 2.5vw, 2rem);
	font-family: var(--m-display); font-weight: var(--m-weight);
	font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.2;
	letter-spacing: calc(var(--m-track) * 0.75); text-transform: var(--m-case);
	white-space: nowrap;
}
.motion--house .m-accordion__label { font-size: clamp(1.5rem, 2.2vw, 2rem); }
/* A label switches orientation the moment its panel changes state, while the panel is still
   resizing. Fading it back in once the width has mostly settled means no clipped word shows.
   Two keyframe names so the fade restarts in both directions. (Reduced motion: main.css turns
   animations off, so labels simply stay visible.) */
@keyframes m-label-open { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
@keyframes m-label-close { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
.m-accordion__panel.is-active .m-accordion__label { animation: m-label-open 1.1s var(--ease) both; }
.m-accordion__panel:not(.is-active) .m-accordion__label { animation: m-label-close 1.1s var(--ease) both; }
@media (min-width: 761px) {
	.m-accordion__panel:not(.is-active) .m-accordion__label { writing-mode: sideways-lr; }
	@supports not (writing-mode: sideways-lr) {
		.m-accordion__panel:not(.is-active) .m-accordion__label { writing-mode: vertical-rl; transform: rotate(180deg); }
	}
}
.m-accordion__body {
	position: absolute; z-index: 3;
	left: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.25rem, 2.5vw, 2rem);
	bottom: calc(clamp(1.25rem, 2.5vw, 2rem) + 3rem);
	max-width: 28rem;
	opacity: 0; transform: translateY(0.75rem); visibility: hidden;
	transition: opacity 0.6s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.6s;
}
.m-accordion__panel.is-active .m-accordion__body {
	opacity: 1; transform: none; visibility: visible;
	transition: opacity 0.6s var(--ease) 0.35s, transform 0.9s var(--ease) 0.35s, visibility 0s;
}
.m-accordion__link {
	display: inline-block; margin-top: 0.6rem; padding-block: 0.25rem; font-size: 0.875rem;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
	text-decoration-color: rgba(255, 255, 255, 0.5); transition: text-decoration-color 0.4s var(--ease);
}
.m-accordion__link:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) {
	.m-accordion { flex-direction: column; height: auto; gap: 0.5rem; }
	.m-accordion__panel { flex: none; height: 5.5rem; transition: height 1s var(--ease); }
	.m-accordion__panel.is-active { height: min(72vh, 30rem); }
	.m-accordion__body { bottom: calc(1.25rem + 2.75rem); }
}
.reduced .m-accordion__panel, .reduced .m-accordion__img { transition: none; }
.reduced .m-accordion__img { transform: none; }

/* ---------- Featured: Scroll Expand ---------- */

.m-featured { margin-top: var(--space); }
.m-featured__stage { position: relative; height: 100svh; overflow: hidden; }
.m-featured__frame { position: absolute; inset: 0; clip-path: inset(27% 24% 24% 24%); will-change: clip-path; }
.m-featured__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; }
.m-featured__words { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.m-featured__word {
	position: absolute; left: 0; right: 0;
	font-family: var(--m-display); font-weight: var(--m-thin);
	font-size: clamp(2rem, 5.2vw, 4.5rem); line-height: 1;
	letter-spacing: var(--m-track); padding-left: var(--m-track);
	text-align: center; text-transform: var(--m-case); color: var(--ink);
	will-change: transform;
}
.motion--house .m-featured__word { font-style: italic; font-size: clamp(2.25rem, 5.6vw, 5rem); }
.m-featured__word--top { top: calc(var(--header-h) + 1.75rem); }
.m-featured__word--bottom { bottom: 12svh; translate: 0 50%; }
.m-featured__caption { position: absolute; z-index: 2; left: var(--margin); bottom: clamp(2rem, 6vh, 4rem); max-width: 28rem; color: var(--paper); opacity: 0; }
.m-featured__caption h2 { font-family: var(--m-display); font-weight: var(--m-weight); font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: 0.04em; }
.m-featured__caption p { margin-top: 0.4rem; font-size: 0.875rem; opacity: 0.9; }
.m-featured__caption a { display: inline-block; padding-block: 0.25rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.m-featured__stage::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
	opacity: var(--shade, 0);
}
.no-js .m-featured__frame, .reduced .m-featured__frame { clip-path: none; }
.no-js .m-featured__frame img, .reduced .m-featured__frame img { transform: none; }
.no-js .m-featured__caption, .reduced .m-featured__caption { opacity: 1; }
.no-js .m-featured__stage::after, .reduced .m-featured__stage::after { opacity: 1; }
.no-js .m-featured__words, .reduced .m-featured__words { display: none; }

/* ---------- Portfolio: Masonry + Gradual Blur ---------- */

.m-portfolio { position: relative; margin-top: var(--space); padding-inline: var(--margin); }
.m-masonry { position: relative; margin: 0; padding: 0; list-style: none; columns: 3 18rem; column-gap: 1rem; }
.m-masonry__item { break-inside: avoid; margin-bottom: 1rem; }
.m-masonry.is-laid-out { columns: auto; }
.m-masonry.is-laid-out .m-masonry__item { position: absolute; top: 0; left: 0; margin: 0; }
.m-masonry.is-laid-out .m-masonry__item a { height: 100%; }
.m-masonry__item a { display: block; overflow: hidden; background: var(--m-mist); cursor: zoom-in; }
.m-masonry__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
@media (hover: hover) { .m-masonry__item a:hover img { transform: scale(1.025); } }
.m-gradual-blur {
	position: sticky; bottom: 0; z-index: 3;
	height: clamp(5rem, 14vh, 9rem);
	margin: calc(clamp(5rem, 14vh, 9rem) * -1) calc(var(--margin) * -1) 0;
	pointer-events: none;
}
.m-gradual-blur > span { position: absolute; inset: 0; }

/* ---------- Numbers: Count Up (faithful only, placeholders) ---------- */

.m-numbers { margin-top: var(--space); }
.m-placeholder-note { display: inline-block; margin-top: 1rem; padding: 0.35rem 0.8rem; border: 1px dashed var(--m-accent); color: var(--m-accent); font-size: 0.8125rem; }
.m-numbers__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 64rem; margin: 0 auto; padding-inline: var(--margin); text-align: center; }
.m-numbers__item { display: flex; flex-direction: column-reverse; gap: 0.75rem; }
.m-numbers__item dt { color: var(--grey); font-size: 0.9375rem; }
.m-numbers__item dd { margin: 0; font-family: var(--m-display); font-weight: var(--m-thin); font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.m-placeholder-tag { display: block; margin-top: 0.6rem; font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-accent); }
@media (max-width: 600px) { .m-numbers__list { grid-template-columns: 1fr; gap: 3rem; } }

/* ---------- Closing ---------- */

.motion--faithful .m-closing .closing__title {
	font-family: var(--m-display); font-weight: var(--m-thin);
	font-size: clamp(2.25rem, 6vw, 5rem); letter-spacing: 0.06em; text-transform: uppercase;
}
.m-closing__lede { max-width: 30rem; margin: 1.25rem auto 2.25rem; color: var(--grey); }
.motion--faithful .m-closing .button { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.8125rem; }

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	.m-hero__scroll { display: none; }
	.m-hero__copy { bottom: 3rem; }
	.m-title { letter-spacing: calc(var(--m-track) * 0.7); padding-left: calc(var(--m-track) * 0.7); }
}