/**
 * BBQLovers - rorelse: scroll-reveal, hero-entre, hover-lyft, sidoovergangar.
 * Bara transform + opacity animeras. Doljande sker bara nar motion.js markt
 * elementet (.rv); utan JS/botar ar allt synligt. Ingen will-change.
 */

/* ---- 1. Reveal on scroll (+ Stagger via --rv-d) ---- */
.rv {
	opacity: 0;
	transform: translateY(16px);
}
.rv.rv-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 480ms var(--ease),
		transform 480ms var(--ease);
	transition-delay: var(--rv-d, 0ms);
}

/* ---- 2. Hero-entre (Fade in + Slide up, en gang vid laddning) ---- */
@keyframes mo-rise-12 {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mo-rise-8 {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
/* Bilden animeras aldrig (LCP): bara textblockets barn. */
.js .home-lead .card--lead .card__body > * {
	animation: mo-rise-12 450ms var(--ease) both;
}
.js .home-lead .card--lead .card__body > :nth-child(1) { animation-delay: 0ms; }
.js .home-lead .card--lead .card__body > :nth-child(2) { animation-delay: 60ms; }
.js .home-lead .card--lead .card__body > :nth-child(3) { animation-delay: 120ms; }
.js .home-lead .card--lead .card__body > :nth-child(n+4) { animation-delay: 180ms; }

.js .home-lanes .lane { animation: mo-rise-8 360ms var(--ease) both; }
.js .home-lanes .lane:nth-child(1) { animation-delay: 240ms; }
.js .home-lanes .lane:nth-child(2) { animation-delay: 280ms; }
.js .home-lanes .lane:nth-child(3) { animation-delay: 320ms; }
.js .home-lanes .lane:nth-child(4) { animation-delay: 360ms; }
.js .home-lanes .lane:nth-child(5) { animation-delay: 400ms; }
.js .home-lanes .lane:nth-child(6) { animation-delay: 440ms; }

/* Artikelsidor: rubrik + meta. */
.js .article-header__title { animation: mo-rise-8 400ms var(--ease) both; }
.js .article-meta { animation: mo-rise-8 400ms var(--ease) 80ms both; }

/* ---- 3. Hover-lyft (bara riktig muspekare) ---- */
@media (hover: hover) and (pointer: fine) {
	.card:not(.card--lead),
	.tool-card:not(.tool-card--static) {
		position: relative;
		isolation: isolate; /* egen stapelkontext: skuggan (z-index -1) hamnar inte bakom sektionens bakgrund */
		transition:
			transform var(--dur-2) var(--ease),
			opacity var(--dur-1) var(--ease),
			border-color var(--dur-1) var(--ease);
	}
	/* Skuggan ar ett pseudoelement vars opacity tonas (aldrig box-shadow-transition). */
	.card:not(.card--lead)::after,
	.tool-card:not(.tool-card--static)::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: var(--r-media, 0);
		box-shadow: 0 18px 40px -22px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--dur-2) var(--ease);
	}
	.tool-card:not(.tool-card--static)::after { border-radius: 0; }
	.card:not(.card--lead):hover,
	.tool-card:not(.tool-card--static):hover { transform: translateY(-3px); }
	.card:not(.card--lead):hover::after,
	.tool-card:not(.tool-card--static):hover::after { opacity: 1; }
	/* Tryck: tillbaka pa plats direkt. */
	.card:not(.card--lead):active,
	.tool-card:not(.tool-card--static):active { transform: none; transition-duration: 0ms; }
}

/* ---- 4. Sidoovergangar (cross-document View Transitions) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 220ms;
	animation-timing-function: var(--ease);
}
/* Headern ligger kvar medan innehallet tonar. */
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }

/* ---- 5. Reducerad rorelse: bara opacity ---- */
@media (prefers-reduced-motion: reduce) {
	.rv { transform: none; }
	.rv.rv-in {
		transition: opacity 300ms var(--ease);
		transition-delay: 0ms;
	}
	@keyframes mo-rise-12 { from { opacity: 0; } to { opacity: 1; } }
	@keyframes mo-rise-8  { from { opacity: 0; } to { opacity: 1; } }
	.js .home-lead .card--lead .card__body > *,
	.js .home-lanes .lane,
	.js .article-header__title,
	.js .article-meta { animation-duration: 300ms; animation-delay: 0ms; }
	.card:not(.card--lead):hover,
	.tool-card:not(.tool-card--static):hover { transform: none; }
	@view-transition { navigation: none; }
}