/*
Theme Name: iSPACE
Theme URI: https://www.ispace.co.za
Author: iSPACE (PTY) LTD
Description: Futuristic space-themed block theme for iSPACE — High Speed Internet Access and Hosting since 1998.
Version: 2.5.3
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ispace
*/

/* ====================================================================
   Deep space canvas: animated starfield behind everything
   ==================================================================== */
body {
	position: relative;
}
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-repeat: repeat;
}
/* Small dense stars, slow drift */
body::before {
	background-image:
		radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.8), transparent 60%),
		radial-gradient(1px 1px at 110px 90px, rgba(255, 255, 255, 0.5), transparent 60%),
		radial-gradient(1px 1px at 180px 20px, rgba(180, 220, 255, 0.7), transparent 60%),
		radial-gradient(1px 1px at 60px 140px, rgba(255, 255, 255, 0.4), transparent 60%),
		radial-gradient(1px 1px at 210px 160px, rgba(190, 230, 255, 0.6), transparent 60%);
	background-size: 240px 190px;
	animation: ispace-stars-drift 180s linear infinite;
}
/* Bigger sparse stars, twinkle */
body::after {
	background-image:
		radial-gradient(1.5px 1.5px at 70px 50px, rgba(255, 255, 255, 0.9), transparent 60%),
		radial-gradient(2px 2px at 200px 130px, rgba(160, 210, 255, 0.8), transparent 60%),
		radial-gradient(1.5px 1.5px at 320px 40px, rgba(216, 180, 254, 0.7), transparent 60%),
		radial-gradient(2px 2px at 130px 220px, rgba(255, 255, 255, 0.7), transparent 60%);
	background-size: 380px 260px;
	animation: ispace-stars-drift 240s linear infinite reverse, ispace-twinkle 5s ease-in-out infinite;
}
@keyframes ispace-stars-drift {
	from { background-position: 0 0; }
	to   { background-position: 0 -1200px; }
}

/* Canvas warp starfield (JS-injected). When active, the CSS star layers
   above are hidden — they remain as the no-JS / reduced-motion fallback. */
#ispace-starfield {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
body.ispace-canvas-stars::before,
body.ispace-canvas-stars::after {
	display: none;
}
@keyframes ispace-twinkle {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

/* ---- Smooth cross-page transitions ---- */
@view-transition {
	navigation: auto;
}
::view-transition-old(root) {
	animation: ispace-vt-out 0.25s ease both;
}
::view-transition-new(root) {
	animation: ispace-vt-in 0.35s ease both;
}
@keyframes ispace-vt-out {
	to { opacity: 0; transform: scale(0.99); }
}
@keyframes ispace-vt-in {
	from { opacity: 0; transform: translateY(10px); }
}

/* ====================================================================
   Glass cards with neon edges + cursor glow
   ==================================================================== */
.ispace-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(16, 28, 56, 0.72) 0%, rgba(7, 13, 28, 0.88) 100%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(59, 157, 255, 0.18);
	border-radius: 18px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Neon hairline along card top */
.ispace-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), transparent);
	pointer-events: none;
}
/* Cursor-tracking glow (coords set by JS tilt) */
.ispace-card::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	background: radial-gradient(28rem circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(34, 211, 238, 0.14), transparent 45%);
	pointer-events: none;
}
.ispace-card:hover::after {
	opacity: 1;
}
.ispace-card:hover {
	transform: translateY(-4px);
	border-color: rgba(34, 211, 238, 0.5);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 38px rgba(34, 211, 238, 0.16);
}
.ispace-card-featured {
	border: 1px solid rgba(59, 157, 255, 0.65);
	box-shadow: 0 4px 24px rgba(11, 114, 231, 0.35), inset 0 0 40px rgba(59, 157, 255, 0.06);
}
.ispace-card-featured:hover {
	box-shadow: 0 22px 48px rgba(11, 114, 231, 0.4), 0 0 0 1px rgba(59, 157, 255, 0.8), 0 0 44px rgba(168, 85, 247, 0.3);
}
/* Solid navy inner cards keep their tone but pick up glass borders */
.ispace-card.has-navy-background-color {
	background: linear-gradient(160deg, rgba(20, 34, 66, 0.9), rgba(10, 20, 40, 0.95));
}

.ispace-tilt {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform 0.18s ease-out, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Cards that link somewhere are fully clickable */
.ispace-card-link {
	cursor: pointer;
}

/* Links on bright gradient panels must stay white, not accent cyan */
.has-cta-gradient-background a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.has-cta-gradient-background a:hover {
	color: #04070f;
}

/* ---- Video embed + first-visit welcome modal ---- */
.ispace-video {
	aspect-ratio: 16 / 9;
	max-width: 760px;
	margin: 2rem auto;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(59, 157, 255, 0.3);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(34, 211, 238, 0.12);
}
.ispace-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ispace-intro-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(2, 4, 10, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: ispace-modal-in 0.35s ease both;
}
@keyframes ispace-modal-in {
	from { opacity: 0; }
}
.ispace-intro-box {
	width: min(760px, 100%);
	background: #0a1428;
	border: 1px solid rgba(59, 157, 255, 0.4);
	border-radius: 16px;
	padding: 1rem;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(34, 211, 238, 0.15);
}
.ispace-intro-box .ispace-video {
	margin: 0;
}
.ispace-intro-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}
.ispace-intro-head strong {
	font-family: Orbitron, 'Exo 2', sans-serif;
	letter-spacing: 0.05em;
	color: #fff;
}
.ispace-intro-close {
	background: none;
	border: 1px solid rgba(143, 163, 189, 0.4);
	border-radius: 999px;
	color: #e6edf7;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.ispace-intro-close:hover {
	border-color: #22d3ee;
	color: #22d3ee;
}

/* Terms line on product cards + tap-to-open ⓘ tooltip (no JS required) */
.ispace-terms {
	font-size: 0.8rem;
	color: #8fa3bd;
	text-align: center;
	margin-bottom: 1rem;
}
.ispace-tip {
	display: inline-block;
}
.ispace-tip summary {
	display: inline-block;
	list-style: none;
	cursor: pointer;
	color: #22d3ee;
	user-select: none;
	padding: 0 0.15rem;
}
.ispace-tip summary::-webkit-details-marker {
	display: none;
}
.ispace-tip[open] summary {
	color: #a855f7;
}
.ispace-tip-text {
	display: block;
	margin-top: 0.5rem;
	padding: 0.75rem 0.9rem;
	background: rgba(8, 15, 32, 0.95);
	border: 1px solid rgba(59, 157, 255, 0.3);
	border-radius: 10px;
	text-align: left;
	font-size: 0.78rem;
	line-height: 1.55;
	color: #b9c9de;
	max-width: 100%;
}

/* Orbitron runs wide — keep card headings and prices inside the frame */
.ispace-card .wp-block-heading {
	overflow-wrap: anywhere;
}
.ispace-card h3.has-large-font-size {
	font-size: clamp(1rem, 1.15rem + 0.3vw, 1.25rem) !important;
	letter-spacing: 0.01em;
}
.ispace-card h4.has-x-large-font-size {
	font-size: clamp(1.25rem, 1.4rem + 0.8vw, 1.8rem) !important;
}
.ispace-card h4 sub {
	font-size: 0.55em;
	font-family: 'Exo 2', sans-serif;
}

/* ====================================================================
   Hero + page banners: nebula, grid horizon, floating orbs
   ==================================================================== */
.ispace-hero,
.ispace-page-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.04) 0 1px, transparent 1px 80px),
		repeating-linear-gradient(0deg, rgba(34, 211, 238, 0.03) 0 1px, transparent 1px 80px),
		radial-gradient(1000px 520px at 85% -10%, rgba(34, 211, 238, 0.2), transparent 60%),
		radial-gradient(900px 480px at 10% 115%, rgba(168, 85, 247, 0.28), transparent 62%),
		linear-gradient(135deg, #04070f 0%, #0a1a3d 55%, #1a0f38 100%);
}
.ispace-hero h1,
.ispace-page-banner h1 {
	text-shadow: 0 0 34px rgba(34, 211, 238, 0.45), 0 0 80px rgba(59, 157, 255, 0.25);
}
.ispace-hero::before,
.ispace-page-banner::before {
	content: "";
	position: absolute;
	width: 42rem;
	height: 42rem;
	top: -18rem;
	right: -12rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.28) 0%, rgba(34, 211, 238, 0) 65%);
	filter: blur(12px);
	animation: ispace-float-a 11s ease-in-out infinite alternate;
	z-index: -1;
	pointer-events: none;
}
.ispace-hero::after,
.ispace-page-banner::after {
	content: "";
	position: absolute;
	width: 34rem;
	height: 34rem;
	bottom: -16rem;
	left: -10rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(168, 85, 247, 0) 65%);
	filter: blur(12px);
	animation: ispace-float-b 14s ease-in-out infinite alternate;
	z-index: -1;
	pointer-events: none;
}
@keyframes ispace-float-a {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-6rem, 4rem) scale(1.15); }
}
@keyframes ispace-float-b {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(5rem, -3rem) scale(1.1); }
}

/* Hero content entrance cascade */
.ispace-hero > * {
	animation: ispace-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ispace-hero > *:nth-child(1) { animation-delay: 0.05s; }
.ispace-hero > *:nth-child(2) { animation-delay: 0.15s; }
.ispace-hero > *:nth-child(3) { animation-delay: 0.28s; }
.ispace-hero > *:nth-child(4) { animation-delay: 0.4s; }
@keyframes ispace-rise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ispace-hero .ispace-chip {
	animation: ispace-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both, ispace-pulse 2.6s ease-in-out 1s infinite;
	margin-bottom: 2.5rem;
}
.ispace-hero h1 {
	margin-top: 0;
}
@keyframes ispace-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35); }
	50%      { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
}

/* ====================================================================
   Header: dark glass HUD
   ==================================================================== */
.ispace-header {
	border-bottom: 1px solid rgba(59, 157, 255, 0.18);
	background: rgba(4, 7, 15, 0.95);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.3s ease, background 0.3s ease;
}
/* Glass blur on desktop only: backdrop-filter makes the header the
   containing block for fixed descendants, which traps the mobile
   menu overlay inside the header bar (notably on iOS). The overlay
   only exists below 600px, so the blur is safe above it. */
@media (min-width: 600px) {
	.ispace-header {
		background: rgba(4, 7, 15, 0.78);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
}
.ispace-header.ispace-scrolled {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(34, 211, 238, 0.25);
	background: rgba(4, 7, 15, 0.92);
}
.ispace-header .wp-block-site-title a {
	text-decoration: none;
	background: linear-gradient(90deg, #3b9dff, #22d3ee);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

/* ====================================================================
   Navigation: 3D holographic dropdowns
   ==================================================================== */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 500;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container {
	transform-origin: top center;
	transform: perspective(700px) rotateX(-14deg) translateY(10px);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0s linear 0.28s;
	background: rgba(8, 15, 32, 0.95) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(59, 157, 255, 0.3) !important;
	border-radius: 12px !important;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 24px rgba(34, 211, 238, 0.12) !important;
	padding: 0.4rem !important;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:focus-within > .wp-block-navigation__submenu-container {
	transform: perspective(700px) rotateX(0) translateY(6px);
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
/* Invisible hover bridge covering the gap between the menu item and the
   dropped-down panel, so the submenu doesn't close while crossing it */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	top: -16px;
	height: 16px;
	background: transparent;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
	color: #e6edf7 !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-radius: 8px;
	transition: background 0.15s ease, transform 0.15s ease;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: rgba(34, 211, 238, 0.1);
	transform: translateX(4px);
}

/* Top-level nav links: sliding gradient underline */
.ispace-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 4px;
}
.ispace-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, #3b9dff, #22d3ee, #a855f7);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}
.ispace-header .wp-block-navigation > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.ispace-header .wp-block-navigation > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* ====================================================================
   Scroll-reveal
   ==================================================================== */
.ispace-reveal {
	opacity: 0;
	transform: translateY(28px) perspective(900px) rotateX(6deg);
	transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0ms;
	will-change: opacity, transform;
}
.ispace-reveal.ispace-in-view {
	opacity: 1;
	transform: translateY(0) perspective(900px) rotateX(0);
}

/* ====================================================================
   Buttons: neon glow + sheen sweep
   ==================================================================== */
.wp-block-button .wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.wp-block-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	pointer-events: none;
}
.wp-block-button .wp-block-button__link:hover::before {
	left: 130%;
}
.wp-block-button .wp-block-button__link:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: linear-gradient(90deg, #0b72e7, #22a8ee);
	color: #04070f;
	box-shadow: 0 0 16px rgba(59, 157, 255, 0.35);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 8px 24px rgba(11, 114, 231, 0.5), 0 0 22px rgba(34, 211, 238, 0.45);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(59, 157, 255, 0.6);
	color: #e6edf7;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: #22d3ee;
	box-shadow: 0 0 18px rgba(34, 211, 238, 0.35), inset 0 0 14px rgba(34, 211, 238, 0.08);
}
/* Dark buttons placed on bright gradient panels */
.wp-block-button__link.has-navy-background-color {
	color: #ffffff !important;
	background: #0a1428 !important;
	box-shadow: 0 0 18px rgba(4, 7, 15, 0.5) !important;
}

/* ====================================================================
   Tables (dark HUD)
   ==================================================================== */
.ispace-table table {
	border-collapse: collapse;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #1b2b4a;
}
.ispace-table thead {
	background: #0a1428;
	color: #fff;
	border-bottom: none;
}
.ispace-table th,
.ispace-table td {
	padding: 0.85rem 1.1rem;
	border: 1px solid #1b2b4a;
}
.ispace-table tbody tr:nth-child(even) {
	background: rgba(59, 157, 255, 0.05);
}

/* ====================================================================
   Footer
   ==================================================================== */
.ispace-footer {
	border-top: 1px solid rgba(59, 157, 255, 0.2);
	background:
		radial-gradient(800px 300px at 50% 0%, rgba(59, 157, 255, 0.08), transparent 70%),
		#060b18 !important;
}
.ispace-footer a {
	color: #8fa3bd;
	text-decoration: none;
}
.ispace-footer a:hover {
	color: #22d3ee;
}
.ispace-footer li a {
	display: inline-block;
	transition: transform 0.18s ease, color 0.18s ease;
}
.ispace-footer li a:hover {
	transform: translateX(4px);
}
.ispace-footer .wp-block-social-links .wp-social-link {
	transition: transform 0.2s ease, filter 0.2s ease;
}
.ispace-footer .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-4px) scale(1.15);
	filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.7));
}

/* ====================================================================
   Chips
   ==================================================================== */
.ispace-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	background: rgba(34, 211, 238, 0.12);
	color: #22d3ee;
	border: 1px solid rgba(34, 211, 238, 0.45);
	border-radius: 999px;
	padding: 0.5rem 1.1rem 0.42rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-family: Orbitron, 'Exo 2', sans-serif;
}
.ispace-chip-dark {
	background: rgba(168, 85, 247, 0.12);
	color: #c084fc;
	border-color: rgba(168, 85, 247, 0.45);
}

/* ====================================================================
   Hero decorations: orbit rings, satellites, comets, progress bar
   ==================================================================== */
.ispace-orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46rem;
	height: 46rem;
	margin: -23rem 0 0 -23rem;
	border: 1px dashed rgba(59, 157, 255, 0.18);
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	animation: ispace-orbit-spin 60s linear infinite;
}
.ispace-orbit::before {
	content: "";
	position: absolute;
	inset: 5rem;
	border: 1px solid rgba(34, 211, 238, 0.12);
	border-radius: 50%;
}
.ispace-orbit-dot {
	position: absolute;
	top: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: #22d3ee;
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.9), 0 0 30px rgba(34, 211, 238, 0.5);
}
.ispace-orbit-dot-2 {
	top: auto;
	bottom: 4.6rem;
	left: 18%;
	width: 6px;
	height: 6px;
	background: #a855f7;
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.9), 0 0 24px rgba(168, 85, 247, 0.5);
}
@keyframes ispace-orbit-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.ispace-comet {
	position: absolute;
	width: 130px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(160, 220, 255, 0.5), transparent);
	transform: rotate(155deg);
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(180, 230, 255, 0.8));
	pointer-events: none;
	z-index: -1;
	animation: ispace-comet-streak 6s ease-in infinite;
}
@keyframes ispace-comet-streak {
	0%   { opacity: 0; transform: rotate(155deg) translateX(0); }
	4%   { opacity: 1; }
	16%  { opacity: 0; transform: rotate(155deg) translateX(340px); }
	100% { opacity: 0; transform: rotate(155deg) translateX(340px); }
}

.ispace-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 999;
	background: linear-gradient(90deg, #0b72e7, #22d3ee, #a855f7);
	box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* ---- Planet rising at the bottom of the hero ---- */
.ispace-planet {
	position: absolute;
	left: 50%;
	top: calc(100% - 5.5rem);
	width: 150%;
	max-width: 2400px;
	margin-left: -75%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(120% 120% at 50% 0%, #10264e 0%, #081226 45%, #04070f 78%);
	box-shadow:
		0 -3px 18px rgba(150, 225, 255, 0.7),
		0 -14px 70px rgba(34, 211, 238, 0.4),
		0 -40px 140px rgba(59, 157, 255, 0.22),
		inset 0 30px 90px rgba(59, 157, 255, 0.25);
	z-index: -1;
	pointer-events: none;
}
@media (max-width: 900px) {
	.ispace-planet {
		width: 220%;
		margin-left: -110%;
	}
}

/* ---- Holographic glitch on the hero headline ---- */
.ispace-holo {
	animation:
		ispace-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both,
		ispace-glitch 7s steps(1, end) 2.5s infinite;
}
@keyframes ispace-glitch {
	0%, 100% {
		transform: none;
		text-shadow: 0 0 34px rgba(34, 211, 238, 0.45), 0 0 80px rgba(59, 157, 255, 0.25);
	}
	93% {
		transform: translateX(3px) skewX(-1.5deg);
		text-shadow: -4px 0 rgba(34, 211, 238, 0.85), 4px 0 rgba(168, 85, 247, 0.85), 0 0 34px rgba(34, 211, 238, 0.45);
	}
	94.5% {
		transform: translateX(-3px);
		text-shadow: 4px 0 rgba(34, 211, 238, 0.85), -4px 0 rgba(244, 114, 182, 0.85), 0 0 34px rgba(34, 211, 238, 0.45);
	}
	96% {
		transform: none;
		text-shadow: 0 0 34px rgba(34, 211, 238, 0.45), 0 0 80px rgba(59, 157, 255, 0.25);
	}
}

/* ---- Mouse parallax (uses the `translate` property so it composes
        with each layer's own transform animations) ---- */
.ispace-orbit,
.ispace-planet,
.ispace-hero > * {
	transition: translate 0.35s ease-out;
}
.ispace-orbit {
	translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 14px);
}
.ispace-planet {
	translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -6px);
}
.ispace-hero > * {
	translate: calc(var(--mx, 0) * -7px) calc(var(--my, 0) * -5px);
}

/* ---- Warp-speed jump: stars zoom past + flash, page falls away ---- */
body.ispace-warping::before,
body.ispace-warping::after {
	animation: ispace-warp-stars 0.4s ease-in forwards !important;
}
@keyframes ispace-warp-stars {
	to {
		transform: scale(3.2);
		filter: blur(2px);
		opacity: 0.25;
	}
}
body.ispace-warping .wp-site-blocks {
	animation: ispace-warp-page 0.4s ease-in forwards;
}
@keyframes ispace-warp-page {
	to {
		opacity: 0;
		transform: scale(0.97);
		filter: blur(3px);
	}
}
body.ispace-warping .ispace-progress {
	opacity: 0;
}

/* ====================================================================
   Reduced motion: switch everything off
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.ispace-hero::before,
	.ispace-hero::after,
	.ispace-page-banner::before,
	.ispace-page-banner::after,
	.ispace-hero > *,
	.ispace-hero .ispace-chip {
		animation: none !important;
	}
	.ispace-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ispace-card,
	.ispace-tilt,
	.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container,
	.wp-block-button .wp-block-button__link::before,
	.ispace-footer li a {
		transition: none !important;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
	.ispace-holo,
	body.ispace-warping::before,
	body.ispace-warping::after,
	body.ispace-warping .wp-site-blocks {
		animation: none !important;
	}
	.ispace-orbit,
	.ispace-planet,
	.ispace-hero > * {
		transition: none;
		translate: none;
	}
}