/*
 * Snapstack — theme.css
 * Polish layer on top of theme.json: header pill, chips, dot labels, cards,
 * frames, hairlines, ticker, FAQ accordion, and opt-in scroll reveals.
 * Everything here degrades gracefully without JavaScript.
 */

:root {
	--ss-line: rgba(35, 31, 32, 0.1);
	--ss-line-dark: rgba(255, 255, 255, 0.12);
}

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

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

/* ------------------------------------------------------------------
 * Header (dark, sticky)
 * ---------------------------------------------------------------- */
.ss-header { z-index: 50; }
.ss-nav-pill { background-color: rgba(255, 255, 255, 0.08); }
.ss-nav .wp-block-navigation-item__content {
	padding: 0.65rem 1.3rem;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}
.ss-nav .wp-block-navigation-item__content:hover,
.ss-nav .wp-block-navigation-item__content:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	padding: 0.5rem 0;
}
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: none;
	color: var(--wp--preset--color--mint);
}
.ss-nav .wp-block-navigation__responsive-container-open,
.ss-nav .wp-block-navigation__responsive-container-close { padding: 0.4rem; }
.ss-header .wp-block-site-title a { color: inherit; }
@media (max-width: 599px) {
	.ss-nav-pill { padding: 0.15rem 0.35rem 0.15rem 0.5rem !important; }
}

/* ------------------------------------------------------------------
 * Chips (Paragraph block styles) — pick from the block "Styles" panel
 * ---------------------------------------------------------------- */
.is-style-chip,
.is-style-chip-lavender,
.is-style-chip-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	width: auto;
	margin: 0;
	padding: 0.6em 1.15em;
	border-radius: 999px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	background-color: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--black);
}
.is-style-chip-lavender { background-color: var(--wp--preset--color--lavender); }
.is-style-chip-outline {
	background-color: transparent;
	color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}
.is-style-chip.has-mint-background-color { background-color: var(--wp--preset--color--mint); }
.is-style-chip.has-lavender-background-color { background-color: var(--wp--preset--color--lavender); }
.is-style-chip.has-white-background-color { background-color: var(--wp--preset--color--white); }
.is-style-chip.has-black-background-color { background-color: var(--wp--preset--color--black); }
.has-text-align-center.is-style-chip,
.has-text-align-center.is-style-chip-lavender,
.has-text-align-center.is-style-chip-outline {
	display: table;
	margin-inline: auto;
}
.ss-hero .is-style-chip-outline { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* ------------------------------------------------------------------
 * Dot labels (Heading block styles)
 * ---------------------------------------------------------------- */
.is-style-dot,
.is-style-dot-mint {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
}
.is-style-dot::before,
.is-style-dot-mint::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-top: 0.4em;
	border-radius: 50%;
	background: var(--wp--preset--color--lavender);
}
.is-style-dot-mint::before { background: var(--wp--preset--color--mint); }
h6.is-style-dot::before,
h6.is-style-dot-mint::before {
	width: 0.75em;
	height: 0.75em;
	margin-top: 0.3em;
}

/* ------------------------------------------------------------------
 * Cards (Group block style)
 * ---------------------------------------------------------------- */
.is-style-card {
	border-radius: 20px;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.ss-cards .is-style-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
}
.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; }

/* ------------------------------------------------------------------
 * Frames (screenshot in a dark bezel) + hero stage
 * ---------------------------------------------------------------- */
.ss-frame {
	margin: 0;
	padding: 0.85rem;
	background: #0f0f0f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 24px;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
.ss-frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}
.ss-hero { position: relative; overflow: hidden; }
.ss-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -20%;
	width: 900px;
	height: 600px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(226, 203, 255, 0.16), transparent);
	pointer-events: none;
}
.ss-stage {
	position: relative;
	height: clamp(220px, 34vw, 480px);
	overflow: hidden;
}
.ss-stage .ss-frame {
	border-radius: 24px 24px 0 0;
	border-bottom: 0;
	padding-bottom: 0;
	box-shadow: 0 -40px 120px rgba(130, 255, 205, 0.08);
}
.ss-stage .ss-frame img { border-radius: 14px 14px 0 0; }
.ss-stage::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40%;
	background: linear-gradient(transparent, #000);
	pointer-events: none;
}
.ss-hero mark.has-mint-color { color: var(--wp--preset--color--mint); background: transparent; }
/* Highlighted word in headings (mint background, ink text) */
.ss-band mark { padding: 0 0.12em; border-radius: 0.2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ------------------------------------------------------------------
 * Product band — numbered feature columns with hairlines
 * ---------------------------------------------------------------- */
.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); }
.has-black-background-color .ss-feat { border-top-color: var(--ss-line-dark); }
.has-black-background-color .ss-feat > .wp-block-column + .wp-block-column { border-left-color: var(--ss-line-dark); }
.ss-band .ss-frame { box-shadow: 0 30px 80px rgba(35, 31, 32, 0.18); }
@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;
	}
	.has-black-background-color .ss-feat > .wp-block-column + .wp-block-column { border-top-color: var(--ss-line-dark); }
	.ss-feat > .wp-block-column { padding-right: 0 !important; }
}

/* ------------------------------------------------------------------
 * Ticker (JS duplicates the paragraph so the loop is seamless)
 * ---------------------------------------------------------------- */
.ss-ticker {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ss-ticker-track {
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	padding-inline-end: 1.2em;
	color: rgba(35, 31, 32, 0.75);
	will-change: transform;
}
.ss-ticker-track mark { background: transparent; color: #1fbf7f; margin: 0 1em; }
.ss-ticker.is-ready .ss-ticker-inner {
	display: flex;
	width: max-content;
	animation: ss-marquee var(--ss-ticker-duration, 150s) linear infinite;
}
.ss-ticker.is-ready:hover .ss-ticker-inner { animation-play-state: paused; }
@keyframes ss-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.ss-ticker:not(.is-ready) { text-align: center; }
.ss-ticker:not(.is-ready) .ss-ticker-track { white-space: normal; }

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

/* ------------------------------------------------------------------
 * 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: 500;
	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);
	display: grid;
	place-items: center;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.3s ease, background-color 0.3s ease;
}
.ss-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
	background-color: var(--wp--preset--color--mint);
}
.ss-faq .wp-block-details > :not(summary) {
	margin-top: 0.75rem;
	max-width: 56ch;
}

/* ------------------------------------------------------------------
 * CTA card
 * ---------------------------------------------------------------- */
.ss-cta {
	background-image: radial-gradient(60% 90% at 100% 0%, rgba(226, 203, 255, 0.6), transparent 70%);
}

/* ------------------------------------------------------------------
 * 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); }
.ss-footer-links a:hover { color: var(--wp--preset--color--mint); }

/* ------------------------------------------------------------------
 * Scroll reveals (JS adds .is-inview). Off when reduced motion is on.
 * ---------------------------------------------------------------- */
html.js .ss-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js .ss-reveal.ss-reveal-delay { transition-delay: 0.15s; }
html.js .ss-reveal.is-inview { opacity: 1; transform: none; }
html.js .ss-reveal.is-instant { transition: none; }
html.js .ss-text-reveal .ss-word { opacity: 0.28; transition: opacity 0.4s ease; }
html.js .ss-text-reveal .ss-word.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	html.js .ss-reveal { opacity: 1; transform: none; transition: none; }
	html.js .ss-text-reveal .ss-word { opacity: 1; transition: none; }
	.ss-ticker.is-ready .ss-ticker-inner { animation: none; }
	.is-style-card { transition: none; }
}

/* ------------------------------------------------------------------
 * Editor niceties (this file is also loaded in the block editor)
 * ---------------------------------------------------------------- */
.editor-styles-wrapper .ss-reveal { opacity: 1 !important; transform: none !important; }
.editor-styles-wrapper .ss-ticker-track { white-space: normal; }
.editor-styles-wrapper .ss-stage { height: auto; }
.editor-styles-wrapper .ss-stage::after { display: none; }