/*
 * Home page: slideshow hero, Selected Work, Featured In.
 * Source: design-reference/source/Home.dc.html.
 * Tokens only (tokens.css); logical properties only, so Hebrew mirrors.
 * Mobile first: tablet from 768px, desktop from 1024px.
 * The see-through header is in layout.css; motion scripts in assets/js/home.js.
 */

/* ============ Hero ============ */

.hero {
	position: relative;
	height: 82vh;
	min-height: 400px;
	overflow: hidden; /* The photos recede behind the next section while scrolling. */
	background: var(--c-footer-bg); /* Shown only when there are no slideshow photos. */
}

/* Phones: 82vh is measured as if the browser's toolbars were hidden, so the
   hero ran down under the floating accessibility button (bottom 16px, 48px
   tall) and the pause button overlapped it. Keep the hero's end at least 72px
   above the visible bottom (svh = the screen with toolbars showing). */
@media (max-width: 767.98px) {
	.hero {
		height: min(82vh, calc(100svh - 72px));
	}
}

.hero__media,
.hero__zoom {
	position: absolute;
	inset: 0;
}

.hero__media {
	will-change: transform;
}

.hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero__slide.is-active {
	opacity: 1;
}

/* Darkens the photos evenly, for the header and the text (Tamar, 2026-10-22: solid 24%, was a gradient). */
.hero__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: color-mix(in srgb, var(--c-footer-bg) 24%, transparent);
}

.hero__text {
	text-shadow: var(--shadow-on-photo);
	position: absolute;
	inset-inline-start: var(--page-pad-x);
	inset-block-end: 28px;
	max-width: calc(100% - 2 * var(--page-pad-x));
	color: var(--c-white);
	will-change: transform, opacity;
}

/* Pause / play for the slideshow (accessibility), in the corner opposite the text.
   Hidden until home.js shows it (only when the slideshow actually runs). */
.hero__pause {
	position: absolute;
	z-index: 2;
	inset-inline-end: var(--page-pad-x);
	inset-block-end: 28px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0; /* no ring: it competed with the accessibility button (Tamar) */
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-footer-bg) 25%, transparent);
	color: var(--c-white);
	cursor: pointer;
	transition: background-color var(--dur-fast), color var(--dur-fast);
}

.hero__pause[hidden] {
	display: none;
}

.hero__pause:hover {
	background: var(--c-white);
	color: var(--c-text);
}

.hero__pause:focus-visible {
	outline-color: var(--c-white);
}

.hero__pause-icon {
	display: flex;
}

.hero__pause-icon--play,
.hero__pause.is-paused .hero__pause-icon--pause {
	display: none;
}

.hero__pause.is-paused .hero__pause-icon--play {
	display: flex;
}

/* Bold, no glow; on phones body size, from tablet up 2px
   bigger than the design (Tamar, 2026-09-24). */
.hero__eyebrow {
	margin: 0 0 14px;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-shadow: none;
	letter-spacing: var(--tracking-eyebrow-wide);
	line-height: 1.2;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-white) 73%, transparent);
}

.hero__title {
	margin: 0 0 10px;
	font-size: 34px;
	font-weight: var(--fw-bold);
	letter-spacing: -1px;
	line-height: 1;
	color: var(--c-white);
}

.hero__tagline {
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.4;
	color: var(--c-white);
	text-wrap: balance; /* no lone word on a line of its own */
}

.hero__button {
	display: inline-block;
	padding: 13px 22px;
	border: 1px solid var(--c-white);
	font-size: 14px;
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--c-white);
	transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.hero__button:hover {
	background: var(--c-white);
	color: var(--c-text);
	text-shadow: none;
}

.hero__button:focus-visible {
	outline-color: var(--c-white);
}

/* ============ First-visit intro ============
   A cream veil fades away, the photos settle from 110%, the text rises in one
   line after another. Skipped on later visits (html.no-intro, set in
   inc/assets.php) and when the visitor's system asks for reduced motion. */

@keyframes shadmi-veil {
	from { opacity: 1; }
	to { opacity: 0; visibility: hidden; }
}

@keyframes shadmi-settle {
	from { transform: scale(1.1); }
	to { transform: none; }
}

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

.intro-veil {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--c-cream);
	pointer-events: none;
	animation: shadmi-veil 1s var(--ease-out) 0.15s both;
}

.hero__zoom {
	animation: shadmi-settle 3.4s var(--ease-out) both;
}

.hero .rise {
	animation: shadmi-rise 0.9s var(--ease-out) both;
}

.hero__eyebrow.rise { animation-delay: 0.75s; }
.hero__title.rise { animation-delay: 0.85s; }
.hero__tagline.rise { animation-delay: 1s; }
.hero__button.rise { animation-delay: 1.15s; }

.no-intro .intro-veil {
	display: none;
}

.no-intro .hero__zoom,
.no-intro .hero .rise {
	animation: none;
}

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

	.hero__zoom,
	.hero .rise {
		animation: none;
	}
}

/* ============ Selected Work ============ */

.selected-work {
	padding-block: 40px; /* phones: room under the All Projects button */
}

.selected-work__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 24px;
}

.selected-work__title {
	margin: 0;
	font-size: 24px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
}

.selected-work__all {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-body);
}

/* Home cards are landscape (4:3) and closer together than on the Projects page. */
.project-grid--home {
	gap: 18px;
}

/* Phones: the "All Projects" link becomes a full-width outline button under the
   cards (Tamar's option A); from tablet up it's the small link in the heading. */
.selected-work__all {
	display: none;
}

.selected-work__button {
	display: block;
	margin-block-start: 28px;
	text-align: center;
}

.project-grid--home .project-card__image {
	aspect-ratio: 4 / 3;
}

/* ============ Featured In ============ */

.featured-in {
	padding: 40px var(--page-pad-x);
	background: var(--c-sand);
}

.featured-in__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 18px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Each logo links to the Press page; faded, full strength on hover. */
.featured-in__logos a {
	display: block;
	opacity: 0.5;
	transition: opacity var(--dur-fast);
}

.featured-in__logos a:hover {
	opacity: 1;
}

.featured-in .outlet-logo {
	width: auto; /* Keep the logo's own shape; only the height is set. */
	max-width: 200px;
	object-fit: contain;
	filter: grayscale(1);
}

/* Moving (home.js, when motion is allowed): one long row — the logos plus
   copies of them — that slides sideways with the page scroll. */
.featured-in.is-moving {
	overflow: hidden;
}

.featured-in__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.featured-in.is-moving .featured-in__logos {
	flex-wrap: nowrap;
	flex-shrink: 0;
	max-width: none;
	margin: 0;
	padding-inline-end: var(--logos-gap, 18px); /* same gap between the copies */
	column-gap: var(--logos-gap, 18px);
}

.featured-in.is-moving .featured-in__logos li {
	flex-shrink: 0;
}

/* Sizes chosen per outlet in the admin (Outlets → Logo size). */
.featured-in .outlet-logo--small { height: 30px; }
.featured-in .outlet-logo--medium { height: 56px; }
.featured-in .outlet-logo--large { height: 66px; }

/* ============ Tablet ============ */

@media (min-width: 768px) {
	.hero {
		min-height: 450px;
	}

	.hero__text,
	.hero__pause {
		inset-block-end: 44px;
		max-width: 520px;
	}

	.hero__eyebrow {
		margin-block-end: 18px;
		font-size: calc(var(--fs-button) + 2px);
	}

	.hero__title {
		font-size: 40px;
		letter-spacing: -1.2px;
	}

	.hero__tagline {
		font-size: 19px;
	}

	.hero__button {
		padding: 15px 28px;
		font-size: 15px;
	}

	.selected-work {
		padding-block: 56px 16px;
	}

	.selected-work__all {
		display: inline;
	}

	.selected-work__button {
		display: none;
	}

	.selected-work__head {
		margin-block-end: 34px;
	}

	.selected-work__title {
		font-size: 28px;
	}

	.project-grid--home {
		gap: 18px;
	}

	.featured-in {
		padding-block: 52px;
	}

	.featured-in__logos {
		column-gap: 28px;
	}

	.featured-in {
		--logos-gap: 28px;
	}
}

/* ============ Desktop ============ */

@media (min-width: 1024px) {
	.hero {
		min-height: 480px;
	}

	.hero__text,
	.hero__pause {
		inset-block-end: 56px;
		max-width: 640px;
	}

	.hero__eyebrow {
		font-size: calc(var(--fs-eyebrow) + 2px);
	}

	.hero__title {
		font-size: 46px;
		letter-spacing: -1.4px;
	}

	.hero__tagline {
		font-size: 21px;
	}

	.hero__button {
		padding: 16px 30px;
		font-size: 16px;
	}

	.selected-work {
		padding-block: 48px 40px;
	}

	.selected-work__head {
		margin-block-end: 44px;
	}

	.selected-work__title {
		font-size: 32px;
	}

	.project-grid--home {
		gap: 18px;
	}

	.featured-in {
		padding-block: 64px;
	}

	.featured-in__logos {
		column-gap: 44px;
	}

	.featured-in {
		--logos-gap: 44px;
	}
}