:root {
--bg: #1D262A;
--bg-alt: #2F3538;
--text: #E2E9E2;
--text-heading: #ECE1DF;
--accent-pink: #FF29DB;
--accent-cyan: #60FFF1;
--accent-green: #21F88F;
--accent-purple: #4D39FF;
--muted: #899182;
--card-bg: #252E33;
--border: #485858;
--overlay-bg: rgba(29,38,42,0.97);
--nav-scrolled: rgba(29,38,42,0.9);
--glitch-intensity: 1;
--logo-shake-px: 1.2;
--logo-skew-deg: 0.8;
--logo-shadow-px: 1.5;
--hero-glitch-px: 2;
--cursor-trail-chance: 0.93;
}

/* ─── Light theme (brand cream/earth) — WCAG AA contrast on #f4f2ef ─── */
[data-theme="light"] {
--bg: #f4f2ef;
--bg-alt: #eae7e3;
--text: #1a1a1a;
--text-heading: #1a1a1a;
--accent-pink: #b81a8f;
--accent-cyan: #006b62;
--accent: #006b62;
--accent-green: #1a6b2e;
--accent-purple: #3d2dcc;
--muted: #4a4a4a;
--card-bg: #ffffff;
--border: #8a8278;
--overlay-bg: rgba(244,242,239,0.97);
--nav-scrolled: rgba(244,242,239,0.92);
--glitch-intensity: 0.7;
}

/* ─── Color scheme: Earth (warmer, rust/brown) ─── */
[data-color-scheme="earth"] {
--bg: #24271C;
--bg-alt: #333625;
--text: #E2E9E2;
--text-heading: #ECE1DF;
--accent-pink: #9F7C75;
--accent-cyan: #60FFF1;
--accent-green: #899182;
--accent-purple: #5B5249;
--muted: #948A80;
--card-bg: #2e3124;
--border: #485858;
--nav-scrolled: rgba(36,39,28,0.92);
}
[data-theme="light"][data-color-scheme="earth"] {
--bg: #f4f2ef;
--bg-alt: #eae7e3;
--accent-pink: #9F7C75;
--accent-cyan: #2d6b64;
--accent: #2d6b64;
--accent-green: #4a5244;
--accent-purple: #5B5249;
--muted: #5B5249;
}

/* ─── Color scheme: Electric (high-contrast neon) ─── */
[data-color-scheme="electric"] {
--bg: #0a0a0a;
--bg-alt: #111111;
--text: #e8e4df;
--text-heading: #f0ece8;
--accent-pink: #FF29DB;
--accent-cyan: #00F5E4;
--accent-green: #60FF71;
--accent-purple: #4D39FF;
--muted: #827d78;
--card-bg: #141414;
--border: #222;
--nav-scrolled: rgba(10,10,10,0.88);
}
[data-theme="light"][data-color-scheme="electric"] {
--bg: #f0ece8;
--bg-alt: #e4dfd9;
--accent-pink: #d414a8;
--accent-cyan: #00a399;
--accent: #00a399;
--accent-green: #1fad2e;
--accent-purple: #3520e8;
}

/* ─── Color scheme: Minimal (muted, low saturation) ─── */
[data-color-scheme="minimal"] {
--bg: #252a2e;
--bg-alt: #2e3438;
--text: #c5cfc5;
--text-heading: #d4dcd4;
--accent-pink: #b88aa8;
--accent-cyan: #7ab8b0;
--accent-green: #8aaa82;
--accent-purple: #6a6a8a;
--muted: #7a857a;
--card-bg: #2a3034;
--border: #3a4044;
--nav-scrolled: rgba(37,42,46,0.92);
}
[data-theme="light"][data-color-scheme="minimal"] {
--bg: #e8eae6;
--bg-alt: #dcdfd8;
--text: #3a3f3a;
--text-heading: #2a2e2a;
--accent-pink: #8a6a7a;
--accent-cyan: #4a7a74;
--accent: #4a7a74;
--accent-green: #5a7a52;
--accent-purple: #5a5a72;
--muted: #6a706a;
}

html {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--accent-cyan) var(--bg);
}

body {
background: var(--bg);
color: var(--text);
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
line-height: 1.6;
cursor: default;
transition: background 0.5s ease, color 0.5s ease;
text-wrap: pretty;
}

p, .section-body, .connect-sub, .manifesto-quote, .pillar-text, .offering-desc, .testimonial-text, .hero-sub, .section-title, .connect-title {
text-wrap: pretty;
}

::selection {
background: var(--accent-cyan);
color: var(--bg);
}

/* GLITCH NOISE OVERLAY */
.noise-overlay {
position: fixed;
top: -50%; left: -50%;
width: 200%; height: 200%;
pointer-events: none;
z-index: 9999;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: noiseShift 0.08s steps(1) infinite;
}

[data-theme="light"] .noise-overlay {
opacity: 0.025;
}

/* Light mode: CTA/skip-link contrast (dark accent bg → white text) */
[data-theme="light"] .cta {
  color: #fff;
}
[data-theme="light"] .skip-link {
  background: var(--accent-cyan);
  color: #fff;
}

@keyframes noiseShift {
0% { transform: translate(0, 0); }
10% { transform: translate(-5%, -5%); }
20% { transform: translate(3%, -8%); }
30% { transform: translate(-8%, 2%); }
40% { transform: translate(5%, 5%); }
50% { transform: translate(-3%, 8%); }
60% { transform: translate(8%, -2%); }
70% { transform: translate(-2%, -6%); }
80% { transform: translate(6%, 3%); }
90% { transform: translate(-4%, 7%); }
100% { transform: translate(2%, -4%); }
}

/* SCANLINE — removed (static horizontal lines disabled) */
.scanline {
display: none;
}

/* CHROMATIC ABERRATION — applied via JS text-shadow on headings */

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
.noise-overlay { display: none; }
.scanline { display: none; }
.glitch-tear { display: none; }
.hero-title .glitch-word::before,
.hero-title .glitch-word::after { display: none; }
.chromatic-active::before,
.chromatic-active::after { opacity: 0 !important; }
.reveal-section { opacity: 1; transform: none; }
}

/* SERIF MODE */
[data-font="serif"] .hero-title,
[data-font="serif"] .manifesto-quote {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(40px, 7vw, 80px);
font-weight: 700;
line-height: 110%;
letter-spacing: -1.6px;
}

[data-font="serif"] .section-title,
[data-font="serif"] .connect-title,
[data-font="serif"] .shockpoint-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(30px, 4.5vw, 50px);
font-weight: 700;
line-height: 120%;
letter-spacing: -1px;
}

[data-font="serif"] .pillar-title,
[data-font="serif"] .offering-name,
[data-font="serif"] .team-name,
[data-font="serif"] .testimonial-author,
[data-font="serif"] .footer-brand,
[data-font="serif"] .stat-num {
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
}

/* Serif mode subhead & paragraph stay Open Sans per spec */

/* NAV */
nav {
position: fixed;
top: 0; left: 0;
width: 100%;
z-index: 1000;
padding: 24px 48px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

nav.scrolled {
padding: 16px 48px;
background: var(--nav-scrolled);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}

/* Settings bar — fixed top-right: 96px from top, 16px from right; vertical stack, 8px between buttons */
.nav-settings-bar {
position: fixed;
top: 96px;
right: 16px;
left: auto;
z-index: 999;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.nav-logo {
display: flex;
align-items: center;
text-decoration: none;
position: relative;
}

/* NAV LOGO GLITCH HOVER */
.nav-logo:hover {
animation: logoGlitchShake 0.4s steps(4) infinite;
}

.nav-logo:hover .signal-wordmark {
filter: drop-shadow(0 0 6px var(--accent-cyan));
}
.nav-logo:hover .signal-wavelength path {
filter: drop-shadow(0 0 6px var(--accent-cyan));
}

/* logoGlitchShake & logoGlitchClip1 — injected dynamically by JS for intensity control */
@keyframes logoGlitchShake {
0% { transform: translate(0); text-shadow: -1px 0 var(--accent-pink), 1px 0 var(--accent-cyan); }
25% { transform: translate(-1.2px, 0.4px) skewX(-0.8deg); text-shadow: 1.5px 0 var(--accent-cyan), -1.5px 0 var(--accent-pink); }
50% { transform: translate(0.8px, -0.4px) skewX(0.5deg); text-shadow: -1.5px 0 var(--accent-pink), 1.5px 0 var(--accent-cyan); }
75% { transform: translate(-0.4px, 0.8px) skewX(-0.4deg); text-shadow: 1px 0 var(--accent-cyan), -1px 0 var(--accent-pink); }
100% { transform: translate(0); text-shadow: none; }
}

@keyframes logoGlitchClip1 {
0% { clip-path: inset(0 80% 0 0); transform: translate(-2px, 0); }
33% { clip-path: inset(20% 0 40% 0); transform: translate(2.5px, 0); }
66% { clip-path: inset(60% 30% 0 0); transform: translate(-1.5px, 0); }
100% { clip-path: inset(0 0 50% 40%); transform: translate(3px, 0); }
}

.nav-right {
display: flex;
align-items: center;
gap: 20px;
}

.nav-links {
display: flex;
gap: 36px;
list-style: none;
}

.nav-links a {
color: var(--muted);
text-decoration: none;
font-size: 13px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: color 0.3s ease;
position: relative;
}

.nav-links a:hover {
color: var(--text);
}

.nav-links a::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent-green);
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.3s ease;
}

.nav-links a:hover::before {
opacity: 1;
}

.nav-links a:focus-visible,
.nav-logo:focus-visible {
outline: 2px solid var(--accent-cyan);
outline-offset: 4px;
}

/* Offerings dropdown — progressive fade */
.nav-item-offerings {
position: relative;
}
.nav-item-offerings > a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-item-offerings > a::after {
content: '';
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: 0.7;
transition: transform 0.25s ease;
}
.nav-item-offerings:hover > a::after,
.nav-item-offerings:focus-within > a::after {
transform: rotate(180deg);
}
.nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 260px;
padding: 12px 0;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 16px 48px rgba(0,0,0,0.35);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
z-index: 100;
margin-top: 8px;
list-style: none;
}
.nav-item-offerings:hover .nav-dropdown,
.nav-item-offerings:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
display: block;
padding: 12px 20px;
color: var(--muted);
font-size: 12px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: color 0.2s ease, background 0.2s ease;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.35s ease, transform 0.35s ease, color 0.2s ease, background 0.2s ease;
}
.nav-item-offerings:hover .nav-dropdown a,
.nav-item-offerings:focus-within .nav-dropdown a {
opacity: 1;
transform: translateY(0);
}
.nav-dropdown a:hover {
color: var(--text);
background: rgba(96, 255, 241, 0.06);
}

.nav-dropdown a:focus-visible {
outline: 2px solid var(--accent-cyan);
outline-offset: 2px;
}
.nav-dropdown li:nth-child(1) a { transition-delay: 0.02s; }
.nav-dropdown li:nth-child(2) a { transition-delay: 0.06s; }
.nav-dropdown li:nth-child(3) a { transition-delay: 0.10s; }
.nav-dropdown li:nth-child(4) a { transition-delay: 0.14s; }
.nav-dropdown li:nth-child(5) a { transition-delay: 0.18s; }
.nav-dropdown li:nth-child(6) a { transition-delay: 0.22s; }
.nav-dropdown a::before {
display: none;
}

/* THEME TOGGLE — icon button */
.theme-toggle {
width: 36px;
height: 36px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
padding: 0;
color: var(--text);
}

.theme-toggle:hover {
border-color: var(--accent-cyan);
background: var(--bg-alt);
}

.theme-toggle:focus-visible,
.serif-toggle:focus-visible,
.psyche-toggle:focus-visible,
.intensity-btn:focus-visible,
.menu-toggle:focus-visible {
outline: 2px solid var(--accent-cyan);
outline-offset: 3px;
}

/* Sun icon (shown in dark mode — click to go light) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

[data-theme="light"] .nav-settings-bar {
  background: #f5f3f0;
  border: 1px solid #5a5249;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
[data-theme="light"] .nav-settings-bar .theme-toggle,
[data-theme="light"] .nav-settings-bar .serif-toggle,
[data-theme="light"] .nav-settings-bar .psyche-toggle,
[data-theme="light"] .nav-settings-bar .intensity-btn {
  background: #ffffff;
  border: 1px solid #5a5249;
  color: #1a1a1a;
}
[data-theme="light"] .nav-settings-bar .theme-toggle:hover,
[data-theme="light"] .nav-settings-bar .serif-toggle:hover,
[data-theme="light"] .nav-settings-bar .psyche-toggle:hover,
[data-theme="light"] .nav-settings-bar .intensity-btn:hover {
  border-color: #006b62;
  background: #f0eeeb;
  color: #005a52;
}
[data-theme="light"] .nav-settings-bar .serif-toggle.active,
[data-theme="light"] .nav-settings-bar .psyche-toggle.active,
[data-theme="light"] .nav-settings-bar .intensity-btn.active {
  border-color: #006b62;
  color: #006b62;
}

/* SERIF MODE TOGGLE — WCAG AA: use --text for contrast on --card-bg */
.serif-toggle {
width: 36px;
height: 36px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'Cormorant Garamond', serif;
font-weight: 700;
color: var(--text);
transition: all 0.3s ease;
padding: 0;
line-height: 1;
letter-spacing: 0;
}

.serif-toggle:hover {
border-color: var(--accent-cyan);
background: var(--bg-alt);
}

.serif-toggle.active {
color: var(--accent-cyan);
border-color: var(--accent-cyan);
}

/* PSYCHEDELIC / GOOEY MODE TOGGLE */
.psyche-toggle {
width: 36px;
height: 36px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--muted);
transition: all 0.3s ease;
padding: 0;
line-height: 1;
}

.psyche-toggle:hover {
border-color: var(--accent-pink);
background: var(--bg-alt);
}

.psyche-toggle.active {
color: var(--accent-pink);
border-color: var(--accent-pink);
background: rgba(255,41,219,0.08);
}

/* ====== PSYCHEDELIC MODE OVERRIDES ====== */
[data-mode="psyche"] body {
overflow-x: hidden;
}

[data-mode="psyche"] .noise-overlay {
opacity: 0.02;
}

[data-mode="psyche"] .hero-title .glitch-word::before {
animation: psycheText1 3s infinite ease-in-out alternate;
filter: blur(2px);
opacity: 0.7;
}

[data-mode="psyche"] .hero-title .glitch-word::after {
animation: psycheText2 3.5s infinite ease-in-out alternate;
filter: blur(3px);
opacity: 0.6;
}

@keyframes psycheText1 {
0%, 70% { transform: translate(0); filter: blur(0px) hue-rotate(0deg); }
75% { transform: translate(-3px, 2px) scale(1.01); filter: blur(4px) hue-rotate(40deg); }
80% { transform: translate(2px, -1px) scale(1.02); filter: blur(6px) hue-rotate(90deg); }
85% { transform: translate(-1px, 3px) scale(0.99); filter: blur(3px) hue-rotate(140deg); }
90% { transform: translate(3px, 0px) scale(1.01); filter: blur(5px) hue-rotate(200deg); }
95% { transform: translate(-2px, 1px) scale(1.0); filter: blur(2px) hue-rotate(280deg); }
100% { transform: translate(0); filter: blur(0px) hue-rotate(360deg); }
}

@keyframes psycheText2 {
0%, 65% { transform: translate(0); filter: blur(0px) hue-rotate(0deg); }
70% { transform: translate(4px, -2px) scale(1.02); filter: blur(5px) hue-rotate(-40deg); }
78% { transform: translate(-3px, 1px) scale(0.98); filter: blur(7px) hue-rotate(-120deg); }
85% { transform: translate(2px, -3px) scale(1.01); filter: blur(4px) hue-rotate(-200deg); }
92% { transform: translate(-1px, 2px) scale(1.0); filter: blur(6px) hue-rotate(-300deg); }
100% { transform: translate(0); filter: blur(0px) hue-rotate(-360deg); }
}

/* Psychedelic logo hover — gooey blur instead of sharp glitch */
[data-mode="psyche"] .nav-logo:hover {
animation: psycheLogoShake 1.2s ease-in-out infinite;
}

@keyframes psycheLogoShake {
0%, 100% { transform: translate(0); filter: blur(0px) hue-rotate(0deg); text-shadow: 0 0 8px rgba(255,41,219,0.3), 0 0 20px rgba(0,245,228,0.2); }
25% { transform: translate(-0.5px, 0.3px) scale(1.005); filter: blur(0.5px) hue-rotate(15deg); text-shadow: 0 0 12px rgba(255,41,219,0.5), 0 0 30px rgba(0,245,228,0.3); }
50% { transform: translate(0.5px, -0.3px) scale(0.995); filter: blur(1px) hue-rotate(30deg); text-shadow: 0 0 16px rgba(96,255,113,0.4), 0 0 40px rgba(77,57,255,0.3); }
75% { transform: translate(-0.3px, 0.5px) scale(1.003); filter: blur(0.5px) hue-rotate(15deg); text-shadow: 0 0 10px rgba(77,57,255,0.4), 0 0 25px rgba(255,41,219,0.3); }
}

@keyframes psycheLogoClip {
0% { clip-path: inset(0 80% 0 0); transform: translate(-2px, 0); opacity: 0.4; }
33% { clip-path: inset(10% 0 50% 0); transform: translate(1px, 0); opacity: 0.6; }
66% { clip-path: inset(40% 20% 10% 0); transform: translate(-1px, 0); opacity: 0.5; }
100% { clip-path: inset(0 0 30% 30%); transform: translate(2px, 0); opacity: 0.4; }
}

/* Psychedelic cursor trail — blobby circles instead of bars */
[data-mode="psyche"] .parallax-strip {
border-radius: 50%;
filter: blur(8px);
}

/* Psychedelic glitch tear — soft gooey blobs */
[data-mode="psyche"] .glitch-tear {
border-radius: 50%;
filter: blur(6px);
height: 12px !important;
}

/* Psychedelic page glitch — hue rotation instead of offset */
[data-mode="psyche"] .page-glitch.active {
animation: psychePageGlitch 0.6s ease forwards;
}

@keyframes psychePageGlitch {
0% { background: transparent; filter: hue-rotate(0deg) blur(0px); }
20% { background: rgba(255,41,219,0.03); filter: hue-rotate(40deg) blur(0.5px); }
40% { background: rgba(0,245,228,0.03); filter: hue-rotate(120deg) blur(1px); }
60% { background: rgba(77,57,255,0.03); filter: hue-rotate(200deg) blur(0.5px); }
80% { background: rgba(96,255,113,0.02); filter: hue-rotate(300deg) blur(0.3px); }
100% { background: transparent; filter: hue-rotate(360deg) blur(0px); }
}

/* Psychedelic nav logo glow */
[data-mode="psyche"] .nav-logo:hover .signal-wordmark {
filter: drop-shadow(0 0 8px var(--accent-cyan)) drop-shadow(0 0 12px var(--accent-pink));
}
[data-mode="psyche"] .nav-logo:hover .signal-wavelength path {
filter: drop-shadow(0 0 8px var(--accent-cyan)) drop-shadow(0 0 12px var(--accent-pink));
}

/* Psychedelic cursor trail (applied via JS) */

/* ====== PSYCHEDELIC WARP — PER-ELEMENT WebGL LAYER ====== */

[data-mode="psyche"] body {
cursor: grab;
}

[data-mode="psyche"] body.warping {
cursor: grabbing;
}

/* Warpable elements get relative positioning so canvases overlay correctly */
[data-mode="psyche"] .warp-target {
position: relative;
z-index: 1;
will-change: transform, filter;
overflow: visible !important;
}

/* Per-element WebGL canvas overlay — cloth-like psychedelic layer */
.warp-el-canvas {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
pointer-events: none;
z-index: 10;
border-radius: inherit;
opacity: 0;
mix-blend-mode: screen;
transition: opacity 0.4s ease;
mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 85%);
}

.warp-el-canvas.active {
opacity: 0.35;
}

/* Warp boundary glow on the active element */
.warp-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
pointer-events: none;
z-index: 9;
border: 1px solid transparent;
border-radius: inherit;
opacity: 0;
transition: opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.warp-glow.active {
opacity: 0.7;
border-color: rgba(180, 120, 255, 0.15);
box-shadow:
  inset 0 0 10px rgba(180, 120, 255, 0.04),
  0 0 8px rgba(180, 120, 255, 0.08),
  0 0 20px rgba(100, 200, 255, 0.03);
animation: warpClothPulse 3s ease-in-out infinite;
}

@keyframes warpClothPulse {
0%, 100% {
  border-color: rgba(180, 100, 255, 0.2);
  box-shadow:
    inset 0 0 15px rgba(180, 120, 255, 0.06),
    0 0 10px rgba(180, 120, 255, 0.1),
    0 0 25px rgba(100, 200, 255, 0.04);
}
33% {
  border-color: rgba(100, 220, 255, 0.25);
  box-shadow:
    inset 0 0 18px rgba(100, 220, 255, 0.08),
    0 0 12px rgba(100, 220, 255, 0.14),
    0 0 30px rgba(180, 100, 255, 0.05);
}
66% {
  border-color: rgba(255, 100, 200, 0.22);
  box-shadow:
    inset 0 0 16px rgba(255, 100, 200, 0.07),
    0 0 11px rgba(255, 100, 200, 0.12),
    0 0 28px rgba(100, 255, 180, 0.04);
}
}

/* Proximity heat shimmer — sympathetic glow on nearby (non-active) elements */
.warp-glow.heat {
opacity: 1;
transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Heat canvas shows at reduced opacity with cloth blend */
.warp-el-canvas.heat {
opacity: 0.15;
transition: opacity 0.4s ease;
}

@keyframes heatShimmer {
0%, 100% {
  border-color: rgba(160, 100, 255, 0.08);
  box-shadow:
    inset 0 0 12px rgba(160, 100, 255, 0.03),
    0 0 8px rgba(160, 100, 255, 0.04);
}
33% {
  border-color: rgba(0, 220, 200, 0.1);
  box-shadow:
    inset 0 0 15px rgba(0, 220, 200, 0.04),
    0 0 10px rgba(0, 220, 200, 0.06);
}
66% {
  border-color: rgba(255, 80, 180, 0.09);
  box-shadow:
    inset 0 0 12px rgba(255, 80, 180, 0.03),
    0 0 8px rgba(255, 80, 180, 0.05);
}
}

/* Ensure interactive elements stay above warp overlay */
[data-mode="psyche"] nav {
z-index: 10002;
position: fixed;
}

[data-mode="psyche"] .intensity-panel {
z-index: 10003;
}

[data-mode="psyche"] .mobile-menu {
z-index: 10002;
}

/* Warp mode indicator */
.warp-hint {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.7);
color: var(--accent-pink);
padding: 8px 20px;
border-radius: 20px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
z-index: 10001;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,41,219,0.2);
}

[data-mode="psyche"] .warp-hint {
opacity: 1;
z-index: 10003;
animation: hintFade 4s ease forwards;
}

@keyframes hintFade {
0%, 60% { opacity: 0.9; }
100% { opacity: 0; }
}

/* Intensity control panel */
.intensity-panel {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 20px;
z-index: 10001;
min-width: 260px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text);
display: none;
flex-direction: column;
gap: 10px;
}

.intensity-panel.open {
display: flex;
}

.intensity-panel h4 {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-cyan);
margin-bottom: 4px;
}

.intensity-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.intensity-row label {
flex: 1;
color: var(--muted);
white-space: nowrap;
}

.intensity-row input[type="range"] {
width: 90px;
accent-color: var(--accent-cyan);
height: 4px;
}

.intensity-row select {
padding: 6px 10px;
background: var(--card-bg);
border: 1px solid var(--border);
color: var(--text);
font-size: 13px;
min-width: 100px;
}

.intensity-row input[type="checkbox"] {
accent-color: var(--accent-cyan);
width: 18px;
height: 18px;
}

.intensity-row .val {
width: 36px;
text-align: right;
color: var(--accent-green);
font-variant-numeric: tabular-nums;
}

.intensity-panel-close {
position: absolute;
top: 8px;
right: 12px;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 14px;
padding: 4px;
line-height: 1;
}

.intensity-panel-close:hover {
color: var(--text);
}

.intensity-panel-close:focus-visible {
outline: 2px solid var(--accent-cyan);
outline-offset: 2px;
}

/* Gear button to open panel */
.intensity-btn {
width: 36px;
height: 36px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: var(--muted);
transition: all 0.3s ease;
padding: 0;
line-height: 1;
}

.intensity-btn:hover {
border-color: var(--accent-green);
background: var(--bg-alt);
}

.intensity-btn.active {
color: var(--accent-green);
border-color: var(--accent-green);
}

.menu-toggle {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
z-index: 1001;
background: none;
border: none;
padding: 8px;
}

.menu-toggle span {
width: 28px;
height: 1.5px;
background: var(--text);
transition: all 0.3s ease;
display: block;
}

.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100vh;
background: var(--overlay-bg);
z-index: 999;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
opacity: 1;
pointer-events: all;
}

.mobile-menu nav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: min(100vh, 100%);
padding: 80px 24px 48px;
gap: 0;
box-sizing: border-box;
}

.mobile-menu a {
display: block;
color: var(--text);
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: 24px;
font-weight: 300;
letter-spacing: 4px;
text-transform: uppercase;
transition: color 0.3s ease;
padding: 14px 24px;
width: 100%;
box-sizing: border-box;
}

.mobile-menu a:hover {
color: var(--accent-cyan);
}

.mobile-menu a:focus-visible {
outline: 2px solid var(--accent-cyan);
outline-offset: 4px;
}

.mobile-menu-label {
display: block;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
margin-top: 24px;
margin-bottom: 4px;
padding: 0 24px;
}

@media (max-width: 990px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: flex; }
  nav.scrolled { padding: 14px 24px; }
  .nav-right { gap: 12px; flex-wrap: nowrap; }
  .nav-settings-bar { top: 96px; right: 16px; padding: 10px; gap: 8px; }
}

/* Global form input focus (connect forms site-wide) */
.form-input:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* Light mode: all connect/form inputs readable site-wide */
[data-theme="light"] .form-input,
[data-theme="light"] .connect-form input[type="text"],
[data-theme="light"] .connect-form input[type="email"],
[data-theme="light"] .connect-form input[type="url"],
[data-theme="light"] .connect-form textarea {
  background: #ffffff;
  color: #1a1a1a;
  border-color: #8a8278;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .connect-form input::placeholder,
[data-theme="light"] .connect-form textarea::placeholder {
  color: #6b6360;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .connect-form input[type="text"]:focus,
[data-theme="light"] .connect-form input[type="email"]:focus,
[data-theme="light"] .connect-form input[type="url"]:focus,
[data-theme="light"] .connect-form textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(0, 107, 98, 0.15);
}
[data-theme="light"] .float-label label {
  color: #5a5a5a;
}
[data-theme="light"] .float-label input:focus ~ label,
[data-theme="light"] .float-label input:not(:placeholder-shown) ~ label,
[data-theme="light"] .float-label textarea:focus ~ label,
[data-theme="light"] .float-label textarea:not(:placeholder-shown) ~ label {
  color: #1a1a1a;
  background: #e0ddd8;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  margin-left: -15px;
}