/**
 * Atlas Labs — Homepage
 *
 * Layout only for the 11 front-page sections defined in
 * STORE_ARCHITECTURE.md#homepage-architecture. Typography, buttons,
 * badges, alerts, cards, and forms are never redefined here — every
 * section composes the existing utility/component classes from
 * typography.css, buttons.css, status.css, and cards.css. This file
 * only positions and spaces those pieces.
 *
 * Conditionally enqueued on the front page only — see
 * inc/enqueue.php.
 */

/* ---------------------------------------------------------------
 * Scroll reveal
 * Scoped under .al-js (set by an inline script in header.php) so
 * content is never hidden if JavaScript fails to load — the
 * unscoped .al-reveal element is visible and unanimated by default,
 * per the progressive-enhancement principle in
 * CODING_STANDARDS.md#javascript-standards.
 * ------------------------------------------------------------- */

.al-js .al-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--duration-slow) var(--easing-decelerate),
		transform var(--duration-slow) var(--easing-decelerate);
}

.al-js .al-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

.al-js .al-reveal--delay-1.is-revealed {
	transition-delay: 80ms;
}

.al-js .al-reveal--delay-2.is-revealed {
	transition-delay: 160ms;
}

.al-js .al-reveal--delay-3.is-revealed {
	transition-delay: 240ms;
}

/* Staggered group reveal: the container is observed (see
   scroll-reveal.js), its direct children fade/lift in sequence. The
   80ms cadence matches the block-level --delay-* steps above; capped
   at eight children — anything later arrives with the eighth, which
   on a 4-per-row grid is already below the fold moment that matters.

   A one-shot animation (not a transition) on purpose: several
   staggered children (product cards, category tiles) carry their own
   hover transitions, and a lingering transition-delay on the same
   element would also delay every later hover response. An animation
   plays once and gets out of the way; `backwards` fill keeps the
   child at the keyframe's from-state during its delay. Reduced
   motion: base.css collapses all animation to 0.01ms globally, and
   scroll-reveal.js reveals everything immediately in that case.
   Same no-JS guarantee as .al-reveal: without .al-js nothing is ever
   hidden. */
.al-js .al-reveal-stagger > * {
	opacity: 0;
}

.al-js .al-reveal-stagger.is-revealed > * {
	opacity: 1;
	animation: al-reveal-in var(--duration-slow) var(--easing-decelerate) backwards;
}

.al-js .al-reveal-stagger.is-revealed > *:nth-child(2) {
	animation-delay: 80ms;
}

.al-js .al-reveal-stagger.is-revealed > *:nth-child(3) {
	animation-delay: 160ms;
}

.al-js .al-reveal-stagger.is-revealed > *:nth-child(4) {
	animation-delay: 240ms;
}

.al-js .al-reveal-stagger.is-revealed > *:nth-child(5) {
	animation-delay: 320ms;
}

.al-js .al-reveal-stagger.is-revealed > *:nth-child(6) {
	animation-delay: 400ms;
}

.al-js .al-reveal-stagger.is-revealed > *:nth-child(7) {
	animation-delay: 480ms;
}

.al-js .al-reveal-stagger.is-revealed > *:nth-child(n+8) {
	animation-delay: 560ms;
}

@keyframes al-reveal-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------------------------------------------------------------
 * Shared section header
 * Used at the top of every homepage section for the eyebrow /
 * heading / lede triplet.
 * ------------------------------------------------------------- */

.al-home-section__header {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--space-48);
}

@media (min-width: 1280px) {
	.al-home-section__header {
		margin-bottom: var(--space-64);
	}
}

.al-home-section__header--left {
	margin-inline: 0;
	text-align: left;
}

.al-home-eyebrow {
	display: block;
	margin-bottom: var(--space-16);
}

.al-home-lede {
	margin-top: var(--space-16);
}

/* ---------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------- */

/* Deepest surface in the system — the hero (and its pinned 3D vial
   stage) sits one step below the page background so the lit vial pops
   against true near-black. */
.al-home-hero {
	padding-block: var(--space-80);
	background-color: var(--color-bg-hero);
}

/* Phone widths: the 80px hero padding stacks with the collapsed
   (non-runway) visual and pushes real content a full screen down —
   tighten to the subsection step. */
@media (max-width: 767px) {
	.al-home-hero {
		padding-block: var(--space-48);
	}
}

@media (min-width: 1024px) {
	.al-home-hero {
		/* Trimmed from space-120 (founder feedback, 2026-07-12): with
		   the pinned 3D stage below already claiming most of a laptop
		   viewport before its runway even starts, the extra hero
		   padding on top of that pushed the rest of the homepage well
		   past the first scroll. */
		padding-block: var(--space-64);
	}
}

.al-home-hero__grid {
	display: grid;
	gap: var(--space-48);
	align-items: center;
}

@media (min-width: 1024px) {
	.al-home-hero__grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--space-64);
	}
}

.al-home-hero__inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 1024px) {
	.al-home-hero__inner {
		margin-inline: 0;
		text-align: left;
	}
}

.al-home-hero__eyebrow {
	display: block;
	margin-bottom: var(--space-24);
}

.al-home-hero__lede {
	margin-top: var(--space-24);
	max-width: 60ch;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.al-home-hero__lede {
		margin-inline: 0;
	}
}

.al-home-hero__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-40);
}

@media (min-width: 1024px) {
	.al-home-hero__actions {
		justify-content: flex-start;
	}
}

.al-home-hero__visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.al-home-hero__vial {
	width: 100%;
	max-width: 280px;
	height: auto;
}

@media (min-width: 1024px) {
	.al-home-hero__vial {
		max-width: 380px;
	}
}

/* ---------------------------------------------------------------
 * 3D hero vial — scroll runway (see hero-3d.js)
 *
 * Mobile/tablet: the runway collapses to the visual's own height —
 * no scroll-jacking on smaller screens, both for feel (a long pinned
 * scroll reads as broken on a phone) and performance (skip the extra
 * WebGL cost on the devices least able to spare it). hero-3d.js
 * still runs there, it just has no runway distance to animate across,
 * so the vial renders in its start orientation and stays put.
 *
 * Desktop: the runway adds real scroll distance for the animation to
 * play out across; .al-home-hero__3d-stage stays pinned via
 * position: sticky (no JS required for the pinning itself, only for
 * driving the 3D rotation/scale within it) until the runway is
 * exhausted, then it releases and the rest of the page continues
 * normally beneath it.
 * ------------------------------------------------------------- */

@media (min-width: 1024px) {
	/* Shortened from 180vh (founder feedback, 2026-07-12): the full
	   rotation only needs enough scroll distance to feel deliberate,
	   not to consume two full screens of scrolling before the rest of
	   the homepage appears. */
	.al-home-hero__3d-runway {
		height: 130vh;
	}

	/* Capped below 100vh so the pinned stage never fully owns the
	   viewport — the next section is always peeking at the bottom
	   edge, signaling there's more page before the runway even starts. */
	.al-home-hero__3d-stage {
		position: sticky;
		top: 0;
		height: min(100vh, 760px);
	}
}

.al-home-hero__3d-stage--active .al-home-hero__vial {
	display: none;
}

.al-home-hero__3d-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
 * 2. Atlas Labs Philosophy
 * ------------------------------------------------------------- */

.al-home-philosophy__inner {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.al-home-philosophy__heading {
	margin-top: var(--space-16);
}

.al-home-philosophy__statement {
	margin-top: var(--space-24);
}

/* ---------------------------------------------------------------
 * 3. Product Quality
 * ------------------------------------------------------------- */

.al-home-quality__grid {
	display: grid;
	gap: var(--space-32);
	align-items: center;
}

@media (min-width: 1024px) {
	.al-home-quality__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-64);
	}
}

.al-home-quality__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background-color: var(--color-bg-secondary);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.al-home-quality__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.al-home-quality__image-mark {
	width: 88px;
	height: 88px;
	color: var(--color-border-secondary);
}

.al-home-quality__image-mark svg {
	width: 100%;
	height: 100%;
}

.al-home-quality__heading {
	margin-top: var(--space-16);
	margin-bottom: var(--space-24);
}

/* ---------------------------------------------------------------
 * 4. Scientific Standards
 * ------------------------------------------------------------- */

.al-home-standards__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-16);
}

@media (min-width: 768px) {
	.al-home-standards__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-24);
	}
}

/* Lighter tiles floating on the section's darker panel — the same
   surfaces-get-lighter-as-they-come-forward ladder as the page-level
   panels. radius-lg per DESIGN_SYSTEM.md ("elevated panels"); a
   hairline border reinforces the step on dark, where the fill
   difference alone is subtle. */
.al-home-standards__item {
	text-align: center;
	background-color: var(--color-surface-primary);
	border: var(--border-width-standard) solid var(--color-border-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-32) var(--space-24);
}

.al-home-standards__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-16);
	color: var(--color-text-primary);
}

.al-home-standards__title {
	margin-bottom: var(--space-8);
}

/* ---------------------------------------------------------------
 * 5. Third-Party Testing
 * ------------------------------------------------------------- */

.al-home-testing__inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.al-home-testing__heading {
	margin-top: var(--space-16);
}

.al-home-testing__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
	margin-top: var(--space-24);
}

.al-home-testing__lede {
	margin-top: var(--space-24);
}

.al-home-testing__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-32);
}

/* EXPERIMENTAL — light-block A/B test (founder request, 2026-07-17).
   Moved here from the hero (see git history/commit 3cb33ad) after
   discussion: the hero was the one section ADR 0003 specifically
   credits for the dark conversion's payoff ("the 3D hero vial reads
   dramatically against the near-black hero surface"), so testing the
   light treatment there gave up that section's whole reason for being
   dark. Trust/Testing has no such attachment to the dark surface and
   sits lower in the scroll, so alternating it works as a pacing device
   rather than undercutting the opening moment. Scoped entirely to
   .al-home-testing and its own children — reverting is one step:
   delete this rule block (and, if fully abandoned, the
   --color-bg-inverse token in tokens.css).
   The neutral badges (US Fulfilled, the RUO notice) are genuinely
   untouched — .al-badge--research-use-only/--us-fulfilled render on an
   opaque #27272B fill (see status.css), so they read as a dark chip
   regardless of page background. The three status-tinted badges here
   (Third Party Tested, COA Available — .al-badge--third-party-tested/
   --coa-available) are NOT opaque, though: color-badge-success-* is a
   14%-opacity green tint plus a matching light-green text color, both
   tuned for legibility against the dark page — confirmed live the
   unmodified pairing computes to a 1.67:1 contrast ratio against this
   section's light background (WCAG AA needs 4.5:1 for text). Overridden
   below with a darker green (still contrast-checked, 6.67:1) and a
   stronger tint so the chip stays visible. The secondary button (unlike
   the hero's primary button) is normally transparent with light text
   and a dark hover fill, both invisible on a light section — overridden
   below for its default and hover state too. */
.al-home-testing {
	background-color: var(--color-bg-inverse);
}

.al-home-testing .al-text-label,
.al-home-testing__heading,
.al-home-testing__lede {
	color: var(--color-bg-primary);
}

.al-home-testing .al-badge--third-party-tested,
.al-home-testing .al-badge--coa-available {
	background-color: rgba(127, 191, 131, 0.22);
	color: #1F5C24;
	border-color: rgba(31, 92, 36, 0.4);
}

.al-home-testing .al-button--secondary {
	color: var(--color-bg-primary);
}

.al-home-testing .al-button--secondary:hover:not(:disabled) {
	background-color: rgba(19, 19, 21, 0.08);
}

/* ---------------------------------------------------------------
 * 5b. Product Quality Guarantee
 * ------------------------------------------------------------- */

.al-home-guarantee__inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.al-home-guarantee__heading {
	margin-top: var(--space-16);
}

.al-home-guarantee__lede {
	margin-top: var(--space-24);
}

.al-home-guarantee__card {
	max-width: 480px;
	margin: var(--space-40) auto 0;
	padding: var(--space-40);
}

@media (max-width: 599px) {
	.al-home-guarantee__card {
		max-width: none;
		margin-inline: var(--space-16);
		padding: var(--space-24);
	}
}

.al-home-guarantee__card-label {
	display: block;
}

.al-home-guarantee__card-statement {
	margin-top: var(--space-16);
	overflow-wrap: break-word;
	background-image: var(--gradient-silver);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.al-home-guarantee__card-caption {
	margin-top: var(--space-8);
}

/* ---------------------------------------------------------------
 * 6. Featured Products
 * ------------------------------------------------------------- */

.al-home-featured__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--space-40);
}

/* ---------------------------------------------------------------
 * 7. Product Categories
 * ------------------------------------------------------------- */

/* auto-fit rather than a fixed column count: with only 1-2 categories
   populated so far, a fixed 3-column grid would leave an awkward
   half-empty row. auto-fit + a capped track width instead creates as
   many centered columns as actually fit, so 2 tiles read as a
   deliberate, generously-sized pair rather than sparse leftovers —
   and it scales cleanly to 3+ once more categories have products. */
.al-home-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
	justify-content: center;
	gap: var(--space-16);
}

@media (min-width: 768px) {
	.al-home-categories__grid {
		gap: var(--space-24);
	}
}

/* Composes .al-card / .al-card--interactive (background, border,
   radius, hover lift) — only tile-specific layout lives here. */
.al-home-category-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
	padding: var(--space-24);
	overflow: hidden;
}

.al-home-category-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.al-home-category-tile__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, var(--color-overlay-scrim), transparent 60%);
}

.al-home-category-tile__name {
	position: relative;
	z-index: 1;
	margin-bottom: var(--space-4);
}

/* Text over the photo scrim needs the LIGHT color; on the dark palette
   that's text-primary (bg-primary is now near-black and would vanish
   into the scrim gradient). */
.al-home-category-tile--has-image .al-home-category-tile__name {
	color: var(--color-text-primary);
}

/* ---------------------------------------------------------------
 * 8. Research Transparency
 * ------------------------------------------------------------- */

.al-home-transparency__inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.al-home-transparency__heading {
	margin-top: var(--space-16);
}

.al-home-transparency__lede {
	margin-top: var(--space-24);
}

.al-home-transparency__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-32);
}

/* ---------------------------------------------------------------
 * 9. Why Atlas Labs
 * ------------------------------------------------------------- */

.al-home-why__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-16);
}

@media (min-width: 768px) {
	.al-home-why__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-24);
	}
}

/* Elevated tiles on the page background — same floating-card
   language as the section panels, one size down; hairline border for
   the dark-palette elevation cue. */
.al-home-why__item {
	background-color: var(--color-bg-secondary);
	border: var(--border-width-standard) solid var(--color-border-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-32) var(--space-24);
}

.al-home-why__index {
	display: block;
	margin-bottom: var(--space-16);
	color: var(--color-text-muted);
}

.al-home-why__title {
	margin-bottom: var(--space-8);
}

/* EXPERIMENTAL — light-block A/B test, second instance (founder
   request, 2026-07-17; first instance is Trust/Testing above). Scoped
   to .al-home-why and its own children — revert is one step: delete
   this block.
   Unlike Trust/Testing, the four value tiles (.al-home-why__item)
   need no color override at all: they already carry their own
   --color-bg-secondary dark fill with light text, completely
   independent of the section background (see the tile rule above).
   Left alone, they read as dark accent cards floating on the new
   light section — both palette directions in one place — rather than
   needing to be inverted along with everything else. Only the section
   header (eyebrow + h2), which sits directly on the section background
   with no card of its own, needs its color flipped. */
.al-home-why {
	background-color: var(--color-bg-inverse);
}

.al-home-why .al-home-eyebrow,
.al-home-why h2 {
	color: var(--color-bg-primary);
}

/* ---------------------------------------------------------------
 * 10. FAQ
 * ------------------------------------------------------------- */

/* The list sits as a white card on the section's gray panel, with
   hairline dividers between items (and none after the last — the
   card edge already closes the list). */
.al-home-faq__list {
	max-width: 760px;
	margin-inline: auto;
	background-color: var(--color-surface-primary);
	border: var(--border-width-standard) solid var(--color-border-primary);
	border-radius: var(--radius-lg);
	padding-inline: var(--space-24);
}

@media (min-width: 768px) {
	.al-home-faq__list {
		padding-inline: var(--space-32);
	}
}

.al-home-faq-item {
	border-bottom: var(--border-width-standard) solid var(--color-divider-default);
}

.al-home-faq-item:last-child {
	border-bottom: none;
}

.al-home-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding-block: var(--space-20);
	font-family: var(--font-family-base);
	font-size: var(--type-h4-size);
	font-weight: var(--type-h4-weight);
	color: var(--color-text-primary);
	cursor: pointer;
	list-style: none;
	transition: color var(--duration-fast) var(--easing-standard);
}

.al-home-faq-item__question:hover {
	color: var(--color-text-secondary);
}

.al-home-faq-item__question:hover .al-home-faq-item__icon {
	color: var(--color-text-primary);
}

.al-home-faq-item__question::-webkit-details-marker {
	display: none;
}

/* The icon is atlaslabs_icon('close') — an X shape — rotated 45deg at
   rest so it reads as "+" (expand); opening the item rotates it back
   to the unrotated X ("click to collapse"). */
.al-home-faq-item__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-text-secondary);
	transform: rotate(45deg);
	transition: transform var(--duration-standard) var(--easing-standard);
}

.al-home-faq-item[open] .al-home-faq-item__icon {
	transform: rotate(0deg);
}

.al-home-faq-item__answer {
	padding-bottom: var(--space-20);
	max-width: 65ch;
}

.al-home-faq__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--space-40);
}

/* ---------------------------------------------------------------
 * 11. Call to Action
 * ------------------------------------------------------------- */

.al-home-cta__inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.al-home-cta__lede {
	margin-top: var(--space-16);
}

.al-home-cta__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-32);
}

/* ---------------------------------------------------------------
 * Phone widths (≤479px) — the 2-column tile grids leave ~160px per
 * tile on a 375px screen; 32/24px internal padding starves the
 * content. One padding step down keeps the tiles readable without
 * collapsing the grids to a single tall column.
 * ------------------------------------------------------------- */

@media (max-width: 479px) {
	.al-home-standards__item,
	.al-home-why__item {
		padding: var(--space-24) var(--space-16);
	}
}