/* ════════════════════════════════════════════════════════════════════
   HOME MOTION — light level: "the press proof comes to life"
   ════════════════════════════════════════════════════════════════════
   One signature moment (hero) plus one quiet reveal per later section,
   all drawn from the print vocabulary already on the page:
   - Hero (on load, CSS only): the cyan and magenta plates arrive out of
     register and slide into place, so their overprint turns process blue;
     the crop marks are drawn, the registration mark turns into position
     and the colour control strip inks in, swatch by swatch.
     The headline itself never moves (it is the LCP element).
   - Hero (while scrolling, where CSS scroll-driven animations exist): the
     plates drift slightly out of register as the sheet leaves the view.
   - Categories: cards come off the press, top to bottom, in grid order.
   - Process 01–04 (a real sequence): each number overprints, its magenta
     and yellow ghosts converging into the solid figure.
   - CTA band: the magenta ink is rolled on from the left.
   The final states are the unchanged Dört Kalıp design. Nothing animates
   with prefers-reduced-motion: reduce, without JS (reveals need
   html.tr-motion, set by assets/js/motion.js) or in forced colours. Only
   translate/scale/rotate/opacity/clip-path/text-shadow change: no layout
   shift. Loaded on the front page only (inc/enqueue.php).
   ════════════════════════════════════════════════════════════════════ */

:root {
	--tr-ease-press: cubic-bezier(0.16, 0.84, 0.24, 1); /* fast in, long settle */
}

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
	/* ── 1. Hero: plates into register ─────────────────────────────── */
	.js .tr-hero .tr-proof::before {
		animation: tr-register-c 1100ms var(--tr-ease-press) 120ms backwards;
	}

	.js .tr-hero .tr-proof::after {
		animation: tr-register-m 1100ms var(--tr-ease-press) 260ms backwards;
	}

	/* Crop marks are drawn from the sheet corner outwards. */
	.js .tr-hero .tr-proof__crop::before,
	.js .tr-hero .tr-proof__crop::after {
		animation: tr-draw 420ms ease-out 600ms backwards;
	}

	.js .tr-hero .tr-proof__crop--tl::before,
	.js .tr-hero .tr-proof__crop--tr::before { transform-origin: bottom; }
	.js .tr-hero .tr-proof__crop--bl::before,
	.js .tr-hero .tr-proof__crop--br::before { transform-origin: top; }
	.js .tr-hero .tr-proof__crop--tl::after,
	.js .tr-hero .tr-proof__crop--bl::after { transform-origin: right; }
	.js .tr-hero .tr-proof__crop--tr::after,
	.js .tr-hero .tr-proof__crop--br::after { transform-origin: left; }

	.js .tr-hero .tr-proof__reg {
		animation: tr-reg 600ms var(--tr-ease-press) 520ms backwards;
	}

	/* Colour control strip: swatches ink in left to right. */
	.js .tr-hero .tr-colorbar > span {
		transform-origin: bottom;
		animation: tr-ink 300ms ease-out backwards;
		animation-delay: calc(760ms + var(--tr-i, 0) * 35ms);
	}

	.js .tr-hero .tr-colorbar > span:nth-child(2) { --tr-i: 1; }
	.js .tr-hero .tr-colorbar > span:nth-child(3) { --tr-i: 2; }
	.js .tr-hero .tr-colorbar > span:nth-child(4) { --tr-i: 3; }
	.js .tr-hero .tr-colorbar > span:nth-child(5) { --tr-i: 4; }
	.js .tr-hero .tr-colorbar > span:nth-child(6) { --tr-i: 5; }
	.js .tr-hero .tr-colorbar > span:nth-child(7) { --tr-i: 6; }
	.js .tr-hero .tr-colorbar > span:nth-child(8) { --tr-i: 7; }

	/* ── 2. Hero: slight misregistration while it scrolls away ───────── */
	@supports (animation-timeline: view()) {
		.js .tr-hero { view-timeline: --tr-hero block; }

		.js .tr-hero .tr-proof::before {
			animation: tr-register-c 1100ms var(--tr-ease-press) 120ms backwards, tr-drift-c linear both;
			animation-timeline: auto, --tr-hero;
			animation-range: normal, exit 0% exit 100%;
		}

		.js .tr-hero .tr-proof::after {
			animation: tr-register-m 1100ms var(--tr-ease-press) 260ms backwards, tr-drift-m linear both;
			animation-timeline: auto, --tr-hero;
			animation-range: normal, exit 0% exit 100%;
		}
	}

	/* ── 3. Categories: off the press, in grid order ─────────────────── */
	.tr-motion .tr-cat-grid > li {
		clip-path: inset(-24px -24px 100% -24px);
		transition: clip-path 600ms var(--tr-ease-press);
		transition-delay: calc(var(--tr-i, 0) * 45ms);
	}

	.tr-motion .tr-cat-grid.is-inview > li {
		clip-path: inset(-24px -24px -24px -24px);
	}


	/* ── 4. Process 01–04: each number overprints into register ──────── */
	/* Ghosts in the two process colours the figure is not; they converge
	   under the solid figure (same colours at zero offset: no fade). */
	.tr-process__step:nth-child(1) { --_g1: var(--tr-color-magenta); --_g2: var(--tr-color-yellow); }
	.tr-process__step:nth-child(2) { --_g1: var(--tr-color-cyan); --_g2: var(--tr-color-yellow); }
	.tr-process__step:nth-child(3) { --_g1: var(--tr-color-cyan); --_g2: var(--tr-color-magenta); }
	.tr-process__step:nth-child(4) { --_g1: var(--tr-color-cyan); --_g2: var(--tr-color-magenta); }

	.tr-motion .tr-process__num {
		text-shadow: 0.1em 0 0 var(--_g1), -0.1em 0 0 var(--_g2);
		transition: text-shadow 900ms var(--tr-ease-press);
		transition-delay: calc(var(--tr-i, 0) * 120ms);
	}

	.tr-motion .tr-process.is-inview .tr-process__num {
		text-shadow: 0 0 0 var(--_g1), 0 0 0 var(--_g2);
	}

	/* ── 5. CTA band: the magenta ink is rolled on ───────────────────── */
	.tr-motion .tr-cta-band {
		clip-path: inset(0 100% 0 0 round var(--tr-radius-md));
		transition: clip-path 600ms var(--tr-ease-press);
	}

	.tr-motion .tr-cta-band.is-inview {
		clip-path: inset(0 0 0 0 round var(--tr-radius-md));
	}

	/* ── 6. Settled: once revealed (motion.js adds .is-settled), nothing
	   stays clipped, so hover shadows and focus rings are never cut.
	   Last in the block: it must win over the .is-inview states. */
	.tr-motion .tr-cat-grid.is-settled > li,
	.tr-motion .tr-cta-band.is-settled {
		clip-path: none;
		transition: none;
	}
}

/* Printing or saving as PDF: everything shows, whatever was scrolled. */
@media print {
	.tr-motion .tr-cat-grid > li,
	.tr-motion .tr-cta-band { clip-path: none !important; }
	.tr-motion .tr-process__num { text-shadow: none !important; }
}

@keyframes tr-register-c { from { translate: -26px -30px; } } /* from above */
@keyframes tr-register-m { from { translate: -22px 38px; } } /* from below: never over the aside */
@keyframes tr-drift-c { to { transform: translate(-14px, -10px); } }
@keyframes tr-drift-m { to { transform: translate(-12px, 14px); } }
@keyframes tr-draw { from { scale: 0; } }
@keyframes tr-reg { from { opacity: 0; rotate: -90deg; scale: 0.6; } }
@keyframes tr-ink { from { scale: 1 0; } }