/**
 * Polish layer — CSS-only feel upgrades.
 *
 * Sitewide, ~4 KB, no JS. Motion tokens, native view transitions, scroll
 * reveals, focus-visible rings, stable media boxes, image scrims.
 * Everything degrades silently on older browsers and is fully disabled
 * under prefers-reduced-motion.
 */

:root {
	--seraj-ease: cubic-bezier(.22, 1, .36, 1);
	--seraj-ease-out: cubic-bezier(.16, 1, .3, 1);
	--seraj-dur-fast: 140ms;
	--seraj-dur: 240ms;
	--seraj-dur-slow: 420ms;
	--seraj-ring: color-mix(in oklab, var(--seraj-primary, #2f5d3a) 55%, white);
}

/* ---------------------------------------------------------------------
 * 1. Cross-document view transitions (Chrome/Edge; ignored elsewhere).
 * ------------------------------------------------------------------ */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: seraj-fade-out 120ms var(--seraj-ease) both; }
::view-transition-new(root) { animation: seraj-fade-in 220ms var(--seraj-ease) both; }

@keyframes seraj-fade-out { to { opacity: 0; } }
@keyframes seraj-fade-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------------
 * 2. Zero layout shift: intrinsic boxes for every card / hero medium.
 * ------------------------------------------------------------------ */
.seraj-card__media,
.seraj-card__media img,
.seraj-kit-skeleton--media {
	aspect-ratio: 4 / 3;
	display: block;
	width: 100%;
	overflow: hidden;
}

.seraj-card__media img,
.seraj-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	background: color-mix(in oklab, currentColor 6%, transparent);
	transition: transform var(--seraj-dur-slow) var(--seraj-ease-out),
	            filter var(--seraj-dur) var(--seraj-ease);
}

.seraj-card:hover .seraj-card__media img { transform: scale(1.035); }

/* Contrast guard for text laid over photography. */
.seraj-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .45) 100%);
	opacity: 0;
	transition: opacity var(--seraj-dur) var(--seraj-ease);
}
.seraj-card__media { position: relative; }
.seraj-card__media:has(> .seraj-dest-card__location)::after,
.seraj-card--overlay .seraj-card__media::after { opacity: 1; }

/* ---------------------------------------------------------------------
 * 3. Scroll-linked reveals (progressive; no JS, no observer).
 * ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
	.seraj-card,
	.seraj-section > .seraj-container > * {
		animation: seraj-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 22%;
	}
}

@keyframes seraj-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * 4. Interaction states — one consistent language.
 * ------------------------------------------------------------------ */
a, button, .seraj-btn, .seraj-chip {
	transition: color var(--seraj-dur-fast) var(--seraj-ease),
	            background-color var(--seraj-dur-fast) var(--seraj-ease),
	            border-color var(--seraj-dur-fast) var(--seraj-ease),
	            transform var(--seraj-dur-fast) var(--seraj-ease),
	            box-shadow var(--seraj-dur-fast) var(--seraj-ease);
}

.seraj-btn:active,
.seraj-chip:active { transform: translateY(1px) scale(.99); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--seraj-ring);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Comfortable, thumb-sized targets on touch devices. */
@media (pointer: coarse) {
	.seraj-btn, .seraj-chip, .seraj-icon-btn, .seraj-menu a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ---------------------------------------------------------------------
 * 5. Skeletons — shape-matched, never spinners.
 * ------------------------------------------------------------------ */
.seraj-kit-skeleton {
	background: linear-gradient(90deg,
		color-mix(in oklab, currentColor 7%, transparent) 25%,
		color-mix(in oklab, currentColor 13%, transparent) 37%,
		color-mix(in oklab, currentColor 7%, transparent) 63%);
	background-size: 400% 100%;
	animation: seraj-shimmer 1.4s ease-in-out infinite;
	border-radius: 8px;
}
@keyframes seraj-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------------------------------------------------------------------
 * 6. Reading comfort + smooth in-page jumps.
 * ------------------------------------------------------------------ */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
.seraj-prose { text-wrap: pretty; }
h1, h2, h3, .seraj-card__title { text-wrap: balance; }
img { max-width: 100%; }

/* Keep long lists cheap to render while scrolling. */
.seraj-card-grid > * { content-visibility: auto; contain-intrinsic-size: 360px; }

/* ---------------------------------------------------------------------
 * 7. Reduced motion: a real off switch.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	@view-transition { navigation: none; }
	.seraj-card:hover .seraj-card__media img { transform: none; }
}