/* Home page only (enqueued on the front page): hero, scroll text bands, "Shop by type" panels.
   Default state is the finished picture; motion only exists inside prefers-reduced-motion: no-preference. */

/* ---------- Smooth scroll (Lenis adds these classes on <html>; rules from lenis.css 1.3.27) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-3) 0; overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.hero__title { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; margin-bottom: 20px; }
/* The cut line under the title: 48px, opens left to right (the title itself never animates; it can be the LCP text). */
.hero__title::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 1rem; background: var(--ink); transform-origin: 0 50%; }
/* Vertical rhythm: title 20, lede 28, search 16, chips 24, trust line 28, then the CTA. */
.hero__lede { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-soft); max-width: 42ch; margin: 0 0 28px; }
.hero__search { max-width: 600px; margin-bottom: 16px; }
/* One row of chips; under 600px the fourth is hidden, under 400px the third too, so chips are never cut (no edge fade). */
.hero__chips { list-style: none; margin: 0 0 24px; padding: 2px; display: flex; flex-wrap: nowrap; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin-inline: -2px; }
.hero__chips::-webkit-scrollbar { display: none; }
.hero__chips li { flex: none; }
@media (max-width: 599px) {
	.hero__chips { gap: 6px; }
	.hero .chip { padding-inline: 0.55rem; font-size: 0.8125rem; }
	.hero__chips li:nth-child(n + 4) { display: none; }
}
/* Phones under 400px: two whole chips (three do not fit the row). */
@media (max-width: 399px) { .hero__chips li:nth-child(n + 3) { display: none; } }
.hero .chip { min-height: 36px; padding: 0.35rem 0.8rem; font-size: 0.875rem; white-space: nowrap; background: var(--bg); }
@media (min-width: 960px) {
	/* Desktop: four chips fit the 5/12 column on one line; a column too narrow for four shows three. */
	.hero__text { container: hero-text / inline-size; }
	.hero__chips { gap: 6px; }
	.hero .chip { padding-inline: 0.65rem; font-size: 0.8125rem; }
	@container hero-text (max-width: 470px) { .hero__chips li:nth-child(n + 4) { display: none; } }
}
/* Trust points: one line of three at 13px; each point keeps its words together, so narrow screens fall to 2 + 1. */
.hero__badges { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.125rem; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.hero__badges li { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.hero__badges .icon { flex: none; width: 16px; height: 16px; }
/* "Works with": partner logos always in their original brand colours (no hover change). */
.works-with { margin: 0 0 28px; }
.works-with__label { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.works-with__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.works-with__list li { display: flex; align-items: center; min-height: 28px; }
.works-with .logo { display: block; height: 22px; }
.works-with .logo svg { display: block; height: 100%; width: auto; }
.works-with .logo--canva { height: 20px; }
.works-with .logo--procreate { height: 18px; }
@media (max-width: 599px) { .works-with__list { gap: 10px 20px; } .works-with .logo { height: 18px; } .works-with .logo--canva { height: 18px; } .works-with .logo--procreate { height: 16px; } }
.hero__actions { margin: 0; }

/* Hero loop video and pause button: desktop + motion allowed only (display set in the media query below). */
.hero__video, .hero__pause { display: none; }
/* Image: phones keep the text first (search stays on screen one); the picture follows as a 16:9 crop, full bleed, no motion. */
/* Height is set directly: a grid item with aspect-ratio would not stretch to full width. */
.hero__media { position: relative; height: min(56.25vw, 260px); margin: 0 calc(-1 * var(--gutter)); background: var(--sand); }
.hero__pic, .hero__img { display: block; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 50% 64%; }
.hero__frame { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; pointer-events: none; }
.hero__frame-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 6; }
.hero__frame-end { stroke: var(--coral); stroke-width: 1.5; fill: none; }
.hero__label { position: absolute; right: 20px; bottom: 20px; padding: 2px 6px; background: var(--ivory); color: var(--ink-soft); font: 500 11px / 1.3 var(--font-body); letter-spacing: 0.02em; }

@media (min-width: 960px) {
	.hero { padding-top: var(--s-4); }
	.hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
	.hero__text { grid-column: 1 / 6; grid-row: 1; align-self: center; min-width: 0; }
	/* 7 columns plus the space right of the container: the picture runs to the window edge. */
	.hero__media {
		grid-column: 6 / 13;
		grid-row: 1;
		align-self: stretch;
		height: auto;
		min-height: 520px;
		max-height: 640px;
		margin: 0 calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2))) 0 0;
	}
	.hero__img { object-position: 32% 58%; }
	.hero__frame { top: 16px; left: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
	.hero__label { right: 24px; bottom: 24px; }
	.hero__frame, .hero__label { z-index: 2; }
}

/* Video sits over the picture (same box, no layout effect); opacity 0 until home.js sees canplay. */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
	.hero__video { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 32% 58%; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
	.hero__video.is-playing { opacity: 1; }
	.hero__pause { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 24px; bottom: 24px; z-index: 3; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0; background: var(--ink); color: var(--ivory); cursor: pointer; }
	.hero__pause[hidden] { display: none; }
	.hero__pause:focus-visible { outline: 0; box-shadow: 0 0 0 2px #F7F4EE, 0 0 0 4px #263638; }
	.hero__pause .hero__ic-play, .hero__pause.is-paused .hero__ic-pause { display: none; }
	.hero__pause.is-paused .hero__ic-play { display: inline; }
	.hero__pause-ic { fill: currentColor; }
}

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
	.hero__title::after { animation: hero-rule 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	/* Load-in: the title shows at once (LCP); lede, search, chips, trust line and CTA rise 8px and fade in, 80 ms apart.
	   fill-mode backwards: once finished no transform is left behind (no stacking context over the live-search list). */
	.hero__step { animation: hero-rise 400ms ease-out backwards; }
	.hero__lede { animation-delay: 120ms; }
	.hero__search { animation-delay: 200ms; }
	.hero__chips { animation-delay: 280ms; }
	.hero__badges { animation-delay: 360ms; }
	.works-with { animation-delay: 400ms; }
	.hero__actions { animation-delay: 440ms; }
	/* The mask rect draws itself (pathLength 1); the dashed line shows through it. */
	.hero__frame-draw { stroke-dasharray: 1; animation: hero-draw 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	.hero__frame-end { stroke-dasharray: 1; animation: hero-draw 300ms ease-out 1400ms both; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hero-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Text bands (flow on their own once home.js adds .is-flowing; static single line otherwise) ---------- */
.text-band { --band-fg: var(--ink); --band-bg: var(--ivory); position: relative; margin-top: var(--s-5); padding-block: var(--s-3); border-block: 1px solid var(--border); background: var(--band-bg); color: var(--band-fg); }
.text-band--ink { --band-fg: var(--ivory); --band-bg: var(--ink); border-color: var(--ink); }
.text-band__clip { overflow: hidden; overflow: clip; min-height: calc(clamp(2.25rem, 1.6rem + 2.4vw, 3rem) * 1.15); }
.text-band__track { display: flex; width: max-content; white-space: nowrap; }
/* About 40 s a lap; one lap = one of the four identical groups (-25%), so the loop has no seam. */
.text-band.is-flowing .text-band__track { animation: band-left 40s linear infinite; will-change: transform; }
.text-band.is-flowing[data-dir="1"] .text-band__track { animation-name: band-right; }
.text-band.is-flowing:hover .text-band__track,
.text-band.is-flowing:focus-within .text-band__track,
.text-band.is-flowing.is-paused .text-band__track,
.text-band.is-flowing.is-away .text-band__track { animation-play-state: paused; }
@keyframes band-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
@keyframes band-right { from { transform: translate3d(-25%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* Pause / play: 24px square in the top right corner; stops every band at once. */
.text-band__toggle { position: absolute; top: 6px; right: 6px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid currentColor; border-radius: 0; background: var(--band-bg); color: var(--band-fg); cursor: pointer; opacity: 0.7; transition: opacity var(--dur) var(--ease); }
.text-band__toggle[hidden] { display: none; }
.text-band__toggle:hover, .text-band__toggle:focus-visible { opacity: 1; }
.text-band__toggle:focus-visible { outline: 2px solid var(--band-fg); outline-offset: 2px; }
.text-band__ic { fill: currentColor; }
.text-band__ic-play, .text-band.is-paused .text-band__ic-pause { display: none; }
.text-band.is-paused .text-band__ic-play { display: inline; }
@media (prefers-reduced-motion: reduce) {
	.text-band__track { animation: none !important; transform: none !important; }
	.text-band__toggle { display: none; }
}
.text-band__group { display: flex; flex: none; align-items: center; }
.text-band__item { font: 700 clamp(2.25rem, 1.6rem + 2.4vw, 3rem) / 1.15 var(--font-head); line-height: 1.15; letter-spacing: -0.02em; }
.text-band__item--outline { color: transparent; -webkit-text-stroke: 1px var(--band-fg); }
.text-band__sep { flex: none; width: 40px; height: 4px; margin-inline: 28px; color: var(--band-fg); }
/* The last band sits directly on the footer. */
.site-main--home > .text-band:last-child { margin-top: var(--s-6); }
.site-main--home:has(> .text-band:last-child) + .site-footer { margin-top: 0; border-top: 0; }

/* ---------- Shop by type: fixed equal panels (hover only changes background, rule and arrow; nothing reflows) ---------- */
.type-panels { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); }
.type-panel { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); background: var(--ivory); transition: background-color var(--dur) var(--ease); }
.type-panel + .type-panel { border-top: 1px solid var(--border); }
.type-panel__art { width: 96px; height: 96px; }
.type-panel__art svg { display: block; width: 100%; height: 100%; }
.type-panel__title { font-size: var(--fs-lg); margin: 0 0 var(--s-1); }
.type-panel__text { margin: 0 0 var(--s-2); color: var(--ink-soft); max-width: 44ch; }
.type-panel__link { display: inline-flex; align-items: center; gap: 0.75rem; font: 700 var(--fs-sm) / 1.4 var(--font-head); text-decoration: none; }
.type-panel__link::after { content: ""; position: absolute; inset: 0; }
.type-panel:hover, .type-panel:focus-within { background: var(--sand); }
.type-panel .go { width: 48px; transform: scaleX(0.667); transform-origin: 0 50%; transition: transform var(--dur) var(--ease); }
.type-panel:hover .go, .type-panel:focus-within .go { transform: scaleX(1); }

@media (min-width: 960px) {
	.type-panels { display: flex; }
	.type-panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); min-height: 440px; padding: var(--s-4); }
	.type-panel + .type-panel { border-top: 0; border-left: 1px solid var(--border); }
	.type-panel__art { width: 168px; height: 168px; }
	.type-panel__body { margin-top: auto; }
}

/* Shop by type motion (home.js arms the list): panels rise 12px and fade in once on screen, 100 ms apart when side
   by side; the illustration outlines draw on in 0.9 s (pathLength 1), then the fills fade in. Hover lifts the illustration 4px. */
.type-panel__art { transition: transform var(--dur) var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.type-panel:hover .type-panel__art { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
	.type-panel { --panel-d: 0ms; }
	.type-panels.is-armed .type-panel { transition: opacity 400ms var(--ease) var(--panel-d), transform 400ms var(--ease) var(--panel-d), background-color var(--dur) var(--ease); }
	.type-panels.is-armed .type-panel:not(.is-in) { opacity: 0; transform: translateY(12px); }
	.type-panels.is-armed .type-panel.is-in path { animation: panel-draw 1200ms var(--ease) calc(var(--panel-d) + 120ms) backwards; }
}
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
	.type-panel:nth-child(2) { --panel-d: 100ms; }
	.type-panel:nth-child(3) { --panel-d: 200ms; }
}
@keyframes panel-draw {
	0% { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 6; fill-opacity: 0; }
	75% { stroke-dasharray: 1; stroke-dashoffset: 0; stroke-width: 6; fill-opacity: 0; }
	100% { stroke-dasharray: 1; stroke-dashoffset: 0; stroke-width: 1; fill-opacity: 1; }
}

/* Smooth scroll for the home page only (in-page jumps). Not site-wide: it clashes with WooCommerce scroll_to_notices. */
@media (prefers-reduced-motion: no-preference) { html:has(body.home) { scroll-behavior: smooth; } }