/* =========================================================================
   MK Gadget — animations.css
   Small, tasteful, GPU-friendly transitions only. No JS animation library.
   Rule #11 (mandatory): prefers-reduced-motion disables 3D + scroll motion
   while keeping every menu, card and control fully usable.
   Rule #17 (mandatory): nothing in this file targets .mkg-ad-slot.
   ========================================================================= */

/* Reveal-on-scroll: cards/sections fade+rise once when they enter the
   viewport (single orchestrated moment per element, not a looping effect). */
.mkg-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 520ms ease, transform 520ms ease;
}

.mkg-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger a grid's children slightly so a row doesn't pop in as one block */
.mkg-grid .mkg-reveal:nth-child(2) { transition-delay: 60ms; }
.mkg-grid .mkg-reveal:nth-child(3) { transition-delay: 120ms; }

/* Drawer icon morph (hamburger <-> close) */
.mkg-menu-toggle svg .line {
	transform-origin: center;
	transition: transform var(--mkg-transition), opacity var(--mkg-transition-fast);
}

.mkg-menu-toggle.is-active svg .line-top {
	transform: translateY(6px) rotate(45deg);
}

.mkg-menu-toggle.is-active svg .line-middle {
	opacity: 0;
}

.mkg-menu-toggle.is-active svg .line-bottom {
	transform: translateY(-6px) rotate(-45deg);
}

/* Skeleton shimmer for lazy-loading images before they decode (progressive
   enhancement only — never applied to ad slots) */
.mkg-card__media img[loading="lazy"] {
	background: var(--mkg-background);
}

/* -------------------------------------------------------------------------
   Reduced motion: accessibility overrides everything above and in main.css
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	.mkg-reveal {
		opacity: 1;
		transform: none;
	}

	.mkg-nav__menu a,
	.mkg-nav__menu a:hover,
	.mkg-nav__menu a:focus-visible,
	.mkg-nav__menu ul.sub-menu,
	.mkg-drawer__panel,
	.mkg-card,
	.mkg-card:hover,
	.mkg-card__media img,
	.mkg-card:hover .mkg-card__media img,
	.mkg-footer a:hover,
	.mkg-footer__social a:hover {
		transform: none !important;
	}

	.mkg-search__form {
		transform: translateY(-50%) !important;
	}

	.mkg-search.is-open .mkg-search__form {
		transform: translateY(-50%) !important;
	}
}