@charset "UTF-8";

/* ==========================================================================
   hero.css - homepage carousel: a full content-width band above the work
   grid. Slides are built by js/home.js from img/hero/hero.json (a random
   handful per visit). Pure CSS transitions, no library.
   ========================================================================== */

.hero {
	position: relative;
	margin: 22px 0 30px;
	overflow: hidden;
	background: var(--img-ph);
}

.hero__track {
	display: flex;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.hero__slide {
	position: relative;
	flex: 0 0 100%;
	display: block;
	aspect-ratio: 1400 / 600;
	color: #fff;
	text-decoration: none;
}

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	padding: 64px 22px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

.hero__title {
	font-family: var(--sans);
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1.2;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.hero__view {
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	padding-bottom: 4px;
	opacity: 0;
	transition: opacity .18s ease;
}

.hero:hover .hero__view,
.hero__slide:focus-visible .hero__view {
	opacity: .9;
}

/* ---- arrows ---- */

.hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .32);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease, background .18s ease;
}

.hero:hover .hero__arrow,
.hero__arrow:focus-visible {
	opacity: 1;
}

.hero__arrow:hover {
	background: rgba(0, 0, 0, .55);
}

.hero__arrow--prev {
	left: 12px;
}

.hero__arrow--next {
	right: 12px;
}

/* ---- autoplay progress bar ---- */

.hero__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255, 255, 255, .16);
	overflow: hidden;
	opacity: 0;
	transition: opacity .2s ease;
}

.hero--auto .hero__bar {
	opacity: 1;
}

.hero__bar > i {
	display: block;
	height: 100%;
	background: rgba(255, 255, 255, .85);
	transform: scaleX(0);
	transform-origin: left;
}

.hero--auto .hero__bar > i {
	animation: heroBar var(--hero-delay, 6000ms) linear both;
}

@keyframes heroBar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__bar { display: none; }
}

/* ---- dots ---- */

.hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.hero__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.hero__dot.is-on {
	background: #fff;
	transform: scale(1.3);
}

@media (hover: none) {
	.hero__arrow { display: none; }
}

@media screen and (max-width: 700px) {
	.hero { margin: 16px 0 22px; }
	.hero__slide { aspect-ratio: 3 / 2; }
	.hero__cap { padding: 48px 16px 16px; }
	.hero__title { font-size: 1.05rem; }
	.hero__view { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__track { transition: none; }
}