/**
 * BinaryPH AI Theme: the About page (patterns/about-story-*.php).
 *
 * Loaded only on pages that render the story's sections (functions.php).
 * Side by side on every screen size: each image or 3D scene keeps its
 * column next to its text, down to the narrowest phone.
 *
 * Everything readable works without JS: the 3D bits that need JS (scenes,
 * spiral, hero card turning) start from complete static layouts: drawn
 * posters for the scenes, a card grid for the spiral. Visual boxes are
 * sized from their width (aspect-ratio), never from viewport height, so
 * nothing changes size when a phone's toolbar collapses.
 */

/* --------------------------------------------------------------
   1. Shared
-------------------------------------------------------------- */
.binaryph-about {
	--about-top: 84px;
	--about-gutter: clamp(16px, 4vw, 48px);
	--about-max: 1200px;
	--about-ink: #eef2ff;
	--about-dim: #aeb6d0;
	--about-screen: #05060f;
	--about-panel: #0b0e20;
	position: relative;
	padding-inline: var(--about-gutter);
	overflow-x: clip;
}

body.admin-bar .binaryph-about {
	--about-top: calc(84px + var(--wp-admin--admin-bar--height, 32px));
}

/* Phones: the admin toolbar scrolls away (see the header rules). */
@media (max-width: 600px) {

	body.admin-bar .binaryph-about {
		--about-top: 84px;
	}
}

/* Sections meet edge to edge; each sets its own spacing. They sit in the
   page's content, inside the post-content wrapper. */
.binaryph-about-page.binaryph-about-page > *,
.binaryph-about-page.binaryph-about-page > * + *,
.binaryph-about-page .wp-block-post-content > *,
.binaryph-about-page .wp-block-post-content > * + * {
	margin-block: 0;
}

.binaryph-about .binaryph-about-split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(14px, 4.5vw, 72px);
	align-items: center;
	max-width: var(--about-max);
	margin-inline: auto;
}

.binaryph-about .binaryph-about-split > *,
.binaryph-about .binaryph-chapter > *,
.binaryph-about .binaryph-pay > *,
.binaryph-about .binaryph-about-stats > * {
	min-width: 0;
	margin: 0;
}

.binaryph-about .binaryph-about-intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 840px;
	margin-inline: auto;
	padding-block: clamp(56px, 10vw, 128px) clamp(12px, 3vw, 40px);
	text-align: center;
}

.binaryph-about .binaryph-about-intro > * {
	margin: 0;
}

.binaryph-about .binaryph-about-intro h2 {
	font-size: clamp(1.6rem, 5.2vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.binaryph-about .binaryph-about-intro .binaryph-lightup {
	font-size: clamp(1rem, 2.6vw, 1.45rem);
	line-height: 1.5;
}

/* Hints describe interactions, so they show only once those are live. */
.binaryph-about .binaryph-about-hint {
	display: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.62rem, 1.6vw, 0.78rem);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast-2);
}

.binaryph-about-hero.is-live .binaryph-about-hint,
.binaryph-about-skills.is-spiral .binaryph-about-hint {
	display: block;
}

/* --------------------------------------------------------------
   2. Hero: the portrait as a 3D card, the name huge behind it
-------------------------------------------------------------- */
.binaryph-about-hero {
	isolation: isolate;
	padding-block: clamp(18px, 4vw, 56px) clamp(28px, 6vw, 80px);
	background:
		radial-gradient(60% 50% at 25% 45%, color-mix(in srgb, var(--wp--preset--color--custom-primary) 22%, transparent), transparent 70%),
		radial-gradient(45% 45% at 85% 70%, color-mix(in srgb, var(--wp--preset--color--accent-violet) 16%, transparent), transparent 70%);
}

/* Oni-Ronin's headline behind the character: outlined, scrolled slower. */
.binaryph-about-hero::before {
	content: "AMIN";
	content: "AMIN" / "";
	position: absolute;
	top: 44%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%) translateY(calc(var(--hero-p, 0) * 30%));
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(7rem, 34vw, 30rem);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.06em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--wp--preset--color--custom-secondary) 22%, transparent);
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent) 10%, transparent 80%);
	-webkit-background-clip: text;
	background-clip: text;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.binaryph-about .binaryph-about-hero__chrome {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	max-width: var(--about-max);
	margin: 0 auto clamp(14px, 4vw, 40px);
}

.binaryph-about .binaryph-about-hero__chrome > p {
	margin: 0;
	padding: 0.5em 0.95em;
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.58rem, 1.5vw, 0.74rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.binaryph-about .binaryph-about-hero__visual {
	padding: 4% 6%;
	perspective: 900px;
	perspective-origin: 50% 40%;
}

.binaryph-about .binaryph-about-hero__rig {
	position: relative;
	max-width: 420px;
	aspect-ratio: 3 / 4;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--hero-p, 0) * -140px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	touch-action: pan-y;
}

.binaryph-about-hero.is-live .binaryph-about-hero__rig {
	cursor: grab;
}

.binaryph-about-hero.is-live .binaryph-about-hero__rig:active {
	cursor: grabbing;
}

/* Aura: a glow set back behind the card. */
.binaryph-about .binaryph-about-hero__rig::before {
	content: "";
	position: absolute;
	inset: -14% -20%;
	border-radius: 50%;
	transform: translateZ(-90px);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--custom-secondary) 50%, transparent), color-mix(in srgb, var(--wp--preset--color--accent-violet) 30%, transparent) 55%, transparent);
	filter: blur(14px);
	opacity: 0.65;
	animation: binaryph-about-aura 5s ease-in-out infinite;
	pointer-events: none;
}

/* The card's back: seen when a drag spins it. */
.binaryph-about .binaryph-about-hero__rig::after {
	content: "BinaryPH";
	content: "BinaryPH" / "";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 45%, transparent);
	border-radius: 22px;
	transform: rotateY(180deg) translateZ(1px);
	backface-visibility: hidden;
	background:
		repeating-linear-gradient(90deg, rgba(103, 232, 255, 0.08) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(0deg, rgba(103, 232, 255, 0.08) 0 1px, transparent 1px 22px),
		linear-gradient(150deg, var(--wp--preset--color--custom-primary), var(--wp--preset--color--accent-violet) 60%, var(--about-panel));
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1rem, 4vw, 2.2rem);
	font-weight: 700;
	color: var(--about-ink);
}

.binaryph-about .binaryph-about-hero__portrait {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 30%, transparent);
	border-radius: 22px;
	transform: translateZ(0);
	backface-visibility: hidden;
	box-shadow: 0 30px 80px -24px color-mix(in srgb, var(--wp--preset--color--custom-primary) 60%, transparent);
}

.binaryph-about .binaryph-about-hero__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A light sheen sweeps across the photo now and then. */
.binaryph-about .binaryph-about-hero__portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	animation: binaryph-about-sheen 7s ease-in-out infinite;
	pointer-events: none;
}

/* Role tags float at different depths around the card. */
.binaryph-about .binaryph-about-hero__tags {
	position: absolute;
	inset: 0;
	margin: 0;
	transform-style: preserve-3d;
	pointer-events: none;
}

.binaryph-about .binaryph-about-hero__tags > p {
	position: absolute;
	margin: 0;
	padding: 0.42em 0.8em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 50%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--about-panel) 86%, transparent);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 0 22px -8px var(--wp--preset--color--custom-secondary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.52rem, 1.6vw, 0.8rem);
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
	color: var(--about-ink);
	animation: binaryph-about-float 6s ease-in-out infinite;
}

.binaryph-about .binaryph-about-hero__tags > p:nth-child(1) {
	top: 4%;
	left: -12%;
	transform: translateZ(80px);
}

.binaryph-about .binaryph-about-hero__tags > p:nth-child(2) {
	top: 24%;
	right: -16%;
	transform: translateZ(60px);
	animation-delay: -1.2s;
}

.binaryph-about .binaryph-about-hero__tags > p:nth-child(3) {
	top: 50%;
	left: -14%;
	transform: translateZ(100px);
	animation-delay: -2.4s;
}

.binaryph-about .binaryph-about-hero__tags > p:nth-child(4) {
	bottom: 20%;
	right: -12%;
	transform: translateZ(50px);
	animation-delay: -3.6s;
}

.binaryph-about .binaryph-about-hero__tags > p:nth-child(5) {
	bottom: 3%;
	left: -6%;
	transform: translateZ(70px);
	animation-delay: -4.8s;
}

/* Phones: portrait and text split the width evenly and start level; the
   tags shrink and keep to the card's edges, clear of the face. */
@media (max-width: 600px) {

	.binaryph-about .binaryph-about-hero__split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.binaryph-about .binaryph-about-hero__visual {
		padding: 12% 0 6%;
	}

	.binaryph-about .binaryph-about-hero__tags > p {
		padding: 0.36em 0.6em;
		font-size: 0.5rem;
		letter-spacing: 0;
	}

	.binaryph-about .binaryph-about-hero__tags > p:nth-child(1) {
		top: -8%;
		left: 0;
	}

	.binaryph-about .binaryph-about-hero__tags > p:nth-child(2) {
		top: 12%;
		right: -4%;
	}

	.binaryph-about .binaryph-about-hero__tags > p:nth-child(3) {
		top: 60%;
		left: 4%;
	}

	.binaryph-about .binaryph-about-hero__tags > p:nth-child(4) {
		bottom: 13%;
		right: -4%;
	}

	.binaryph-about .binaryph-about-hero__tags > p:nth-child(5) {
		bottom: -7%;
		left: 4%;
	}
}

.binaryph-about .binaryph-about-hero__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.6vw, 20px);
}

.binaryph-about .binaryph-about-hero__copy > * {
	margin: 0;
}

.binaryph-about .binaryph-about-hero__copy .binaryph-eyebrow {
	font-size: clamp(0.58rem, 1.6vw, 0.82rem);
	letter-spacing: 0.14em;
}

.binaryph-about .binaryph-about-hero__title {
	font-size: clamp(1.55rem, 7vw, 5.2rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
}

.binaryph-about .binaryph-about-hero__lead {
	font-size: clamp(0.8rem, 2.4vw, 1.15rem);
	line-height: 1.55;
	color: var(--wp--preset--color--custom-text);
}

.binaryph-about .binaryph-about-hero__actions {
	gap: 8px 10px;
}

/* Buttons break between words only: core's button style allows breaks
   mid-word, which split "Modernize" in a narrow column. Two-line labels
   are balanced. */
.binaryph-about .wp-block-button .wp-block-button__link {
	word-break: normal;
	overflow-wrap: normal;
	text-wrap: balance;
}

/* Phones: buttons fill their column, compact. The radius is half a
   one-line button's height, so one line stays a pill and a label that
   wraps becomes a rounded rectangle, not a stretched oval. */
@media (max-width: 600px) {

	.binaryph-about .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.binaryph-about .wp-block-button .wp-block-button__link {
		width: 100%;
		padding: 0.7em 1.1em;
		border-radius: 1.3em;
		font-size: 0.78rem;
		line-height: 1.2;
	}
}

.binaryph-about .binaryph-about-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(8px, 2vw, 24px);
	max-width: var(--about-max);
	margin: clamp(24px, 6vw, 72px) auto 0;
}

.binaryph-about .binaryph-about-stat {
	padding: clamp(10px, 2vw, 22px);
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: 16px;
	background: var(--wp--preset--color--overlay-glass);
	text-align: center;
}

.binaryph-about .binaryph-about-stat > * {
	margin: 0;
}

.binaryph-about .binaryph-about-stat > p:last-child {
	margin-top: 6px;
	font-size: clamp(0.64rem, 1.8vw, 0.9rem);
	color: var(--wp--preset--color--contrast-2);
}

.binaryph-about .binaryph-about-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.4rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--base);
}

.binaryph-about .binaryph-about-hero__cue {
	margin: clamp(22px, 5vw, 56px) 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.binaryph-about .binaryph-about-hero__cue::after {
	content: "";
	display: block;
	width: 1px;
	height: 34px;
	margin: 10px auto 0;
	background: linear-gradient(var(--wp--preset--color--custom-secondary), transparent);
	transform-origin: top;
	animation: binaryph-about-cue 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------
   3. Chapters: a 3D scene beside each part of the story
-------------------------------------------------------------- */
.binaryph-about .binaryph-chapter {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(12px, 5vw, 80px);
	align-items: start;
	max-width: var(--about-max);
	margin: 0 auto;
	padding-block: clamp(20px, 6vw, 96px);
}

.binaryph-about .binaryph-chapter.is-flipped {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.binaryph-about .binaryph-chapter.is-flipped > .binaryph-chapter__visual {
	order: 2;
}

/* Wide screens: scene and text sit level. Phones: the text runs longer
   than the scene, so the scene stays pinned beside it while it's read. */
@media (min-width: 900px) {

	.binaryph-about .binaryph-chapter,
	.binaryph-about .binaryph-chapter.is-flipped {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}
}

.binaryph-about .binaryph-chapter__visual {
	position: sticky;
	top: calc(var(--about-top) + 8px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 22%, transparent);
	border-radius: clamp(14px, 2.4vw, 28px);
	background:
		radial-gradient(80% 60% at 50% 42%, color-mix(in srgb, var(--wp--preset--color--custom-primary) 26%, transparent), transparent 72%),
		linear-gradient(180deg, var(--about-panel), var(--about-screen));
	box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--wp--preset--color--custom-primary) 70%, transparent);
}

@media (min-width: 782px) {

	.binaryph-about .binaryph-chapter__visual {
		aspect-ratio: 1;
	}
}

/* The poster: a line drawing of the scene. It is the image without JS or
   with reduced motion, and fades out once the live scene has drawn. */
.binaryph-about .binaryph-chapter__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(160deg, var(--wp--preset--color--custom-secondary), var(--wp--preset--color--accent-violet));
	-webkit-mask: var(--poster) center 50% / 62% no-repeat;
	mask: var(--poster) center 50% / 62% no-repeat;
	opacity: 0.85;
	transition: opacity 0.8s ease;
}

.binaryph-about .binaryph-chapter__visual.is-story-ready::before {
	opacity: 0;
}

.binaryph-about .is-scene-code .binaryph-chapter__visual {
	--poster: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='14'%20y='16'%20width='92'%20height='60'%20rx='5'/%3E%3Cpath%20d='M50%2090h20M60%2076v14M36%2096h48'/%3E%3Cpath%20d='M24%2030h14M42%2030h22M30%2039h28M30%2048h12M46%2048h24M36%2057h18M24%2066h10'/%3E%3Cpath%20d='M84%2040l-6%208%206%208M92%2040l6%208-6%208'/%3E%3Cpath%20d='M20%20104h80'/%3E%3C/svg%3E");
}

.binaryph-about .is-scene-systems .binaryph-chapter__visual {
	--poster: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='8'%20y='32'%20width='34'%20height='42'%20rx='4'/%3E%3Crect%20x='43'%20y='20'%20width='34'%20height='42'%20rx='4'/%3E%3Crect%20x='78'%20y='32'%20width='34'%20height='42'%20rx='4'/%3E%3Cpath%20d='M14%2042h16M14%2050h22M14%2058h12M14%2066h20'/%3E%3Ccircle%20cx='53'%20cy='32'%20r='4'/%3E%3Ccircle%20cx='67'%20cy='32'%20r='4'/%3E%3Cpath%20d='M48%2044h24M48%2052h24'/%3E%3Cpath%20d='M86%2066V56M94%2066V46M102%2066V52'/%3E%3Ccircle%20cx='60'%20cy='98'%20r='5'/%3E%3Cpath%20d='M25%2074l31%2020M95%2074L64%2094M60%2062v31'/%3E%3C/svg%3E");
}

.binaryph-about .is-scene-network .binaryph-chapter__visual {
	--poster: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%20106l8-62%208%2062M24%2092h12M26%2078h8M28%2062h4M22%20106l12-14M38%20106l-12-14'/%3E%3Cpath%20d='M82%20106l8-50%208%2050M84%2092h12M86%2076h8'/%3E%3Cpath%20d='M36%2040c5%203%205%2011%200%2014M84%2052c-5%203-5%2011%200%2014'/%3E%3Cpath%20d='M40%2047l42%2012'%20stroke-dasharray='3%205'/%3E%3Cpath%20d='M42%2040c14-10%2030-8%2040%2012M42%2055c12%2012%2030%2012%2040%204'/%3E%3Cpath%20d='M8%20106h104'/%3E%3Ccircle%20cx='30'%20cy='38'%20r='2'/%3E%3Ccircle%20cx='90'%20cy='50'%20r='2'/%3E%3C/svg%3E");
}

.binaryph-about .is-scene-cloud .binaryph-chapter__visual {
	--poster: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M42%2044a10%2010%200%200%201%201-20%2015%2015%200%200%201%2029-3%2011%2011%200%201%201%206%2023z'/%3E%3Crect%20x='40'%20y='58'%20width='18'%20height='46'%20rx='2'/%3E%3Crect%20x='62'%20y='58'%20width='18'%20height='46'%20rx='2'/%3E%3Cpath%20d='M44%2068h10M44%2078h10M44%2088h10M66%2068h10M66%2078h10M66%2088h10'/%3E%3Cpath%20d='M49%2058V46M71%2058V46'%20stroke-dasharray='2%204'/%3E%3Cellipse%20cx='60'%20cy='86'%20rx='50'%20ry='12'/%3E%3C/svg%3E");
}

.binaryph-about .is-scene-ai .binaryph-chapter__visual {
	--poster: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='60'%20cy='60'%20r='32'/%3E%3Ccircle%20cx='60'%20cy='60'%20r='9'/%3E%3Cpath%20d='M60%2028v23M60%2069v23M28%2060h23M69%2060h23M38%2038l16%2016M82%2038L66%2054M38%2082l16-16M82%2082L66%2066'/%3E%3Ccircle%20cx='60'%20cy='28'%20r='3'/%3E%3Ccircle%20cx='92'%20cy='60'%20r='3'/%3E%3Ccircle%20cx='60'%20cy='92'%20r='3'/%3E%3Ccircle%20cx='28'%20cy='60'%20r='3'/%3E%3Cellipse%20cx='60'%20cy='60'%20rx='54'%20ry='16'%20transform='rotate%28-20%2060%2060%29'/%3E%3C/svg%3E");
}

.binaryph-about .is-scene-office .binaryph-chapter__visual {
	--poster: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='44'%20y='56'%20width='32'%20height='26'%20rx='3'/%3E%3Cpath%20d='M50%2056v-5M60%2056v-5M70%2056v-5M50%2082v5M60%2082v5M70%2082v5M44%2064h-5M44%2074h-5M76%2064h5M76%2074h5'/%3E%3Cpath%20d='M53%2074l4-10%204%2010M55%2070h4M66%2064v10'/%3E%3Cpath%20d='M8%2092h30M82%2092h30'/%3E%3Crect%20x='14'%20y='80'%20width='12'%20height='10'%20rx='1'/%3E%3Cpath%20d='M92%2080l4%204%208-8'/%3E%3Ccircle%20cx='44'%20cy='30'%20r='10'/%3E%3Ccircle%20cx='44'%20cy='30'%20r='3'/%3E%3Ccircle%20cx='70'%20cy='24'%20r='7'/%3E%3Cpath%20d='M44%2016v4M44%2040v4M30%2030h4M54%2030h4M70%2013v4M70%2031v4M59%2024h4M77%2024h4'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-chapter__visual > .binaryph-story__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: grab;
	touch-action: pan-y;
	transition: opacity 1s ease;
}

.binaryph-about .binaryph-chapter__visual.is-story-ready > .binaryph-story__canvas {
	opacity: 1;
}

.binaryph-about .binaryph-chapter__visual.is-dragging > .binaryph-story__canvas {
	cursor: grabbing;
}

.binaryph-about .binaryph-chapter__visual > .binaryph-chapter__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	max-width: calc(100% - 20px);
	margin: 0;
	padding: 0.35em 0.75em;
	overflow: hidden;
	border: 1px solid rgba(103, 232, 255, 0.3);
	border-radius: 999px;
	background: rgba(5, 6, 15, 0.62);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.52rem, 1.5vw, 0.74rem);
	letter-spacing: 0.12em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--about-ink);
	pointer-events: none;
}

.binaryph-about .binaryph-chapter__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1.4vw, 18px);
	padding-top: clamp(2px, 1.5vw, 16px);
}

.binaryph-about .binaryph-chapter__copy > * {
	margin: 0;
}

.binaryph-about .binaryph-chapter__copy .binaryph-eyebrow {
	font-size: clamp(0.56rem, 1.5vw, 0.8rem);
	letter-spacing: 0.14em;
}

.binaryph-about .binaryph-chapter__copy h3,
.binaryph-about .binaryph-chapter__copy h2 {
	font-size: clamp(1.08rem, 4.6vw, 2.8rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.binaryph-about .binaryph-chapter__copy p,
.binaryph-about .binaryph-chapter__copy li {
	font-size: clamp(0.84rem, 2.4vw, 1.12rem);
	line-height: 1.6;
}

.binaryph-about .binaryph-chapter__copy .binaryph-chapter__chips {
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--border-glass);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.6rem, 1.6vw, 0.8rem);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--custom-secondary);
}

/* --------------------------------------------------------------
   4. The offer: modernize your office or business
-------------------------------------------------------------- */
.binaryph-about-offer {
	padding-block: clamp(24px, 6vw, 72px);
	background:
		radial-gradient(70% 60% at 70% 50%, color-mix(in srgb, var(--wp--preset--color--accent-violet) 16%, transparent), transparent 70%),
		linear-gradient(180deg, transparent, color-mix(in srgb, var(--wp--preset--color--custom-primary) 8%, transparent) 50%, transparent);
}

.binaryph-about.binaryph-about-offer .binaryph-chapter {
	padding: clamp(14px, 3vw, 40px);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 22%, transparent);
	border-radius: clamp(18px, 3vw, 36px);
	background: color-mix(in srgb, var(--wp--preset--color--surface-1) 70%, transparent);
	box-shadow: 0 40px 120px -60px color-mix(in srgb, var(--wp--preset--color--custom-primary) 80%, transparent);
}

.binaryph-about .binaryph-about-offer__title {
	background: linear-gradient(100deg, var(--wp--preset--color--base) 30%, var(--wp--preset--color--custom-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.binaryph-about .binaryph-about-offer__list {
	display: grid;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.binaryph-about .binaryph-about-offer__list > li {
	position: relative;
	margin: 0;
	padding-left: 1.6em;
}

.binaryph-about .binaryph-about-offer__list > li::before {
	content: "";
	position: absolute;
	top: 0.32em;
	left: 0;
	width: 1em;
	height: 1em;
	background: var(--wp--preset--color--accent-emerald);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------
   5. Toolkit: a spiral of glass cards around a fiber spine
-------------------------------------------------------------- */
.binaryph-about-skills {
	--card-w: clamp(170px, 26vw, 320px);
	padding-bottom: clamp(40px, 8vw, 96px);
}

/* Static (no JS, reduced motion): two columns of cards, side by side. */
.binaryph-about .binaryph-about-helix {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 2vw, 20px);
	max-width: 980px;
	margin: 0 auto;
}

.binaryph-about .binaryph-about-helix > *,
.binaryph-about .binaryph-about-skills__stage > *,
.binaryph-about .binaryph-about-skill > * {
	margin: 0;
}

.binaryph-about .binaryph-about-skill {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(12px, 2vw, 24px);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 26%, transparent);
	border-radius: 18px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--wp--preset--color--custom-primary) 24%, var(--about-panel)), var(--about-panel) 55%);
	box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8);
	color: var(--about-ink);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.binaryph-about .binaryph-about-skill h3 {
	font-size: clamp(0.84rem, 2.2vw, 1.25rem);
	line-height: 1.2;
	color: var(--about-ink);
}

.binaryph-about .binaryph-about-skill p {
	font-size: clamp(0.7rem, 1.8vw, 0.95rem);
	line-height: 1.45;
	color: var(--about-dim);
}

.binaryph-about .binaryph-about-skill .binaryph-icon-ring {
	width: clamp(2rem, 5vw, 2.6rem);
	height: clamp(2rem, 5vw, 2.6rem);
}

/* The icons are CSS masks painted in the ring's colour, so the page's
   content holds no inline SVG for an editor's save to strip. */
.binaryph-about .binaryph-about-icon::before {
	content: "";
	width: 55%;
	height: 55%;
	background: currentcolor;
	-webkit-mask: var(--about-icon) center / contain no-repeat;
	mask: var(--about-icon) center / contain no-repeat;
	print-color-adjust: exact;
}

/* High contrast modes repaint backgrounds: keep the icons in the text
   colour. */
@media (forced-colors: active) {

	.binaryph-about .binaryph-about-icon::before {
		forced-color-adjust: none;
		background: CanvasText;
	}
}

.binaryph-about .binaryph-about-icon--code {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-about-icon--layers {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-about-icon--wifi {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cpath d='M12 20h.01'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-about-icon--cloud {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-about-icon--shield {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-about-icon--refresh {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-about-icon--check {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}

.binaryph-about .binaryph-about-icon--chip {
	--about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3'/%3E%3C/svg%3E");
}

/* Glass hover: a sheen sweeps across, the edge lights up. */
.binaryph-about .binaryph-about-skill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.14) 45%, transparent 60%);
	translate: -120% 0;
	transition: translate 0.9s ease;
	pointer-events: none;
}

.binaryph-about .binaryph-about-skill:hover::after {
	translate: 120% 0;
}

.binaryph-about .binaryph-about-skill:hover,
.binaryph-about .binaryph-about-skill.is-front {
	border-color: color-mix(in srgb, var(--wp--preset--color--custom-secondary) 75%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--custom-secondary) 30%, transparent), 0 24px 60px -20px color-mix(in srgb, var(--wp--preset--color--custom-primary) 70%, transparent);
}

/* Spiral (main.js adds .is-spiral): the stage becomes a tall track and the
   view inside it stays pinned while the cards orbit. */
.binaryph-about-skills.is-spiral .binaryph-about-skills__stage {
	height: calc((var(--n, 8) - 1) * 30vh + 100vh);
	margin-inline: calc(var(--about-gutter) * -1);
}

.binaryph-about-skills.is-spiral .binaryph-about-skills__view {
	position: sticky;
	top: var(--about-top);
	height: calc(100vh - var(--about-top));
	overflow: clip;
	perspective: 1400px;
	perspective-origin: 50% 45%;
}

/* The cards' own perspective sits on their direct parent; the whole
   spiral leans toward the mouse (main.js sets --tilt-x/--tilt-y). */
.binaryph-about.binaryph-about-skills.is-spiral .binaryph-about-helix {
	position: absolute;
	inset: 0;
	display: block;
	max-width: none;
	margin: 0;
	perspective: 1600px;
	perspective-origin: 50% 45%;
	transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Each card's place, turn, size, fade, blur and stacking come from
   main.js every frame (inline styles), so nothing here transitions
   transform or opacity, which would turn the scroll scrub into lag. */
.binaryph-about.binaryph-about-skills.is-spiral .binaryph-about-skill {
	position: absolute;
	top: 45%;
	left: 50%;
	width: var(--card-w);
	translate: -50% -50%;
	backface-visibility: hidden;
	will-change: transform, opacity;
	cursor: pointer;
}

/* Settled flat in front: the card lights up. */
.binaryph-about.binaryph-about-skills.is-spiral .binaryph-about-skill.is-settled {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--custom-secondary) 40%, transparent),
		0 0 44px -8px color-mix(in srgb, var(--wp--preset--color--custom-secondary) 50%, transparent),
		0 30px 70px -24px color-mix(in srgb, var(--wp--preset--color--custom-primary) 80%, transparent);
}

/* The spine (Oni's sword), stacked at 50: cards on the far half of the
   orbit (main.js stacks them below 50) pass behind it. */
.binaryph-about.binaryph-about-skills.is-spiral .binaryph-about-helix::before,
.binaryph-about.binaryph-about-skills.is-spiral .binaryph-about-helix::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 50;
	width: 6px;
	border-radius: 3px;
	translate: -50% 0;
	pointer-events: none;
}

.binaryph-about.binaryph-about-skills.is-spiral .binaryph-about-helix::before {
	background: linear-gradient(transparent, var(--wp--preset--color--custom-secondary) 22%, var(--wp--preset--color--custom-primary) 50%, var(--wp--preset--color--accent-violet) 78%, transparent);
	box-shadow: 0 0 18px 2px color-mix(in srgb, var(--wp--preset--color--custom-secondary) 55%, transparent);
	opacity: 0.85;
}

/* Light pulses running up the fiber. */
.binaryph-about.binaryph-about-skills.is-spiral .binaryph-about-helix::after {
	background: repeating-linear-gradient(to bottom, transparent 0 120px, rgba(255, 255, 255, 0.9) 120px 132px, transparent 132px 220px);
	-webkit-mask: linear-gradient(transparent, #000 25%, #000 75%, transparent);
	mask: linear-gradient(transparent, #000 25%, #000 75%, transparent);
	animation: binaryph-about-pulse 2.2s linear infinite;
}

/* --------------------------------------------------------------
   6. Contact and support
-------------------------------------------------------------- */
.binaryph-about .binaryph-about-contact {
	padding-block: clamp(56px, 10vw, 128px) 0;
}

.binaryph-about .binaryph-about-card-stage {
	perspective: 1000px;
	animation: binaryph-about-float 7s ease-in-out infinite;
}

.binaryph-about .binaryph-about-card {
	position: relative;
	max-width: 460px;
	aspect-ratio: 1.6;
	margin: 0 auto;
	cursor: pointer;
	transform-style: preserve-3d;
	transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.binaryph-about .binaryph-about-card.is-flipped {
	transform: rotateY(180deg);
}

.binaryph-about .binaryph-about-card__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	margin: 0;
	padding: clamp(10px, 3vw, 28px);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 35%, transparent);
	border-radius: clamp(10px, 2vw, 20px);
	backface-visibility: hidden;
	color: var(--about-ink);
	box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--wp--preset--color--custom-primary) 70%, transparent);
}

.binaryph-about .binaryph-about-card__face > * {
	margin: 0;
}

.binaryph-about .binaryph-about-card__face.is-front {
	background:
		radial-gradient(60% 80% at 100% 0, color-mix(in srgb, var(--wp--preset--color--custom-primary) 40%, transparent), transparent 70%),
		repeating-linear-gradient(90deg, rgba(103, 232, 255, 0.05) 0 1px, transparent 1px 18px),
		linear-gradient(135deg, #111530, var(--about-panel) 60%);
}

/* A chip on the card, as on a smart card. */
.binaryph-about .binaryph-about-card__face.is-front::after {
	content: "";
	position: absolute;
	top: 34%;
	right: clamp(10px, 3vw, 28px);
	width: 16%;
	aspect-ratio: 1.3;
	border-radius: 18%;
	background:
		linear-gradient(90deg, transparent 32%, rgba(5, 6, 15, 0.45) 32% 36%, transparent 36% 64%, rgba(5, 6, 15, 0.45) 64% 68%, transparent 68%),
		linear-gradient(135deg, var(--wp--preset--color--custom-secondary), var(--wp--preset--color--accent-violet));
}

.binaryph-about .binaryph-about-card__face.is-back {
	align-items: center;
	justify-content: center;
	text-align: center;
	transform: rotateY(180deg);
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px),
		linear-gradient(150deg, var(--wp--preset--color--custom-primary), var(--wp--preset--color--accent-violet));
}

.binaryph-about .binaryph-about-card__brand {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(0.8rem, 2.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.binaryph-about .binaryph-about-card__face.is-front .binaryph-about-card__brand {
	position: absolute;
	top: clamp(10px, 3vw, 28px);
	left: clamp(10px, 3vw, 28px);
}

.binaryph-about .binaryph-about-card__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1rem, 4.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
}

.binaryph-about .binaryph-about-card__role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.46rem, 1.4vw, 0.78rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--custom-secondary);
}

.binaryph-about .binaryph-about-card__face.is-back .binaryph-about-card__role {
	color: var(--about-ink);
}

.binaryph-about .binaryph-about-contact__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.binaryph-about .binaryph-about-contact__copy > * {
	margin: 0;
}

.binaryph-about .binaryph-about-contact__copy h2 {
	font-size: clamp(1.2rem, 4.6vw, 3rem);
	line-height: 1.08;
}

.binaryph-about .binaryph-about-contact__lines {
	font-size: clamp(0.78rem, 2.3vw, 1.1rem);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.binaryph-about .binaryph-pay-list {
	display: grid;
	gap: clamp(10px, 2vw, 20px);
	max-width: 1040px;
	margin: 0 auto;
	padding-bottom: clamp(56px, 10vw, 140px);
}

@media (min-width: 900px) {

	.binaryph-about .binaryph-pay-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.binaryph-about .binaryph-pay-list > * {
	margin: 0;
}

.binaryph-about .binaryph-pay {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(12px, 3vw, 24px);
	align-items: center;
	padding: clamp(12px, 2.4vw, 24px);
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: 20px;
	background: var(--wp--preset--color--overlay-glass);
}

.binaryph-about .binaryph-pay__visual {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
}

.binaryph-about .binaryph-pay__visual a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

/* The frame clips anything outside it, the focus ring included: draw the
   ring inside the image instead, in the primary blue (the theme's cyan
   ring would be faint on a white QR code). */
.binaryph-about .binaryph-pay__visual a:focus-visible {
	outline: 3px solid var(--wp--preset--color--custom-primary);
	outline-offset: -5px;
}

.binaryph-about .binaryph-pay__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.binaryph-about .binaryph-pay__visual.is-qr img {
	object-fit: contain;
}

/* PayPal has no image of its own: a coffee cup, steaming. */
.binaryph-about .binaryph-pay__visual.is-coffee {
	background: linear-gradient(140deg, var(--wp--preset--color--custom-primary), var(--wp--preset--color--accent-violet));
}

.binaryph-about .binaryph-pay__visual.is-coffee::before {
	content: "";
	width: 46%;
	aspect-ratio: 1;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.binaryph-about .binaryph-pay__visual.is-coffee::after {
	content: "";
	position: absolute;
	top: 14%;
	left: 38%;
	width: 18%;
	height: 22%;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 22c-2-4 2-6 0-10M12 22c-2-4 2-6 0-10M18 22c-2-4 2-6 0-10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 22c-2-4 2-6 0-10M12 22c-2-4 2-6 0-10M18 22c-2-4 2-6 0-10'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.8;
	animation: binaryph-about-steam 3s ease-in-out infinite;
}

.binaryph-about .binaryph-pay__details {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.binaryph-about .binaryph-pay__details > * {
	margin: 0;
}

.binaryph-about .binaryph-pay h3 {
	font-size: clamp(0.92rem, 2.6vw, 1.3rem);
}

.binaryph-about .binaryph-pay p {
	font-size: clamp(0.78rem, 2.2vw, 1rem);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.binaryph-about .binaryph-copy code {
	word-break: break-all;
}

.binaryph-copy__button {
	margin-left: 0.5em;
	padding: 0.45em 0.85em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 55%, transparent);
	border-radius: 999px;
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
	color: var(--wp--preset--color--custom-secondary);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.binaryph-copy__button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--custom-secondary) 14%, transparent);
}

/* --------------------------------------------------------------
   7. Keyframes, pausing, lite rendering, reduced motion
-------------------------------------------------------------- */
@keyframes binaryph-about-aura {

	50% {
		opacity: 0.95;
		scale: 1.06;
	}
}

@keyframes binaryph-about-float {

	50% {
		translate: 0 -8px;
	}
}

@keyframes binaryph-about-sheen {

	0%,
	55% {
		background-position: 130% 0;
	}

	100% {
		background-position: -30% 0;
	}
}

@keyframes binaryph-about-cue {

	0% {
		scale: 1 0;
	}

	50% {
		scale: 1 1;
		opacity: 1;
	}

	100% {
		scale: 1 1;
		opacity: 0;
	}
}

@keyframes binaryph-about-pulse {

	to {
		background-position: 0 -220px;
	}
}

@keyframes binaryph-about-steam {

	50% {
		translate: 0 -4px;
		opacity: 0.4;
	}
}

/* Off-screen sections pause their loops (main.js); reveals are not loops,
   so they are never frozen mid-way. */
.binaryph-paused.binaryph-about .binaryph-about-hero__rig::before,
.binaryph-paused.binaryph-about .binaryph-about-hero__portrait::after,
.binaryph-paused.binaryph-about .binaryph-about-hero__tags > p,
.binaryph-paused.binaryph-about .binaryph-about-hero__cue::after,
.binaryph-paused.binaryph-about .binaryph-about-helix::after,
.binaryph-paused.binaryph-about .binaryph-about-card-stage,
.binaryph-paused.binaryph-about .binaryph-pay__visual::after {
	animation-play-state: paused;
}

/* Lite rendering (Data Saver, in-app browsers): same motion, no blur. */
html.binaryph-lite .binaryph-about .binaryph-about-hero__rig::before {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {

	.binaryph-about .binaryph-about-hero__rig::before,
	.binaryph-about .binaryph-about-hero__portrait::after,
	.binaryph-about .binaryph-about-hero__tags > p,
	.binaryph-about .binaryph-about-hero__cue::after,
	.binaryph-about .binaryph-about-card-stage,
	.binaryph-about .binaryph-pay__visual::after {
		animation: none;
	}

	.binaryph-about .binaryph-about-card,
	.binaryph-about .binaryph-about-skill::after {
		transition: none;
	}
}