/*
 * Chronicle Motion System
 * Shared, accessible motion for every public template.
 */

:root {
	--chronicle-motion-ease: cubic-bezier(.22, 1, .36, 1);
	--chronicle-motion-gold: var(--ch-signal, #c88c2a);
}

/* A quiet page-progress signal, echoing Chronicle's gold line. */
.chronicle-page-progress {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	pointer-events: none;
	overflow: hidden;
	background: rgba(255,255,255,.04);
}
.chronicle-page-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #916019, var(--chronicle-motion-gold), #e5ba67);
	box-shadow: 0 0 16px rgba(200,140,42,.45);
	transform: scaleX(var(--chronicle-progress, 0));
	transform-origin: left center;
	will-change: transform;
}
body.admin-bar .chronicle-page-progress { top: 32px; }

/* Page-load choreography. Individual translate keeps existing hover transforms intact. */
.chronicle-motion-ready .chronicle-hero-enter {
	opacity: 0;
	translate: 0 24px;
	animation: chronicle-hero-enter .9s var(--chronicle-motion-ease) forwards;
	animation-delay: var(--chronicle-hero-delay, 0ms);
}
.chronicle-motion-ready .chronicle-hero-enter--media {
	translate: 0 18px;
	scale: .985;
}
@keyframes chronicle-hero-enter {
	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

/* Slow visual breath in hero imagery; it never moves text or layout. */
.chronicle-motion-ready .chronicle-hero-media img {
	transform-origin: center;
	animation: chronicle-media-breathe 12s ease-in-out 1s infinite alternate;
}
@keyframes chronicle-media-breathe {
	from { scale: 1; }
	to { scale: 1.035; }
}

/* Scroll reveals. JS adds the classes only after the page is ready. */
.chronicle-motion-item {
	opacity: 0;
	translate: 0 30px;
	transition:
		opacity .72s ease,
		translate .82s var(--chronicle-motion-ease),
		scale .82s var(--chronicle-motion-ease);
	transition-delay: var(--chronicle-motion-delay, 0ms);
	will-change: opacity, translate;
}
.chronicle-motion-item[data-motion="left"] { translate: -24px 0; }
.chronicle-motion-item[data-motion="right"] { translate: 24px 0; }
.chronicle-motion-item[data-motion="scale"] { translate: 0 18px; scale: .975; }
.chronicle-motion-item.chronicle-motion-in {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	will-change: auto;
}

/* Cards retain their existing design while gaining a coherent response language. */
.chronicle-card,
.chronicle-products-grid > article { position: relative; }
.chronicle-action-card-link {
	position: absolute;
	z-index: 5;
	inset: 0;
	border-radius: inherit;
	cursor: pointer;
}
.chronicle-action-card-link:focus-visible {
	outline: 3px solid var(--chronicle-motion-gold);
	outline-offset: -5px;
}
.chronicle-card:focus-within,
.chronicle-products-grid > article:focus-within {
	border-color: rgba(200,140,42,.48);
	box-shadow: 0 22px 52px rgba(24,24,36,.11);
}

.chronicle-motion-card {
	transition:
		transform .32s var(--chronicle-motion-ease),
		box-shadow .32s ease,
		border-color .32s ease,
		background-color .32s ease;
}
@media (hover: hover) and (pointer: fine) {
	.chronicle-motion-card:hover {
		transform: translateY(-6px);
		border-color: rgba(200,140,42,.38);
		box-shadow: 0 22px 52px rgba(24,24,36,.11);
	}
	.chronicle-motion-card:hover svg {
		translate: 0 -3px;
		rotate: 2deg;
	}
}
.chronicle-motion-card svg {
	transition:
		translate .32s var(--chronicle-motion-ease),
		rotate .32s var(--chronicle-motion-ease),
		color .25s ease;
}

/* Buttons and editorial links respond without layout shift. */
.chronicle-button,
.chronicle-text-link,
.chronicle-solutions-text-link,
.chronicle-job-button,
.chronicle-job-card-bottom a,
.chronicle-employer-bridge a {
	transition:
		transform .25s var(--chronicle-motion-ease),
		box-shadow .25s ease,
		color .2s ease,
		background-color .2s ease,
		border-color .2s ease;
}
.chronicle-button span,
.chronicle-text-link span,
.chronicle-solutions-text-link span,
.chronicle-job-button span,
.chronicle-job-arrow {
	display: inline-block;
	transition: translate .25s var(--chronicle-motion-ease), rotate .25s var(--chronicle-motion-ease);
}
@media (hover: hover) and (pointer: fine) {
	.chronicle-button:hover { transform: translateY(-2px); }
	.chronicle-button:hover span,
	.chronicle-text-link:hover span,
	.chronicle-job-button:hover span { translate: 5px 0; }
	.chronicle-solutions-text-link:hover span,
	.chronicle-job-card:hover .chronicle-job-arrow { translate: 4px -4px; }
}

/* Keyboard users receive the same clear interactive feedback. */
.chronicle-motion-card:focus-within,
.chronicle-button:focus-visible,
.chronicle-text-link:focus-visible,
.chronicle-job-button:focus-visible {
	outline: 2px solid var(--chronicle-motion-gold);
	outline-offset: 4px;
}

/* Small screens get gentler distances and no perpetual image drift. */
@media (max-width: 782px) {
	.chronicle-motion-item { translate: 0 20px; }
	.chronicle-motion-item[data-motion="left"],
	.chronicle-motion-item[data-motion="right"] { translate: 0 20px; }
	.chronicle-motion-ready .chronicle-hero-enter { translate: 0 16px; }
	.chronicle-motion-ready .chronicle-hero-media img { animation: none; }
}
@media (max-width: 782px) {
	/* The fixed progress line competes with the iPhone browser chrome and sticky header. */
	.chronicle-page-progress { display: none; }

	/* Give mobile visitors more reading space while keeping navigation close at hand. */
	.chronicle-header {
		transition: transform .32s var(--chronicle-motion-ease);
		will-change: transform;
	}
	.chronicle-header.chronicle-header-hidden {
		transform: translateY(calc(-100% - 18px));
	}
	.chronicle-header:has(.chronicle-mobile[open]) {
		transform: translateY(0);
	}
}

/* No content is hidden and no continuous movement runs when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	.chronicle-page-progress { display: none; }
	.chronicle-motion-ready .chronicle-hero-enter,
	.chronicle-motion-ready .chronicle-hero-media img,
	.chronicle-motion-item,
	.chronicle-motion-item[data-motion] {
		opacity: 1 !important;
		translate: none !important;
		scale: 1 !important;
		rotate: 0deg !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}