/* ============================================================
 * Flo Geier — motion.css
 * Splash, hero kinesthesia, sticky-header, section reveals,
 * magnetic CTAs, project hover, page transitions, cursor signature.
 *
 * All animations use transform / opacity / clip-path / filter only.
 * Respects prefers-reduced-motion (see end of file).
 * ============================================================ */

:root {
	--motion-ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);
	--motion-ease-out-q:   cubic-bezier(0.25, 1, 0.5, 1);
	--motion-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
	--motion-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	--motion-rust: oklch(0.55 0.13 45);
}

/* ============================================================
 *  SPLASH ENTRANCE
 * ============================================================ */
.splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	contain: strict;
}
.splash.is-active { pointer-events: auto; }
.splash.is-dismissed { display: none; }

.splash__panel {
	position: absolute;
	inset: 0;
	background: var(--moss-900);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(0);
	will-change: transform;
}
.splash__panel::after {
	/* Trailing rust hairline that sweeps off with the curtain. */
	content: '';
	position: absolute;
	left: 0; right: 0;
	bottom: -1px;
	height: 1.5px;
	background: var(--motion-rust);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}
.splash.is-leaving .splash__panel {
	transform: translateY(-101%);
	transition: transform 820ms var(--motion-ease-curtain);
}
.splash.is-leaving .splash__panel::after {
	animation: splash-trailing-line 820ms var(--motion-ease-curtain) forwards;
}
@keyframes splash-trailing-line {
	0%   { transform: scaleX(0); }
	30%  { transform: scaleX(1); }
	100% { transform: scaleX(1); }
}

.splash__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 24px;
	width: min(560px, 86vw);
	text-align: center;
}

/* Subtle warm grain layer over the moss background. */
.splash__grain {
	position: absolute;
	inset: -20%;
	pointer-events: none;
	opacity: 0.18;
	mix-blend-mode: overlay;
	background-image:
		radial-gradient(1.4px 1.4px at 12% 18%, oklch(0.96 0.01 75 / 0.55), transparent 60%),
		radial-gradient(1.4px 1.4px at 78% 32%, oklch(0.96 0.01 75 / 0.45), transparent 60%),
		radial-gradient(1.4px 1.4px at 24% 64%, oklch(0.96 0.01 75 / 0.38), transparent 60%),
		radial-gradient(1.4px 1.4px at 88% 82%, oklch(0.96 0.01 75 / 0.42), transparent 60%),
		radial-gradient(1.4px 1.4px at 46% 90%, oklch(0.96 0.01 75 / 0.30), transparent 60%),
		radial-gradient(1.4px 1.4px at 60% 12%, oklch(0.96 0.01 75 / 0.32), transparent 60%);
	background-size: 220px 220px, 260px 260px, 200px 200px, 240px 240px, 280px 280px, 210px 210px;
	animation: splash-grain 2.4s steps(6) infinite;
}
@keyframes splash-grain {
	0%   { transform: translate(0, 0); }
	16%  { transform: translate(-4px, 3px); }
	33%  { transform: translate(3px, -2px); }
	50%  { transform: translate(-2px, -4px); }
	66%  { transform: translate(4px, 2px); }
	83%  { transform: translate(-3px, 4px); }
	100% { transform: translate(0, 0); }
}

/* Logo row — letters individually staged off, JS adds .is-revealed
 * to .splash to trigger them via animation-delay tied to data-i index. */
.splash__logo {
	font-family: var(--font-display);
	font-weight: 540;
	font-size: clamp(2.6rem, 7.2vw, 4.6rem);
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--clay-50);
	display: inline-flex;
	align-items: baseline;
	gap: 0.32em;
}
.splash__word {
	display: inline-flex;
	align-items: baseline;
}
.splash__char {
	display: inline-block;
	transform: translateY(22px);
	opacity: 0;
	filter: blur(10px);
	will-change: transform, opacity, filter;
}
.splash__dot {
	display: inline-block;
	width: 0.18em;
	height: 0.18em;
	background: var(--rust);
	margin: 0 0.08em;
	transform: scale(0);
	opacity: 0;
	will-change: transform, opacity;
	align-self: center;
	border-radius: 1px;
}

/* Each char animates in with stagger via custom property --i set in JS. */
.splash.is-revealed .splash__char {
	animation: splash-char-in 760ms var(--motion-ease-out-quart) forwards;
	animation-delay: calc(var(--i, 0) * 78ms + 120ms);
}
.splash.is-revealed .splash__dot {
	animation: splash-dot-in 520ms var(--motion-ease-out-quart) forwards;
	animation-delay: 360ms;
}

@keyframes splash-char-in {
	0%   { transform: translateY(22px); opacity: 0; filter: blur(10px); }
	60%  { opacity: 1; }
	100% { transform: translateY(0);    opacity: 1; filter: blur(0); }
}
@keyframes splash-dot-in {
	0%   { transform: scale(0);   opacity: 0; }
	60%  { transform: scale(1.6); opacity: 1; }
	100% { transform: scale(1);   opacity: 1; }
}

.splash__eyebrow {
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: oklch(from var(--clay-50) l c h / 0.62);
	margin: 0;
	transform: translateY(8px);
	opacity: 0;
	will-change: transform, opacity;
}
.splash.is-revealed .splash__eyebrow {
	animation: splash-eyebrow-in 700ms var(--motion-ease-out-quart) forwards;
	animation-delay: 720ms;
}
@keyframes splash-eyebrow-in {
	0%   { transform: translateY(8px); opacity: 0; }
	100% { transform: translateY(0);   opacity: 1; }
}

.splash__hairline {
	display: block;
	width: 240px;
	height: 1px;
	margin-top: 4px;
	background: var(--motion-rust);
	transform-origin: left center;
	transform: scaleX(0);
	will-change: transform;
}
.splash.is-revealed .splash__hairline {
	animation: splash-hair-sweep 1100ms var(--motion-ease-out-expo) forwards;
	animation-delay: 1050ms;
}
@keyframes splash-hair-sweep {
	0%   { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

/* When dismissed instantly (already seen / reduced motion), pull from DOM via JS. */
.splash.is-skipped { display: none; }

/* Body lock during splash. */
body.is-splash-active {
	overflow: hidden !important;
}

/* ============================================================
 *  HERO KINESTHESIA
 *  Ken Burns, letter-mask title, lede/CTA fade-up, parallax targets.
 * ============================================================ */

/* Ken Burns: applied once hero is "live".
 * We start it after splash dismiss to avoid CPU during entrance. */
body.motion-ready .hero__media img {
	animation: hero-ken-burns 18s ease-in-out infinite alternate;
	transform-origin: 52% 56%;
	will-change: transform;
}
@keyframes hero-ken-burns {
	0%   { transform: scale(1)    translate3d(0, 0, 0); }
	100% { transform: scale(1.05) translate3d(8px, -4px, 0); }
}

/* Hero parallax — JS writes --hero-scroll (0..1) on .hero. */
.hero__media { transform: translate3d(0, calc(var(--hero-scroll, 0) * 30px), 0); }
.hero__content { transform: translate3d(0, calc(var(--hero-scroll, 0) * -50px), 0); }

/* Title letter-mask reveal — words slide up from below clip mask. */
.hero__title span {
	display: block;
	overflow: hidden;
	padding-bottom: 0.04em;
	margin-bottom: -0.04em;
}
.hero__title span > span,
.hero__title span > em {
	display: inline-block;
	transform: translateY(110%);
	will-change: transform;
}
body.motion-ready .hero__title span > span,
body.motion-ready .hero__title span > em {
	animation: hero-word-up 900ms var(--motion-ease-out-quart) forwards;
}
body.motion-ready .hero__title span:nth-child(1) > * { animation-delay: 80ms; }
body.motion-ready .hero__title span:nth-child(2) > * { animation-delay: 200ms; }
body.motion-ready .hero__title span:nth-child(2) em { animation-delay: 200ms; }

@keyframes hero-word-up {
	0%   { transform: translateY(110%); }
	100% { transform: translateY(0); }
}

/* Lede + actions + eyebrow + caption fade-up — start after title. */
.hero__eyebrow,
.hero__lede,
.hero__actions,
.hero__caption {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
}
body.motion-ready .hero__eyebrow {
	animation: hero-rise 700ms var(--motion-ease-out-quart) 60ms forwards;
}
body.motion-ready .hero__lede {
	animation: hero-rise 700ms var(--motion-ease-out-quart) 460ms forwards;
}
body.motion-ready .hero__actions {
	animation: hero-rise 700ms var(--motion-ease-out-quart) 580ms forwards;
}
body.motion-ready .hero__caption {
	animation: hero-rise 700ms var(--motion-ease-out-quart) 760ms forwards;
}
@keyframes hero-rise {
	0%   { opacity: 0; transform: translateY(14px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 *  STICKY HEADER + SCROLL PROGRESS
 * ============================================================ */
.site-header {
	transition: transform 280ms var(--motion-ease-out-quart),
	            border-color 0.4s var(--motion-ease-out-q),
	            background 0.4s var(--motion-ease-out-q);
	will-change: transform;
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 1.5px;
	width: 100%;
	background: var(--motion-rust);
	transform: scaleX(var(--scroll-progress, 0));
	transform-origin: left center;
	will-change: transform;
	pointer-events: none;
	z-index: 2;
}

/* ============================================================
 *  SECTION NUMBER REVEAL
 * ============================================================ */
.section-head__num,
.editorial-row__num,
.leistung-block__num,
.page-hero__num {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.18em;
}

/* Override: the section-head & page-hero numbers had real border-top — we
 * replace it with a scaling pseudo-element so it can grow on reveal. */
.section-head__num,
.page-hero__num {
	border-top: 1px solid transparent;
	padding-top: 12px;
}

.section-head__num::before,
.page-hero__num::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 80px;
	background: var(--motion-rust);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 620ms var(--motion-ease-out-quart);
	will-change: transform;
}
.editorial-row__num::before,
.leistung-block__num::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 64px;
	background: var(--motion-rust);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 580ms var(--motion-ease-out-quart);
	will-change: transform;
}
.section-head__num.motion-num-in::before,
.page-hero__num.motion-num-in::before,
.editorial-row__num.motion-num-in::before,
.leistung-block__num.motion-num-in::before {
	transform: scaleX(1);
}
.editorial-row__num,
.leistung-block__num {
	padding-top: 12px;
}

/* Number text itself — slides up from below + fades. */
.section-head__num > .num-inner,
.editorial-row__num > .num-inner,
.leistung-block__num > .num-inner,
.page-hero__num > .num-inner {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	will-change: transform, opacity;
}

.section-head__num.motion-num-in > .num-inner,
.editorial-row__num.motion-num-in > .num-inner,
.leistung-block__num.motion-num-in > .num-inner,
.page-hero__num.motion-num-in > .num-inner {
	animation: num-slide-up 720ms var(--motion-ease-out-quart) 180ms forwards;
}
@keyframes num-slide-up {
	0%   { transform: translateY(110%); opacity: 0; }
	100% { transform: translateY(0);    opacity: 1; }
}

/* ============================================================
 *  MAGNETIC CTAs (desktop only, JS sets translate via vars)
 * ============================================================ */
@media (hover: hover) and (pointer: fine) {
	.btn--rust,
	.btn--ghost,
	.site-header__cta {
		transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
		transition: transform 360ms var(--motion-ease-out-quart),
		            background 0.25s var(--motion-ease-out-q),
		            border-color 0.25s var(--motion-ease-out-q),
		            color 0.25s var(--motion-ease-out-q);
	}
	.btn--rust.is-magnetic,
	.btn--ghost.is-magnetic,
	.site-header__cta.is-magnetic {
		transition: transform 80ms linear,
		            background 0.25s var(--motion-ease-out-q),
		            border-color 0.25s var(--motion-ease-out-q),
		            color 0.25s var(--motion-ease-out-q);
	}
	/* Override the existing hover translate so it doesn't fight magnetism. */
	.site-header__cta:hover { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0); background: var(--rust); }
	.btn--rust:hover { transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0); background: var(--rust-dark); }
}

/* ============================================================
 *  PROJECT CARD HOVER — meta lift + h3 underline grow
 * ============================================================ */
.projekt-card { position: relative; }
.projekt-card__meta {
	transition: transform 480ms var(--motion-ease-out-quart),
	            color 480ms var(--motion-ease-out-quart);
	will-change: transform;
}
.projekt-card:hover .projekt-card__meta {
	transform: translateY(-6px);
	color: var(--moss-900);
}
.projekt-card h3 {
	position: relative;
	display: inline-block;
}
.projekt-card h3::after {
	content: '';
	position: absolute;
	left: 0; bottom: -4px;
	width: 100%;
	height: 1px;
	background: var(--motion-rust);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 420ms var(--motion-ease-out-quart);
	will-change: transform;
}
.projekt-card:hover h3::after { transform: scaleX(1); }

/* ============================================================
 *  PAGE TRANSITION FALLBACK
 * ============================================================ */
.page-curtain {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: var(--moss-900);
	pointer-events: none;
	clip-path: polygon(-10% 100%, 110% 100%, 110% 100%, -10% 100%);
	transition: clip-path 320ms var(--motion-ease-curtain);
}
.page-curtain.is-in {
	clip-path: polygon(-10% 0, 110% -10%, 110% 110%, -10% 100%);
}
.page-curtain.is-out {
	clip-path: polygon(-10% 0, 110% -10%, 110% 0, -10% -10%);
}

@supports (view-transition-name: foo) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 360ms;
		animation-timing-function: var(--motion-ease-curtain);
	}
	::view-transition-old(root) { animation-name: vt-fade-out; }
	::view-transition-new(root) { animation-name: vt-fade-in; }
}
@keyframes vt-fade-out {
	0%   { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes vt-fade-in {
	0%   { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 *  CURSOR SIGNATURE
 * ============================================================ */
.cursor-sig {
	position: fixed;
	top: 0; left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: oklch(from var(--moss-700) l c h / 0.55);
	border: 0 solid transparent;
	pointer-events: none;
	z-index: 10000;
	transform: translate3d(-100px, -100px, 0);
	transition: width 220ms var(--motion-ease-out-quart),
	            height 220ms var(--motion-ease-out-quart),
	            background 220ms var(--motion-ease-out-quart),
	            border-color 220ms var(--motion-ease-out-quart),
	            border-width 220ms var(--motion-ease-out-quart),
	            opacity 200ms ease-out;
	will-change: transform;
	mix-blend-mode: difference;
	opacity: 0;
}
.cursor-sig.is-active { opacity: 0.9; }
.cursor-sig.is-hovering {
	width: 28px;
	height: 28px;
	background: transparent;
	border: 1.5px solid var(--motion-rust);
	mix-blend-mode: normal;
	opacity: 1;
}
@media (hover: none), (pointer: coarse) {
	.cursor-sig { display: none !important; }
}

/* ============================================================
 *  REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.splash { display: none !important; }
	body.motion-ready .hero__media img { animation: none !important; transform: none !important; }
	.hero__media,
	.hero__content { transform: none !important; }
	.hero__title span > span,
	.hero__title span > em { transform: none !important; animation: none !important; }
	.hero__eyebrow,
	.hero__lede,
	.hero__actions,
	.hero__caption { opacity: 1 !important; transform: none !important; animation: none !important; }
	.section-head__num::before,
	.page-hero__num::before,
	.editorial-row__num::before,
	.leistung-block__num::before { transform: scaleX(1) !important; transition: none !important; }
	.section-head__num > .num-inner,
	.editorial-row__num > .num-inner,
	.leistung-block__num > .num-inner,
	.page-hero__num > .num-inner { transform: none !important; opacity: 1 !important; animation: none !important; }
	.cursor-sig { display: none !important; }
	.site-header { transition: none !important; }
}