/**
 * Privaseer theme — small overrides and font-family utility classes that sit
 * outside Tailwind's generated utilities (Tailwind is loaded separately via
 * the CDN build; see functions.php > privaseer_scripts()).
 */
* {
	box-sizing: border-box;
}
html {
	overflow-x: hidden;
}
body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	color: #0f172a;
	background: #fff;
	overflow-x: hidden;
}
.font-bakbak {
	font-family: 'Bakbak One', sans-serif;
}
.font-abeezee {
	font-family: 'ABeeZee', sans-serif;
}
.font-jakarta {
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.font-caveat {
	font-family: 'Caveat', cursive;
}
.font-jetbrains {
	font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   ORBIT DIAGRAM ANIMATION (Section 3 — "Your Data" diagram)
   ============================================================ */

@keyframes ps-orbit-cw {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes ps-orbit-ccw {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

/* Wrapper spins clockwise at 22s per revolution */
.ps-orbit-wrap {
	animation: ps-orbit-cw 22s linear infinite;
	transform-origin: 50% 50%;
}

/* Each icon's inner content counter-spins so labels always face up */
.ps-orbit-content {
	animation: ps-orbit-ccw 22s linear infinite;
}

/* Sonar pulse — ring expands outward from the inner circle and fades */
@keyframes ps-sonar-pulse {
	0%   { transform: scale(0.55); opacity: 0.65; }
	100% { transform: scale(3.2);  opacity: 0; }
}
.ps-sonar {
	border: 1px solid rgba(37, 99, 235, 0.28);
	animation: ps-sonar-pulse 3s ease-out infinite;
}
.ps-sonar-2 {
	animation-delay: 1.5s;
}

/* ============================================================
   HERO PARTICLE CANVAS
   ============================================================ */

#hero-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: block;
}

/* ============================================================
   MOBILE DRAWER — block-connection build animation
   ============================================================ */

/* Wrapper: hidden until JS shows it */
#mobile-drawer-wrap {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
}

/* Backdrop — fades in behind the panel */
#mobile-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 23, 0.5);
	opacity: 0;
	transition: opacity 300ms linear;
	cursor: pointer;
}
#mobile-drawer-wrap.is-open #mobile-drawer-backdrop {
	opacity: 1;
}

/* Panel — no slide, no background; blocks build it */
#mobile-drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 82%;
	max-width: 360px;
	background: transparent;
	overflow: hidden;
}

/* Block grid — fills the panel area */
#drawer-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* rows set by JS */
	gap: 0;
	pointer-events: none;
	z-index: 0;
}

/* Each block starts at the hamburger button position (set via --bx/--by by JS),
   tiny and invisible. On open it flies to its grid cell and scales to full size. */
.ps-sq {
	background: #ffffff;
	transform: translate(var(--bx, 0px), var(--by, 0px)) scale(0.05);
	opacity: 0;
	transition: transform var(--bdur, 440ms) cubic-bezier(0.16, 1, 0.3, 1),
	            opacity   200ms ease;
	transition-delay: var(--bdelay, 0ms);
	will-change: transform, opacity;
}
#mobile-drawer-wrap.is-open .ps-sq {
	transform: translate(0, 0) scale(1);
	opacity: 1;
}

/* Content fades in with upward drift AFTER blocks have substantially formed */
.ps-drawer-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px 24px 32px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 320ms ease, transform 320ms ease;
	transition-delay: 420ms;
}
#mobile-drawer-wrap.is-open .ps-drawer-content {
	opacity: 1;
	transform: translateY(0);
}

/* Drawer header — no decorative lines */
.ps-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 24px;
}
#mobile-drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: rgba(15, 23, 42, 0.04);
	color: #0f172a;
	cursor: pointer;
	transition: background 150ms ease;
}
#mobile-drawer-close:hover {
	background: rgba(15, 23, 42, 0.08);
}

/* Nav links */
.ps-drawer-nav {
	flex: 1;
	overflow-y: auto;
	padding: 4px 0;
}
.ps-drawer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ps-drawer-link {
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #0f172a;
	text-decoration: none;
	padding: 14px 12px;
	border-radius: 10px;
	transition: background 150ms ease, color 150ms ease;
}
.ps-drawer-link:hover {
	background: rgba(37, 99, 235, 0.06);
	color: #2563eb;
}

/* CTA buttons — no decorative lines */
.ps-drawer-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
}
.ps-drawer-signin {
	display: block;
	text-align: center;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	text-decoration: none;
	border: 1.5px solid #e2e8f0;
	border-radius: 999px;
	padding: 12px;
	transition: background 150ms ease;
}
.ps-drawer-signin:hover {
	background: #f8fafc;
}
.ps-drawer-getstarted {
	display: block;
	text-align: center;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	background: #020617;
	border-radius: 999px;
	padding: 12px;
	transition: background 150ms ease;
}
.ps-drawer-getstarted:hover {
	background: #1e293b;
}

/* Tagline */
.ps-drawer-tagline {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 11px;
	color: #94a3b8;
	text-align: center;
	margin: 18px 0 0;
	letter-spacing: 0.01em;
}

/* ---- Hamburger morph → X ---- */
.ps-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 18px;
	height: 18px;
}
.ps-bar {
	display: block;
	width: 18px;
	height: 1.8px;
	background: #0f172a;
	border-radius: 2px;
	transform-origin: center;
	transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
	            opacity   180ms ease,
	            width     180ms ease;
}
body.drawer-open #mobile-menu-btn .ps-bar--top {
	transform: translateY(5.8px) rotate(45deg);
}
body.drawer-open #mobile-menu-btn .ps-bar--mid {
	opacity: 0;
	width: 0;
}
body.drawer-open #mobile-menu-btn .ps-bar--bot {
	transform: translateY(-5.8px) rotate(-45deg);
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

/* Base: every animated element starts invisible and slightly down */
.ps-anim {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}
.ps-anim.ps-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger helpers — applied by JS on siblings */
.ps-anim[data-delay="1"] { transition-delay: 100ms; }
.ps-anim[data-delay="2"] { transition-delay: 200ms; }
.ps-anim[data-delay="3"] { transition-delay: 300ms; }
.ps-anim[data-delay="4"] { transition-delay: 420ms; }
.ps-anim[data-delay="5"] { transition-delay: 540ms; }
.ps-anim[data-delay="6"] { transition-delay: 660ms; }
.ps-anim[data-delay="7"] { transition-delay: 780ms; }
.ps-anim[data-delay="8"] { transition-delay: 900ms; }

.ps-anim-scale[data-delay="1"] { transition-delay: 100ms; }
.ps-anim-scale[data-delay="2"] { transition-delay: 240ms; }
.ps-anim-scale[data-delay="3"] { transition-delay: 380ms; }
.ps-anim-scale[data-delay="4"] { transition-delay: 520ms; }
.ps-anim-scale[data-delay="5"] { transition-delay: 660ms; }

/* Split reveal: left slides from left, right from right */
.ps-anim-left {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}
.ps-anim-right {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}
.ps-anim-left.ps-visible,
.ps-anim-right.ps-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Scale-up for cards that should lift into view */
.ps-anim-scale {
	opacity: 0;
	transform: scale(0.93) translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}
.ps-anim-scale.ps-visible {
	opacity: 1;
	transform: scale(1) translateY(0);
}

/* Number counter — targets are invisible until counted */
.ps-count {
	display: inline-block;
}

/* Orbit node pulse — fires once when section enters */
@keyframes ps-node-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.35); }
	60%  { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
	100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.ps-node-pulse {
	animation: ps-node-pulse 0.8s ease-out forwards;
}

/* Most Popular badge pulse */
@keyframes ps-badge-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.12); }
	70%  { transform: scale(0.96); }
	100% { transform: scale(1); }
}
.ps-badge-pop {
	animation: ps-badge-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* Sector icon glow pulse — "system coming online" */
@keyframes ps-icon-online {
	0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.5); transform: scale(1); }
	50%  { box-shadow: 0 0 0 8px rgba(37,99,235,0); transform: scale(1.06); }
	100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); transform: scale(1); }
}
.ps-icon-online {
	animation: ps-icon-online 0.7s ease-out forwards;
}

/* Hero headline: each line slides up */
.ps-hero-line {
	display: block;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.ps-hero-line.ps-visible {
	opacity: 1;
	transform: translateY(0);
}

/* "The Problem" (orbit visual) section decorations — SECTION 4. */
.glow-radial {
	background: radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.28) 0%, rgba(11, 17, 32, 0) 70%);
}
.badge-backdrop {
	background: rgba(17, 24, 39, 0.7);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}