/**
 * Site-wide motion.
 *
 * A light, modern polish layer loaded on every page: hover micro-interactions on
 * cards and buttons, a gentle hero Ken Burns, and staggered grid reveals. It
 * deliberately stays out of the homepage's way — every visual rule is scoped
 * `body:not(.home)` so the front page keeps its own dedicated animation layer —
 * and everything is transform/opacity only and fully neutralised under
 * prefers-reduced-motion.
 *
 * The reveal hidden-states are gated behind `body.js` and are only applied by
 * assets/js/global-animations.js to grids that start below the fold, so content
 * never flashes and a no-JS visitor sees the finished page.
 *
 * @package Burger_Boi
 * @since   1.0.0
 */

:root {
	--g-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------- */
/* 1. Staggered grid reveal (non-home)                                         */
/* -------------------------------------------------------------------------- */

body:not(.home).js [data-ganim-stagger] > * {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 620ms var(--g-ease),
		transform 620ms var(--g-ease);
	transition-delay: calc(var(--gi, 0) * 65ms);
}

body:not(.home).js [data-ganim-stagger].is-ganim > * {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------- */
/* 2. Hero — a slow, subtle Ken Burns on inner-page hero art                    */
/* -------------------------------------------------------------------------- */

/* Clip the scale so an edge is never exposed, then drift the art. */
body:not(.home) [class*="hero__media"] {
	overflow: hidden;
}

body:not(.home) [class*="hero__media"] img,
body:not(.home) [class*="hero__media"] video {
	animation: g-kenburns 24s var(--g-ease) both;
}

@keyframes g-kenburns {
	from { transform: scale(1.03); }
	to   { transform: scale(1.08); }
}

/* -------------------------------------------------------------------------- */
/* 3. Hover micro-interactions (non-home)                                      */
/* -------------------------------------------------------------------------- */

/* Cards lift a touch and cast a soft shadow. */
body:not(.home) :is(.news-card, .snews-card, .ndcard, .ncard, .lcard, .loc-card, .mcard, .frstep, .fhub) {
	transition:
		transform 300ms var(--g-ease),
		box-shadow 300ms var(--g-ease);
}

body:not(.home) :is(.news-card, .snews-card, .ndcard, .ncard, .lcard, .loc-card, .mcard, .frstep, .fhub):hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgb(0 0 0 / 10%);
}

/* Their artwork eases in a hair on hover. The wrapper clips the zoom. */
body:not(.home) [class*="card__media"] {
	overflow: hidden;
}

body:not(.home) [class*="card__media"] img {
	transition: transform 500ms var(--g-ease);
}

body:not(.home) :is(.news-card, .snews-card, .ndcard, .ncard, .lcard, .loc-card, .mcard, .frstep, .fhub):hover [class*="card__media"] img {
	transform: scale(1.05);
}

/* Buttons rise slightly — a small, tactile cue. */
body:not(.home) .btn {
	transition:
		transform 220ms var(--g-ease),
		box-shadow 220ms var(--g-ease),
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease);
}

body:not(.home) .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgb(0 0 0 / 16%);
}

/* -------------------------------------------------------------------------- */
/* 4. Reduced motion — show everything, animate nothing                        */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body:not(.home).js [data-ganim-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	body:not(.home) [class*="hero__media"] img,
	body:not(.home) [class*="hero__media"] video {
		animation: none !important;
	}
}