/*
 * Snapstack — theme.css
 * Bush & Stone: forest green and warm stone, light-weight type, square edges.
 * Colours and type live in theme.json; this file adds the details and the motion.
 * Everything here degrades gracefully without JavaScript.
 */

:root {
	--ss-line: rgba(23, 41, 29, 0.16);
	--ss-line-dark: rgba(255, 255, 255, 0.16);
	--ss-ease-out: cubic-bezier(.19, 1, .22, 1);
	--ss-ease-el: cubic-bezier(.65, 0, 0, 1);
	--ss-reveal: cubic-bezier(.23, 1, .32, 1);
}

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* No gap between the sticky header and the hero */
.wp-site-blocks > main { margin-block-start: 0; }

::selection { background: var(--wp--preset--color--sage); color: var(--wp--preset--color--contrast); }
:focus-visible { outline: 2px solid var(--wp--preset--color--sage); outline-offset: 3px; }

h1, h2, h3 { text-wrap: balance; }

.ss-measure { max-width: 44ch; }
.ss-measure-heading { max-width: 18ch; }

/* ------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------- */
.ss-header { z-index: 50; }
.ss-header .wp-block-site-title a { color: inherit; }
.ss-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 0.35rem 0;
}
.ss-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--ss-ease-el);
}
.ss-nav .wp-block-navigation-item__content:hover::after,
.ss-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 2rem;
	font-weight: 300;
	letter-spacing: -0.02em;
}
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* ------------------------------------------------------------------
 * Hero (Cover block inside a forest frame)
 * ---------------------------------------------------------------- */
.ss-hero-cover { overflow: hidden; }
.ss-hero-cover .wp-block-cover__image-background { transform: scale(1.08); will-change: transform; }
.ss-hero-cover .wp-block-cover__background {
	background-image: linear-gradient(180deg, rgba(15, 26, 18, .55) 0%, rgba(15, 26, 18, .05) 48%, rgba(15, 26, 18, .5) 100%);
}
.ss-hero-title { text-align: center; }
.ss-hero-lead { max-width: 34em; margin-inline: auto !important; font-weight: 300; text-align: center; }
.ss-hero-buttons .wp-block-button { min-width: 270px; }
.ss-hero-buttons .wp-block-button__link { display: block; width: 100%; text-align: center; transition: background-color .3s ease, color .3s ease; }
.ss-hero-buttons .wp-block-button__link:hover,
.ss-hero-buttons .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}
@media (max-width: 781px) {
	.ss-hero { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
	.ss-hero-cover { min-height: 640px !important; padding-top: 4.5rem !important; }
	.ss-hero-buttons { margin-top: 4rem !important; }
	.ss-hero-buttons .wp-block-button { min-width: 240px; }
}

/* ------------------------------------------------------------------
 * Chips (Paragraph block styles)
 * ---------------------------------------------------------------- */
.is-style-chip,
.is-style-chip-outline {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 0.55em 1.15em;
	border-radius: 999px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
}
.is-style-chip { background-color: var(--wp--preset--color--sage); color: var(--wp--preset--color--contrast); }
.is-style-chip-outline { background-color: transparent; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.has-text-align-center.is-style-chip,
.has-text-align-center.is-style-chip-outline { display: table; margin-inline: auto; }

/* Sage dot (Heading block style) */
.is-style-dot { display: flex; align-items: flex-start; gap: 0.6em; }
.is-style-dot::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-top: 0.4em;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
}

/* ------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------- */
.is-style-card { transition: transform .6s var(--ss-ease-out), box-shadow .6s var(--ss-ease-out); }
.ss-cards .is-style-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(23, 41, 29, .35); }
.ss-cards .is-style-card { display: flex; flex-direction: column; }
.ss-cards .is-style-card > * { width: 100%; }
.ss-cards .is-style-card > *:last-child { margin-top: auto !important; }
.ss-card-title {
	font-size: 1.25rem !important;
	font-weight: 300 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em !important;
	line-height: 1.3 !important;
}

/* ------------------------------------------------------------------
 * Product band
 * ---------------------------------------------------------------- */
.ss-band { overflow: hidden; }
.ss-feat { border-top: 1px solid var(--ss-line); }
.ss-feat > .wp-block-column + .wp-block-column { border-left: 1px solid var(--ss-line); }
@media (max-width: 781px) {
	.ss-feat > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--ss-line);
		padding-left: 0 !important;
	}
	.ss-feat > .wp-block-column { padding-right: 0 !important; }
}

/* ------------------------------------------------------------------
 * Product: photo beside three short points
 * ---------------------------------------------------------------- */
.ss-photo { margin: 0; overflow: hidden; }
.ss-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ss-points .ss-point { padding: 1.4rem 0; border-top: 1px solid var(--ss-line); }
.ss-points .ss-point:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-points .ss-point h3 { font-weight: 300; }
.ss-points .ss-point p { margin: 0; }

/* ------------------------------------------------------------------
 * Services: photo tiles
 * ---------------------------------------------------------------- */
.ss-tile { overflow: hidden; }
.ss-tile .wp-block-cover__image-background { transition: transform 1.4s var(--ss-ease-out); }
.ss-tile:hover .wp-block-cover__image-background { transform: scale(1.06); }
.ss-tile .wp-block-cover__background {
	background-image: linear-gradient(180deg, rgba(15, 26, 18, 0) 35%, rgba(15, 26, 18, .82) 100%);
	opacity: 1 !important;
	background-color: transparent !important;
}
.ss-tile .wp-block-cover__inner-container > * { margin-top: 0.5rem; }
.ss-tile-line { max-width: 26ch; }

/* ------------------------------------------------------------------
 * About: forest band
 * ---------------------------------------------------------------- */
.ss-statement {
	font-size: clamp(1.75rem, 3.4vw, 3rem) !important;
	font-weight: 300;
	line-height: 1.22;
	letter-spacing: -0.02em;
}
.has-contrast-background-color .ss-stats { border-top-color: var(--ss-line-dark); }

/* ------------------------------------------------------------------
 * Closing photo (coming soon)
 * ---------------------------------------------------------------- */
.ss-close { margin-block: 0 !important; }
.ss-close .wp-block-cover__background {
	background-image: linear-gradient(180deg, rgba(15, 26, 18, .35) 0%, rgba(15, 26, 18, .7) 100%);
}
.ss-close-title,
.ss-close-line { text-align: center; }
.ss-close-title { font-size: clamp(2.25rem, 4.4vw, 3.75rem) !important; margin-top: 1.25rem !important; }
.ss-close .is-style-chip-outline { color: #fff; display: table; margin-inline: auto !important; }

/* ------------------------------------------------------------------
 * Stats row (About)
 * ---------------------------------------------------------------- */
.ss-stats { border-top: 1px solid var(--ss-line); padding-top: 2rem; }
.ss-stat { font-weight: 300 !important; }

/* ------------------------------------------------------------------
 * FAQ (core Details block)
 * ---------------------------------------------------------------- */
.ss-faq .wp-block-details {
	margin: 0;
	border-bottom: 1px solid var(--ss-line);
	padding: 1.4rem 0;
}
.ss-faq .wp-block-details:first-child { border-top: 1px solid var(--ss-line); }
.ss-faq .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 300;
	letter-spacing: -0.01em;
}
.ss-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ss-faq .wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	display: grid;
	place-items: center;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1;
	transition: transform .5s var(--ss-ease-out), background-color .3s ease;
}
.ss-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
	background-color: var(--wp--preset--color--sage);
}
.ss-faq .wp-block-details > :not(summary) { margin-top: 0.75rem; max-width: 56ch; }

/* ------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------- */
.ss-footer-links { list-style: none; }
.ss-footer-links li { margin-bottom: 0.5rem; font-size: var(--wp--preset--font-size--small); }
.ss-footer-links a { text-decoration: none; color: rgba(255, 255, 255, 0.8); transition: color .3s ease; }
.ss-footer-links a:hover { color: var(--wp--preset--color--sage); }

/* ------------------------------------------------------------------
 * Opening screen: forest green, the wordmark rises into view, then the
 * screen wipes upward. Switched on in <head> (functions.php) before first
 * paint; the timeline is CSS only, so it always clears itself.
 * ---------------------------------------------------------------- */
html.ss-intro body::before,
html.ss-intro body::after {
	position: fixed;
	z-index: 100000;
	pointer-events: none;
}
html.ss-intro body::before {
	content: "";
	inset: 0;
	background: var(--wp--preset--color--contrast);
	clip-path: inset(0 0 0 0);
	animation: ss-wipe 1.3s var(--ss-ease-el) 1s forwards;
}
html.ss-intro body::after {
	content: var(--ss-wordmark, "Snapstack");
	left: 0;
	right: 0;
	top: 50%;
	text-align: center;
	color: #fff;
	font-family: var(--wp--preset--font-family--vietnam);
	font-weight: 300;
	font-size: clamp(1.75rem, 5vw, 3.5rem);
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	text-transform: uppercase;
	line-height: 1;
	transform: translateY(-50%);
	animation:
		ss-rise 1.1s var(--ss-ease-out) .1s both,
		ss-leave .7s var(--ss-ease-el) 1s forwards;
}
@keyframes ss-wipe {
	to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}
@keyframes ss-rise {
	from { clip-path: inset(0 0 100% 0); transform: translateY(-10%); opacity: 0; }
	to   { clip-path: inset(0 0 0 0); transform: translateY(-50%); opacity: 1; }
}
@keyframes ss-leave {
	to { clip-path: inset(0 0 100% 0); transform: translateY(-90%); visibility: hidden; }
}
html.ss-intro .wp-site-blocks { animation: ss-settle 1.6s var(--ss-ease-out) 1.05s both; }
@keyframes ss-settle {
	from { transform: translateY(48px); }
	to   { transform: none; }
}

/* ------------------------------------------------------------------
 * Reveals (JS adds .is-inview). Visible by default without JS.
 * ---------------------------------------------------------------- */
html.js .ss-words .ss-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}
html.js .ss-words .ss-w > i {
	display: inline-block;
	font-style: normal;
	transform: translateY(110%);
	transition: transform 1.4s var(--ss-reveal);
}
html.js .ss-words.is-inview .ss-w > i { transform: none; }

html.js .ss-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1s var(--ss-ease-out), transform 1.2s var(--ss-ease-out);
}
html.js .ss-reveal.is-inview { opacity: 1; transform: none; }

/* Photos: the frame opens out and the image settles */
html.js .ss-photo.ss-reveal {
	opacity: 1;
	transform: none;
	clip-path: inset(7% 7% 7% 7%);
	transition: clip-path 1.4s var(--ss-ease-out);
}
html.js .ss-photo.ss-reveal img { transform: scale(1.1); transition: transform 1.8s var(--ss-ease-out); }
html.js .ss-photo.ss-reveal.is-inview { clip-path: inset(0 0 0 0); }
html.js .ss-photo.ss-reveal.is-inview img { transform: none; }

/* Rows: children arrive in sequence (delays set in theme.js) */
html.js .ss-reveal.ss-cards,
html.js .ss-reveal.ss-stats,
html.js .ss-reveal.ss-feat { opacity: 1; transform: none; }
html.js .ss-cards > *,
html.js .ss-stats > *,
html.js .ss-feat > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .9s var(--ss-ease-out), transform 1.1s var(--ss-ease-out);
}
html.js .ss-cards.is-inview > *,
html.js .ss-stats.is-inview > *,
html.js .ss-feat.is-inview > * { opacity: 1; transform: none; }

/* About statement lights up word by word on scroll */
html.js .ss-text-reveal .ss-word { opacity: 0.25; transition: opacity .35s linear; }
html.js .ss-text-reveal .ss-word.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	html.js .ss-reveal,
	html.js .ss-cards > *,
	html.js .ss-stats > *,
	html.js .ss-feat > * { opacity: 1; transform: none; transition: none; }
	html.js .ss-words .ss-w > i { transform: none; transition: none; }
	html.js .ss-text-reveal .ss-word { opacity: 1; transition: none; }
	.ss-tile .wp-block-cover__image-background { transition: none; }
	html.js .ss-photo.ss-reveal, html.js .ss-photo.ss-reveal img { clip-path: none; transform: none; transition: none; }
	.ss-hero-cover .wp-block-cover__image-background { transform: none; }
	.is-style-card, .ss-nav .wp-block-navigation-item__content::after { transition: none; }
}

/* ------------------------------------------------------------------
 * Editor (this file also loads in the block editor)
 * ---------------------------------------------------------------- */
.editor-styles-wrapper .ss-reveal,
.editor-styles-wrapper .ss-cards > *,
.editor-styles-wrapper .ss-stats > *,
.editor-styles-wrapper .ss-feat > * { opacity: 1 !important; transform: none !important; }
.editor-styles-wrapper .ss-hero-cover .wp-block-cover__image-background { transform: none; }