/*
 * PMY Story Kit — shared tokens and atoms for the ss-* blocks.
 * Block-specific styles live in each block's style.css.
 */
:root {
	--ss-night: #0D0F13;
	--ss-raise: #161A21;
	--ss-line: #2A303B;
	--ss-line-soft: #3A4150;
	--ss-ink: #F3F0E9;
	--ss-body: #B9BEC8;
	--ss-muted: #A7ADB8;
	--ss-dim: #6B7180;
	--ss-cyan: #61FEFB;
	--ss-paper: #F3F0E9;
	--ss-paper-ink: #14161B;
	--ss-paper-body: #3A3E47;
	--ss-paper-muted: #6B6F78;
	--ss-paper-line: #D6D0C4;
	--ss-teal: #00706D;

	--ss-font: 'Poppins', system-ui, -apple-system, sans-serif;
	--ss-gutter: clamp(16px, 5.5vw, 80px);
	--ss-ease: cubic-bezier(.2, .8, .2, 1);

	/* Display type: tight, uppercase, scales from phone to 1440 */
	--ss-display-xl: clamp(2.75rem, 1rem + 7.5vw, 7.9rem);
	--ss-display-l: clamp(2.25rem, 1rem + 4.6vw, 4.3rem);
	--ss-display-m: clamp(1.9rem, 1rem + 2.9vw, 3.25rem);
	--ss-display-s: clamp(1.5rem, 1rem + 1.6vw, 2.7rem);
}

/* Every kit block is a self-contained, full-width section. */
.ss-block {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	font-family: var(--ss-font);
	background: var(--ss-night);
	color: var(--ss-ink);
	-webkit-font-smoothing: antialiased;
}
.ss-block *,
.ss-block *::before,
.ss-block *::after { box-sizing: border-box; }
.ss-block :where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }
.ss-block :where(img, video) { display: block; max-width: 100%; }

.ss-block--paper {
	background: var(--ss-paper);
	color: var(--ss-paper-ink);
}

.ss-eyebrow {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-cyan);
}
.ss-block--paper .ss-eyebrow { color: var(--ss-paper-muted); }

.ss-display {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1.02;
	text-wrap: balance;
}
.ss-display--xl { font-size: var(--ss-display-xl); }
.ss-display--l { font-size: var(--ss-display-l); }
.ss-display--m { font-size: var(--ss-display-m); }
.ss-display--s { font-size: var(--ss-display-s); }

.ss-lede {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
	line-height: 1.55;
	color: var(--ss-body);
}
.ss-block--paper .ss-lede { color: var(--ss-paper-body); }

.ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 22px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: 600 0.875rem/1 var(--ss-font);
	text-decoration: none;
	cursor: pointer;
	transition: background 200ms, color 200ms, border-color 200ms;
}
.ss-btn:hover { background: var(--ss-ink); border-color: var(--ss-ink); color: var(--ss-night); }
.ss-btn--cyan { border-color: var(--ss-cyan); }
.ss-btn--cyan:hover { background: var(--ss-cyan); border-color: var(--ss-cyan); }

.ss-block :where(button, a, [tabindex]):focus-visible {
	outline: 2px solid var(--ss-cyan);
	outline-offset: 3px;
}
.ss-block--paper :where(button, a, [tabindex]):focus-visible { outline-color: var(--ss-teal); }

.ss-icon { display: block; fill: currentColor; }

.ss-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Placeholder shown where an image field is still empty. */
.ss-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: repeating-linear-gradient(135deg, #161A21 0 12px, #1A1F28 12px 24px);
	color: var(--ss-muted);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}
.ss-block--paper .ss-placeholder {
	background: repeating-linear-gradient(135deg, #E6E0D4 0 12px, #DDD6C8 12px 24px);
	color: var(--ss-paper-muted);
}

@media (prefers-reduced-motion: reduce) {
	.ss-block *,
	.ss-block *::before,
	.ss-block *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

/* Editor canvas: kit sections run full width, as they do on the page. */
.editor-styles-wrapper .is-layout-constrained > [class*="wp-block-gcb-ss-"],
.editor-styles-wrapper .is-layout-flow > [class*="wp-block-gcb-ss-"] {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ── Arrives (assets/motion.js, the page only): a story block that follows a Lead-in arrives as it climbs the
   screen, --in running 0 → 1. Not the same move every time — motion.js picks one per block kind:
   scale (from 93%), rise (up from below), unfold (opens from its top edge), or none, when the block has
   an entrance of its own (the gallery's flicker, the x-ray's sweep, the wall's slide, the zoom's flight). ── */
.ss-in { --in: 1; will-change: transform; }
.ss-in--scale { transform: scale(calc(0.93 + 0.07 * var(--in))); transform-origin: 50% 0; }
.ss-in--rise { transform: translateY(calc((1 - var(--in)) * 64px)); opacity: calc(0.4 + 0.6 * var(--in)); }
.ss-in--unfold { transform: scaleY(calc(0.9 + 0.1 * var(--in))); transform-origin: 50% 0; opacity: calc(0.5 + 0.5 * var(--in)); }
@media (prefers-reduced-motion: reduce) {
	.ss-in { transform: none; opacity: 1; }
}

/* A section whose words moved into the Lead-in before it leaves its own eyebrow and heading empty — and the
   whole header goes with them, so the section starts tight against the words above. */
.ss-block .ss-eyebrow:empty,
.ss-block .ss-display:empty,
.ss-block .ss-evt__note:empty { display: none; }
.ss-evt__titles:has(> .ss-eyebrow:empty):has(> .ss-display:empty),
.ss-stats__head:has(> .ss-eyebrow:empty):has(> .ss-display:empty),
.ss-wall__titles:has(> .ss-eyebrow:empty):has(> .ss-display:empty) { display: none; }
/* (no nested :has — a browser that rejects one selector drops the whole rule) */
.ss-evt:has(> .ss-evt__left > .ss-evt__titles > .ss-display:empty),
.ss-stats:has(> .ss-stats__head > .ss-display:empty),
.ss-wall:has(> .ss-wall__head > .ss-wall__titles > .ss-display:empty) { padding-top: clamp(16px, 2vw, 28px); }

/* ── The glow (assets/motion.js, the page only): soft coloured light behind the whole page that follows you
   down it — it leans toward the mouse, drifts with the scroll, and crossfades to each section's colour
   (a Lead-in's "Glow", or a block's default). Light in the room, not decoration: kept faint, and off on
   Paper. The one place the kit uses a gradient and hues beyond cyan and teal: green, blue, purple; see DESIGN.md. ── */
@property --ss-glow-a { syntax: '<color>'; inherits: false; initial-value: #61FEFB; }
@property --ss-glow-b { syntax: '<color>'; inherits: false; initial-value: #0AD69E; }
.ss-glow {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--ss-glow-on, 0);
	--ss-glow-a: #61FEFB;
	--ss-glow-b: #0AD69E;
	--ss-glow-x: 60%;
	--ss-glow-y: 40%;
	background:
		radial-gradient(ellipse 46vw 42vh at var(--ss-glow-x) var(--ss-glow-y), var(--ss-glow-a) 0%, transparent 70%),
		radial-gradient(ellipse 60vw 50vh at calc(100% - var(--ss-glow-x)) calc(110% - var(--ss-glow-y)), var(--ss-glow-b) 0%, transparent 70%);
	transition: --ss-glow-a 1100ms var(--ss-ease), --ss-glow-b 1100ms var(--ss-ease), opacity 900ms var(--ss-ease);
	will-change: opacity;
}
body:has(.ss-glow) { background: var(--ss-night); }
/* Everything of the kit sits above the glow; the Night sections let it through. */
.ss-block { position: relative; z-index: 1; }
.ss-block:not(.ss-block--paper) { background-color: transparent; }

/* ── Case-study pages (assets/motion.js): each section eases up and brightens a little as it comes in, by where it
   is on screen (--t 0 → 1 over the bottom 35% of the screen); the opening photo settles from a touch larger.
   Scroll back and it reverses. Reduced motion: nothing moves. ── */
.ss-cs-in { opacity: calc(0.55 + 0.45 * var(--t, 1)); transform: translateY(calc((1 - var(--t, 1)) * 28px)); will-change: transform, opacity; }
.ss-csh__hero.ss-cs-in { opacity: 1; transform: none; }
.ss-csh__hero.ss-cs-in img { transform: scale(calc(1.05 - 0.05 * var(--t, 1))); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
	.ss-cs-in, .ss-csh__hero.ss-cs-in img { opacity: 1; transform: none; }
}