/*
 * Motion and interaction for the home page.
 *
 * Loaded after style.css and nav.css. It adds behaviour, not design: the hero
 * settling into place, blocks arriving as they are reached, the rule that fills
 * above the written process, a tickable enquiry checklist, and two pieces of
 * furniture (the reading-progress rule at the top of the window and a "back to
 * top" control).
 *
 * Same rules as the rest of the theme: every colour, size and duration is a
 * token in the block below and a literal appears nowhere else, and every value
 * that is a colour or a size comes from style.css.
 *
 * Nothing here is load-bearing. Delete this file and the page is complete, just
 * still: nothing is hidden unless home.js has run and decided the block is
 * below the fold, and style.css already flattens every duration for a reader
 * who has asked for reduced motion.
 */

/* ===========================================================================
 * 1. Tokens for the interaction layer
 * ========================================================================= */

:root {
	/* --- timing ------------------------------------------------------- */
	--motion-quick: 140ms;          /* colour and border answers */
	--motion-base: 320ms;           /* a surface lifting, a rule turning */
	--motion-slow: 620ms;           /* a block arriving */
	--motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* How far an arriving block travels, and how far apart siblings start. */
	--reveal-shift: 16px;
	--reveal-step: 70ms;

	/* --- the enquiry checklist ---------------------------------------- */
	--ready-box: 1.25rem;           /* the tick box */
	--ready-tick: 2px;              /* the stroke of the tick */
	--ready-hover: rgba(255, 255, 255, 0.06);   /* row tint, dark bands only */

	/* --- the reading-progress rule ------------------------------------ */
	--meter-height: 2px;
}

/* ===========================================================================
 * 2. The hero settles into place
 *
 * CSS only, so it is right on the first paint and needs no script. `both`
 * holds the opening frame through the delay, and a browser that never runs the
 * animation simply shows the text.
 * ========================================================================= */

@keyframes samgo-rise {
	from {
		opacity: 0;
		transform: translateY(var(--reveal-shift));
	}

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

@keyframes samgo-nudge {
	0%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-3px);
	}
}

.home .hero__copy > *,
.home .spec-panel__item {
	animation: samgo-rise var(--motion-slow) var(--motion-ease) both;
}

.home .hero__copy > :nth-child(1) {
	animation-delay: 40ms;
}

.home .hero__copy > :nth-child(2) {
	animation-delay: 120ms;
}

.home .hero__copy > :nth-child(3) {
	animation-delay: 200ms;
}

.home .hero__copy > :nth-child(4) {
	animation-delay: 280ms;
}

.home .spec-panel__item:nth-child(1) {
	animation-delay: 380ms;
}

.home .spec-panel__item:nth-child(2) {
	animation-delay: 450ms;
}

.home .spec-panel__item:nth-child(3) {
	animation-delay: 520ms;
}

.home .spec-panel__item:nth-child(4) {
	animation-delay: 590ms;
}

.home .spec-panel__item:nth-child(5) {
	animation-delay: 660ms;
}

.home .spec-panel__item:nth-child(6) {
	animation-delay: 730ms;
}

/* ===========================================================================
 * 3. Blocks that arrive as they are reached
 *
 * `.js-reveal` is put on an element by home.js, and only ever on one that is
 * below the fold at load, so the hidden frame can never be seen. home.js
 * removes both classes when the block has arrived, which leaves the hover
 * rules further down free to own the transform.
 * ========================================================================= */

.home .js-reveal {
	opacity: 0;
	transform: translateY(var(--reveal-shift));
	transition:
		opacity var(--motion-slow) var(--motion-ease),
		transform var(--motion-slow) var(--motion-ease);
	transition-delay: var(--d, 0ms);
}

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

/* ===========================================================================
 * 4. Surfaces answer the pointer
 * ========================================================================= */

.home .btn {
	transition:
		background-color var(--motion-quick) var(--motion-ease),
		border-color var(--motion-quick) var(--motion-ease),
		color var(--motion-quick) var(--motion-ease);
}

/* Only the cards that lead somewhere lift. A card with no link in it staying
   still is the honest answer. */
.home .card:has(a) {
	transition:
		border-color var(--motion-quick) var(--motion-ease),
		box-shadow var(--motion-base) var(--motion-ease),
		transform var(--motion-base) var(--motion-ease);
}

.home .card:has(a):hover,
.home .card:has(a):focus-within {
	border-color: var(--accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.home .product-card__media {
	overflow: hidden;
}

.home .product-card__media img {
	transition: transform var(--motion-slow) var(--motion-ease);
}

.home .product-card__media:hover img,
.home .product-card__media:focus-visible img {
	transform: scale(1.04);
}

.home .chips a {
	transition:
		color var(--motion-quick) var(--motion-ease),
		border-color var(--motion-quick) var(--motion-ease),
		background-color var(--motion-quick) var(--motion-ease);
}

.home .chips a:hover,
.home .chips a:focus {
	border-color: var(--accent);
	color: var(--accent);
}

/* ===========================================================================
 * 5. The written process fills as it is read
 *
 * A rule sits above the steps and fills left to right as the section passes
 * through the window; each step's own rule turns accent as it is passed. Both
 * follow the scroll directly rather than animating after it.
 * ========================================================================= */

.home .steps-box {
	position: relative;
	padding-top: var(--space-md);
}

.home .steps-rail {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--line);
	overflow: hidden;
}

.home .steps-rail__fill {
	display: block;
	height: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
}

.home .steps li {
	transition: border-color var(--motion-base) var(--motion-ease);
}

.home .steps li.is-reached {
	border-top-color: var(--accent);
}

.home .steps__num {
	transition: color var(--motion-base) var(--motion-ease);
}

.home .steps li.is-reached .steps__num {
	color: var(--accent);
}

/* ===========================================================================
 * 6. The enquiry checklist
 *
 * The `.ready` class is added by home.js at the same moment it rebuilds the
 * list, so a browser without script keeps the plain tick list it was served.
 * The colours are all `currentColor`, `--accent` or `--on-accent`, so this
 * reads on the dark band and would still read if the band ever turned light.
 * ========================================================================= */

.home .cta .ticks.ready {
	display: grid;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home .cta .ticks.ready li {
	margin: 0;
	padding: 0;
}

.home .cta .ticks.ready li::before {
	content: none;
}

.home .ready-box {
	display: grid;
	gap: var(--space-md);
	align-content: start;
}

.home .ready__label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	min-height: var(--tap);
	padding: var(--space-2xs) var(--space-xs);
	margin-inline: calc(var(--space-xs) * -1);
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color var(--motion-quick) var(--motion-ease);
}

.home .ready__label:hover {
	background: var(--ready-hover);
}

/* Kept in the tab order and out of sight: a real checkbox, so the keyboard and
   a screen reader both get the behaviour they expect. */
.home .ready__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.home .ready__box {
	position: relative;
	flex: 0 0 auto;
	width: var(--ready-box);
	height: var(--ready-box);
	margin-top: 0.125rem;
	border: 1px solid currentColor;
	border-radius: var(--radius);
	transition:
		background-color var(--motion-quick) var(--motion-ease),
		border-color var(--motion-quick) var(--motion-ease);
}

/* The tick is drawn, not typed, and its geometry is a share of the box so it
   follows the box if the owner changes --ready-box. */
.home .ready__box::after {
	content: "";
	position: absolute;
	left: 30%;
	top: 10%;
	width: 30%;
	height: 62%;
	border: solid var(--on-accent);
	border-width: 0 var(--ready-tick) var(--ready-tick) 0;
	opacity: 0;
	transform: rotate(45deg) scale(0.5);
	transition:
		opacity var(--motion-quick) var(--motion-ease),
		transform var(--motion-quick) var(--motion-ease);
}

.home .ready__input:checked + .ready__box {
	background: var(--accent);
	border-color: var(--accent);
}

.home .ready__input:checked + .ready__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.home .ready__input:focus-visible + .ready__box {
	outline: 2px solid var(--accent-bright);
	outline-offset: 2px;
}

.home .ready__count {
	margin: 0;
	color: inherit;
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

/* Everything ready: the quotation button is where the reader should be
   looking, so it says so once. */
.home .cta__inner.is-complete .cta__actions .btn--primary {
	box-shadow: 0 0 0 4px var(--accent-soft);
	animation: samgo-nudge var(--motion-slow) var(--motion-ease) 1;
}

/* ===========================================================================
 * 7. Furniture
 *
 * The rule and the button are put in the page by home.js and only on the home
 * page, so neither needs a home-page ancestor to be scoped to.
 * ========================================================================= */

.scroll-meter {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--meter-height);
	overflow: hidden;
	pointer-events: none;
	background: var(--line-dark);
}

.scroll-meter span {
	display: block;
	height: 100%;
	background: var(--accent-bright);
	transform: scaleX(0);
	transform-origin: left center;
}

.site-header {
	transition: box-shadow var(--motion-base) var(--motion-ease);
}

.site-header.is-condensed {
	box-shadow: var(--shadow-md);
}

.to-top {
	position: fixed;
	right: var(--gutter);
	bottom: var(--gutter);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: var(--tap);
	padding: 0 var(--space-sm);
	border: var(--hairline);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-md);
	font-family: var(--font-mono);
	font-size: var(--text-label);
	line-height: var(--lh-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--motion-base) var(--motion-ease),
		transform var(--motion-base) var(--motion-ease),
		visibility var(--motion-base) var(--motion-ease);
}

.to-top::before {
	content: "\2191";
}

.to-top.is-shown,
.to-top:focus-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.to-top:hover {
	border-color: var(--accent);
	color: var(--accent);
}