/* Jehajo Printers — motion layer.
 * Scroll reveals, split headings, card spotlight, magnetic buttons, scroll progress,
 * parallax and page transitions. Everything here is switched off for reduced motion
 * and in screenshot mode (.jh-shot); content is always visible without JS.
 * Reveal states use the individual translate / scale / filter properties so they never
 * clash with existing hover transforms (.lift, .btn).
 */

/* ---------- Scroll reveals ---------- */
.fx {
	--fx-d: 0ms;
	transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease), filter .9s var(--ease), clip-path 1.1s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
	transition-delay: var(--fx-d), var(--fx-d), var(--fx-d), var(--fx-d), var(--fx-d), 0s, 0s;
}
.fx-up { opacity: 0; translate: 0 36px; filter: blur(8px); }
.fx-zoom { opacity: 0; scale: .92; translate: 0 20px; filter: blur(6px); }
.fx-left { opacity: 0; translate: -40px 0; filter: blur(6px); }
.fx-mask { clip-path: inset(0 0 100% 0 round var(--r-lg)); }
.fx-mask img { scale: 1.18; transition: scale 1.4s var(--ease); transition-delay: var(--fx-d); }
.fx.is-fx { opacity: 1; translate: none; scale: none; filter: none; clip-path: inset(0 0 0 0 round 0); }
.fx-mask.is-fx img { scale: 1; }

/* ---------- Split headings: words rise out of a mask ---------- */
.fx-split .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-split .fx-w > span { display: inline-block; translate: 0 105%; rotate: 4deg; transition: translate .9s var(--ease), rotate .9s var(--ease); transition-delay: calc(var(--w) * 55ms + var(--fx-d, 0ms)); }
.fx-split.is-fx .fx-w > span { translate: none; rotate: none; }

/* ---------- Scroll progress (CMYK) ---------- */
.fx-progress {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
	background: linear-gradient(90deg, var(--cyan), #EC008C, #FFF200, var(--indigo));
	transform-origin: 0 50%; transform: scaleX(var(--fx-p, 0));
}
@supports (animation-timeline: scroll()) {
	.fx-progress { transform: scaleX(0); animation: fx-grow linear both; animation-timeline: scroll(root block); }
}
@keyframes fx-grow { to { transform: scaleX(1); } }

/* ---------- Header compacts on scroll (desktop) ---------- */
@media (min-width: 1024px) {
	.header-inner { transition: height .35s var(--ease); }
	.brand { transition: width .35s var(--ease); }
	.site-header.is-scrolled .header-inner { height: 64px; }
	.site-header.is-scrolled .brand { width: 180px; }
}

/* ---------- Card spotlight + image zoom ---------- */
@media (hover: hover) and (pointer: fine) {
	.fx-spot { --mx: 50%; --my: 50%; }
	.fx-spot:hover {
		background-image: radial-gradient(380px circle at var(--mx) var(--my), rgba(0, 174, 239, .10), rgba(236, 0, 140, .05) 40%, transparent 70%);
		border-color: rgba(61, 63, 148, .28);
	}
	.s-card__media img, .post-card__media img, .proj__media img, .p-card__media img, .job-grid__item img { transition: scale .8s var(--ease), filter .8s var(--ease); }
	.s-card:hover .s-card__media img, .post-card:hover .post-card__media img, .proj:hover .proj__media img, .p-card:hover .p-card__media img, .job-grid__item:hover img { scale: 1.07; filter: saturate(1.12); }
}

/* ---------- Buttons: light sweep + magnetic pull ---------- */
.btn { transition: transform .2s var(--ease), translate .4s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s, border-color .2s; }
.btn.is-magnet { transition-duration: .2s, .12s, .2s, .2s, .2s, .2s; }
.btn:not(.btn-outline):not(.btn-outline-light):not(.btn-ghost)::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn:hover::after { left: 130%; }

/* ---------- Page hero: ink drifts, crop marks draw in ---------- */
.page-hero__ink { translate: 0 var(--fx-par, 0); }
.fx-on .page-hero .crop-marks i { opacity: 0; scale: .4; transition: opacity .6s var(--ease) .5s, scale .6s var(--ease) .5s; }
.fx-on .page-hero.is-fx .crop-marks i { opacity: 1; scale: 1; }
.fx-on .page-hero__lead, .fx-on .page-hero .eyebrow, .fx-on .page-hero .crumbs { opacity: 0; translate: 0 18px; transition: opacity .8s var(--ease) .35s, translate .8s var(--ease) .35s; }
.fx-on .page-hero.is-fx .page-hero__lead, .fx-on .page-hero.is-fx .eyebrow, .fx-on .page-hero.is-fx .crumbs { opacity: 1; translate: none; }
.fx-on .page-hero .eyebrow, .fx-on .page-hero .crumbs { transition-delay: .05s; }

/* ---------- Hero photos drift slower than the page ---------- */
.hero-slide { overflow: hidden; }
.hero-slide__img { translate: 0 var(--fx-par, 0); }

/* ---------- Counters lift on hover ---------- */
.counters .counter { transition: translate .4s var(--ease); }
.counters .counter:hover { translate: 0 -6px; }

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: fx-vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: fx-vt-in .5s var(--ease) both; }
@keyframes fx-vt-out { to { opacity: 0; translate: 0 -12px; filter: blur(4px); } }
@keyframes fx-vt-in { from { opacity: 0; translate: 0 18px; filter: blur(6px); } }

/* ---------- Off switches ---------- */
@media (prefers-reduced-motion: reduce) {
	.fx, .fx-mask img, .fx-split .fx-w > span, .fx-on .page-hero .crop-marks i, .fx-on .page-hero__lead, .fx-on .page-hero .eyebrow, .fx-on .page-hero .crumbs { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; clip-path: none !important; }
	.fx-progress { display: none; }
	@view-transition { navigation: none; }
}
.jh-shot .fx, .jh-shot .fx-mask img, .jh-shot .fx-split .fx-w > span, .jh-shot .page-hero .crop-marks i, .jh-shot .page-hero__lead, .jh-shot .page-hero .eyebrow, .jh-shot .page-hero .crumbs { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
@media print {
	.fx, .fx-mask img, .fx-split .fx-w > span { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; clip-path: none !important; }
	.fx-progress { display: none; }
}