/*
Theme Name: BinaryPH AI Theme
Author: BinaryPH
Description: BinaryPH AI Theme is a modern WordPress Full Site Editing block theme for AI studios, automation agencies, and technology teams. It ships a dark glassmorphic design system with electric blue and cyan gradients, fluid typography, dependency-free scroll animations, and a full library of block patterns including heroes, sliders, counters, pricing, testimonials, tabs, video popups, magazine layouts, and WooCommerce storefront sections.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.4.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: binaryph-ai
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, news
*/

/* --------------------------------------------------------------
   1. Focus
-------------------------------------------------------------- */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-secondary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --------------------------------------------------------------
   2. Sticky glass header
-------------------------------------------------------------- */
.binaryph-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--body-background) 72%, transparent);
	border-bottom: 1px solid transparent;
	transition:
		background var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		border-color var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		box-shadow var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		transform var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease);
}

/* The glass blur lives on a pseudo-element, never on .binaryph-header itself:
   backdrop-filter creates a containing block for position:fixed descendants,
   which would trap the navigation's mobile overlay inside the header bar. */
.binaryph-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) {

	.binaryph-header::before {
		backdrop-filter: blur(var(--wp--custom--glass--blur, 16px)) saturate(140%);
		-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur, 16px)) saturate(140%);
	}
}

body.admin-bar .binaryph-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* On phones the WordPress admin toolbar scrolls away with the page instead of
   staying pinned, so the header must stick to the real viewport top — keeping
   the toolbar offset would strand the header mid-screen over the content. */
@media (max-width: 600px) {

	body.admin-bar .binaryph-header {
		top: 0;
	}
}

/* Mobile auto-hide: main.js flags the body while the page is actively
   scrolling; the header slides out of the way and returns on pause.
   The :has() guard keeps it in place while the menu overlay is open
   (a transform here would also trap the overlay's fixed positioning). */
@media (max-width: 781px) {

	body.is-scrolling .binaryph-header:not(:has(.is-menu-open)) {
		transform: translateY(calc(-100% - 1px));
	}
}

body.is-scrolled .binaryph-header {
	background: color-mix(in srgb, var(--wp--preset--color--body-background) 88%, transparent);
	border-bottom-color: var(--wp--preset--color--border-glass);
	box-shadow: var(--wp--preset--shadow--soft);
}

.binaryph-header-sentinel {
	position: absolute;
	top: 0;
	height: 1px;
	width: 1px;
	pointer-events: none;
}

/* The template-part wrapper is exactly the header's height, which traps
   position:sticky (it can never travel inside a parent it fills). Removing
   the wrapper's box lets the header stick against the page itself. */
header.wp-block-template-part:has(.binaryph-header) {
	display: contents;
}

/* --------------------------------------------------------------
   3. Post format badges (inline SVG masks, palette-driven)
-------------------------------------------------------------- */
.post_format-post-format-video .wp-block-post-featured-image,
.post_format-post-format-audio .wp-block-post-featured-image,
.post_format-post-format-gallery .wp-block-post-featured-image,
.post_format-post-format-image .wp-block-post-featured-image {
	position: relative;
}

.post_format-post-format-video .wp-block-post-featured-image::after,
.post_format-post-format-audio .wp-block-post-featured-image::after,
.post_format-post-format-gallery .wp-block-post-featured-image::after,
.post_format-post-format-image .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--sm, 0.5rem);
	background-color: var(--wp--preset--color--custom-primary);
	box-shadow: var(--wp--preset--shadow--soft);
}

.post_format-post-format-video .wp-block-post-featured-image::before,
.post_format-post-format-audio .wp-block-post-featured-image::before,
.post_format-post-format-gallery .wp-block-post-featured-image::before,
.post_format-post-format-image .wp-block-post-featured-image::before {
	content: "";
	position: absolute;
	top: 20px;
	right: 20px;
	width: 20px;
	height: 20px;
	z-index: 1;
	background-color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.post_format-post-format-video .wp-block-post-featured-image::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.post_format-post-format-audio .wp-block-post-featured-image::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/%3E%3C/svg%3E");
}

.post_format-post-format-gallery .wp-block-post-featured-image::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 16V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zm-11-4 2.03 2.71L16 11l4 5H8zM2 6v14a2 2 0 0 0 2 2h14v-2H4V6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 16V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zm-11-4 2.03 2.71L16 11l4 5H8zM2 6v14a2 2 0 0 0 2 2h14v-2H4V6z'/%3E%3C/svg%3E");
}

.post_format-post-format-image .wp-block-post-featured-image::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------
   4. Reveal-on-scroll system
   main.js adds `binaryph-anim` to <html> before first paint;
   without JS everything stays visible.
-------------------------------------------------------------- */
html.binaryph-anim .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s var(--wp--custom--motion--ease, ease),
		transform 0.7s var(--wp--custom--motion--ease, ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

html.binaryph-anim .reveal--fade {
	transform: none;
}

html.binaryph-anim .reveal--scale {
	transform: scale(0.94);
}

html.binaryph-anim .reveal--left {
	transform: translateX(-32px);
}

html.binaryph-anim .reveal--right {
	transform: translateX(32px);
}

html.binaryph-anim .reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Editor: never hide content in the canvas. */
.editor-styles-wrapper .reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* --------------------------------------------------------------
   5. Glass surfaces
-------------------------------------------------------------- */
.binaryph-glass {
	background: var(--wp--preset--gradient--gradient-4);
	border: 1px solid var(--wp--preset--color--border-glass);
}

@supports (backdrop-filter: blur(1px)) {

	.binaryph-glass {
		background: var(--wp--preset--color--overlay-glass);
		backdrop-filter: blur(var(--wp--custom--glass--blur, 16px)) saturate(140%);
		-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur, 16px)) saturate(140%);
	}
}

/* The Button block puts extra classes on its square wrapper <div>, so glass
   there drew a square frame around the rounded link. The glass belongs on
   the link itself: one curved shape, one border. */
.wp-block-button.binaryph-glass {
	background: none;
	border: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Pill buttons. Buttons saved before 1.3 carry the old theme default
   (border-radius:0.5rem) inline, which only !important can override; the
   match is that exact value, so a radius picked in the editor still wins. */
.wp-block-button__link[style*="border-radius:0.5rem"] {
	border-radius: var(--wp--custom--radius--full, 999px) !important;
}

/* Anchored on .wp-block-buttons so these win over the outline style's
   transparent fill whichever stylesheet loads last. */
.wp-block-buttons > .wp-block-button.binaryph-glass > .wp-block-button__link:not(.has-background) {
	border: 1px solid var(--wp--preset--color--border-glass);
	background: var(--wp--preset--gradient--gradient-4);
}

@supports (backdrop-filter: blur(1px)) {

	.wp-block-buttons > .wp-block-button.binaryph-glass > .wp-block-button__link:not(.has-background) {
		background: var(--wp--preset--color--overlay-glass);
		-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur, 16px)) saturate(140%);
		backdrop-filter: blur(var(--wp--custom--glass--blur, 16px)) saturate(140%);
	}
}

.wp-block-buttons > .wp-block-button.binaryph-glass > .wp-block-button__link:not(.has-background):hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--custom-secondary) 55%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--custom-secondary) 10%, transparent);
}

/* --------------------------------------------------------------
   6. Card hover lift (palette-derived, survives style variations)
-------------------------------------------------------------- */
.has-hover-effect {
	transition:
		transform var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		box-shadow var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		border-color var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease);
}

.has-hover-effect:hover,
.has-hover-effect:focus-within {
	transform: translateY(-6px);
	box-shadow:
		0 24px 48px -24px color-mix(in srgb, var(--wp--preset--color--custom-secondary) 25%, transparent),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--custom-secondary) 18%, transparent);
}

/* Cards must not jump around under the cursor while being edited. */
.editor-styles-wrapper .has-hover-effect:hover,
.editor-styles-wrapper .has-hover-effect:focus-within {
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------
   7. Buttons
-------------------------------------------------------------- */

/* translate carries the magnetic pull: it springs back (overshoot curve)
   when the pointer leaves, and follows quickly while hovered. */
.wp-element-button,
.wp-block-button__link {
	transition:
		filter var(--wp--custom--motion--duration-fast, 150ms) var(--wp--custom--motion--ease, ease),
		box-shadow var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		transform var(--wp--custom--motion--duration-fast, 150ms) var(--wp--custom--motion--ease, ease),
		translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transition-duration: var(--wp--custom--motion--duration-fast, 150ms), var(--wp--custom--motion--duration, 300ms), var(--wp--custom--motion--duration-fast, 150ms), 0.2s;
}

/* Darken, never brighten, on hover: button text sits on accent fills tuned
   to clear 4.5:1, and brightening would push the light end below it. */
.wp-element-button:hover,
.wp-block-button__link:hover {
	filter: brightness(0.92);
	box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--wp--preset--color--custom-primary) 60%, transparent);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.has-arrow-right .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.has-arrow-right .wp-block-button__link::after {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentcolor;
	-webkit-mask-image: 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 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: 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 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform var(--wp--custom--motion--duration-fast, 150ms) var(--wp--custom--motion--ease, ease);
}

.has-arrow-right .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------
   8. Gradient text
-------------------------------------------------------------- */

/* Site title only gets the gradient wordmark while the user hasn't chosen
   their own color; marks opt in/out via the has-heading-extra-style class. */
.has-heading-extra-style mark,
.wp-block-site-title:not(.has-text-color):not(.has-link-color) a {
	background: var(--wp--preset--gradient--gradient-9);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--custom-secondary);
}

@supports not (-webkit-background-clip: text) {

	.has-heading-extra-style mark,
	.wp-block-site-title:not(.has-text-color):not(.has-link-color) a {
		background: none;
		color: var(--wp--preset--color--custom-secondary);
	}
}

/* --------------------------------------------------------------
   9. Scroll jump buttons (up / down)
-------------------------------------------------------------- */

/* Each button keeps a fixed slot (up above, down below) and only fades in
   and out, so neither ever shifts under the pointer. The stack itself lets
   clicks through; only a visible button catches them. */
.binaryph-scroll-nav {
	position: fixed;
	bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
	right: 2rem;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}

@media (max-width: 600px) {

	.binaryph-scroll-nav {
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		right: 1rem;
	}
}

.binaryph-scroll-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: var(--wp--custom--radius--md, 0.75rem);
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition:
		opacity var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		transform var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		box-shadow var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		visibility 0s linear var(--wp--custom--motion--duration, 300ms);
}

/* Down enters from above, up from below: each drifts toward where it goes. */
.binaryph-scroll-nav .binaryph-scroll-bottom {
	transform: translateY(-8px);
}

.binaryph-scroll-nav button.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

.binaryph-scroll-nav button:hover {
	box-shadow: var(--wp--preset--shadow--glow-cyan);
	color: var(--wp--preset--color--custom-secondary);
}

.binaryph-scroll-nav svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* Footers saved before 1.2.1 carry a lone, unwrapped up button; keep it
   hidden until main.js moves it into the stack. */
.binaryph-scroll-top:not(.binaryph-scroll-nav > *) {
	display: none;
}

/* --------------------------------------------------------------
   10. Logo marquee
-------------------------------------------------------------- */
.binaryph-marquee {
	overflow: hidden;
}

/* Until main.js prepares the loop (editor, no-JS, reduced motion),
   the marquee is a plain static row you can scroll and edit. */
.binaryph-marquee:not(.is-ready) {
	overflow-x: auto;
}

.binaryph-marquee.is-ready {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.binaryph-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 3rem);
	width: max-content;
}

.binaryph-marquee.is-ready .binaryph-marquee__track {
	animation: binaryph-marquee var(--marquee-duration, 36s) linear infinite;
}

.binaryph-marquee:hover .binaryph-marquee__track,
.binaryph-marquee:focus-within .binaryph-marquee__track {
	animation-play-state: paused;
}

.binaryph-marquee__track > *,
.binaryph-marquee__track > [aria-hidden="true"] > * {
	flex: none;
	margin: 0;
	white-space: nowrap;
	opacity: 0.55;
	transition: opacity var(--wp--custom--motion--duration-fast, 150ms) ease;
}

.binaryph-marquee__track > *:hover,
.binaryph-marquee__track > [aria-hidden="true"] > *:hover {
	opacity: 1;
}

/* Logo images dropped into the track render at a tidy uniform height. */
.binaryph-marquee__track .wp-block-image img {
	max-height: 2.25rem;
	width: auto;
}

@keyframes binaryph-marquee {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* --------------------------------------------------------------
   11. Aurora orbs
-------------------------------------------------------------- */
.binaryph-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
	animation: binaryph-float 9s var(--wp--custom--motion--ease, ease-in-out) infinite alternate;
}

@keyframes binaryph-float {

	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(0, -28px, 0) scale(1.06);
	}
}

/* --------------------------------------------------------------
   12. Slider (CSS scroll-snap; JS adds controls, dots, autoplay)
-------------------------------------------------------------- */
.binaryph-slider {
	position: relative;
}

.binaryph-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.binaryph-slider__track::-webkit-scrollbar {
	display: none;
}

.binaryph-slider__track > * {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-width: 100%;
}

.binaryph-slider__prev,
.binaryph-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: var(--wp--custom--radius--full, 999px);
	background: color-mix(in srgb, var(--wp--preset--color--body-background) 60%, transparent);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition:
		box-shadow var(--wp--custom--motion--duration-fast, 150ms) ease,
		color var(--wp--custom--motion--duration-fast, 150ms) ease;
}

.binaryph-slider__prev {
	left: 1rem;
}

.binaryph-slider__next {
	right: 1rem;
}

.binaryph-slider__prev:hover,
.binaryph-slider__next:hover {
	box-shadow: var(--wp--preset--shadow--glow-cyan);
	color: var(--wp--preset--color--custom-secondary);
}

.binaryph-slider__prev svg,
.binaryph-slider__next svg {
	width: 1.1rem;
	height: 1.1rem;
}

.binaryph-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	z-index: 5;
}

.binaryph-slider__dots button {
	width: 0.55rem;
	height: 0.55rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--full, 999px);
	background: color-mix(in srgb, var(--wp--preset--color--base-2) 35%, transparent);
	cursor: pointer;
	transition:
		width var(--wp--custom--motion--duration, 300ms) var(--wp--custom--motion--ease, ease),
		background var(--wp--custom--motion--duration, 300ms) ease;
}

.binaryph-slider__dots button[aria-current="true"] {
	width: 1.6rem;
	background: var(--wp--preset--color--custom-secondary);
}

/* --------------------------------------------------------------
   13. Tabs (progressive enhancement; no-JS = stacked anchors)
-------------------------------------------------------------- */
.binaryph-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.binaryph-tabs__nav a,
.binaryph-tabs__nav button {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: var(--wp--custom--radius--full, 999px);
	background: transparent;
	color: var(--wp--preset--color--custom-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--wp--custom--motion--duration-fast, 150ms) ease,
		color var(--wp--custom--motion--duration-fast, 150ms) ease,
		border-color var(--wp--custom--motion--duration-fast, 150ms) ease;
}

.binaryph-tabs__nav a:hover,
.binaryph-tabs__nav button:hover {
	color: var(--wp--preset--color--base);
	border-color: color-mix(in srgb, var(--wp--preset--color--custom-secondary) 40%, transparent);
}

.binaryph-tabs__nav [aria-selected="true"] {
	background: var(--wp--preset--gradient--gradient-2);
	border-color: transparent;
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
}

.binaryph-tabs__panel[hidden] {
	display: none;
}

/* --------------------------------------------------------------
   14. Video popup dialog
-------------------------------------------------------------- */
.binaryph-video-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.binaryph-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--wp--custom--radius--full, 999px);
	background: var(--wp--preset--gradient--gradient-2);
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
	animation: binaryph-pulse 2.4s ease-out infinite;
}

.binaryph-play svg {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 3px;
}

@keyframes binaryph-pulse {

	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--custom-secondary) 45%, transparent);
	}

	70% {
		box-shadow: 0 0 0 22px transparent;
	}

	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

.binaryph-video-dialog {
	width: min(90vw, 960px);
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: var(--wp--custom--radius--lg, 1rem);
	background: var(--wp--preset--color--surface-1);
	overflow: hidden;
}

.binaryph-video-dialog::backdrop {
	background: rgba(3, 4, 10, 0.85);
	backdrop-filter: blur(6px);
}

.binaryph-video-dialog iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.binaryph-video-dialog__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--full, 999px);
	background: rgba(3, 4, 10, 0.7);
	color: var(--wp--preset--color--base-2);
	cursor: pointer;
}

.binaryph-video-dialog__close svg {
	width: 1rem;
	height: 1rem;
}

/* --------------------------------------------------------------
   15. Progress bars (fill animates when revealed)
-------------------------------------------------------------- */
.binaryph-progress {
	position: relative;
	height: 0.6rem;
	border-radius: var(--wp--custom--radius--full, 999px);
	background: var(--wp--preset--color--surface-2);
	overflow: hidden;
}

.binaryph-progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--progress, 0%);
	border-radius: inherit;
	background: var(--wp--preset--gradient--gradient-2);
}

html.binaryph-anim .reveal .binaryph-progress::after,
html.binaryph-anim .binaryph-progress.reveal::after {
	width: 0;
	transition: width 1.2s var(--wp--custom--motion--ease, ease);
}

html.binaryph-anim .reveal.is-revealed .binaryph-progress::after,
html.binaryph-anim .binaryph-progress.reveal.is-revealed::after {
	width: var(--progress, 0%);
}

/* --------------------------------------------------------------
   16. Counters
-------------------------------------------------------------- */
.binaryph-counter {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------
   17. Forms (Contact Form 7, comments, WooCommerce)
-------------------------------------------------------------- */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select,
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea,
.woocommerce .input-text,
.wc-block-components-text-input input {
	width: 100%;
	padding: 0.7rem 0.9rem;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: var(--wp--custom--radius--sm, 0.5rem);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition:
		border-color var(--wp--custom--motion--duration-fast, 150ms) ease,
		box-shadow var(--wp--custom--motion--duration-fast, 150ms) ease;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.woocommerce .input-text:focus {
	border-color: var(--wp--preset--color--custom-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--custom-primary) 25%, transparent);
	outline: none;
}

.wpcf7 input[type="submit"] {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	background: var(--wp--preset--gradient--gradient-2);
	border: 0;
	border-radius: var(--wp--custom--radius--full, 999px);
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
	font-weight: 600;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	filter: brightness(0.92);
}

.wpcf7 label {
	display: block;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--custom-text);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------
   18. WooCommerce token bridge
-------------------------------------------------------------- */
.wc-block-components-button:not(.is-link),
.woocommerce a.button,
.woocommerce button.button {
	background: var(--wp--preset--gradient--gradient-2);
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
	border-radius: var(--wp--custom--radius--full, 999px);
	border: 0;
}

.wc-block-components-button:not(.is-link):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	filter: brightness(0.92);
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
}

.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
	color: var(--wp--preset--color--custom-text);
}

.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--custom-secondary);
	font-family: var(--wp--preset--font-family--mono);
}

.wc-block-components-product-badge,
.wc-block-grid__product-onsale,
.woocommerce span.onsale {
	background: var(--wp--preset--gradient--gradient-3);
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
	border: 0;
	border-radius: var(--wp--custom--radius--full, 999px);
	padding: 0.25em 0.85em;
	font-weight: 600;
}

.wc-block-mini-cart__button {
	color: var(--wp--preset--color--base);
}

.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--custom-primary);
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
	border: 0;
}

/* --------------------------------------------------------------
   19. Navigation
-------------------------------------------------------------- */
.wp-block-navigation a:not(.wp-element-button) {
	transition: color var(--wp--custom--motion--duration-fast, 150ms) ease;
}

:root :where(.wp-block-navigation a:not(.wp-element-button):hover) {
	color: var(--wp--preset--color--custom-secondary);
}

/* Current page indicator */
.wp-block-navigation .current-menu-item > a:not(.wp-element-button),
.wp-block-navigation a[aria-current="page"]:not(.wp-element-button) {
	color: var(--wp--preset--color--custom-secondary);
}

/* Desktop dropdown submenus */
@media (min-width: 720px) {

	.wp-block-navigation .wp-block-navigation__submenu-container {
		min-width: 220px;
		background: var(--wp--preset--color--surface-2);
		border: 1px solid var(--wp--preset--color--border-glass);
		border-radius: var(--wp--custom--radius--md, 0.75rem);
		box-shadow: var(--wp--preset--shadow--card);
		padding: 0.4rem;
		margin-top: 0.5rem;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container a {
		font-size: 0.9em;
		border-radius: var(--wp--custom--radius--sm, 0.5rem);
		padding: 0.5rem 0.75rem;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
		background: color-mix(in srgb, var(--wp--preset--color--custom-primary) 18%, transparent);
	}
}

/* Hamburger + close buttons: comfortable 44px tap targets */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: var(--wp--custom--radius--sm, 0.5rem);
	background: var(--wp--preset--color--overlay-glass);
	transition: border-color var(--wp--custom--motion--duration-fast, 150ms) ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--custom-secondary) 55%, transparent);
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* Mobile fullscreen menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 100000;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--surface-2) transparent;
	padding: 1.25rem clamp(1.25rem, 6vw, 2.5rem) 2.5rem;
}

/* Default overlay backdrop — only while the user hasn't picked their own
   "Submenu & overlay" background (core adds has-background when they do). */
.wp-block-navigation__responsive-container.is-menu-open:not(.has-background) {
	background-image: var(--wp--preset--gradient--gradient-1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
	padding: 0.55rem 0;
}

/* Default overlay typography — each property applies only while the
   Navigation block's own Typography setting for it is untouched, so the
   editor controls always stay in charge. */
.wp-block-navigation:not([style*="font-size"]):not([class*="font-size"]) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-navigation:not([style*="font-family"]):not([class*="font-family"]) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
	font-family: var(--wp--preset--font-family--heading);
}

.wp-block-navigation:not([style*="font-weight"]) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
	font-weight: 600;
}

.wp-block-navigation:not([style*="letter-spacing"]) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
	letter-spacing: -0.01em;
}

/* Submenus inside the overlay: indented rail, lighter type */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	margin-top: 0.25rem;
	padding-left: 1rem;
	border-left: 1px solid var(--wp--preset--color--border-glass);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 0.9em;
	opacity: 0.75;
	padding: 0.45rem 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-navigation__responsive-container.is-menu-open {
		animation: binaryph-overlay-in 250ms var(--wp--custom--motion--ease, ease) both;
	}
}

@keyframes binaryph-overlay-in {

	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------
   20. Misc utilities
-------------------------------------------------------------- */
footer.wp-block-template-part {
	margin: 0;
}

/* Justified paragraph style: Word-like inter-word justification, no hyphens.
   Lives here (not in the block-style registration) so it loads with the main
   stylesheet on every page, independent of core's block-asset plumbing. */
.is-style-justified {
	text-align: justify;
	text-justify: inter-word;
	text-wrap: pretty;
}

/* An empty Button block renders as a blank colored pill — never show one.
   Scoped to <a> only: form submit controls like the comment form's
   <input type="submit"> always match :empty (their label is an attribute),
   and must never be hidden. The :not() keeps the editor's "Add text…"
   placeholder visible while editing. */
a.wp-block-button__link:empty:not([data-rich-text-placeholder]) {
	display: none;
}

/* Slider arrows ship hidden and are revealed by main.js when wired —
   without JS they would be dead controls. Author display rules would
   otherwise defeat the hidden attribute, so make it explicit. */
.binaryph-slider__prev[hidden],
.binaryph-slider__next[hidden] {
	display: none;
}

.has-img-before {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.binaryph-clip {
	position: relative;
	overflow: hidden;
}

.binaryph-above {
	position: relative;
	z-index: 1;
}

.binaryph-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--custom-secondary);
}

.binaryph-icon-ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--wp--custom--radius--md, 0.75rem);
	background: color-mix(in srgb, var(--wp--preset--color--custom-primary) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--custom-secondary) 25%, transparent);
	color: var(--wp--preset--color--custom-secondary);
}

.binaryph-icon-ring svg {
	width: 1.5rem;
	height: 1.5rem;
}

.binaryph-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--wp--custom--radius--full, 999px);
	background: var(--wp--preset--gradient--gradient-3);
	color: var(--wp--custom--color--on-accent, var(--wp--preset--color--base-2));
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	flex: none;
}

.binaryph-stars {
	display: inline-flex;
	gap: 0.15rem;
	color: var(--wp--preset--color--custom-secondary);
}

.binaryph-stars svg {
	width: 1rem;
	height: 1rem;
}

/* Scroll-driven enhancement for decorative orbs. */
@supports (animation-timeline: view()) {

	.binaryph-orb {
		animation: binaryph-float linear both;
		animation-timeline: view();
	}
}

/* --------------------------------------------------------------
   20b. Scroll and texture effects
   Every effect paints beneath content (negative z-index inside an
   isolated stacking context), never over text.
-------------------------------------------------------------- */
.binaryph-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Rise from a mask, and wipe upward. The waiting state is only opacity and
   offset: a clip-path there would hide the element from the scroll
   observer itself (a fully clipped element never "intersects"), so the
   clip runs as an animation once the element is revealed. The end insets
   are negative so descenders and glows are never cut off. */
html.binaryph-anim .reveal--rise {
	transform: translateY(0.35em);
}

html.binaryph-anim .reveal--wipe {
	transform: none;
}

html.binaryph-anim .reveal--rise.is-revealed {
	animation: binaryph-rise 0.8s var(--wp--custom--motion--ease, ease) var(--reveal-delay, 0ms) both;
}

html.binaryph-anim .reveal--wipe.is-revealed {
	animation: binaryph-wipe 1s cubic-bezier(0.65, 0, 0.35, 1) var(--reveal-delay, 0ms) both;
}

@keyframes binaryph-rise {

	from {
		clip-path: inset(0 0 100% 0);
		transform: translateY(0.35em);
	}

	to {
		clip-path: inset(-20% -5% -20% -5%);
		transform: none;
	}
}

@keyframes binaryph-wipe {

	from {
		clip-path: inset(100% 0 0 0);
	}

	to {
		clip-path: inset(-5%);
	}
}

/* Images inside a wipe settle from a slight zoom as they uncover. */
html.binaryph-anim .reveal--wipe img {
	scale: 1.12;
	transition: scale 1.4s var(--wp--custom--motion--ease, ease);
	transition-delay: var(--reveal-delay, 0ms);
}

html.binaryph-anim .reveal--wipe.is-revealed img {
	scale: 1;
}

/* Light up on scroll. Unlit words use the secondary text color (6.6:1 on
   the default background), so the statement reads at every scroll
   position; lighting lifts each word to the heading color. */
html.binaryph-anim .binaryph-lightup.is-split .binaryph-word {
	color: var(--wp--preset--color--contrast-2);
	transition: color 0.35s ease;
}

html.binaryph-anim .binaryph-lightup.is-split .binaryph-word.is-lit {
	color: var(--wp--preset--color--base);
}

/* Lit words inside a link take the link's color, so links stay links. */
html.binaryph-anim .binaryph-lightup.is-split a .binaryph-word.is-lit {
	color: inherit;
}

/* Film grain: the Aurora Mesh hero gets it automatically; any Group can
   opt in. Painted under the content at 5% so it never veils text. */
.binaryph-grain,
.binaryph-clip.has-gradient-5-gradient-background {
	position: relative;
	isolation: isolate;
}

.binaryph-grain::before,
.binaryph-clip.has-gradient-5-gradient-background::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	animation: binaryph-grain 0.9s steps(4) infinite;
}

@keyframes binaryph-grain {

	0% {
		background-position: 0 0;
	}

	25% {
		background-position: -37px 21px;
	}

	50% {
		background-position: 53px -44px;
	}

	75% {
		background-position: -18px 66px;
	}

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

/* Cursor spotlight: a soft glow tracks the pointer beneath card content. */
.has-hover-effect,
.binaryph-spotlight {
	position: relative;
	isolation: isolate;
}

.has-hover-effect::after,
.binaryph-spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 0%), color-mix(in srgb, var(--wp--preset--color--custom-secondary) 12%, transparent), transparent 65%);
	opacity: 0;
	transition: opacity var(--wp--custom--motion--duration, 300ms) ease;
}

.has-hover-effect:hover::after,
.binaryph-spotlight:hover::after {
	opacity: 1;
}

/* Particle canvas (main.js mounts it): under the content, and faded
   toward the centre where headlines sit. */
.has-particles {
	position: relative;
	isolation: isolate;
}

.binaryph-particles__canvas {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0, 0, 0, 0.2), #000 100%);
	mask-image: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0, 0, 0, 0.2), #000 100%);
}

/* Scroll progress: a 2px line along the bottom of the sticky header on
   every page, driven purely by scroll position (no script). */
@supports (animation-timeline: scroll()) {

	.binaryph-header::after {
		content: "";
		position: absolute;
		inset: auto 0 -1px;
		height: 2px;
		transform-origin: 0 50%;
		background: var(--wp--preset--gradient--gradient-9);
		pointer-events: none;
		animation: binaryph-read-progress linear both;
		animation-timeline: scroll(root block);
	}
}

@keyframes binaryph-read-progress {

	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Cross-document view transitions: a quick crossfade between pages while
   the header stays put. Browsers without support navigate as usual. */
@media (prefers-reduced-motion: no-preference) {

	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 200ms;
}

.binaryph-header {
	view-transition-name: binaryph-header;
}

/* Phones: the scroll buttons tuck away while reading forward (main.js),
   since any floating button there covers body text. */
.binaryph-scroll-nav.is-tucked button.is-visible {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition-delay: 0s, 0s, 0s, var(--wp--custom--motion--duration, 300ms);
}

/* --------------------------------------------------------------
   20c. Motion layer (main.js wires these; none can hide text for
   long — reveals have fail-safes, and everything ends static)
-------------------------------------------------------------- */

/* Masked word rise: headings arrive word by word from behind a mask. The
   mask is a clip-path (not overflow), so words keep their baseline; the
   negative insets leave room for ascenders, descenders and glows. */
html.binaryph-anim .reveal.binaryph-words {
	opacity: 1;
	transform: none;
	transition: none;
}

.binaryph-w {
	display: inline-block;
	clip-path: inset(-0.4em -0.15em -0.18em -0.15em);
}

.binaryph-w__i {
	display: inline-block;
}

html.binaryph-anim .binaryph-words .binaryph-w__i {
	transform: translateY(118%) rotate(4deg);
	transform-origin: 0 100%;
	transition: transform 0.9s var(--wp--custom--motion--ease, ease) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 50ms);
}

html.binaryph-anim .binaryph-words.is-revealed .binaryph-w__i {
	transform: none;
}

/* The AI core (hero canvas): fades in once drawn; its centre is masked
   so the sphere frames the headline instead of running behind it. */
.has-core {
	position: relative;
	isolation: isolate;
}

/* max-width/margin: a hero is a constrained-layout section, whose rules cap
   every direct child at the content width (1200px) and centre it — that
   would squeeze the canvas on wide screens. */
.binaryph-core__canvas,
.binaryph-particles__canvas {
	max-width: none !important;
	margin: 0 !important;
}

.binaryph-core__canvas {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.4s ease;
	-webkit-mask-image: radial-gradient(ellipse 46% 44% at 50% 50%, rgba(0, 0, 0, 0.08) 55%, #000 100%);
	mask-image: radial-gradient(ellipse 46% 44% at 50% 50%, rgba(0, 0, 0, 0.08) 55%, #000 100%);
}

.has-core.is-core-ready .binaryph-core__canvas {
	opacity: 1;
}

@media (max-width: 781px) {

	/* Phones: the text column fills the width, so the core recedes further. */
	.has-core.is-core-ready .binaryph-core__canvas {
		opacity: 0.55;
	}
}

/* Cards tilt toward the pointer (main.js sets --tilt-x/--tilt-y, max 5deg). */
.has-hover-effect:hover {
	transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px);
}

/* Post cards: the featured image wipes up as its card reveals. */
html.binaryph-anim .reveal.is-revealed .wp-block-post-featured-image {
	animation: binaryph-wipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--reveal-delay, 0ms) + 120ms) both;
}

/* Navigation: an underline grows in on hover. */
@media (hover: hover) {

	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:not(.wp-element-button) {
		background-image: linear-gradient(currentcolor, currentcolor);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0 2px;
		transition: background-size 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--wp--custom--motion--duration-fast, 150ms) ease;
	}

	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:not(.wp-element-button):hover {
		background-size: 100% 2px;
	}
}

/* Buttons: a light sheen sweeps across filled buttons on hover (painted
   under the label), and buttons lean toward the pointer (main.js sets
   --mag-x/--mag-y), springing back when it leaves. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%) no-repeat;
	background-position: 120% 0;
	background-size: 250% 100%;
	transition: background-position 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::before {
	background-position: -20% 0;
}

.wp-block-button__link {
	translate: var(--mag-x, 0px) var(--mag-y, 0px);
}

.wp-block-button__link:hover {
	translate: var(--mag-x, 0px) calc(var(--mag-y, 0px) - 2px);
}

/* Footer wordmark (main.js adds it from the site title): huge outlined
   letters with a slow light sweep — decoration, hidden from assistive tech. */
.binaryph-wordmark {
	margin-block-start: var(--wp--preset--spacing--30, 2rem);
	overflow: hidden;
	color: transparent;
	font-family: var(--wp--preset--font-family--heading);
	font-size: min(17vw, 15rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.82;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
	background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--wp--preset--color--custom-secondary) 45%, transparent) 50%, transparent 58%) no-repeat;
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: binaryph-sweep 7s linear infinite;
	pointer-events: none;
	user-select: none;
}

@keyframes binaryph-sweep {

	from {
		background-position: 150% 0;
	}

	to {
		background-position: -50% 0;
	}
}

/* Off-screen sections pause their looping animations (main.js). Only the
   loops are named, so a reveal starting as a section scrolls in is never
   frozen mid-way. */
.binaryph-paused.binaryph-marquee .binaryph-marquee__track,
.binaryph-paused.binaryph-wordmark,
.binaryph-paused .binaryph-play,
.binaryph-paused .binaryph-orb,
.binaryph-paused.binaryph-grain::before,
.binaryph-paused.binaryph-clip.has-gradient-5-gradient-background::before {
	animation-play-state: paused !important;
}

/* Lite rendering (Data Saver, 2G, in-app browsers like Facebook and
   Messenger): every animation still runs; only the costly rendering is
   swapped — backdrop blur becomes a plain fill, and the background orbs
   (already soft gradients) skip their blur filter. */
html.binaryph-lite * {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

html.binaryph-lite .binaryph-orb {
	filter: none;
}

/* Glass panels get a solid surface instead (not Button wrappers — their
   glass lives on the rounded link, see section 5). */
html.binaryph-lite .binaryph-glass:not(.wp-block-button) {
	background: var(--wp--preset--color--surface-1);
}

/* --------------------------------------------------------------
   21. Readability
-------------------------------------------------------------- */

/* Balanced headings avoid a lone last word; "pretty" body text avoids
   orphans. Unsupported browsers simply wrap as before. */
h1,
h2,
h3,
h4,
.wp-block-post-title {
	text-wrap: balance;
}

p,
li,
dd,
figcaption,
blockquote {
	text-wrap: pretty;
}

/* Articles: the 760px column holds ~95 characters per line at the base
   size; a slightly larger size brings it near 85 on wide screens. Only text
   with no size of its own — WordPress 7.1 wraps preset font-size classes in
   :where(), so a broader selector would override sizes picked in the editor. */
.single-post .wp-block-post-content > :is(p, ul, ol):not([class*="-font-size"]):not([style*="font-size"]) {
	font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
	line-height: 1.7;
}

/* Multi-line list items need air between them to scan as separate points. */
.wp-block-post-content :where(ul, ol) > li + li {
	margin-block-start: 0.55em;
}

/* Headings in long-form text get more space above than below, so each one
   visibly belongs to the section it starts. */
.wp-block-post-content > :is(h2, h3):not(:first-child) {
	margin-block-start: 1.6em;
}

/* Inline code reads as code: a quiet chip instead of bare monospace. */
:where(.wp-block-post-content, .wp-block-comment-content) :not(pre) > code {
	padding: 0.1em 0.35em;
	border: 1px solid var(--wp--preset--color--border-glass);
	border-radius: 0.3em;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--base);
	font-size: 0.88em;
	overflow-wrap: anywhere;
}

/* Logos and names in the marquee are content, not decoration: keep them
   clearly legible at rest. */
.binaryph-marquee__track > *,
.binaryph-marquee__track > [aria-hidden="true"] > * {
	opacity: 0.75;
}

/* Keep phones from scrolling sideways when an embed or injected ad is wider
   than the screen. clip (unlike hidden) creates no scroll container, so
   the sticky header keeps working. */
html {
	overflow-x: clip;
}

/* --------------------------------------------------------------
   22. Reduced motion: everything stays visible and still
-------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.binaryph-header {
		transition: none;
	}

	html.binaryph-anim .reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.binaryph-marquee__track,
	.binaryph-orb,
	.binaryph-play,
	.binaryph-grain::before,
	.binaryph-clip.has-gradient-5-gradient-background::before {
		animation: none !important;
	}

	html.binaryph-anim .reveal--rise,
	html.binaryph-anim .reveal--wipe {
		animation: none !important;
		clip-path: none !important;
	}

	html.binaryph-anim .reveal--wipe img {
		scale: none !important;
	}

	.binaryph-particles__canvas,
	.binaryph-core__canvas,
	.wp-block-button:not(.is-style-outline) > .wp-block-button__link::before {
		display: none;
	}

	.binaryph-wordmark,
	html.binaryph-anim .reveal.is-revealed .wp-block-post-featured-image {
		animation: none !important;
	}

	html.binaryph-anim .binaryph-words .binaryph-w__i {
		transform: none !important;
		transition: none !important;
	}

	.wp-block-button__link,
	.wp-block-button__link:hover {
		translate: none !important;
	}

	.binaryph-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	html.binaryph-anim .reveal .binaryph-progress::after,
	html.binaryph-anim .binaryph-progress.reveal::after {
		width: var(--progress, 0%);
		transition: none;
	}

	.has-hover-effect:hover,
	.has-hover-effect:focus-within {
		transform: none;
	}

	.binaryph-scroll-nav button {
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}