/* ============================================
SCI-FI / CYBERPUNK GLOBAL EFFECTS
Ghost in the Shell / Akira inspired
============================================ */
/* Subtle CRT scanline overlay on body */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 99999;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 136, 0.009) 2px,
rgba(0, 255, 136, 0.009) 4px
);
opacity: 0.36;
}
/* Sci-fi section divider lines */
.section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
max-width: 400px;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(0, 255, 136, 0.15) 20%,
rgba(0, 200, 255, 0.25) 50%,
rgba(0, 255, 136, 0.15) 80%,
transparent
);
}
/* Glitch text effect on hover for major headings */
@keyframes glitchColor {
0%, 100% { text-shadow: none; }
25% { text-shadow: -1px 0 rgba(255,0,64,0.15), 1px 0 rgba(0,255,170,0.15); }
50% { text-shadow: 1px 0 rgba(0,170,255,0.15), -1px 0 rgba(255,0,64,0.15); }
75% { text-shadow: -0.5px 0 rgba(255,0,64,0.1), 0.5px 0 rgba(0,255,170,0.1); }
}
.hero-title:hover,
.page-title:hover {
animation: glitchColor 0.8s ease;
}
/* Idle glitch: fires a brief 0.3s flicker every ~12 seconds */
@keyframes idleGlitch {
0%, 97.5%, 100% {
text-shadow: none;
transform: none;
}
97.7% {
text-shadow: -2px 0 #ff0040, 2px 0 #00ffaa;
transform: translateX(-1px);
}
97.9% {
text-shadow: 2px 0 #00aaff, -2px 0 #ff0040;
transform: translateX(1px);
}
98.1% {
text-shadow: -1px 0 #ff0040, 1px 0 #00aaff;
transform: translateX(-1px) skewX(-0.5deg);
}
98.3% {
text-shadow: 1px 0 #00ffaa, -1px 0 #ff0040;
transform: translateX(1px);
}
98.5% {
text-shadow: none;
transform: none;
}
}
.hero-title,
.page-title {
animation: idleGlitch 12s ease-in-out infinite, seraphimTextGlow 6s ease-in-out infinite;
}
/* Network grid background pattern for sections */
.section {
position: relative;
}
/* Holographic shimmer on cards */
@keyframes holoShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.pillar:hover::after,
.platform-card:hover::after,
.feature:hover::after,
.hero-badge:hover::after,
.scanner-box:hover::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background: linear-gradient(
110deg,
transparent 25%,
rgba(0, 255, 136, 0.04) 35%,
rgba(0, 200, 255, 0.06) 50%,
rgba(0, 255, 136, 0.04) 65%,
transparent 75%
);
background-size: 200% 100%;
animation: holoShimmer 1.5s ease-in-out;
pointer-events: none;
z-index: 1;
}
.pillar,
.platform-card,
.feature,
.hero-badge,
.scanner-box {
position: relative;
overflow: hidden;
}
/* Cyberpunk border glow pulse on focus-visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 1px solid rgba(0, 255, 136, 0.4);
outline-offset: 2px;
box-shadow: 0 0 15px rgba(0, 255, 136, 0.15);
}
/* Neon underline for nav links
IMPORTANT: Only target span:first-child::after for the underline.
Do NOT override .sph-item::after — that is the hover bridge
(invisible gap filler) used by nav-v23.css to keep dropdowns
accessible when moving the mouse from nav item to dropdown. */
.sph-item span:first-child {
position: relative;
}
.sph-item span:first-child::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #00ff88, #00aaff, transparent);
transition: width 0.3s ease, left 0.3s ease;
}
.sph-item:hover span:first-child::after {
width: 100%;
left: 0;
}
/* Section header diamond marker */
.section-header::after {
content: '◆';
display: block;
margin-top: 20px;
font-size: 0.5rem;
color: rgba(0, 255, 136, 0.2);
letter-spacing: 1em;
}
/* Hex grid background for hero */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(0, 255, 136, 0.02) 1px, transparent 1px),
radial-gradient(circle at 75% 75%, rgba(0, 200, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* CTA buttons - cyberpunk glow */
.btn-consult,
.cta-btn {
position: relative;
z-index: 1;
}
.btn-consult::before,
.cta-btn::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.4), rgba(0, 200, 255, 0.3));
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
filter: blur(8px);
}
.btn-consult:hover::before,
.cta-btn:hover::before {
opacity: 1;
}
/* Subtle screen flicker - atmospheric */
@keyframes screenFlicker {
0%, 97%, 100% { opacity: 1; }
97.5% { opacity: 0.97; }
98% { opacity: 1; }
98.5% { opacity: 0.98; }
}
body {
animation: screenFlicker 8s ease-in-out infinite;
}
/* Footer tech grid overlay */
.footer {
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(0, 255, 136, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 136, 0.02) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
.footer > * {
position: relative;
z-index: 1;
}
/* Tabular numerals for stat numbers */
.stat-num,
.hero-stat-number {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
/* Ping stat clickable */
.stat-ping {
cursor: pointer;
}
.tooltip-action {
display: block;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(0, 255, 136, 0.1);
font-size: 0.6rem;
letter-spacing: 0.1em;
color: rgba(0, 255, 136, 0.4);
text-transform: uppercase;
}
/* Mobile: reduce effects for performance */
@media (max-width: 768px) {
body::after {
display: none;
}
.footer::before {
display: none;
}
body {
animation: none;
}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
body::after { display: none; }
body { animation: none; }
.hero-title:hover,
.page-title:hover { animation: none; }
.pillar:hover::after,
.platform-card:hover::after,
.feature:hover::after { animation: none; }
}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ SERAPHIM PREMIUM TYPOGRAPHY SYSTEM ║
║ Golden Ratio (1.618) type scale with cinematic sci-fi presence ║
║ Inspired by Samsung/Apple product pages & Ghost in the Shell ║
╚═══════════════════════════════════════════════════════════════════════════╝ */
/* ── Import Crimson Pro for generated contract/legal text ── */
/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap'); — moved to non-blocking in index.html for performance */
/* ── Typography Custom Properties ── */
:root {
/* Type Scale — Golden Ratio 1.618 */
--type-display-xl: clamp(3.5rem, 5vw + 1rem, 6rem);
--type-display: clamp(2.5rem, 4vw + 0.5rem, 4.5rem);
--type-h1: clamp(2rem, 3vw + 0.5rem, 3.5rem);
--type-h2: clamp(1.5rem, 2.5vw + 0.25rem, 2.5rem);
--type-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
--type-h4: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
--type-body: clamp(0.95rem, 1vw + 0.25rem, 1.15rem);
--type-small: clamp(0.75rem, 0.8vw + 0.2rem, 0.85rem);
--type-micro: 0.7rem;
/* Tracking (letter-spacing) Scale */
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0em;
--tracking-body: 0;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
--tracking-widest: 0.2em;
--tracking-ultra: 0.25em;
/* Leading (line-height) Scale */
--leading-none: 1.0;
--leading-tight: 1.1;
--leading-snug: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
--leading-loose: 1.8;
/* White Space Scale */
--space-section: clamp(5rem, 10vw, 10rem);
--space-block: clamp(2.5rem, 5vw, 5rem);
--space-element: clamp(1.25rem, 2.5vw, 2.5rem);
--space-card: clamp(1.75rem, 3.5vw, 3.5rem);
--space-inline: 0.5em;
/* Content Width */
--content-reading: 1200px;
--content-grid: 1400px;
/* Sci-fi glow colors for text */
--glow-text-primary: rgba(0, 255, 136, 0.15);
--glow-text-strong: rgba(0, 255, 136, 0.3);
--glow-text-accent: rgba(0, 200, 255, 0.12);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ GLOBAL HEADING ENHANCEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Hero / Display XL — Cinematic Impact Headlines */
.hero-title,
.page-title,
.hero-title-large {
font-size: var(--type-display-xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: 400;
margin-bottom: clamp(12px, 2vw, 20px);
text-shadow:
0 0 40px var(--glow-text-primary),
0 0 80px rgba(0, 255, 136, 0.06);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* Section Title — Display Level */
.section-title {
font-size: var(--type-h2) !important;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wider);
margin-bottom: clamp(2rem, 4vw, 4rem);
text-shadow:
0 0 30px var(--glow-text-primary),
0 0 60px rgba(0, 255, 136, 0.05);
}
/* H1 Level */
.cta-text h2,
.cta-content h2 {
font-size: var(--type-h1);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
margin-bottom: clamp(1rem, 2vw, 1.5rem);
text-shadow: 0 0 25px var(--glow-text-primary);
}
/* H2 Level — Card Titles, Sub-section Headings */
.pillar h3,
.pillar-card h3 {
font-size: var(--type-h2);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
margin-bottom: clamp(1rem, 2vw, 1.5rem);
text-shadow: 0 0 20px var(--glow-text-primary);
}
.bento-card .card-title {
font-size: var(--type-h2);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
margin-bottom: clamp(0.5rem, 1vw, 1rem);
text-shadow: 0 0 20px var(--glow-text-primary);
}
.horizontal-card .card-title {
font-size: var(--type-h3);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
text-shadow: 0 0 15px var(--glow-text-primary);
}
/* H3 Level */
.step-title {
font-size: var(--type-h3);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
text-shadow: 0 0 20px var(--glow-text-primary);
}
/* H4 Level */
.feature h4,
.feature-item h4 {
font-size: var(--type-h4);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
font-weight: 600;
margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
text-shadow: 0 0 12px var(--glow-text-primary);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ BODY & PARAGRAPH TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Body text enhancements */
.hero-subtitle,
.hero-desc,
.page-desc,
.hero-description {
font-size: clamp(1rem, 1vw + 0.25rem, 1.15rem);
line-height: var(--leading-loose);
letter-spacing: var(--tracking-body);
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-desc,
.section-subtitle {
font-size: clamp(1rem, 1vw + 0.25rem, 1.15rem);
line-height: var(--leading-loose);
letter-spacing: var(--tracking-body);
margin-bottom: clamp(40px, 6vw, 72px);
}
.pillar p,
.pillar-card > p {
font-size: var(--type-body);
line-height: var(--leading-loose);
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.bento-card .card-explain {
font-size: var(--type-body);
line-height: var(--leading-relaxed);
}
.horizontal-card .card-text {
font-size: var(--type-body);
line-height: var(--leading-relaxed);
}
.feature p,
.feature-item p {
font-size: var(--type-small);
line-height: var(--leading-relaxed);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ LABEL & BADGE TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-label,
.section-tag,
.hero-badge,
.bento-card .card-label {
font-family: 'JetBrains Mono', monospace;
font-size: var(--type-micro);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
font-weight: 600;
line-height: var(--leading-normal);
}
.pillar-tag,
.stat-label {
font-size: var(--type-micro);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
}
.pillar-num {
font-size: var(--type-micro);
letter-spacing: var(--tracking-wider);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ WHITE SPACE SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Section vertical rhythm */
.section {
padding: clamp(80px, 10vw, 130px) 0;
}
/* Section header spacing */
.section-header,
.section-header-centered {
margin-bottom: clamp(40px, 6vw, 72px);
}
/* Card internal spacing */
.pillar,
.pillar-card {
padding: clamp(28px, 3.5vw, 42px);
}
.bento-card {
padding: clamp(24px, 3vw, 38px);
}
.wizard-card,
.form-step,
.generator-card {
padding: clamp(24px, 3vw, 38px);
}
/* Reading content max-width */
.page-desc,
.hero-description,
.section-desc,
.section-subtitle {
max-width: var(--content-reading);
}
/* ── Section Spacer Utility ── */
/* Use .section-spacer between major content blocks for breathing room */
.section-spacer {
height: clamp(40px, 6vw, 80px);
width: 100%;
position: relative;
pointer-events: none;
}
.section-spacer::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(300px, 40%);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.08), transparent);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ SCI-FI TEXT GLOW & SHIMMER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* !! LOCKED — 3D bezel text effect on hero headings. Do NOT remove or override. !! */
@keyframes seraphimTextGlow {
0%, 100% {
text-shadow:
/* Light bevel edge (top-left highlight) */
-1px -1px 0 rgba(255, 255, 255, 0.12),
/* Dark bevel edge (bottom-right depth) */
1px 1px 0 rgba(0, 0, 0, 0.6),
2px 2px 2px rgba(0, 0, 0, 0.35),
/* Subtle depth extrusion */
3px 3px 6px rgba(0, 0, 0, 0.2),
/* Ambient glow */
0 0 20px rgba(0, 255, 136, 0.06);
}
50% {
text-shadow:
/* Light bevel edge (top-left highlight) */
-1px -1px 0 rgba(255, 255, 255, 0.18),
/* Dark bevel edge (bottom-right depth) */
1px 1px 0 rgba(0, 0, 0, 0.55),
2px 2px 2px rgba(0, 0, 0, 0.3),
/* Subtle depth extrusion */
3px 3px 6px rgba(0, 0, 0, 0.18),
4px 4px 12px rgba(0, 0, 0, 0.12),
/* Ambient glow - slightly stronger at peak */
0 0 30px rgba(0, 255, 136, 0.10),
0 0 60px rgba(0, 200, 255, 0.04);
}
}
.hero-title,
.page-title,
.hero-title-large {
animation: seraphimTextGlow 6s ease-in-out infinite;
}
/* Section titles: lighter bezel for headings throughout pages */
@keyframes seraphimSectionGlow {
0%, 100% {
text-shadow:
-1px -1px 0 rgba(255, 255, 255, 0.08),
1px 1px 0 rgba(0, 0, 0, 0.40),
2px 2px 3px rgba(0, 0, 0, 0.20),
0 0 15px var(--glow-text-primary);
}
50% {
text-shadow:
-1px -1px 0 rgba(255, 255, 255, 0.12),
1px 1px 0 rgba(0, 0, 0, 0.35),
2px 2px 3px rgba(0, 0, 0, 0.18),
0 0 22px var(--glow-text-primary),
0 0 50px rgba(0, 255, 136, 0.05);
}
}
.section-title {
animation: seraphimSectionGlow 8s ease-in-out infinite;
}
/* Card titles: very subtle ambient glow */
@keyframes seraphimCardGlow {
0%, 100% {
text-shadow: 0 0 10px rgba(0, 255, 136, 0.06);
}
50% {
text-shadow: 0 0 18px rgba(0, 255, 136, 0.1);
}
}
.bento-card .card-title,
.horizontal-card .card-title,
.pillar h3,
.pillar-card h3 {
animation: seraphimCardGlow 10s ease-in-out infinite;
}
/* Gradient text accent shimmer */
@keyframes gradientShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.page-title .gradient,
.gradient-text {
background: linear-gradient(
135deg,
var(--terminal-green) 0%,
var(--terminal-silver-bright) 25%,
var(--terminal-green) 50%,
rgba(0, 200, 255, 0.9) 75%,
var(--terminal-green) 100%
);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShimmer 8s ease infinite;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ NEURAL BEZEL FRAME EFFECT
Reusable container bezel/frame for key headings.
Inspired by the AI consultant advisor-hero panel.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.neural-bezel {
position: relative;
padding: 18px 28px;
background:
/* Top gradient accent line */
linear-gradient(90deg, transparent 5%, rgba(0, 255, 136, 0.4) 30%, rgba(0, 212, 255, 0.3) 70%, transparent 95%) no-repeat top center / 100% 1px,
/* Panel background */
linear-gradient(135deg, rgba(0, 255, 136, 0.03), rgba(0, 212, 255, 0.015), transparent);
border: 1px solid rgba(0, 255, 136, 0.12);
border-top-color: rgba(0, 255, 136, 0.25);
border-right-color: rgba(0, 255, 136, 0.08);
border-bottom-color: rgba(0, 255, 136, 0.06);
border-radius: 4px;
box-shadow:
/* Outer subtle glow */
0 0 20px rgba(0, 255, 136, 0.04),
/* Inner bevel - top/left light edge */
inset 1px 1px 0 rgba(255, 255, 255, 0.06),
/* Inner bevel - bottom/right dark edge */
inset -1px -1px 0 rgba(0, 0, 0, 0.3),
/* Inner depth */
inset 0 0 30px rgba(0, 0, 0, 0.15);
display: inline-block;
transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Hover enhancement */
.neural-bezel:hover {
box-shadow:
0 0 30px rgba(0, 255, 136, 0.06),
inset 1px 1px 0 rgba(255, 255, 255, 0.08),
inset -1px -1px 0 rgba(0, 0, 0, 0.25),
inset 0 0 40px rgba(0, 0, 0, 0.12);
border-color: rgba(0, 255, 136, 0.2);
}
/* Variant for hero-level headings: stronger bezel */
.neural-bezel--hero {
padding: 22px 36px;
background:
linear-gradient(90deg, transparent 3%, rgba(0, 255, 136, 0.5) 25%, rgba(0, 212, 255, 0.35) 75%, transparent 97%) no-repeat top center / 100% 1px,
linear-gradient(135deg, rgba(0, 255, 136, 0.04), rgba(0, 212, 255, 0.02), rgba(0, 0, 0, 0.2));
border: 1px solid rgba(0, 255, 136, 0.15);
border-top-color: rgba(0, 255, 136, 0.3);
border-right-color: rgba(0, 255, 136, 0.1);
border-bottom-color: rgba(0, 255, 136, 0.08);
box-shadow:
0 0 30px rgba(0, 255, 136, 0.05),
0 4px 20px rgba(0, 0, 0, 0.3),
inset 1px 1px 0 rgba(255, 255, 255, 0.08),
inset -1px -1px 0 rgba(0, 0, 0, 0.4),
inset 0 0 40px rgba(0, 0, 0, 0.2);
}
.neural-bezel--hero:hover {
box-shadow:
0 0 40px rgba(0, 255, 136, 0.08),
0 4px 24px rgba(0, 0, 0, 0.25),
inset 1px 1px 0 rgba(255, 255, 255, 0.1),
inset -1px -1px 0 rgba(0, 0, 0, 0.35),
inset 0 0 50px rgba(0, 0, 0, 0.15);
border-color: rgba(0, 255, 136, 0.25);
}
/* Variant for section headings: lighter, more subtle */
.neural-bezel--section {
padding: 14px 24px;
background:
linear-gradient(90deg, transparent 8%, rgba(0, 255, 136, 0.3) 35%, rgba(0, 212, 255, 0.2) 65%, transparent 92%) no-repeat top center / 100% 1px,
linear-gradient(135deg, rgba(0, 255, 136, 0.02), rgba(0, 212, 255, 0.01), transparent);
border: 1px solid rgba(0, 255, 136, 0.08);
border-top-color: rgba(0, 255, 136, 0.15);
border-right-color: rgba(0, 255, 136, 0.06);
border-bottom-color: rgba(0, 255, 136, 0.05);
box-shadow:
0 0 15px rgba(0, 255, 136, 0.03),
inset 1px 1px 0 rgba(255, 255, 255, 0.04),
inset -1px -1px 0 rgba(0, 0, 0, 0.25),
inset 0 0 20px rgba(0, 0, 0, 0.1);
}
/* Mobile: reduce bezel intensity for performance and readability */
@media (max-width: 768px) {
.neural-bezel,
.neural-bezel--hero,
.neural-bezel--section {
padding: 12px 18px;
box-shadow:
0 0 10px rgba(0, 255, 136, 0.03),
inset 1px 1px 0 rgba(255, 255, 255, 0.04),
inset -1px -1px 0 rgba(0, 0, 0, 0.2),
inset 0 0 15px rgba(0, 0, 0, 0.1);
}
.neural-bezel--hero {
padding: 14px 20px;
}
.neural-bezel--section {
padding: 10px 16px;
}
}
/* Very small screens: even subtler */
@media (max-width: 480px) {
.neural-bezel,
.neural-bezel--hero,
.neural-bezel--section {
padding: 10px 14px;
border-radius: 3px;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.03),
inset -1px -1px 0 rgba(0, 0, 0, 0.15),
inset 0 0 10px rgba(0, 0, 0, 0.08);
}
}
/* Respect reduced motion - remove transitions */
@media (prefers-reduced-motion: reduce) {
.neural-bezel,
.neural-bezel--hero,
.neural-bezel--section {
transition: none;
}
}
/* Day mode: slightly adjusted for lighter backgrounds */
html[data-theme="day"] .neural-bezel,
html[data-theme="day"] .neural-bezel--hero,
html[data-theme="day"] .neural-bezel--section {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.02), rgba(0, 212, 255, 0.01), rgba(0, 0, 0, 0.03));
border-color: rgba(0, 100, 80, 0.12);
box-shadow:
0 0 15px rgba(0, 100, 80, 0.04),
inset 1px 1px 0 rgba(255, 255, 255, 0.15),
inset -1px -1px 0 rgba(0, 0, 0, 0.08),
inset 0 0 20px rgba(0, 0, 0, 0.03);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ UTILITY CLASSES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Size Utilities ── */
.text-display-xl {
font-family: 'Imbue', Georgia, serif;
font-size: var(--type-display-xl) !important;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: 400;
}
.text-display {
font-family: 'Imbue', Georgia, serif;
font-size: var(--type-display) !important;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: 400;
}
.text-h1 {
font-family: 'Imbue', Georgia, serif;
font-size: var(--type-h1) !important;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
font-weight: 400;
}
.text-h2 {
font-family: 'Imbue', Georgia, serif;
font-size: var(--type-h2) !important;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
font-weight: 700;
}
.text-h3 {
font-family: 'Imbue', Georgia, serif;
font-size: var(--type-h3) !important;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
font-weight: 600;
}
.text-h4 {
font-family: 'Space Grotesk', sans-serif;
font-size: var(--type-h4) !important;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
font-weight: 600;
}
.text-body {
font-size: var(--type-body) !important;
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-body);
}
.text-small {
font-size: var(--type-small) !important;
line-height: var(--leading-relaxed);
}
.text-micro {
font-size: var(--type-micro) !important;
line-height: var(--leading-normal);
}
/* ── Font Family Utilities ── */
.text-mono {
font-family: 'JetBrains Mono', monospace !important;
}
.text-serif {
font-family: 'Syne', 'Space Grotesk', sans-serif !important;
}
.text-sans {
font-family: 'Space Grotesk', sans-serif !important;
}
.text-display-font {
font-family: 'Syne', sans-serif !important;
}
.text-legal {
font-family: 'Crimson Pro', 'Georgia', serif !important;
}
/* ── Style Utilities ── */
.text-label {
font-family: 'JetBrains Mono', monospace !important;
font-size: var(--type-micro) !important;
letter-spacing: var(--tracking-widest) !important;
text-transform: uppercase !important;
font-weight: 600;
color: var(--terminal-green);
}
.text-gradient {
background: linear-gradient(
135deg,
var(--terminal-green) 0%,
var(--terminal-silver-bright) 40%,
rgba(0, 200, 255, 0.9) 70%,
var(--terminal-green) 100%
);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShimmer 6s ease infinite;
}
.text-glow {
text-shadow:
0 0 20px var(--glow-text-primary),
0 0 40px rgba(0, 255, 136, 0.06);
}
.text-glow-strong {
text-shadow:
0 0 30px var(--glow-text-strong),
0 0 60px rgba(0, 255, 136, 0.1),
0 0 100px rgba(0, 200, 255, 0.05);
}
/* ── White Space Utilities ── */
.whitespace-lg {
padding-top: var(--space-section);
padding-bottom: var(--space-section);
}
.whitespace-md {
padding-top: var(--space-block);
padding-bottom: var(--space-block);
}
.whitespace-sm {
padding-top: var(--space-element);
padding-bottom: var(--space-element);
}
.mt-section { margin-top: var(--space-section); }
.mb-section { margin-bottom: var(--space-section); }
.mt-block { margin-top: var(--space-block); }
.mb-block { margin-bottom: var(--space-block); }
.mt-element { margin-top: var(--space-element); }
.mb-element { margin-bottom: var(--space-element); }
/* Content width constraints */
.max-w-reading {
max-width: var(--content-reading);
margin-left: auto;
margin-right: auto;
}
.max-w-grid {
max-width: var(--content-grid);
margin-left: auto;
margin-right: auto;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ STAT NUMBER TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stat-num,
.stat-value {
font-family: 'JetBrains Mono', monospace;
font-size: var(--type-h1);
font-weight: 700;
line-height: var(--leading-none);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
.horizontal-card .step-number {
font-size: var(--type-display);
line-height: var(--leading-none);
letter-spacing: var(--tracking-tight);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
§ RESPONSIVE TYPOGRAPHY REFINEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
:root {
--space-section: clamp(3.5rem, 7vw, 7rem);
--space-card: clamp(1.5rem, 3vw, 3rem);
--space-2xl: 55px;
--space-lg: 21px;
}
}
@media (max-width: 768px) {
:root {
--space-section: clamp(3rem, 6vw, 5rem);
--space-block: clamp(1.75rem, 3.5vw, 3rem);
--space-card: clamp(1.25rem, 2.5vw, 2.25rem);
--space-2xl: 34px;
--space-lg: 21px;
}
/* Tighten hero text on mobile for impact */
.hero-title,
.page-title,
.hero-title-large {
letter-spacing: -0.04em;
line-height: 1.05;
}
.section-title {
letter-spacing: -0.03em;
margin-bottom: clamp(1rem, 3vw, 2.5rem);
}
/* Disable glow animations on mobile for performance */
.hero-title,
.page-title,
.hero-title-large,
.section-title,
.bento-card .card-title,
.horizontal-card .card-title,
.pillar h3,
.pillar-card h3 {
animation: none;
}
}
@media (max-width: 480px) {
.hero-title,
.page-title,
.hero-title-large {
letter-spacing: -0.05em;
word-spacing: -0.02em;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-title,
.page-title,
.hero-title-large,
.section-title,
.bento-card .card-title,
.horizontal-card .card-title,
.pillar h3,
.pillar-card h3 {
animation: none !important;
}
.page-title .gradient,
.gradient-text,
.text-gradient {
animation: none !important;
}
}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ GHOST IN THE SHELL / AKIRA SCI-FI MICRO-ELEMENTS ║
║ Cinematic system-readout UI components ║
╚═══════════════════════════════════════════════════════════════════════════╝ */
/* ── .cyber-label : small uppercase readout with blinking cursor ── */
@keyframes cyberCursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cyber-label {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terminal-green);
line-height: 1.4;
}
.cyber-label::after {
content: '_';
display: inline-block;
margin-left: 2px;
animation: cyberCursorBlink 1s step-end infinite;
color: var(--terminal-green);
}
/* ── .system-status : pulsing green dot + ONLINE text ── */
@keyframes statusPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.6);
}
50% {
box-shadow: 0 0 0 4px rgba(0, 255, 136, 0);
}
}
.system-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--terminal-green);
vertical-align: middle;
margin-left: 8px;
}
.system-status .status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terminal-green);
animation: statusPulse 2s ease-in-out infinite;
flex-shrink: 0;
}
/* ── .data-stream : decorative scrolling hex/binary (CSS-only) ── */
@keyframes dataStreamScroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
.data-stream {
position: relative;
overflow: hidden;
height: 120px;
width: 100%;
font-family: 'JetBrains Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.1em;
color: rgba(0, 255, 136, 0.15);
line-height: 1.8;
user-select: none;
pointer-events: none;
}
.data-stream::before {
content:
'0xA3F7 1101 0010 0xFF2B 0011 1010 0xD4E1 1110 0001\A'
'0x7B9C 0100 1101 0xEE38 1001 0110 0x52A0 0111 1000\A'
'0xF1D6 1010 1011 0x8C47 0110 0101 0x3E9F 1100 0011\A'
'0x6A82 0001 1110 0xB5C3 1011 0100 0x9D1E 0010 1111\A'
'0xC4F9 1110 0010 0x27AB 0101 1001 0xE863 1000 0110\A'
'0x1B5D 0011 0111 0xFA94 1100 1010 0x4C76 0110 1101\A'
'0xA3F7 1101 0010 0xFF2B 0011 1010 0xD4E1 1110 0001\A'
'0x7B9C 0100 1101 0xEE38 1001 0110 0x52A0 0111 1000\A'
'0xF1D6 1010 1011 0x8C47 0110 0101 0x3E9F 1100 0011\A'
'0x6A82 0001 1110 0xB5C3 1011 0100 0x9D1E 0010 1111\A'
'0xC4F9 1110 0010 0x27AB 0101 1001 0xE863 1000 0110\A'
'0x1B5D 0011 0111 0xFA94 1100 1010 0x4C76 0110 1101';
white-space: pre;
display: block;
animation: dataStreamScroll 12s linear infinite;
}
.data-stream::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--void) 0%, transparent 20%, transparent 80%, var(--void) 100%);
pointer-events: none;
}
/* ── .terminal-divider : horizontal line with "// SECTION BREAK //" ── */
.terminal-divider {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 12px 50px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.2em;
color: rgba(0, 255, 136, 0.25);
text-transform: uppercase;
user-select: none;
position: relative;
z-index: 1;
}
.terminal-divider::before,
.terminal-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.15), transparent);
}
.terminal-divider::before {
margin-right: 20px;
}
.terminal-divider::after {
margin-left: 20px;
}
/* ── .glitch-badge : small badge with occasional color-shift glitch ── */
@keyframes glitchShift {
0%, 94%, 97%, 100% {
transform: none;
text-shadow: none;
color: var(--terminal-green);
}
95% {
transform: translateX(-1px);
text-shadow: 1px 0 #ff0040, -1px 0 #00d4ff;
color: var(--text-bright);
}
96% {
transform: translateX(1px);
text-shadow: -1px 0 #ff0040, 1px 0 #00d4ff;
color: var(--text-bright);
}
}
.glitch-badge {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--terminal-green);
padding: 4px 12px;
border: 1px solid rgba(0, 255, 136, 0.3);
background: rgba(0, 255, 136, 0.05);
animation: glitchShift 8s ease-in-out infinite;
position: relative;
}
/* ── .holo-counter : stats/numbers with green glow + flicker ── */
@keyframes holoFlicker {
0%, 100% {
opacity: 1;
text-shadow:
0 0 8px rgba(0, 255, 136, 0.6),
0 0 20px rgba(0, 255, 136, 0.3),
0 0 40px rgba(0, 255, 136, 0.1);
}
92% {
opacity: 1;
text-shadow:
0 0 8px rgba(0, 255, 136, 0.6),
0 0 20px rgba(0, 255, 136, 0.3),
0 0 40px rgba(0, 255, 136, 0.1);
}
93% {
opacity: 0.7;
text-shadow:
0 0 4px rgba(0, 255, 136, 0.4);
}
94% {
opacity: 1;
text-shadow:
0 0 12px rgba(0, 255, 136, 0.8),
0 0 25px rgba(0, 255, 136, 0.4);
}
95% {
opacity: 0.85;
text-shadow:
0 0 6px rgba(0, 255, 136, 0.5);
}
96% {
opacity: 1;
text-shadow:
0 0 8px rgba(0, 255, 136, 0.6),
0 0 20px rgba(0, 255, 136, 0.3),
0 0 40px rgba(0, 255, 136, 0.1);
}
}
.holo-counter {
font-family: 'JetBrains Mono', monospace;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
color: var(--terminal-green);
text-shadow:
0 0 8px rgba(0, 255, 136, 0.6),
0 0 20px rgba(0, 255, 136, 0.3),
0 0 40px rgba(0, 255, 136, 0.1);
animation: holoFlicker 6s ease-in-out infinite;
}
/* ── .access-level : small clearance-level badge ── */
.access-level {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terminal-green);
padding: 3px 10px;
border: 1px solid rgba(0, 255, 136, 0.2);
background: rgba(0, 255, 136, 0.04);
border-radius: 2px;
user-select: none;
}
.access-level::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--terminal-green);
box-shadow: 0 0 6px var(--terminal-green);
}
/* ── .neural-link : hover "connecting..." animation for links ── */
.neural-link {
position: relative;
display: inline-block;
color: var(--terminal-silver);
transition: color 0.3s ease;
cursor: pointer;
}
.neural-link::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1px;
background: var(--terminal-green);
box-shadow: 0 0 6px var(--terminal-green);
transition: width 0.3s ease;
}
.neural-link:hover {
color: var(--terminal-green);
}
.neural-link:hover::after {
width: 100%;
animation: neuralLinkPulse 0.8s ease-out;
}
@keyframes neuralLinkPulse {
0% {
width: 0;
opacity: 0;
box-shadow: 0 0 0px var(--terminal-green);
}
30% {
opacity: 1;
box-shadow: 0 0 8px var(--terminal-green);
}
60% {
box-shadow: 0 0 12px var(--terminal-green);
}
100% {
width: 100%;
opacity: 1;
box-shadow: 0 0 6px var(--terminal-green);
}
}
/* ── .system-status-banner : thin status bar above footer ── */
.system-status-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 8px 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--terminal-green);
background: linear-gradient(90deg, rgba(0, 255, 136, 0.03), rgba(0, 255, 136, 0.06), rgba(0, 255, 136, 0.03));
border-top: 1px solid rgba(0, 255, 136, 0.12);
border-bottom: 1px solid rgba(0, 255, 136, 0.12);
position: relative;
z-index: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
user-select: none;
}
.system-status-banner .status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terminal-green);
box-shadow: 0 0 6px var(--terminal-green);
animation: statusPulse 2s ease-in-out infinite;
flex-shrink: 0;
}
.system-status-banner .status-separator {
color: rgba(0, 255, 136, 0.3);
margin: 0 4px;
}
@keyframes statusBannerScan {
0% { left: -20%; }
100% { left: 120%; }
}
.system-status-banner::after {
content: '';
position: absolute;
top: 0;
left: -20%;
width: 10%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.08), transparent);
animation: statusBannerScan 6s linear infinite;
pointer-events: none;
}
/* ── Responsive: reduce sci-fi animations on mobile ── */
@media (max-width: 768px) {
.terminal-divider {
padding: 8px 20px;
font-size: 0.5rem;
}
.system-status-banner {
font-size: 0.5rem;
padding: 6px 12px;
letter-spacing: 0.1em;
}
.holo-counter {
animation: none;
}
.glitch-badge {
animation: none;
}
.data-stream::before {
animation: none;
}
}
/* ── Reduced motion: disable all sci-fi animations ── */
@media (prefers-reduced-motion: reduce) {
.cyber-label::after,
.system-status .status-dot,
.system-status-banner .status-dot,
.system-status-banner::after,
.data-stream::before,
.glitch-badge,
.holo-counter {
animation: none !important;
}
.neural-link:hover::after {
animation: none !important;
}
}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ ENHANCED GHOST IN THE SHELL / AKIRA AESTHETIC ║
║ Section 9 terminal feel -- Neo-Tokyo network atmosphere ║
╚═══════════════════════════════════════════════════════════════════════════╝ */
/* ── 2. Matrix-style data rain overlay (CSS-only) ── */
@keyframes matrixRain {
0% {
background-position: 0% 0%, 33% -100%, 66% -50%, 15% -75%, 80% -25%;
}
100% {
background-position: 0% 600%, 33% 500%, 66% 550%, 15% 525%, 80% 575%;
}
}
.matrix-rain {
position: relative;
}
.matrix-rain::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
background-image:
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 20px,
rgba(0, 255, 136, 0.03) 20px,
transparent 22px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 14px,
rgba(0, 200, 255, 0.02) 14px,
transparent 16px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 28px,
rgba(0, 255, 136, 0.025) 28px,
transparent 30px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 18px,
rgba(0, 255, 136, 0.015) 18px,
transparent 19px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 24px,
rgba(0, 200, 255, 0.018) 24px,
transparent 25px
);
background-size:
3px 42px,
5px 36px,
7px 58px,
4px 38px,
6px 50px;
background-position: 0% 0%, 33% -100%, 66% -50%, 15% -75%, 80% -25%;
animation: matrixRain 20s linear infinite;
opacity: 0.6;
mix-blend-mode: screen;
}
/* Apply matrix rain to hero section */
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
background-image:
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 20px,
rgba(0, 255, 136, 0.03) 20px,
transparent 22px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 14px,
rgba(0, 200, 255, 0.02) 14px,
transparent 16px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 28px,
rgba(0, 255, 136, 0.025) 28px,
transparent 30px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 18px,
rgba(0, 255, 136, 0.015) 18px,
transparent 19px
),
repeating-linear-gradient(
180deg,
transparent 0px,
transparent 24px,
rgba(0, 200, 255, 0.018) 24px,
transparent 25px
);
background-size:
3px 42px,
5px 36px,
7px 58px,
4px 38px,
6px 50px;
animation: matrixRain 20s linear infinite;
opacity: 0.5;
mix-blend-mode: screen;
}
/* Ensure hero content stays above the rain */
.hero > * {
position: relative;
z-index: 2;
}
/* ── 4. Typing cursor blink utility class ── */
@keyframes cyberCursorBlinkGreen {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cyber-cursor::after {
content: '_';
display: inline-block;
margin-left: 2px;
color: #00ff88;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
animation: cyberCursorBlinkGreen 0.8s step-end infinite;
text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}
/* ── 7. Hexagonal clip-path divider ── */
.hex-divider {
height: 40px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
clip-path: polygon(0 50%, 2% 0, 98% 0, 100% 50%, 98% 100%, 2% 100%);
margin: 40px auto;
max-width: 600px;
position: relative;
}
.hex-divider::after {
content: '';
position: absolute;
inset: 1px;
clip-path: polygon(0 50%, 2% 0, 98% 0, 100% 50%, 98% 100%, 2% 100%);
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.04), transparent);
animation: hexPulse 4s ease-in-out infinite;
}
@keyframes hexPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ── 9. Terminal-style section header prefix ── */
.section-title::before,
.page-title::before {
content: '> ';
color: rgba(0, 255, 136, 0.4);
font-family: 'JetBrains Mono', monospace;
font-weight: 400;
}
/* ── 10. Ambient glow pulsing on hero section ── */
@keyframes heroGlow {
0%, 100% {
box-shadow: inset 0 0 100px rgba(0, 255, 136, 0.03);
}
50% {
box-shadow: inset 0 0 150px rgba(0, 255, 136, 0.06);
}
}
.hero {
box-shadow: inset 0 0 100px rgba(0, 255, 136, 0.03);
animation: heroGlow 8s ease-in-out infinite;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GHOST IN THE SHELL / AKIRA SCI-FI EFFECTS
攻殻機動隊 ── アキラ ── ネオ・トーキョー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── 1. Hexagonal Grid Overlay ────────────────────────────── */
/* Applied to .section.alt only (.hero::before already in use) */
.section.alt,
.section-alt {
position: relative;
}
.section.alt::before,
.section-alt::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='rgba(0,255,136,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
background-size: 60px 52px;
pointer-events: none;
z-index: 0;
}
/* -- Reusable Hexagonal Grid Background (.hex-bg) ---------- */
.hex-bg { position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='rgba(0,255,136,0.035)' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 60px 52px; background-repeat: repeat; }
.hex-bg.section.alt, .hex-bg.section-alt { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='rgba(0,255,136,0.035)' stroke-width='0.5'/%3E%3C/svg%3E") repeat, var(--surface); }
.hex-bg.stats-bar { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='rgba(0,255,136,0.03)' stroke-width='0.5'/%3E%3C/svg%3E") repeat, var(--surface); }
.hex-bg-strong { position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='rgba(0,255,136,0.06)' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 60px 52px; background-repeat: repeat; }
.hex-bg-strong.section.alt, .hex-bg-strong.section-alt { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='rgba(0,255,136,0.06)' stroke-width='0.5'/%3E%3C/svg%3E") repeat, var(--surface); }
@media (max-width: 768px) { .hex-bg, .hex-bg-strong { background-image: none !important; } .hex-bg.section.alt, .hex-bg.section-alt, .hex-bg-strong.section.alt, .hex-bg-strong.section-alt, .hex-bg.stats-bar { background: var(--surface) !important; } }
@media (prefers-reduced-motion: reduce) { .hex-bg, .hex-bg-strong { background-image: none !important; } .hex-bg.section.alt, .hex-bg.section-alt, .hex-bg-strong.section.alt, .hex-bg-strong.section-alt, .hex-bg.stats-bar { background: var(--surface) !important; } }
/* ── 2. Data Stream Sidebar ───────────────────────────────── */
/* Uses dedicated element (body::before already used for noise) */
.data-stream-sidebar {
content: 'セラフィム ネットワーク 防壁 攻殻 電脳 光学 迷彩 素子 バトー タチコマ 笑い男 人形使い 個別の11人 公安九課';
position: fixed;
left: 0;
top: 0;
width: 18px;
height: 100vh;
writing-mode: vertical-rl;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: rgba(0, 255, 136, 0.08);
overflow: hidden;
z-index: 9999;
pointer-events: none;
animation: dataStream 30s linear infinite;
letter-spacing: 4px;
line-height: 18px;
white-space: nowrap;
}
@keyframes dataStream {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
/* ── 3. Neural Network Lines (SVG container) ──────────────── */
.neural-network-svg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.15;
}
.neural-network-svg line {
stroke: var(--terminal-green);
stroke-width: 0.5;
opacity: 0;
transition: opacity 0.4s ease;
}
.neural-network-svg line.active {
opacity: 1;
stroke-dasharray: 8 4;
animation: neuralPulse 2s linear infinite;
}
@keyframes neuralPulse {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -24; }
}
/* ── 4. Glitch Text on Scroll ─────────────────────────────── */
@keyframes scrollGlitch {
0% { clip-path: inset(0 0 100% 0); transform: translate(0); }
10% { clip-path: inset(0 0 80% 0); transform: translate(-1px, 0.5px); filter: hue-rotate(15deg); }
20% { clip-path: inset(0 0 40% 0); transform: translate(1px, -0.5px); filter: hue-rotate(30deg); }
30% { clip-path: inset(0 0 20% 0); transform: translate(-0.5px, 0); filter: hue-rotate(10deg); }
40% { clip-path: inset(0 0 0% 0); transform: translate(0); filter: none; }
100% { clip-path: inset(0 0 0% 0); transform: translate(0); filter: none; }
}
.glitch-in {
animation: scrollGlitch 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
/* ── 5. Thermal / Infrared Card Hover ─────────────────────── */
/* Uses .thermal-overlay wrapper (::after already used on cards) */
.service-card,
.bento-item,
.feature-card {
position: relative;
overflow: hidden;
}
.thermal-overlay {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(255, 0, 60, 0.06) 0%,
rgba(255, 100, 0, 0.04) 30%,
rgba(255, 200, 0, 0.03) 60%,
rgba(0, 255, 136, 0.02) 100%);
border-radius: inherit;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 1;
}
.service-card:hover .thermal-overlay,
.bento-item:hover .thermal-overlay,
.pillar:hover .thermal-overlay,
.feature-card:hover .thermal-overlay {
opacity: 1;
}
/* ── 6. Tachikoma Scan Ring Cursor ────────────────────────── */
.scan-ring {
position: fixed;
width: 30px;
height: 30px;
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 50%;
pointer-events: none;
z-index: 99999;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}
.scan-ring::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(0, 255, 136, 0.1);
border-radius: 50%;
}
.scan-ring::after {
content: '+';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8px;
color: rgba(0, 255, 136, 0.3);
font-family: 'JetBrains Mono', monospace;
}
.scan-ring.hovering-card {
width: 50px;
height: 50px;
border-color: rgba(0, 255, 136, 0.4);
}
body.hide-cursor {
cursor: none;
}
body.hide-cursor a, body.hide-cursor button {
cursor: none;
}
/* ── 7. Section 9 Classified Stamp ────────────────────────── */
.section {
overflow: hidden;
}
.section:nth-child(odd)::after {
content: 'AUTHORIZED // \516C\5B89\4E5D\8AB2';
content: 'AUTHORIZED // 公安九課';
position: absolute;
bottom: 30px;
right: 30px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(0, 255, 136, 0.05);
transform: rotate(-5deg);
pointer-events: none;
z-index: 0;
white-space: nowrap;
}
/* ── 8. Akira Light Trails ────────────────────────────────── */
@keyframes akiraTrail {
0% { transform: translateX(-100%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
.akira-trail {
position: fixed;
height: 1px;
width: 200px;
background: linear-gradient(90deg, transparent, #ff3366, #ff6b9d, transparent);
pointer-events: none;
z-index: 9998;
opacity: 0;
}
.akira-trail.active {
animation: akiraTrail 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.akira-trail:nth-child(2) {
background: linear-gradient(90deg, transparent, #00ff88, #00ffcc, transparent);
animation-delay: 0.2s;
animation-duration: 1.8s;
}
.akira-trail:nth-child(3) {
background: linear-gradient(90deg, transparent, #00d4ff, #66e0ff, transparent);
animation-delay: 0.4s;
animation-duration: 1.3s;
}
/* ── 9. Boot Sequence Section Reveals ─────────────────────── */
/* Uses data-boot (not data-reveal) to avoid scripts.js conflict */
.section[data-boot] {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.section[data-boot].booted {
opacity: 1;
transform: translateY(0);
}
/* The JS-created overlay that flashes the boot text */
.boot-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.boot-label {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--terminal-green);
text-shadow: 0 0 15px var(--terminal-green), 0 0 30px rgba(0, 255, 136, 0.3);
padding: 8px 20px;
border: 1px solid rgba(0, 255, 136, 0.2);
background: rgba(0, 10, 5, 0.7);
pointer-events: none;
}
.section[data-boot].booting .boot-overlay {
opacity: 1;
animation: bootFlash 0.8s ease forwards;
}
@keyframes bootFlash {
0% { opacity: 0; transform: scale(0.9); }
15% { opacity: 1; transform: scale(1); }
60% { opacity: 1; }
100% { opacity: 0; }
}
/* ── 10. Holographic Card Tilt (base CSS) ─────────────────── */
.service-card,
.bento-item,
.pillar,
.feature-card,
.horizontal-card {
transform-style: preserve-3d;
will-change: transform;
}
.holo-glow {
position: absolute;
inset: -1px;
border-radius: inherit;
background: conic-gradient(from var(--holo-angle, 0deg),
rgba(255, 0, 100, 0.15),
rgba(0, 255, 136, 0.15),
rgba(0, 200, 255, 0.15),
rgba(255, 0, 100, 0.15));
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: -1;
filter: blur(8px);
}
.service-card:hover .holo-glow,
.bento-item:hover .holo-glow,
.pillar:hover .holo-glow,
.feature-card:hover .holo-glow {
opacity: 1;
}
/* ── 11. Modern Radar Ping ────────────────────────────────── */
.radar-ping {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.radar-ping::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid rgba(0, 255, 136, 0.3);
animation: radarExpand 2s ease-out infinite;
}
@keyframes radarExpand {
0% { width: 8px; height: 8px; opacity: 0.8; border-color: rgba(0, 255, 136, 0.5); }
100% { width: 40px; height: 40px; opacity: 0; border-color: rgba(0, 255, 136, 0); }
}
/* ── 13. Wire-Frame Ghost Overlay ─────────────────────────── */
@keyframes ghostWire {
0% { clip-path: inset(100% 0 0 0); opacity: 0; }
30% { clip-path: inset(0 0 0 0); opacity: 1; }
70% { clip-path: inset(0 0 0 0); opacity: 0.6; }
100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}
.service-card:hover,
.bento-item:hover,
.pillar:hover {
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.4),
0 0 25px rgba(0, 255, 136, 0.08),
inset 0 0 0 1px rgba(0, 255, 136, 0.15);
}
/* ── 14. Audio Waveform Dividers ──────────────────────────── */
.waveform-divider {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
opacity: 0.3;
margin: 0 auto;
max-width: 300px;
}
.waveform-divider span {
display: inline-block;
width: 2px;
background: var(--terminal-green);
animation: waveBar 1.5s ease-in-out infinite;
border-radius: 1px;
}
.waveform-divider span:nth-child(1) { height: 8px; animation-delay: 0s; }
.waveform-divider span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.waveform-divider span:nth-child(3) { height: 20px; animation-delay: 0.2s; }
.waveform-divider span:nth-child(4) { height: 12px; animation-delay: 0.3s; }
.waveform-divider span:nth-child(5) { height: 24px; animation-delay: 0.15s; }
.waveform-divider span:nth-child(6) { height: 16px; animation-delay: 0.25s; }
.waveform-divider span:nth-child(7) { height: 10px; animation-delay: 0.35s; }
.waveform-divider span:nth-child(8) { height: 22px; animation-delay: 0.05s; }
.waveform-divider span:nth-child(9) { height: 18px; animation-delay: 0.2s; }
.waveform-divider span:nth-child(10) { height: 6px; animation-delay: 0.3s; }
.waveform-divider span:nth-child(11) { height: 20px; animation-delay: 0.1s; }
.waveform-divider span:nth-child(12) { height: 14px; animation-delay: 0.25s; }
.waveform-divider span:nth-child(13) { height: 8px; animation-delay: 0.15s; }
@keyframes waveBar {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.8); }
}
/* ── 15. Kanji Watermark Layer ────────────────────────────── */
.kanji-watermark {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
opacity: 0.025;
font-family: serif;
font-size: 140px;
color: var(--terminal-green);
text-shadow: none;
line-height: 1.4;
word-spacing: 80px;
writing-mode: vertical-rl;
white-space: nowrap;
}
/* ── 16. Cyberbrain Connection Indicator ──────────────────── */
.cyberbrain-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.1em;
color: rgba(0, 255, 136, 0.5);
text-transform: uppercase;
}
.cyberbrain-indicator .cb-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terminal-green);
animation: cbPulse 2s ease-in-out infinite;
}
@keyframes cbPulse {
0%, 100% { opacity: 0.3; box-shadow: 0 0 4px rgba(0, 255, 136, 0.2); }
50% { opacity: 1; box-shadow: 0 0 12px rgba(0, 255, 136, 0.6); }
}
.cyberbrain-indicator.connected .cb-dot {
background: var(--terminal-green);
}
.cyberbrain-indicator.connected .cb-text::after {
content: ' LINKED';
}
/* ── 17. Akira Power Meter (scroll progress) ──────────────── */
.scroll-power-meter {
position: fixed;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 120px;
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
z-index: 9999;
pointer-events: none;
overflow: hidden;
}
.scroll-power-meter .meter-fill {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(to top, #ff3366, #ff6b00, #ffcc00, #00ff88);
border-radius: 2px;
transition: height 0.15s ease-out;
box-shadow: 0 0 8px rgba(255, 51, 102, 0.4);
}
.scroll-power-meter .meter-label {
position: absolute;
right: 10px;
bottom: -4px;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
color: rgba(0, 255, 136, 0.4);
letter-spacing: 0.1em;
transform: rotate(-90deg);
transform-origin: right bottom;
white-space: nowrap;
}
/* ── 19. Terminal Boot Log Footer ─────────────────────────── */
.footer-terminal-log {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: rgba(0, 255, 136, 0.35);
line-height: 1.8;
max-height: 80px;
overflow: hidden;
padding: 10px 0;
border-top: 1px solid rgba(0, 255, 136, 0.06);
margin-top: 15px;
}
.footer-terminal-log .log-line {
opacity: 0;
animation: logFadeIn 0.3s ease forwards;
}
.footer-terminal-log .log-line .timestamp {
color: rgba(0, 255, 136, 0.2);
margin-right: 8px;
}
.footer-terminal-log .log-line .status-ok {
color: rgba(0, 255, 136, 0.5);
}
.footer-terminal-log .log-line .status-warn {
color: rgba(255, 200, 0, 0.5);
}
@keyframes logFadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── 20. Parallax Layer ───────────────────────────────────── */
.parallax-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
will-change: transform;
}
/* ── Blade Runner Ambient Rain ──────────────────────────── */
/* Decorative rain overlay — auto-hides when weather system rain is active */
html.weather-rain .blade-rain { display: none !important; }
.blade-rain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
overflow: hidden;
}
.blade-rain .rain-layer {
position: absolute;
inset: 0;
/* Thin vertical rain streaks with subtle wind angle. */
background-image:
repeating-linear-gradient(
182deg,
rgba(160, 195, 230, 0.0) 0px,
rgba(160, 195, 230, 0.35) 1px,
rgba(160, 195, 230, 0.0) 2px
);
background-size: 6px 40px;
}
/* Three layers with different speeds and tile sizes for depth */
.blade-rain .rain-front {
background-size: 8px 50px;
animation: brRainFall 0.7s linear infinite;
opacity: 0.38;
}
.blade-rain .rain-mid {
background-size: 7px 45px;
animation: brRainFall 1.0s linear infinite;
opacity: 0.28;
}
.blade-rain .rain-back {
background-size: 5px 55px;
animation: brRainFall 1.4s linear infinite;
opacity: 0.18;
filter: blur(0.5px);
}
/* Night: reduce rain so streaks don't overpower dark background */
html.time-night .blade-rain .rain-front { opacity: 0.19; }
html.time-night .blade-rain .rain-mid { opacity: 0.14; }
html.time-night .blade-rain .rain-back { opacity: 0.09; }
@keyframes brRainFall {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* Neon reflections on "wet" surfaces */
.blade-rain-active .service-card,
.blade-rain-active .bento-item,
.blade-rain-active .pillar {
box-shadow:
0 2px 20px rgba(0, 255, 136, 0.03),
0 0 40px rgba(120, 160, 200, 0.02);
}
/* Subtle wet sheen on cards */
.blade-rain-active .service-card::after,
.blade-rain-active .bento-item::after,
.blade-rain-active .pillar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(120, 160, 200, 0.15), transparent);
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════
BATCH 2 SCI-FI EFFECTS
Ghost in the Shell / Blade Runner / Akira
══════════════════════════════════════════════════════════ */
/* ── B2-1. Kusanagi Optical Camouflage (cursor distortion) ── */
.optical-camo-ripple {
position: fixed;
width: 120px;
height: 120px;
border-radius: 50%;
pointer-events: none;
z-index: 3;
background: radial-gradient(circle, rgba(0, 255, 136, 0.06) 0%, transparent 70%);
backdrop-filter: blur(1px) hue-rotate(5deg);
-webkit-backdrop-filter: blur(1px) hue-rotate(5deg);
transform: translate(-50%, -50%) scale(0);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
opacity: 0;
}
.optical-camo-ripple.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* ── B2-2. Section 9 Dossier Card Flip ───────────────────── */
.dossier-flip-container {
perspective: 1000px;
}
.dossier-flip-container .service-card,
.dossier-flip-container .bento-item,
.dossier-flip-container .pillar,
.dossier-flip-container .feature-card {
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.dossier-flip-container .service-card.flipped,
.dossier-flip-container .bento-item.flipped,
.dossier-flip-container .pillar.flipped,
.dossier-flip-container .feature-card.flipped {
transform: rotateY(180deg);
}
.dossier-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
transform: rotateY(180deg);
background: linear-gradient(135deg, rgba(10, 15, 10, 0.95), rgba(5, 20, 10, 0.98));
border: 1px solid rgba(0, 255, 136, 0.15);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--terminal-green);
overflow: hidden;
}
.dossier-back::before {
content: 'CLASSIFIED // SECTION 9';
position: absolute;
top: 12px;
left: 12px;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.5;
color: #ff4444;
}
.dossier-back::after {
content: '';
position: absolute;
top: 30px;
right: 15px;
width: 50px;
height: 50px;
border: 2px solid rgba(255, 68, 68, 0.3);
border-radius: 0;
transform: rotate(45deg);
}
.dossier-stat {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid rgba(0, 255, 136, 0.08);
}
.dossier-stat-label {
opacity: 0.5;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 9px;
}
.dossier-stat-value {
color: var(--terminal-green);
}
.dossier-meter {
height: 4px;
background: rgba(0, 255, 136, 0.1);
border-radius: 2px;
margin-top: 4px;
overflow: hidden;
}
.dossier-meter-fill {
height: 100%;
background: linear-gradient(90deg, var(--terminal-green), #00ff88);
border-radius: 2px;
transition: width 0.8s ease;
}
/* ── B2-3. Tetsuo Power Surge Scroll ─────────────────────── */
.tetsuo-surge {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
box-shadow: inset 0 0 80px rgba(255, 50, 20, 0.3), inset 0 0 150px rgba(255, 100, 30, 0.15);
}
.tetsuo-surge.active {
opacity: 1;
animation: tetsuoPulse 0.6s ease-in-out;
}
@keyframes tetsuoPulse {
0% { box-shadow: inset 0 0 40px rgba(255, 50, 20, 0.1); }
50% { box-shadow: inset 0 0 120px rgba(255, 50, 20, 0.4), inset 0 0 200px rgba(255, 100, 30, 0.2); }
100% { box-shadow: inset 0 0 80px rgba(255, 50, 20, 0.3), inset 0 0 150px rgba(255, 100, 30, 0.15); }
}
/* ── B2-4. Laughing Man Anonymizer ────────────────────────── */
.laughing-man {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
pointer-events: none;
z-index: 5;
background: radial-gradient(circle, rgba(0, 180, 255, 0.9) 30%, rgba(0, 120, 200, 0.7) 60%, transparent 70%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.4s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.laughing-man.visible {
opacity: 1;
transform: scale(1);
}
.laughing-man-text {
position: absolute;
width: 100%;
height: 100%;
animation: laughingManSpin 8s linear infinite;
font-family: 'JetBrains Mono', monospace;
font-size: 6px;
color: #001a33;
}
@keyframes laughingManSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── B2-5. Kaneda Bike Light Trail Nav ────────────────────── */
.nav-light-trail {
position: absolute;
height: 3px;
background: linear-gradient(90deg, transparent, #ff1a1a, #ff4444, transparent);
bottom: 0;
left: 0;
pointer-events: none;
transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
filter: blur(1px);
box-shadow: 0 0 10px rgba(255, 26, 26, 0.5), 0 0 20px rgba(255, 26, 26, 0.3);
}
/* ── B2-6. Stand Alone Complex Ticker ─────────────────────── */
.sac-ticker {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 28px;
background: rgba(0, 5, 10, 0.92);
border-top: 1px solid rgba(0, 255, 136, 0.15);
z-index: 100;
overflow: hidden;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.05em;
color: var(--terminal-green);
display: flex;
align-items: center;
pointer-events: none;
}
.sac-ticker-badge {
flex-shrink: 0;
padding: 0 12px;
background: rgba(0, 255, 136, 0.1);
border-right: 1px solid rgba(0, 255, 136, 0.2);
height: 100%;
display: flex;
align-items: center;
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(0, 255, 136, 0.7);
}
.sac-ticker-track {
flex: 1;
overflow: hidden;
white-space: nowrap;
}
.sac-ticker-content {
display: inline-block;
animation: sacScroll 30s linear infinite;
padding-left: 100%;
}
.sac-ticker-content span {
padding: 0 40px;
}
.sac-ticker-content .alert { color: #ff4444; }
.sac-ticker-content .info { color: rgba(0, 255, 136, 0.6); }
.sac-ticker-content .seraphim { color: #00aaff; }
@keyframes sacScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── B2-7. Ghost Dive Sequence (CTA transition) ──────────── */
.ghost-dive-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: #000;
pointer-events: all;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.ghost-dive-overlay.active {
opacity: 1;
visibility: visible;
}
.ghost-dive-tunnel {
width: 100%;
height: 100%;
perspective: 600px;
overflow: hidden;
position: relative;
}
.ghost-dive-ring {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(0, 255, 136, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%) translateZ(0);
animation: diveRing 2s ease-in forwards;
}
@keyframes diveRing {
0% { width: 10px; height: 10px; opacity: 1; border-color: rgba(0, 255, 136, 0.5); }
80% { opacity: 0.8; }
100% { width: 200vw; height: 200vw; opacity: 0; border-color: rgba(0, 255, 136, 0); }
}
.ghost-dive-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--terminal-green);
opacity: 0;
animation: diveTextFlash 2s ease forwards;
white-space: nowrap;
}
@keyframes diveTextFlash {
0% { opacity: 0; }
20% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; }
}
/* ── B2-8. Replicant Countdown Timer ──────────────────────── */
.replicant-timer {
font-family: 'JetBrains Mono', monospace;
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 16px;
background: linear-gradient(135deg, rgba(180, 140, 60, 0.1), rgba(120, 80, 30, 0.15));
border: 1px solid rgba(180, 140, 60, 0.25);
border-radius: 4px;
}
.replicant-timer-digit {
font-size: 1.5rem;
font-weight: 700;
color: #d4a847;
text-shadow: 0 0 10px rgba(212, 168, 71, 0.4);
min-width: 2ch;
text-align: center;
}
.replicant-timer-sep {
color: rgba(212, 168, 71, 0.4);
font-size: 1.2rem;
animation: replicantBlink 1s step-end infinite;
}
.replicant-timer-label {
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(212, 168, 71, 0.5);
display: block;
text-align: center;
}
@keyframes replicantBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ── B2-9. Togusa Crosshair Cursor ────────────────────────── */
.togusa-crosshair {
position: fixed;
width: 40px;
height: 40px;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s;
}
.togusa-crosshair.active {
opacity: 1;
}
.togusa-crosshair::before,
.togusa-crosshair::after {
content: '';
position: absolute;
background: #ff1a1a;
}
.togusa-crosshair::before {
width: 1px;
height: 100%;
left: 50%;
}
.togusa-crosshair::after {
width: 100%;
height: 1px;
top: 50%;
}
.togusa-crosshair .diamond {
position: absolute;
width: 12px;
height: 12px;
border: 1px solid #ff1a1a;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: transform 0.2s ease;
}
.togusa-crosshair.locked .diamond {
transform: translate(-50%, -50%) rotate(45deg) scale(0.6);
background: rgba(255, 26, 26, 0.3);
}
/* ── B2-10. Ghost Dubbing Text Engine ─────────────────────── */
.ghost-dubbing {
position: relative;
}
.ghost-dubbing.translating {
animation: ghostDubFlicker 1s ease-in-out 2;
}
@keyframes ghostDubFlicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.9; }
}
/* ── B2-11. Cyberbrain Memory Playback sidebar ────────────── */
.memory-sidebar {
position: fixed;
right: -260px;
top: 50%;
transform: translateY(-50%);
width: 240px;
max-height: 60vh;
background: rgba(5, 10, 15, 0.92);
border: 1px solid rgba(0, 255, 136, 0.1);
border-right: none;
border-radius: 8px 0 0 8px;
z-index: 50;
padding: 16px;
overflow-y: auto;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
scrollbar-width: thin;
scrollbar-color: rgba(0, 255, 136, 0.2) transparent;
}
.memory-sidebar.visible {
right: 0;
}
.memory-sidebar-title {
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terminal-green);
opacity: 0.6;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0, 255, 136, 0.1);
}
.memory-item {
display: flex;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
cursor: pointer;
transition: background 0.2s;
pointer-events: auto;
}
.memory-item:hover {
background: rgba(0, 255, 136, 0.05);
}
.memory-thumb {
width: 40px;
height: 30px;
background: rgba(0, 255, 136, 0.05);
border: 1px solid rgba(0, 255, 136, 0.1);
border-radius: 2px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0.5;
}
.memory-meta {
flex: 1;
min-width: 0;
}
.memory-meta-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 9px;
color: rgba(255, 255, 255, 0.7);
}
.memory-meta-time {
font-size: 8px;
color: rgba(0, 255, 136, 0.4);
margin-top: 2px;
}
/* ── B2-12. Batou Biometric Scanner (contact form) ────────── */
.batou-scanner {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
overflow: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.batou-scanner.active {
opacity: 1;
}
.batou-scan-line {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(212, 168, 71, 0.36), rgba(212, 168, 71, 0.48), rgba(212, 168, 71, 0.36), transparent);
top: 0;
animation: batouSweep 1.5s ease-in-out forwards;
box-shadow: 0 0 15px rgba(212, 168, 71, 0.24);
}
@keyframes batouSweep {
from { top: 0; }
to { top: 100%; }
}
.batou-verified {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #d4a847;
text-shadow: 0 0 15px rgba(212, 168, 71, 0.5);
opacity: 0;
animation: batouVerify 2s ease forwards 1.5s;
}
@keyframes batouVerify {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
80% { opacity: 1; }
100% { opacity: 0; }
}
/* ── B2-13. Akira Satellite Laser CTA ─────────────────────── */
.satellite-laser-overlay {
position: fixed;
inset: 0;
z-index: 99998;
background: rgba(0, 0, 0, 0.9);
pointer-events: all;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
font-family: 'JetBrains Mono', monospace;
color: var(--terminal-green);
}
.satellite-laser-overlay.active {
opacity: 1;
visibility: visible;
}
.satellite-reticle {
width: 100px;
height: 100px;
border: 2px solid rgba(255, 50, 20, 0.5);
border-radius: 50%;
position: relative;
animation: reticleLock 1s ease-out forwards;
margin-bottom: 30px;
}
.satellite-reticle::before,
.satellite-reticle::after {
content: '';
position: absolute;
background: rgba(255, 50, 20, 0.6);
}
.satellite-reticle::before {
width: 1px;
height: 120%;
left: 50%;
top: -10%;
}
.satellite-reticle::after {
width: 120%;
height: 1px;
top: 50%;
left: -10%;
}
@keyframes reticleLock {
0% { transform: scale(3); opacity: 0; border-color: rgba(255, 50, 20, 0.1); }
70% { transform: scale(0.95); }
100% { transform: scale(1); opacity: 1; border-color: rgba(255, 50, 20, 0.7); }
}
.satellite-charge-bar {
width: 200px;
height: 4px;
background: rgba(255, 50, 20, 0.1);
border-radius: 2px;
overflow: hidden;
margin-bottom: 15px;
}
.satellite-charge-fill {
width: 0;
height: 100%;
background: linear-gradient(90deg, #ff3214, #ff6644);
border-radius: 2px;
animation: chargeUp 2s ease-in forwards 1s;
}
@keyframes chargeUp {
to { width: 100%; }
}
.satellite-status {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0;
animation: satStatusShow 0.3s ease forwards 0.5s;
}
@keyframes satStatusShow {
to { opacity: 0.7; }
}
/* ── Mobile: disable new heavy effects for performance ── */
@media (max-width: 768px) {
.matrix-rain::after,
.hero::after {
animation: none;
opacity: 0;
}
.hex-divider::after {
animation: none;
}
.hero {
animation: none;
box-shadow: none;
}
.hero-title,
.page-title {
animation: none;
}
.section-title::before,
.page-title::before {
content: '> ';
}
/* Ghost in the Shell / Akira -- disable heavy effects on mobile */
.data-stream-sidebar {
display: none !important;
}
.akira-trail {
display: none !important;
}
.scan-ring {
display: none !important;
}
.scroll-power-meter {
display: none !important;
}
.parallax-layer {
display: none !important;
}
.kanji-watermark {
opacity: 0.02 !important;
font-size: 80px !important;
}
.neural-network-svg {
display: none !important;
}
.waveform-divider span {
animation: none !important;
}
.section:nth-child(odd)::after {
display: none !important;
}
.section.alt::before,
.section-alt::before {
display: none !important;
}
.cyberbrain-indicator .cb-dot {
animation: none !important;
}
/* Blade Runner rain -- too heavy for mobile */
.blade-rain {
display: none !important;
}
/* Batch 2 sci-fi -- disable heavy effects on mobile */
.sac-ticker { display: none !important; }
.memory-sidebar { display: none !important; }
.optical-camo-ripple { display: none !important; }
.togusa-crosshair { display: none !important; }
.tetsuo-surge { display: none !important; }
}
/* ── Reduced motion: disable all new enhancements ── */
@media (prefers-reduced-motion: reduce) {
.matrix-rain::after,
.hero::after {
animation: none !important;
opacity: 0 !important;
}
.hex-divider::after {
animation: none !important;
}
.hero {
animation: none !important;
}
.hero-title,
.page-title {
animation: none !important;
}
.cyber-cursor::after {
animation: none !important;
opacity: 1 !important;
}
/* Ghost in the Shell / Akira -- disable all animations for reduced motion */
.data-stream-sidebar {
animation: none !important;
display: none !important;
}
.akira-trail,
.akira-trail.active {
animation: none !important;
display: none !important;
}
.scan-ring {
display: none !important;
}
.scroll-power-meter {
display: none !important;
}
.parallax-layer {
display: none !important;
}
.kanji-watermark {
display: none !important;
}
.neural-network-svg {
display: none !important;
}
.waveform-divider span {
animation: none !important;
}
.cyberbrain-indicator .cb-dot {
animation: none !important;
}
.radar-ping::after {
animation: none !important;
}
.section[data-boot] {
opacity: 1 !important;
transform: none !important;
}
.section[data-boot].booting .boot-overlay {
animation: none !important;
display: none !important;
}
.glitch-in {
animation: none !important;
}
.footer-terminal-log .log-line {
animation: none !important;
opacity: 1 !important;
}
.holo-glow {
display: none !important;
}
.section:nth-child(odd)::after {
display: none !important;
}
/* Blade Runner rain -- disable animations for reduced motion */
.blade-rain {
display: none !important;
}
.blade-rain .rain-front,
.blade-rain .rain-mid,
.blade-rain .rain-back {
animation: none !important;
}
/* Batch 2 sci-fi -- disable animations for reduced motion */
.sac-ticker-content { animation: none !important; }
.ghost-dive-ring { animation: none !important; }
.laughing-man-text { animation: none !important; }
.batou-scan-line { animation: none !important; }
.satellite-reticle { animation: none !important; }
.satellite-charge-fill { animation: none !important; }
}
/* ── MOBILE SCROLL SAFETY NET ──
Prevents scroll lock caused by stuck overflow:hidden
from multiple mobile nav implementations. Body is always
scrollable on mobile unless a nav/popup is explicitly open.
Uses 900px to match the JS mobile breakpoint. */
@media (max-width: 900px) {
html, body {
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
/* REMOVED: Mobile nav CSS moved to self-contained template v30
body.mobile-menu-open + mobile-nav height
(9 lines removed)
*/
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ANIME FX BATCH 2 - Sci-Fi Interactive Effects
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── 1. Brain Dive Sequence ── */
.brain-dive-overlay {
position: fixed;
inset: 0;
z-index: 100000;
pointer-events: none;
overflow: hidden;
background: transparent;
}
.brain-dive-ring {
position: absolute;
border: 1px solid rgba(0, 255, 136, 0.6);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: brainDiveExpand 1.2s ease-out forwards;
}
@keyframes brainDiveExpand {
0% { width: 0; height: 0; opacity: 1; }
100% { width: 200vmax; height: 200vmax; opacity: 0; }
}
.brain-dive-invert {
filter: invert(1);
transition: filter 0.1s;
}
/* ── 2. Akira Power Grid ── */
.power-grid-canvas {
position: fixed;
inset: 0;
z-index: 5;
pointer-events: none;
}
/* ── 3. Voight-Kampff Eye ── */
.vk-eye-container {
position: absolute;
top: 20px;
right: 30px;
width: 50px;
height: 50px;
z-index: 10;
opacity: 0.6;
transition: opacity 0.3s ease;
cursor: default;
}
.vk-eye-container:hover {
opacity: 0.85;
}
.vk-eye-canvas {
width: 100%;
height: 100%;
border-radius: 50%;
}
.vk-blink {
position: absolute;
inset: 0;
background: var(--bg-dark, #0a0a0f);
border-radius: 50%;
transform: scaleY(0);
transform-origin: center;
}
.vk-blink.blinking {
animation: vkBlink 0.15s ease-in-out;
}
@keyframes vkBlink {
0% { transform: scaleY(0); }
50% { transform: scaleY(1); }
100% { transform: scaleY(0); }
}
/* ── 4. Section 9 Briefing Panels ── */
.s9-corner-tl,
.s9-corner-br {
position: absolute;
width: 12px;
height: 12px;
pointer-events: none;
z-index: 2;
}
.s9-corner-tl {
top: -1px;
left: -1px;
border-top: 1px solid var(--terminal-green, #00ff88);
border-left: 1px solid var(--terminal-green, #00ff88);
}
.s9-corner-br {
bottom: -1px;
right: -1px;
border-bottom: 1px solid var(--terminal-green, #00ff88);
border-right: 1px solid var(--terminal-green, #00ff88);
}
.s9-label {
position: absolute;
top: 4px;
right: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 7px;
letter-spacing: 0.1em;
color: rgba(0, 255, 136, 0.35);
text-transform: uppercase;
pointer-events: none;
z-index: 2;
}
.s9-scan-line {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--terminal-green, #00ff88), transparent);
opacity: 0;
pointer-events: none;
z-index: 2;
}
.pillar-card:hover .s9-scan-line,
.service-card:hover .s9-scan-line {
animation: s9ScanSweep 1s ease-in-out;
}
@keyframes s9ScanSweep {
0% { top: 0; opacity: 0.7; }
100% { top: 100%; opacity: 0; }
}
/* Declassify text reveal */
.s9-classified {
font-family: 'JetBrains Mono', monospace;
color: rgba(0, 255, 136, 0.5);
letter-spacing: 0.05em;
}
/* Cards need relative positioning for the corner brackets */
.pillar-card,
.service-card {
position: relative;
}
/* ── 5. AT Field Barrier ── */
.at-field-overlay {
position: fixed;
inset: 0;
z-index: 50;
pointer-events: none;
overflow: hidden;
}
.at-field-canvas {
width: 100%;
height: 100%;
}
/* ── 6. Konami Code GITS Mode ── */
.gits-badge {
position: fixed;
bottom: 20px;
left: 20px;
padding: 8px 14px;
background: rgba(0, 40, 50, 0.85);
border: 1px solid rgba(0, 200, 230, 0.5);
border-radius: 3px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.15em;
color: #00c8e6;
text-transform: uppercase;
z-index: 9999;
pointer-events: none;
animation: gitsBadgePulse 3s ease-in-out infinite;
box-shadow: 0 0 15px rgba(0, 200, 230, 0.2);
}
@keyframes gitsBadgePulse {
0%, 100% { border-color: rgba(0, 200, 230, 0.5); box-shadow: 0 0 15px rgba(0, 200, 230, 0.2); }
50% { border-color: rgba(0, 200, 230, 0.8); box-shadow: 0 0 25px rgba(0, 200, 230, 0.4); }
}
.gits-kanji-float {
position: fixed;
font-family: 'Noto Sans JP', 'Noto Sans KR', sans-serif;
font-size: 14px;
color: rgba(0, 200, 230, 0.4);
pointer-events: none;
z-index: 9998;
animation: gitsKanjiFloat 3s ease-out forwards;
white-space: nowrap;
}
@keyframes gitsKanjiFloat {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 0.6; }
100% { opacity: 0; transform: translateY(-30px); }
}
/* GITS Mode color overrides */
html.gits-mode {
--terminal-green: #00c8e6;
--terminal-cyan: #00e6ff;
--glow-green: rgba(0, 200, 230, 0.3);
--glow-text-primary: rgba(0, 200, 230, 0.15);
}
html.gits-mode .header-cta,
html.gits-mode .cta-button {
background: linear-gradient(135deg, #00c8e6, #0088aa) !important;
}
html.gits-mode .hero-title,
html.gits-mode .page-title {
background: linear-gradient(135deg, #ffffff 0%, #00c8e6 30%, #00e6ff 70%, #ffffff 100%) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
html.gits-mode .blade-rain .rain-front,
html.gits-mode .blade-rain .rain-mid,
html.gits-mode .blade-rain .rain-back {
background: repeating-linear-gradient(
transparent,
transparent 95%,
rgba(0, 200, 230, 0.25) 100%
) !important;
}
/* ── 7. Space Cowboy Exit Screen ── */
.space-cowboy-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.space-cowboy-overlay.active {
opacity: 1;
pointer-events: auto;
}
.space-cowboy-overlay.fade-out {
opacity: 0;
transition: opacity 0.3s ease;
}
.space-cowboy-logo {
max-width: 200px;
height: auto;
margin-bottom: 40px;
filter: brightness(0.8);
}
.space-cowboy-quote {
font-family: 'Cormorant Garamond', 'Imbue', Georgia, serif;
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
color: rgba(255, 255, 255, 0.7);
text-align: center;
max-width: 500px;
line-height: 1.6;
margin-bottom: 60px;
font-style: italic;
}
.space-cowboy-farewell {
font-family: 'Cormorant Garamond', 'Imbue', Georgia, serif;
font-size: clamp(1.4rem, 3vw, 2rem);
color: rgba(255, 255, 255, 0.5);
font-style: italic;
letter-spacing: 0.05em;
position: absolute;
bottom: 40px;
}
/* ── 8. Neural Network Section ── */
.neural-network-section {
position: relative;
width: 100%;
background: var(--bg-dark, #0a0a0f);
overflow: hidden;
padding: 0;
}
.neural-network-section .section-title {
text-align: center;
padding-top: 40px;
margin-bottom: 8px;
font-size: clamp(1.2rem, 2vw, 1.6rem);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.neural-network-section .neural-tagline {
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: rgba(0, 255, 136, 0.4);
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.neural-canvas {
display: block;
width: 100%;
height: 300px;
}
.neural-fade-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(transparent, var(--bg-dark, #0a0a0f));
pointer-events: none;
}
@media (max-width: 768px) {
.neural-canvas {
height: 200px;
}
.vk-eye-container {
width: 35px;
height: 35px;
top: 15px;
right: 15px;
opacity: 0.4;
}
.gits-badge {
font-size: 8px;
padding: 5px 10px;
bottom: 10px;
left: 10px;
}
.space-cowboy-farewell {
bottom: 20px;
font-size: 1.1rem;
}
}
/* ── Social Proof Cities Marquee ── */
.social-proof-cities {
padding: 20px 0;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 255, 136, 0.08);
border-bottom: 1px solid rgba(0, 255, 136, 0.08);
overflow: hidden;
position: relative;
z-index: 5;
}
.social-proof-inner {
display: flex;
align-items: center;
gap: 20px;
max-width: 100%;
}
.social-proof-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: rgba(0, 255, 136, 0.4);
text-transform: uppercase;
white-space: nowrap;
padding-left: 30px;
flex-shrink: 0;
}
.social-proof-marquee {
overflow: hidden;
flex: 1;
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.social-proof-track {
display: flex;
gap: 24px;
animation: socialProofScroll 45s linear infinite;
width: max-content;
}
.city-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: rgba(232, 232, 240, 0.5);
white-space: nowrap;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
}
.city-flag {
font-size: 14px;
}
@keyframes socialProofScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.social-proof-label {
display: none;
}
.social-proof-cities {
padding: 15px 0;
}
.city-tag {
font-size: 11px;
}
}
/* ============================================
THEMED FOOTER - data-footer-theme
Changes top accent bar and heading colors
for specialized tool/generator pages
============================================ */
/* Security theme - red/orange */
[data-footer-theme="security"] .footer-top-accent {
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 80, 50, 0.6) 15%,
rgba(255, 140, 50, 0.5) 35%,
rgba(255, 60, 30, 0.6) 50%,
rgba(255, 140, 50, 0.5) 65%,
rgba(255, 80, 50, 0.6) 85%,
transparent 100%
);
box-shadow: 0 0 30px rgba(255, 80, 50, 0.4), 0 0 60px rgba(255, 140, 50, 0.2);
}
[data-footer-theme="security"] .footer-col h4 {
color: #ff6644;
border-bottom-color: rgba(255, 102, 68, 0.2);
}
/* Legal/Employment theme - professional blue/gold */
[data-footer-theme="legal"] .footer-top-accent {
background: linear-gradient(90deg,
transparent 0%,
rgba(50, 120, 220, 0.5) 15%,
rgba(200, 170, 80, 0.4) 35%,
rgba(50, 120, 220, 0.5) 50%,
rgba(200, 170, 80, 0.4) 65%,
rgba(50, 120, 220, 0.5) 85%,
transparent 100%
);
box-shadow: 0 0 30px rgba(50, 120, 220, 0.3), 0 0 60px rgba(200, 170, 80, 0.15);
}
[data-footer-theme="legal"] .footer-col h4 {
color: #6ea8ff;
border-bottom-color: rgba(110, 168, 255, 0.2);
}
/* Performance/Speed theme - green */
[data-footer-theme="performance"] .footer-top-accent {
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 230, 118, 0.5) 15%,
rgba(100, 255, 150, 0.4) 35%,
rgba(0, 230, 118, 0.5) 50%,
rgba(100, 255, 150, 0.4) 65%,
rgba(0, 230, 118, 0.5) 85%,
transparent 100%
);
box-shadow: 0 0 30px rgba(0, 230, 118, 0.4), 0 0 60px rgba(100, 255, 150, 0.2);
}
[data-footer-theme="performance"] .footer-col h4 {
color: #00e676;
border-bottom-color: rgba(0, 230, 118, 0.2);
}
/* Cloud theme - cloud blue */
[data-footer-theme="cloud"] .footer-top-accent {
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 150, 255, 0.5) 15%,
rgba(100, 200, 255, 0.4) 35%,
rgba(0, 150, 255, 0.5) 50%,
rgba(100, 200, 255, 0.4) 65%,
rgba(0, 150, 255, 0.5) 85%,
transparent 100%
);
box-shadow: 0 0 30px rgba(0, 150, 255, 0.4), 0 0 60px rgba(100, 200, 255, 0.2);
}
[data-footer-theme="cloud"] .footer-col h4 {
color: #44aaff;
border-bottom-color: rgba(68, 170, 255, 0.2);
}
/* AI theme - neural purple */
[data-footer-theme="ai"] .footer-top-accent {
background: linear-gradient(90deg,
transparent 0%,
rgba(130, 80, 255, 0.5) 15%,
rgba(180, 120, 255, 0.4) 35%,
rgba(130, 80, 255, 0.5) 50%,
rgba(180, 120, 255, 0.4) 65%,
rgba(130, 80, 255, 0.5) 85%,
transparent 100%
);
box-shadow: 0 0 30px rgba(130, 80, 255, 0.4), 0 0 60px rgba(180, 120, 255, 0.2);
}
[data-footer-theme="ai"] .footer-col h4 {
color: #a87cff;
border-bottom-color: rgba(168, 124, 255, 0.2);
}
/* ============================================
FULL VIEWPORT HEIGHT SECTIONS - ALL PAGES
Immersive layout across the entire site.
Uses svh with vh fallback for iOS Safari.
============================================ */
/* -- HERO SECTIONS: 100vh (full screen) ------ */
.scene-full {
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
}
.scene-half {
min-height: 50vh;
min-height: 50svh;
display: flex;
flex-direction: column;
justify-content: center;
}
.neural-network-section,
[data-effect="neural-network"] {
min-height: 100vh;
min-height: 100svh;
}
.jets-database-section,
[data-effect="jets-database"] {
min-height: 100vh;
min-height: 100svh;
height: 100vh;
height: 100svh;
}
/* Hero sections across ALL pages - full viewport */
.hero-section,
.s-hero,
.page-hero,
.landing-hero,
.hub-hero,
.sg-hero,
.ai-hero,
.dt-hero,
.comparison-hero,
.compliance-hero,
.guide-hero,
.pvp-hero,
.story-hero,
.kawaii-hero {
min-height: 100vh;
min-height: 100svh;
}
/* -- CONTENT SECTIONS: auto height (content-driven) -- */
/* Removed forced 70vh min-height to prevent scroll lock feel */
/* -- CTA / LEAD SECTIONS: 50vh --------------- */
.mini-lead-section,
.cta-section,
.sg-cta,
.hub-cta,
.guarantee-section,
.ai-cta,
.dt-cta,
.pvp-cta,
.story-cta,
.final-cta,
.pricing-cta {
min-height: 50vh;
min-height: 50svh;
}
.explainer-section {
min-height: 50vh;
min-height: 50svh;
}
/* -- ACCENT SECTIONS: keep compact ----------- */
.marquee-section,
.social-proof-cities,
.provider-marquee {
min-height: 15vh;
padding: 3vh 0;
}
.news-ticker-break {
min-height: 100px;
}
.eva-sync-breaker {
min-height: 20vh;
min-height: 20svh;
display: flex;
align-items: center;
}
.horizontal-scroll-section,
.data-viz-section {
min-height: 50vh;
min-height: 50svh;
}
/* -- MOBILE: adjusted heights -- */
@media (max-width: 768px) {
.seraphim-s-section {
min-height: 80vh;
min-height: 80svh;
}
}
/* ============================================
AI CONSULTANT EMBED / MINI-WIDGET
Reusable CTA section for multiple pages
============================================ */
/* --- Container Section --- */
.ai-consultant-embed-section {
position: relative;
z-index: 10;
padding: 80px 20px;
overflow: hidden;
box-sizing: border-box;
max-width: 100vw;
}
/* --- Human-readable heading above widget --- */
.ace-human-heading {
text-align: center;
max-width: 800px;
margin: 0 auto 28px;
}
.ace-human-heading h3 {
font-family: 'Cormorant Garamond', 'Syne', Georgia, serif;
font-size: 1.6rem;
font-weight: 500;
color: #e8f0f8;
letter-spacing: 0.02em;
margin: 0 0 8px;
line-height: 1.3;
}
.ace-human-heading h3 .ace-heading-highlight {
color: var(--terminal-green, #00ff88);
text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}
.ace-human-heading p {
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted, #788090);
letter-spacing: 0.04em;
margin: 0;
line-height: 1.5;
}
.ace-human-heading .ace-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0, 255, 136, 0.08);
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 20px;
padding: 4px 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.65rem;
color: var(--terminal-green, #00ff88);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 12px;
}
.ace-human-heading .ace-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terminal-green, #00ff88);
animation: ace-live-pulse 2s ease-in-out infinite;
box-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
}
@keyframes ace-live-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* --- Pulsing placeholder hint animation --- */
@keyframes ace-placeholder-glow {
0%, 100% { border-color: rgba(0, 255, 136, 0.1); }
50% { border-color: rgba(0, 255, 136, 0.35); }
}
.ace-input:not(:focus):not(:disabled) {
animation: ace-placeholder-glow 3s ease-in-out infinite;
}
.ace-input:focus {
animation: none;
}
/* Section label */
.ace-section-label {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 32px;
}
.ace-section-tag {
font-family: 'Orbitron', 'JetBrains Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.25em;
color: rgba(0, 255, 136, 0.5);
text-transform: uppercase;
white-space: nowrap;
}
.ace-section-line {
flex: 1;
max-width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.25), transparent);
}
/* ============================================
GHOST NEURAL INTERFACE -- Section 9 Terminal
SAC-inspired cyberpunk terminal widget.
Sharp edges, animated gradient borders,
HUD strip, corner brackets, progress bar
loading, hex-grid response, streaming cursor.
============================================ */
/* --- Card --- */
.ai-consultant-embed {
position: relative;
max-width: 800px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
background:
linear-gradient(135deg, rgba(0, 255, 136, 0.03) 0%, transparent 40%, rgba(0, 200, 255, 0.03) 100%),
rgba(3, 6, 10, 0.92);
border: 1px solid rgba(0, 255, 136, 0.18);
border-radius: 2px;
padding: 0;
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
box-shadow:
0 0 40px rgba(0, 255, 136, 0.06),
0 0 80px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(0, 255, 136, 0.06),
inset 0 -1px 0 rgba(0, 200, 255, 0.04);
overflow: hidden;
transition: box-shadow 0.4s ease, border-color 0.4s ease;
--ace-card-h: 520px;
min-height: 320px;
}
.ai-consultant-embed:hover {
border-color: rgba(0, 255, 136, 0.3);
box-shadow:
0 0 50px rgba(0, 255, 136, 0.1),
0 0 100px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(0, 255, 136, 0.08),
inset 0 -1px 0 rgba(0, 200, 255, 0.06);
}
/* --- Animated Gradient Border Shift --- */
@property --ace-border-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.ai-consultant-embed {
border-image: linear-gradient(
var(--ace-border-angle, 0deg),
rgba(0, 255, 136, 0.3),
rgba(0, 200, 255, 0.2),
rgba(0, 255, 136, 0.1),
rgba(0, 200, 255, 0.3)
) 1;
animation: ace-border-rotate 6s linear infinite;
}
@keyframes ace-border-rotate {
to { --ace-border-angle: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: paint(something)) {
.ai-consultant-embed {
border-image: linear-gradient(
135deg,
rgba(0, 255, 136, 0.3),
rgba(0, 200, 255, 0.2),
rgba(0, 255, 136, 0.15),
rgba(0, 200, 255, 0.3)
) 1;
}
}
/* --- Scan Line Effect (animated) --- */
.ai-consultant-embed::after {
content: '';
position: absolute;
top: -100%;
left: 0;
right: 0;
height: 200%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 136, 0.012) 2px,
rgba(0, 255, 136, 0.012) 3px
);
pointer-events: none;
z-index: 1;
animation: ace-scanline-drift 10s linear infinite;
}
@keyframes ace-scanline-drift {
0% { transform: translateY(0); }
100% { transform: translateY(25%); }
}
/* --- Corner Bracket Decorations --- */
.ai-consultant-embed::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2px;
pointer-events: none;
z-index: 3;
background:
/* Top-left bracket - green */
linear-gradient(to right, rgba(0, 255, 136, 0.5) 0%, rgba(0, 255, 136, 0.5) 24px, transparent 24px) no-repeat top left / 100% 2px,
linear-gradient(to bottom, rgba(0, 255, 136, 0.5) 0%, rgba(0, 255, 136, 0.5) 24px, transparent 24px) no-repeat top left / 2px 100%,
/* Top-right bracket - cyan */
linear-gradient(to left, rgba(0, 200, 255, 0.4) 0%, rgba(0, 200, 255, 0.4) 24px, transparent 24px) no-repeat top right / 100% 2px,
linear-gradient(to bottom, rgba(0, 200, 255, 0.4) 0%, rgba(0, 200, 255, 0.4) 24px, transparent 24px) no-repeat top right / 2px 100%,
/* Bottom-left bracket - cyan */
linear-gradient(to right, rgba(0, 200, 255, 0.4) 0%, rgba(0, 200, 255, 0.4) 24px, transparent 24px) no-repeat bottom left / 100% 2px,
linear-gradient(to top, rgba(0, 200, 255, 0.4) 0%, rgba(0, 200, 255, 0.4) 24px, transparent 24px) no-repeat bottom left / 2px 100%,
/* Bottom-right bracket - green */
linear-gradient(to left, rgba(0, 255, 136, 0.5) 0%, rgba(0, 255, 136, 0.5) 24px, transparent 24px) no-repeat bottom right / 100% 2px,
linear-gradient(to top, rgba(0, 255, 136, 0.5) 0%, rgba(0, 255, 136, 0.5) 24px, transparent 24px) no-repeat bottom right / 2px 100%;
animation: ace-bracket-pulse 4s ease-in-out infinite;
}
@keyframes ace-bracket-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* --- HUD Strip (top data readout) --- */
.ace-hud-strip {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 16px;
background: linear-gradient(90deg, rgba(0, 255, 136, 0.04), rgba(0, 200, 255, 0.02), transparent);
border-bottom: 1px solid rgba(0, 255, 136, 0.08);
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.52rem;
letter-spacing: 0.12em;
color: var(--text-muted, #788090);
text-transform: uppercase;
overflow: hidden;
white-space: nowrap;
}
.ace-hud-item {
flex-shrink: 0;
opacity: 0.6;
}
.ace-hud-divider {
color: rgba(0, 255, 136, 0.2);
flex-shrink: 0;
}
.ace-hud-scroll {
flex: 1;
overflow: hidden;
display: inline-block;
position: relative;
}
.ace-hud-scroll {
animation: ace-hud-ticker 18s linear infinite;
}
@keyframes ace-hud-ticker {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/* --- Header Bar --- */
.ace-header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 24px;
border-bottom: 1px solid rgba(0, 255, 136, 0.1);
background: linear-gradient(90deg, rgba(0, 255, 136, 0.05), transparent 50%, rgba(0, 200, 255, 0.03));
}
/* Data readout watermark */
.ace-header::after {
content: 'SEC.9 // NEURAL.LINK // v4.2';
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 0.46rem;
letter-spacing: 0.15em;
color: rgba(0, 255, 136, 0.15);
pointer-events: none;
}
.ace-header-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--terminal-green, #00ff88);
box-shadow: 0 0 8px var(--glow-green, rgba(0,255,136,0.4)), 0 0 20px rgba(0, 255, 136, 0.3);
animation: ace-pulse-dot 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes ace-pulse-dot {
0%, 100% {
opacity: 1;
box-shadow: 0 0 8px var(--glow-green, rgba(0,255,136,0.4)), 0 0 20px rgba(0, 255, 136, 0.3);
}
50% {
opacity: 0.5;
box-shadow: 0 0 4px var(--glow-green, rgba(0,255,136,0.4)), 0 0 10px rgba(0, 255, 136, 0.15);
}
}
.ace-header-title {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.ace-title-main {
font-family: 'Orbitron', 'JetBrains Mono', monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--terminal-green, #00ff88);
text-shadow: 0 0 12px rgba(0, 255, 136, 0.35);
text-transform: uppercase;
line-height: 1.2;
}
.ace-title-sub {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5rem;
font-weight: 400;
letter-spacing: 0.18em;
color: var(--text-muted, #788090);
text-transform: uppercase;
opacity: 0.6;
line-height: 1;
}
.ace-header-status {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.ace-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--terminal-green, #00ff88);
box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
animation: ace-status-pulse 1.5s ease-in-out infinite;
}
@keyframes ace-status-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
.ace-status-text {
font-family: 'JetBrains Mono', monospace;
font-size: 0.56rem;
letter-spacing: 0.15em;
color: var(--terminal-green, #00ff88);
text-transform: uppercase;
opacity: 0.7;
}
/* --- Body --- */
.ace-body {
position: relative;
z-index: 2;
padding: 28px 28px 32px;
overflow-x: hidden;
min-width: 0;
box-sizing: border-box;
}
.ace-prompt-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
color: var(--text-muted, #788090);
letter-spacing: 0.06em;
margin-bottom: 16px;
line-height: 1.6;
overflow-wrap: break-word;
word-break: break-word;
}
.ace-prompt-cursor {
color: var(--terminal-green, #00ff88);
font-weight: 700;
margin-right: 4px;
animation: ace-blink-cursor 1s step-end infinite;
}
.ace-prompt-label span {
color: var(--terminal-silver-bright, #e8f0f8);
}
/* --- Input Row --- */
.ace-input-row {
display: flex;
gap: 10px;
align-items: stretch;
position: relative;
max-width: 100%;
box-sizing: border-box;
}
.ace-input-prefix {
display: flex;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
font-weight: 700;
color: var(--terminal-green, #00ff88);
text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
padding-left: 2px;
flex-shrink: 0;
opacity: 0.8;
}
.ace-input {
flex: 1;
min-width: 0;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 255, 136, 0.1);
border-radius: 2px;
padding: 12px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
color: var(--text-bright, #ffffff);
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
min-height: 44px;
caret-color: var(--terminal-green, #00ff88);
touch-action: manipulation;
-webkit-text-size-adjust: 100%;
}
.ace-input::placeholder {
color: var(--text-dim, #404448);
font-style: normal;
letter-spacing: 0.04em;
}
.ace-input:focus {
border-color: transparent;
border-image: linear-gradient(135deg, rgba(0, 255, 136, 0.5), rgba(0, 200, 255, 0.35), rgba(0, 255, 136, 0.5)) 1;
border-image-slice: 1;
box-shadow:
0 0 16px rgba(0, 255, 136, 0.1),
0 0 32px rgba(0, 200, 255, 0.05),
inset 0 0 12px rgba(0, 255, 136, 0.04);
background: rgba(0, 0, 0, 0.6);
}
/* Glow line under input row on focus */
.ace-input-row::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), rgba(0, 200, 255, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.ace-input-row:focus-within::after {
opacity: 1;
}
/* --- Send Button --- */
.ace-send-btn {
flex-shrink: 0;
width: 44px;
height: 44px;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 200, 255, 0.08));
border: 1px solid rgba(0, 255, 136, 0.25);
border-radius: 2px;
color: var(--terminal-green, #00ff88);
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
position: relative;
overflow: visible;
}
.ace-send-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
position: relative;
z-index: 2;
}
/* Pulse ring behind send button */
.ace-send-ring {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 2px;
animation: ace-ring-pulse 2.5s ease-out infinite;
pointer-events: none;
}
@keyframes ace-ring-pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(1.6);
opacity: 0;
}
}
.ace-send-btn:hover {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 255, 0.15));
border-color: rgba(0, 255, 136, 0.45);
box-shadow:
0 0 20px rgba(0, 255, 136, 0.2),
0 0 40px rgba(0, 255, 136, 0.08);
transform: translateY(-1px);
}
.ace-send-btn:hover .ace-send-ring {
border-color: rgba(0, 255, 136, 0.35);
}
.ace-send-btn::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 2px;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 255, 0.2));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
filter: blur(8px);
}
.ace-send-btn:hover::before {
opacity: 1;
}
.ace-send-btn:active {
transform: translateY(0);
}
.ace-send-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}
.ace-send-btn:disabled .ace-send-ring {
animation: none;
opacity: 0;
}
/* --- Loading State (Progress Bar) --- */
.ace-loading {
display: none;
flex-direction: column;
gap: 8px;
margin-top: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.68rem;
color: var(--text-muted, #788090);
letter-spacing: 0.06em;
}
.ace-loading.active {
display: flex;
}
.ace-loading > span {
opacity: 0.7;
}
.ace-loading-bar {
width: 100%;
height: 3px;
background: rgba(0, 255, 136, 0.06);
border-radius: 1px;
overflow: hidden;
position: relative;
}
.ace-loading-fill {
height: 100%;
width: 30%;
background: linear-gradient(90deg, var(--terminal-green, #00ff88), rgba(0, 200, 255, 0.8), var(--terminal-green, #00ff88));
border-radius: 1px;
animation: ace-loading-sweep 1.8s ease-in-out infinite;
box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}
@keyframes ace-loading-sweep {
0% {
transform: translateX(-100%);
width: 30%;
}
50% {
width: 50%;
}
100% {
transform: translateX(400%);
width: 30%;
}
}
/* --- Response Area --- */
.ace-response {
margin-top: 18px;
padding: 0;
border-radius: 2px;
font-family: 'Rajdhani', 'JetBrains Mono', monospace;
font-size: 0.84rem;
line-height: 1.7;
color: var(--terminal-silver-bright, #e8f0f8);
display: none;
min-height: 60px;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
opacity: 1 !important;
word-break: break-word;
overflow-wrap: break-word;
/* Hex grid background */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%2300ff88' fill-opacity='0.015' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/svg%3E") repeat,
rgba(0, 255, 136, 0.015);
border-left: 2px solid rgba(0, 255, 136, 0.2);
border-right: none;
border-top: none;
border-bottom: none;
}
.ace-response.active {
display: block;
opacity: 1 !important;
}
.ace-response-text {
opacity: 1 !important;
visibility: visible !important;
}
/* Response header: two-row (label + meta) */
.ace-response-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid rgba(0, 255, 136, 0.06);
background: rgba(0, 255, 136, 0.02);
margin-bottom: 0;
}
.ace-response-label {
font-family: 'Orbitron', monospace;
font-size: 0.56rem;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--terminal-green, #00ff88);
text-transform: uppercase;
text-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}
.ace-response-label::before {
content: '>';
margin-right: 6px;
opacity: 0.5;
}
.ace-response-label::after {
content: '';
display: inline-block;
width: 40px;
height: 1px;
background: linear-gradient(90deg, rgba(0, 255, 136, 0.3), transparent);
vertical-align: middle;
margin-left: 10px;
}
.ace-response-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 0.48rem;
letter-spacing: 0.12em;
color: var(--text-muted, #788090);
text-transform: uppercase;
opacity: 0.5;
}
.ace-response-text {
color: var(--terminal-silver-bright, #e8f0f8);
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
padding: 14px 16px;
}
/* Streaming cursor */
.ace-response-text.streaming::after {
content: '\2588';
color: var(--terminal-green, #00ff88);
animation: ace-blink-cursor 0.8s step-end infinite;
margin-left: 2px;
text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}
@keyframes ace-blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* --- Error State --- */
.ace-error {
margin-top: 12px;
padding: 10px 14px;
background: rgba(255, 60, 60, 0.05);
border: 1px solid rgba(255, 60, 60, 0.15);
border-radius: 2px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
color: rgba(255, 120, 120, 0.9);
display: none;
}
.ace-error.active {
display: block;
animation: ace-fade-in 0.3s ease-out;
}
/* --- CTA Link (Angular Style) --- */
.ace-cta {
display: none;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(0, 255, 136, 0.06);
text-align: center;
}
.ace-cta.active {
display: block;
animation: ace-fade-in 0.5s ease-out;
}
.ace-cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 28px;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.06), rgba(0, 200, 255, 0.04));
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 0;
font-family: 'Orbitron', 'JetBrains Mono', monospace;
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--terminal-green, #00ff88);
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease;
position: relative;
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
/* Bracket decorations */
.ace-cta-link::before {
content: '[';
margin-right: 4px;
color: rgba(0, 255, 136, 0.45);
font-weight: 400;
}
.ace-cta-link::after {
content: ']';
margin-left: 4px;
color: rgba(0, 255, 136, 0.45);
font-weight: 400;
}
.ace-cta-arrow {
transition: transform 0.3s ease;
font-size: 0.8rem;
}
.ace-cta-link:hover {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.14), rgba(0, 200, 255, 0.08));
border-color: rgba(0, 255, 136, 0.4);
box-shadow: 0 0 24px rgba(0, 255, 136, 0.12);
color: var(--terminal-green, #00ff88);
padding-left: 34px;
padding-right: 22px;
}
.ace-cta-link:hover .ace-cta-arrow {
transform: translateX(4px);
}
/* --- Footer Strip --- */
.ace-footer-strip {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 6px 16px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.02), transparent);
border-top: 1px solid rgba(0, 255, 136, 0.06);
font-family: 'JetBrains Mono', monospace;
font-size: 0.48rem;
letter-spacing: 0.14em;
color: var(--text-muted, #788090);
text-transform: uppercase;
opacity: 0.5;
flex-wrap: wrap;
overflow: hidden;
}
.ace-footer-dot {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(0, 255, 136, 0.3);
}
/* --- Robotics variant (MECH-CORTEX) --- */
.ai-consultant-embed.ace-robotics {
border-color: rgba(0, 200, 255, 0.18);
background:
linear-gradient(135deg, rgba(0, 200, 255, 0.03) 0%, transparent 40%, rgba(100, 150, 255, 0.03) 100%),
rgba(3, 6, 10, 0.92);
box-shadow:
0 0 40px rgba(0, 200, 255, 0.06),
0 0 80px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(0, 200, 255, 0.06);
}
.ai-consultant-embed.ace-robotics:hover {
border-color: rgba(0, 200, 255, 0.3);
box-shadow:
0 0 50px rgba(0, 200, 255, 0.1),
0 0 100px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(0, 200, 255, 0.08);
}
.ai-consultant-embed.ace-robotics::after {
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 200, 255, 0.012) 2px,
rgba(0, 200, 255, 0.012) 3px
);
}
.ace-robotics .ace-hud-strip {
background: linear-gradient(90deg, rgba(0, 200, 255, 0.04), rgba(100, 150, 255, 0.02), transparent);
border-bottom-color: rgba(0, 200, 255, 0.08);
}
.ace-robotics .ace-header {
background: linear-gradient(90deg, rgba(0, 200, 255, 0.05), transparent 50%);
border-bottom-color: rgba(0, 200, 255, 0.1);
}
.ace-robotics .ace-header-dot,
.ace-robotics .ace-status-dot {
background: #00c8ff;
box-shadow: 0 0 8px rgba(0, 200, 255, 0.5), 0 0 20px rgba(0, 200, 255, 0.3);
}
.ace-robotics .ace-title-main {
color: #00c8ff;
text-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
}
.ace-robotics .ace-status-text {
color: #00c8ff;
}
.ace-robotics .ace-input:focus {
border-image: linear-gradient(135deg, rgba(0, 200, 255, 0.5), rgba(100, 150, 255, 0.35), rgba(0, 200, 255, 0.5)) 1;
box-shadow: 0 0 16px rgba(0, 200, 255, 0.1), inset 0 0 12px rgba(0, 200, 255, 0.04);
}
.ace-robotics .ace-send-btn {
background: linear-gradient(135deg, rgba(0, 200, 255, 0.12), rgba(100, 150, 255, 0.08));
border-color: rgba(0, 200, 255, 0.25);
color: #00c8ff;
}
.ace-robotics .ace-send-btn:hover {
background: linear-gradient(135deg, rgba(0, 200, 255, 0.25), rgba(100, 150, 255, 0.15));
border-color: rgba(0, 200, 255, 0.45);
box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
}
.ace-robotics .ace-send-ring {
border-color: rgba(0, 200, 255, 0.2);
}
.ace-robotics .ace-loading-fill {
background: linear-gradient(90deg, #00c8ff, rgba(100, 150, 255, 0.8), #00c8ff);
box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
}
.ace-robotics .ace-response {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%2300c8ff' fill-opacity='0.015' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/svg%3E") repeat,
rgba(0, 200, 255, 0.015);
border-left-color: rgba(0, 200, 255, 0.2);
}
.ace-robotics .ace-response-label {
color: #00c8ff;
text-shadow: 0 0 8px rgba(0, 200, 255, 0.2);
}
.ace-robotics .ace-response-text.streaming::after {
color: #00c8ff;
text-shadow: 0 0 6px rgba(0, 200, 255, 0.4);
}
.ace-robotics .ace-cta {
border-top-color: rgba(0, 200, 255, 0.06);
}
.ace-robotics .ace-cta-link {
background: linear-gradient(135deg, rgba(0, 200, 255, 0.06), rgba(100, 150, 255, 0.04));
border-color: rgba(0, 200, 255, 0.2);
color: #00c8ff;
}
.ace-robotics .ace-cta-link:hover {
background: linear-gradient(135deg, rgba(0, 200, 255, 0.14), rgba(100, 150, 255, 0.08));
border-color: rgba(0, 200, 255, 0.4);
box-shadow: 0 0 24px rgba(0, 200, 255, 0.12);
color: #00c8ff;
}
.ace-robotics .ace-footer-strip {
border-top-color: rgba(0, 200, 255, 0.06);
}
.ace-robotics .ace-footer-dot {
background: rgba(0, 200, 255, 0.3);
}
/* --- Responsive: Desktop large --- */
@media (min-width: 1024px) {
.ai-consultant-embed-section {
padding: 80px 50px;
}
.ai-consultant-embed {
max-width: 800px;
}
.ace-human-heading h3 {
font-size: 1.8rem;
}
}
/* --- Responsive: Tablet / Mobile --- */
@media (max-width: 768px) {
.ace-human-heading {
margin-bottom: 20px;
}
.ace-human-heading h3 {
font-size: 1.2rem;
}
.ace-human-heading p {
font-size: 0.7rem;
}
.ace-human-heading .ace-live-badge {
font-size: 0.58rem;
padding: 3px 10px;
}
.ai-consultant-embed-section {
padding: 30px 12px !important;
overflow: hidden !important;
}
.ai-consultant-embed {
max-width: calc(100vw - 24px) !important;
margin: 0 auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
min-height: 260px;
}
.ace-hud-strip {
font-size: 0.5rem;
padding: 4px 12px;
gap: 6px;
}
.ace-header {
padding: 14px 16px;
gap: 10px;
}
.ace-header::after {
display: none;
}
.ace-title-main {
font-size: 0.62rem;
letter-spacing: 0.16em;
}
.ace-title-sub {
font-size: 0.5rem;
}
.ace-header-status {
display: none;
}
.ace-body {
padding: 16px !important;
overflow: hidden !important;
}
.ace-input-row {
gap: 8px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.ace-input-prefix {
font-size: 0.75rem;
}
.ace-input {
font-size: 16px;
padding: 10px 14px;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.ace-prompt-label {
font-size: 0.65rem !important;
line-height: 1.4 !important;
overflow-wrap: break-word !important;
}
.ace-response {
font-size: 0.78rem;
max-height: 220px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
word-break: break-word !important;
}
.ace-response-text {
word-break: break-word !important;
overflow-wrap: break-word !important;
padding: 12px 14px;
}
.ace-response-header {
padding: 8px 14px;
overflow: hidden;
}
.ai-consultant-embed::before {
display: none !important;
}
.ace-cta-link {
font-size: 0.58rem;
padding: 8px 20px;
clip-path: none;
}
.ace-footer-strip {
font-size: 0.5rem;
gap: 8px;
padding: 5px 12px;
}
}
/* --- Responsive: Small Mobile --- */
@media (max-width: 480px) {
.ace-human-heading h3 {
font-size: 1.05rem;
}
.ace-human-heading p {
font-size: 0.65rem;
}
.ai-consultant-embed-section {
padding: 20px 8px !important;
}
.ai-consultant-embed {
max-width: calc(100vw - 16px) !important;
}
.ace-hud-strip {
font-size: 0.5rem;
padding: 3px 10px;
}
.ace-header {
padding: 12px 12px !important;
gap: 8px !important;
}
.ace-title-main {
font-size: 0.54rem !important;
letter-spacing: 0.12em;
}
.ace-title-sub {
font-size: 0.5rem;
}
.ace-body {
padding: 12px !important;
}
.ace-input-prefix {
font-size: 0.7rem;
}
.ace-input {
font-size: 16px !important;
padding: 10px 10px !important;
}
.ace-send-btn {
width: 38px !important;
height: 38px !important;
flex-shrink: 0 !important;
}
.ace-response {
font-size: 0.72rem !important;
max-height: 140px !important;
}
.ace-response-text {
padding: 10px 12px;
}
.ace-response-header {
padding: 6px 12px;
}
.ace-cta-link {
font-size: 0.54rem;
padding: 8px 16px;
}
.ace-footer-strip {
font-size: 0.5rem;
padding: 4px 8px;
}
}
/* ============================================
FUTURISTIC WIDGET EFFECTS
5 visual enhancements for the AI consultant
embed widget: holographic scan, waveform,
glitch, particle field, decrypt animation.
============================================ */
/* --- 1. Holographic Scan Pulse --- */
@keyframes ace-holo-scan {
0% { transform: translateY(0); }
50% { transform: translateY(calc(var(--ace-card-h, 350px))); }
100% { transform: translateY(0); }
}
/* --- 2. Typing Waveform Visualizer --- */
.ace-waveform {
display: inline-flex;
align-items: center;
gap: 3px;
height: 18px;
vertical-align: middle;
}
.ace-waveform span {
display: inline-block;
width: 2px;
height: 8px;
background: var(--terminal-green, #00ff88);
border-radius: 1px;
will-change: transform;
animation: ace-waveform-bar 1s ease-in-out infinite;
}
.ace-waveform span:nth-child(1) { animation-duration: 0.8s; animation-delay: 0s; }
.ace-waveform span:nth-child(2) { animation-duration: 0.65s; animation-delay: 0.1s; }
.ace-waveform span:nth-child(3) { animation-duration: 0.9s; animation-delay: 0.05s; }
.ace-waveform span:nth-child(4) { animation-duration: 0.7s; animation-delay: 0.15s; }
.ace-waveform span:nth-child(5) { animation-duration: 0.85s; animation-delay: 0.08s; }
@keyframes ace-waveform-bar {
0%, 100% {
transform: scaleY(0.4);
opacity: 0.4;
}
50% {
transform: scaleY(1.8);
opacity: 1;
}
}
/* --- 3. Glitch-on-Send Effect --- */
.ace-glitch {
animation: ace-glitch-chromatic 600ms ease-out forwards;
will-change: transform, text-shadow;
}
@keyframes ace-glitch-chromatic {
0% {
text-shadow: none;
transform: translate(0);
}
25% {
text-shadow:
-2px 0 rgba(255, 0, 60, 0.3),
2px 0 rgba(0, 255, 200, 0.3);
transform: translate(-1px, 1px);
}
50% {
text-shadow:
2px 0 rgba(255, 0, 60, 0.2),
-2px 0 rgba(0, 255, 200, 0.2);
transform: translate(1px, -1px);
}
75% {
text-shadow:
-1px 0 rgba(255, 0, 60, 0.15),
1px 0 rgba(0, 255, 200, 0.15);
transform: translate(0, 1px);
}
100% {
text-shadow: none;
transform: translate(0);
}
}
.ace-send-btn.ace-glitch {
animation: ace-glitch-btn 600ms ease-out forwards;
}
@keyframes ace-glitch-btn {
0% {
filter: none;
transform: translate(0);
}
25% {
filter: drop-shadow(-2px 0 rgba(255, 0, 60, 0.6)) drop-shadow(2px 0 rgba(0, 255, 200, 0.6));
transform: translate(-1px, 1px);
}
50% {
filter: drop-shadow(2px 0 rgba(255, 0, 60, 0.4)) drop-shadow(-2px 0 rgba(0, 255, 200, 0.4));
transform: translate(1px, -1px);
}
75% {
filter: drop-shadow(-1px 0 rgba(255, 0, 60, 0.3)) drop-shadow(1px 0 rgba(0, 255, 200, 0.3));
transform: translate(0, 1px);
}
100% {
filter: none;
transform: translate(0);
}
}
/* --- 4. Ambient Particle Field --- */
.ai-consultant-embed-section::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image:
radial-gradient(1px 1px at 20% 30%, rgba(0, 255, 136, 0.15) 0%, transparent 100%),
radial-gradient(1px 1px at 75% 20%, rgba(0, 200, 255, 0.12) 0%, transparent 100%),
radial-gradient(1px 1px at 40% 70%, rgba(0, 255, 136, 0.1) 0%, transparent 100%),
radial-gradient(1px 1px at 85% 65%, rgba(0, 200, 255, 0.1) 0%, transparent 100%),
radial-gradient(1px 1px at 10% 80%, rgba(0, 255, 180, 0.08) 0%, transparent 100%),
radial-gradient(1px 1px at 60% 10%, rgba(0, 220, 255, 0.08) 0%, transparent 100%),
radial-gradient(1px 1px at 50% 50%, rgba(0, 255, 136, 0.06) 0%, transparent 100%),
radial-gradient(1px 1px at 30% 90%, rgba(100, 200, 255, 0.06) 0%, transparent 100%);
background-size: 300px 300px;
pointer-events: none;
z-index: 0;
opacity: 0.7;
will-change: transform;
animation: ace-particle-float 20s linear infinite;
}
@keyframes ace-particle-float {
0% { transform: translate(0, 0); }
25% { transform: translate(-15px, -10px); }
50% { transform: translate(-8px, -20px); }
75% { transform: translate(10px, -12px); }
100% { transform: translate(0, 0); }
}
/* --- 5. Response Decrypt Animation --- */
.ace-decrypt {
font-family: 'JetBrains Mono', 'Courier New', monospace !important;
animation: ace-decrypt-flicker 0.6s ease-out forwards;
will-change: opacity, filter;
}
@keyframes ace-decrypt-flicker {
0% {
opacity: 0.7;
filter: blur(2px);
letter-spacing: 0.15em;
}
20% {
opacity: 0.9;
filter: blur(0.5px);
letter-spacing: 0.1em;
}
40% {
opacity: 0.75;
filter: blur(1px);
letter-spacing: 0.08em;
}
60% {
opacity: 0.95;
filter: blur(0);
letter-spacing: 0.04em;
}
80% {
opacity: 0.85;
filter: blur(0.3px);
letter-spacing: 0.02em;
}
100% {
opacity: 1;
filter: blur(0);
letter-spacing: normal;
font-family: 'Rajdhani', 'JetBrains Mono', monospace;
}
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.ai-consultant-embed::before,
.ai-consultant-embed::after,
.ai-consultant-embed-section::after,
.ace-waveform span,
.ace-glitch,
.ace-send-btn.ace-glitch,
.ace-decrypt,
.ace-send-ring,
.ace-loading-fill,
.ace-hud-scroll,
.ace-status-dot,
.ace-prompt-cursor,
.ace-live-dot,
.ace-input {
animation: none !important;
}
}
/* ============================================
TEXT WRAP & ORPHAN PREVENTION
Prevents awkward line breaks inside UI cards,
stats, badges, and buttons across the site.
Uses text-wrap: balance (modern CSS, graceful
degradation in older browsers).
============================================ */
/* --- Card headings: balanced wrapping, no mid-word breaks, no hyphens --- */
.bento-item h3,
.bento-item h4,
.bento-item .bento-title,
.bento-card .card-title,
.feature-card h3,
.feature-card h4,
.service-card h3,
.service-card h4,
.pillar h3,
.pillar h4,
.pillar-card h3,
.pillar-card h4,
.horizontal-card h3,
.horizontal-card h4,
.horizontal-card .card-title,
.use-case-card h4,
.metric-card h3,
.metric-card h4,
.ai-card-body h4,
.platform-card h4,
.pricing-card h3,
.pricing-card h4,
.terminal-card h3,
.terminal-card h4,
.career-card h3,
.career-card h4,
.job-card h3,
.job-card h4,
.team-card h3,
.team-card h4,
.value-card h3,
.value-card h4,
.process-step h3,
.process-step h4,
.tilt-card h3,
.tilt-card h4,
.card h3,
.card h4,
[class*="card"] h3,
[class*="card"] h4 {
text-wrap: balance;
hyphens: none;
overflow-wrap: normal;
word-break: keep-all;
}
/* --- Section headings inside cards: balanced for visual consistency --- */
.bento-item h2,
.feature-card h2,
.service-card h2,
[class*="card"] h2 {
text-wrap: balance;
hyphens: none;
}
/* --- Stat values & labels: never break to next line --- */
.stat-num,
.stat-value,
.stat-lbl,
.stat-label,
.metric-value,
.metric-label,
.hero-stats-card .stat-item {
white-space: nowrap;
hyphens: none;
word-break: keep-all;
}
/* --- Badges & labels: single line, never wrap --- */
.bento-item .bento-label,
.bento-card .card-label,
.pillar-badge-top,
.pillar-num,
.section-label,
.section-tag,
.hero-badge,
.pillar-tag,
.security-badge,
.glitch-badge {
white-space: nowrap;
hyphens: none;
}
/* --- Buttons & CTAs: prevent text wrapping inside buttons --- */
.cta-btn,
.hero-cta,
.btn,
.btn-primary,
.btn-secondary,
.btn-cta,
.header-cta-btn,
.btn-header,
.contact-btn,
.quote-submit-btn,
.form-submit,
button[type="submit"],
.use-case-link {
white-space: nowrap;
hyphens: none;
word-break: keep-all;
}
/* --- Card body text: balanced wrapping for paragraphs (orphan prevention) --- */
.bento-item p,
.bento-item .bento-text,
.bento-card .card-explain,
.feature-card p,
.service-card p,
.pillar p,
.pillar-card > p,
.horizontal-card p,
.horizontal-card .card-text,
.use-case-card p,
.ai-card-body p,
.platform-card p,
.pricing-desc,
[class*="card"] p {
text-wrap: pretty;
hyphens: none;
}
/* --- Grid min-widths: prevent cards from getting too narrow --- */
.bento-grid {
grid-template-columns: repeat(4, minmax(200px, 1fr));
}
.services-grid {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.features, .features-grid {
grid-template-columns: repeat(4, minmax(180px, 1fr));
}
.platforms, .platforms-grid {
grid-template-columns: repeat(3, minmax(180px, 1fr));
}
.use-case-grid {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.metrics-grid {
grid-template-columns: repeat(4, minmax(140px, 1fr));
}
.pricing-grid {
grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.ai-showcase-grid {
grid-template-columns: repeat(2, minmax(280px, 1fr));
}
/* --- Responsive overrides: relax min-widths on smaller screens --- */
@media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(2, minmax(200px, 1fr));
}
.features, .features-grid {
grid-template-columns: repeat(2, minmax(180px, 1fr));
}
}
@media (max-width: 768px) {
.bento-grid,
.services-grid,
.features, .features-grid,
.platforms, .platforms-grid,
.use-case-grid,
.metrics-grid,
.pricing-grid,
.ai-showcase-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
INTEL BRIEFING - Email Capture Component
Glassmorphism cyberpunk subscribe form
============================================ */
.intel-subscribe {
position: relative;
padding: 48px 0 40px;
text-align: center;
background:
linear-gradient(180deg, transparent 0%, rgba(0, 255, 136, 0.015) 40%, rgba(0, 212, 255, 0.01) 100%),
linear-gradient(90deg, transparent 5%, rgba(0, 255, 136, 0.03) 50%, transparent 95%) no-repeat bottom center / 100% 1px;
}
.intel-subscribe::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), rgba(0, 212, 255, 0.15), transparent);
}
.intel-subscribe .container {
max-width: 560px;
margin: 0 auto;
padding: 0 24px;
}
.intel-subscribe h3 {
display: inline-block;
font-size: var(--text-sm);
letter-spacing: var(--tracking-widest);
color: var(--terminal-green);
margin-bottom: 12px;
}
.intel-subscribe p {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: 24px;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.subscribe-form {
display: flex;
gap: 0;
max-width: 460px;
margin: 0 auto;
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(0, 255, 136, 0.12);
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.subscribe-form:focus-within {
border-color: rgba(0, 255, 136, 0.3);
box-shadow:
0 0 20px rgba(0, 255, 136, 0.06),
0 0 40px rgba(0, 255, 136, 0.03);
}
.subscribe-form input[type="email"] {
flex: 1;
padding: 14px 18px;
background: transparent;
border: none;
outline: none;
color: var(--text-bright);
font-family: inherit;
font-size: var(--text-sm);
letter-spacing: 0.02em;
}
.subscribe-form input[type="email"]::placeholder {
color: var(--text-muted);
letter-spacing: 0.03em;
}
.subscribe-form button {
padding: 14px 28px;
background: var(--terminal-green);
color: var(--void);
border: none;
font-family: inherit;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
cursor: pointer;
transition: background 0.25s ease, box-shadow 0.25s ease;
white-space: nowrap;
}
.subscribe-form button:hover {
background: #00e67a;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}
.subscribe-form button:active {
transform: scale(0.98);
}
/* Mobile responsive */
@media (max-width: 520px) {
.intel-subscribe {
padding: 36px 0 32px;
}
.subscribe-form {
flex-direction: column;
border-radius: 6px;
}
.subscribe-form input[type="email"] {
border-bottom: 1px solid rgba(0, 255, 136, 0.08);
text-align: center;
padding: 14px 16px;
}
.subscribe-form button {
padding: 14px 20px;
}
}
/* Day mode adjustments */
html.daytime .intel-subscribe {
background:
linear-gradient(180deg, transparent 0%, rgba(0, 100, 80, 0.02) 40%, rgba(0, 80, 120, 0.015) 100%),
linear-gradient(90deg, transparent 5%, rgba(0, 100, 80, 0.06) 50%, transparent 95%) no-repeat bottom center / 100% 1px;
}
html.daytime .intel-subscribe::before {
background: linear-gradient(90deg, transparent, rgba(0, 100, 80, 0.15), rgba(0, 80, 120, 0.1), transparent);
}
html.daytime .subscribe-form {
border-color: rgba(0, 100, 80, 0.15);
background: rgba(0, 0, 0, 0.3);
}
html.daytime .subscribe-form:focus-within {
border-color: rgba(0, 100, 80, 0.25);
box-shadow: 0 0 20px rgba(0, 100, 80, 0.05);
}
/* ============================================
DESIGN IMPROVEMENT #1: CURSOR-AS-CHARACTER
Context-aware scan ring cursor shapes
============================================ */
/* Cloud context: cloud-shaped ring */
body.cursor-context-cloud .scan-ring {
border-radius: 40% 40% 50% 50%;
width: 36px;
height: 30px;
border-color: rgba(0, 180, 255, 0.35);
box-shadow: 0 0 12px rgba(0, 180, 255, 0.15);
}
body.cursor-context-cloud .scan-ring::before {
border-radius: 40% 40% 50% 50%;
border-color: rgba(0, 180, 255, 0.15);
}
body.cursor-context-cloud .scan-ring::after {
content: '\2601'; /* cloud symbol */
font-size: 10px;
color: rgba(0, 180, 255, 0.5);
}
/* Security context: shield shape */
body.cursor-context-security .scan-ring {
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
width: 28px;
height: 34px;
border-color: rgba(255, 80, 80, 0.35);
box-shadow: 0 0 12px rgba(255, 80, 80, 0.15);
}
body.cursor-context-security .scan-ring::before {
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
border-color: rgba(255, 80, 80, 0.15);
}
body.cursor-context-security .scan-ring::after {
content: '\1F6E1'; /* shield */
font-size: 10px;
color: rgba(255, 80, 80, 0.5);
}
/* AI context: neural/brain pulse */
body.cursor-context-ai .scan-ring {
border-radius: 50%;
width: 34px;
height: 34px;
border-color: rgba(180, 100, 255, 0.35);
box-shadow: 0 0 14px rgba(180, 100, 255, 0.2);
animation: cursorNeuralPulse 1.2s ease-in-out infinite;
}
body.cursor-context-ai .scan-ring::before {
border-color: rgba(180, 100, 255, 0.15);
animation: cursorNeuralInner 0.8s ease-in-out infinite alternate;
}
body.cursor-context-ai .scan-ring::after {
content: '\2B22'; /* hexagon / brain node */
font-size: 10px;
color: rgba(180, 100, 255, 0.5);
}
@keyframes cursorNeuralPulse {
0%, 100% { box-shadow: 0 0 14px rgba(180, 100, 255, 0.2); }
50% { box-shadow: 0 0 22px rgba(180, 100, 255, 0.4), 0 0 6px rgba(180, 100, 255, 0.1) inset; }
}
@keyframes cursorNeuralInner {
0% { transform: scale(0.85); opacity: 0.4; }
100% { transform: scale(1.05); opacity: 0.8; }
}
/* Tools context: gear shape */
body.cursor-context-tools .scan-ring {
border-radius: 30%;
width: 32px;
height: 32px;
border-color: rgba(255, 200, 0, 0.35);
box-shadow: 0 0 12px rgba(255, 200, 0, 0.15);
animation: cursorGearSpin 4s linear infinite;
}
body.cursor-context-tools .scan-ring::before {
border-radius: 30%;
border-color: rgba(255, 200, 0, 0.15);
}
body.cursor-context-tools .scan-ring::after {
content: '\2699'; /* gear */
font-size: 11px;
color: rgba(255, 200, 0, 0.5);
animation: cursorGearSpinReverse 4s linear infinite;
}
@keyframes cursorGearSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cursorGearSpinReverse {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(-360deg); }
}
/* Smooth transitions between cursor contexts */
.scan-ring {
transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease,
border-radius 0.35s ease, box-shadow 0.35s ease;
}
/* ============================================
DESIGN IMPROVEMENT #3: MICRO-INTERACTIONS
Count-up animation on stat numbers
============================================ */
.stat-num,
.stat-number,
.hero-stat-number,
.holo-counter,
.footer-stat span {
display: inline-block;
transition: color 0.3s ease;
}
.stat-counting {
color: var(--terminal-green) !important;
}
/* Particle burst on count complete */
.stat-burst {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
pointer-events: none;
z-index: 10;
}
.stat-burst-particle {
position: absolute;
width: 3px;
height: 3px;
background: var(--terminal-green);
border-radius: 50%;
opacity: 0;
animation: statBurstAnim 0.7s ease-out forwards;
}
@keyframes statBurstAnim {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--burst-x, 20px), var(--burst-y, -20px)) scale(0);
}
}
/* ============================================
DESIGN IMPROVEMENT #4: SERVICE COMPARISON TABLE
Glassmorphism side-by-side columns
============================================ */
.service-comparison {
padding: 80px 0 60px;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.comparison-col {
position: relative;
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 36px 28px 32px;
transition: all 0.4s ease;
overflow: hidden;
}
.comparison-col::before {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(180deg, rgba(0, 255, 136, 0.03) 0%, transparent 40%);
opacity: 0;
transition: opacity 0.4s ease;
}
.comparison-col:hover {
border-color: rgba(0, 255, 136, 0.15);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 136, 0.06);
}
.comparison-col:hover::before {
opacity: 1;
}
.comparison-col-icon {
font-size: 2rem;
margin-bottom: 16px;
display: block;
}
.comparison-col-title {
font-family: 'Syne', sans-serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--text-bright);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.comparison-col-subtitle {
font-size: 0.7rem;
letter-spacing: 0.15em;
color: var(--terminal-green);
text-transform: uppercase;
margin-bottom: 24px;
opacity: 0.8;
}
.comparison-features {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}
.comparison-features li {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 0.85rem;
color: var(--text-secondary);
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.comparison-features li:last-child {
border-bottom: none;
}
.comparison-features li .cf-check {
color: var(--terminal-green);
font-size: 0.75rem;
flex-shrink: 0;
margin-top: 2px;
}
.comparison-price {
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 8px;
}
.comparison-price-value {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-bright);
margin-bottom: 20px;
display: block;
}
.comparison-use-cases {
margin-bottom: 28px;
}
.comparison-use-cases-label {
font-size: 0.65rem;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 8px;
}
.comparison-use-case-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.comparison-use-case-tag {
padding: 4px 10px;
font-size: 0.65rem;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
color: var(--text-muted);
letter-spacing: 0.05em;
background: rgba(255, 255, 255, 0.02);
}
.comparison-col:hover .comparison-use-case-tag {
border-color: rgba(0, 255, 136, 0.1);
color: var(--text-secondary);
}
.comparison-cta {
display: block;
width: 100%;
text-align: center;
padding: 14px 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--terminal-green);
border: 1px solid rgba(0, 255, 136, 0.2);
background: rgba(0, 255, 136, 0.04);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.comparison-cta:hover {
background: var(--terminal-green);
color: var(--void);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}
/* Featured/popular column */
.comparison-col.comparison-featured {
border-color: rgba(0, 255, 136, 0.15);
background: linear-gradient(135deg, rgba(0, 255, 136, 0.04) 0%, rgba(255,255,255,0.02) 100%);
}
.comparison-col.comparison-featured .comparison-cta {
background: var(--terminal-green);
color: var(--void);
}
.comparison-col.comparison-featured .comparison-cta:hover {
box-shadow: 0 0 30px rgba(0, 255, 136, 0.35);
transform: none;
}
.comparison-badge {
position: absolute;
top: -1px;
right: 24px;
padding: 4px 14px;
font-size: 0.55rem;
letter-spacing: 0.2em;
background: var(--terminal-green);
color: var(--void);
border-radius: 0 0 6px 6px;
font-weight: 600;
}
/* Responsive comparison grid */
@media (max-width: 900px) {
.comparison-grid {
grid-template-columns: 1fr;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
}
/* ============================================
FOOTER SITE SEARCH
============================================ */
.footer-search {
text-align: center;
padding: 30px 20px 10px;
position: relative;
}
.search-wrapper {
position: relative;
display: inline-block;
width: 100%;
max-width: 480px;
}
.search-input {
width: 100%;
padding: 14px 20px 14px 44px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
color: var(--text-bright);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
outline: none;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.3s ease;
letter-spacing: 0.03em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23788090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 16px center;
background-size: 16px;
}
.search-input::placeholder {
color: var(--text-muted);
letter-spacing: 0.08em;
font-size: 0.8rem;
}
.search-input:focus {
border-color: rgba(0, 255, 136, 0.4);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.1), inset 0 0 20px rgba(0, 255, 136, 0.03);
background-color: rgba(255, 255, 255, 0.06);
}
.search-results {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: rgba(8, 10, 15, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: 6px;
max-height: 0;
overflow: hidden;
opacity: 0;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 255, 136, 0.2);
transition: max-height 0.3s ease, opacity 0.3s ease;
z-index: 100;
}
.search-results.active {
max-height: 400px;
overflow-y: auto;
opacity: 1;
}
.search-results::-webkit-scrollbar {
width: 4px;
}
.search-results::-webkit-scrollbar-track {
background: transparent;
}
.search-results::-webkit-scrollbar-thumb {
background: rgba(0, 255, 136, 0.2);
border-radius: 2px;
}
.search-result-item {
display: block;
padding: 12px 16px;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
text-align: left;
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item:hover {
background: rgba(0, 255, 136, 0.08);
}
.search-result-title {
display: block;
font-size: 0.82rem;
font-weight: 500;
color: var(--terminal-green);
letter-spacing: 0.02em;
margin-bottom: 3px;
}
.search-result-desc {
display: block;
font-size: 0.72rem;
color: var(--text-muted);
line-height: 1.4;
letter-spacing: 0.01em;
}
.search-no-results {
padding: 16px;
text-align: center;
color: var(--text-muted);
font-size: 0.78rem;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.search-wrapper {
max-width: 100%;
}
.search-input {
font-size: 0.8rem;
padding: 12px 16px 12px 40px;
}
}
/* =============================================
BATCH 3 EFFECT STYLES
============================================= */
/* --- B3-1: Optical Decrypt Text Reveal --- */
.decrypt-reveal {
position: relative;
}
.decrypt-reveal[data-decrypted="1"] {
text-shadow: 0 0 6px var(--terminal-green, #00ff88);
transition: text-shadow 0.6s ease;
}
/* --- B3-2: Ghost Hack Interference Zones --- */
.ghost-hack-flash {
background: rgba(0, 0, 0, 0.6);
}
.ghost-hack-text {
font-family: 'Syne', 'Courier New', monospace;
font-size: clamp(12px, 2vw, 22px);
color: var(--terminal-green, #00ff88);
letter-spacing: 0.3em;
text-transform: uppercase;
text-shadow:
0 0 8px var(--terminal-green, #00ff88),
0 0 20px rgba(0, 255, 136, 0.3);
animation: ghost-hack-flicker 0.5s steps(3) forwards;
}
@keyframes ghost-hack-flicker {
0% { opacity: 0; }
20% { opacity: 1; }
40% { opacity: 0.2; }
60% { opacity: 0.9; }
80% { opacity: 0.3; }
100% { opacity: 0; }
}
html.ghost-hack-active::after {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 136, 0.04) 2px,
rgba(0, 255, 136, 0.04) 4px
);
pointer-events: none;
z-index: 99999;
animation: ghost-hack-scanlines 0.3s linear infinite;
}
@keyframes ghost-hack-scanlines {
0% { transform: translateY(0); }
100% { transform: translateY(4px); }
}
/* --- B3-3: Eva Berserk Mode / Rage Scroll --- */
html.berserk-mode {
box-shadow: inset 0 0 80px rgba(255, 0, 60, 0.4), inset 0 0 120px rgba(120, 0, 200, 0.2);
}
.berserk-overlay {
background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 0, 60, 0.15) 100%);
}
.berserk-warning {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Syne', 'Courier New', monospace;
font-size: clamp(14px, 3vw, 28px);
color: #ff003c;
letter-spacing: 0.4em;
text-transform: uppercase;
text-shadow:
0 0 10px #ff003c,
0 0 30px rgba(255, 0, 60, 0.4);
animation: berserk-flash 0.3s steps(2) infinite;
white-space: nowrap;
}
@keyframes berserk-flash {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
/* --- B3-4: SAC Network Pulse --- */
.sac-pulse-ring {
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
border: 1px solid rgba(0, 255, 136, 0.12);
transform: translate(-50%, -50%);
animation: sac-pulse-expand 2s ease-out forwards;
pointer-events: none;
}
@keyframes sac-pulse-expand {
0% {
width: 0;
height: 0;
opacity: 0.2;
border-width: 1px;
}
70% {
opacity: 0.08;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
border-width: 0.5px;
}
}
/* --- B3-5: Data Exfiltration Cursor Trail --- */
/* (Styles are inline on the spans for performance,
but add reduced-motion fallback) */
@media (prefers-reduced-motion: reduce) {
.hex-trail-char {
display: none !important;
}
.ghost-hack-flash,
.berserk-overlay,
.sac-pulse-ring {
display: none !important;
}
html.berserk-mode {
box-shadow: none !important;
}
}
/* =============================================
GLOBAL ANIMATION DAMPENER
Reduces flicker/flash/strobe intensity across
the entire site. Keeps the sci-fi atmosphere
but makes it far less aggressive on the eyes.
All opacity values cut 40-50% from originals.
============================================= */
/* --- Body-level screen flicker: slow down and nearly invisible --- */
body {
animation: screenFlicker 14s ease-in-out infinite !important;
}
/* --- CRT scanline overlay: reduce opacity 50% --- */
body::after {
opacity: 0.18 !important;
}
/* --- Berserk mode overlay: cut way down --- */
.berserk-overlay {
opacity: 0.3 !important;
}
html.berserk-mode {
box-shadow: inset 0 0 50px rgba(255, 0, 60, 0.15), inset 0 0 80px rgba(120, 0, 200, 0.08) !important;
}
.berserk-warning {
animation: berserk-flash 0.6s steps(2) infinite !important;
text-shadow: 0 0 6px #ff003c, 0 0 15px rgba(255, 0, 60, 0.2) !important;
}
/* --- Ghost hack flash: much softer --- */
.ghost-hack-flash {
opacity: 0.35 !important;
}
html.ghost-hack-active::before {
opacity: 0.3 !important;
}
/* --- Tetsuo Power Surge: reduce glow intensity 50% --- */
.tetsuo-surge {
box-shadow: inset 0 0 40px rgba(255, 50, 20, 0.15), inset 0 0 75px rgba(255, 100, 30, 0.08) !important;
}
.tetsuo-surge.active {
animation: tetsuoPulse-damped 0.8s ease-in-out !important;
}
@keyframes tetsuoPulse-damped {
0% { box-shadow: inset 0 0 20px rgba(255, 50, 20, 0.05); }
50% { box-shadow: inset 0 0 60px rgba(255, 50, 20, 0.2), inset 0 0 100px rgba(255, 100, 30, 0.1); }
100% { box-shadow: inset 0 0 40px rgba(255, 50, 20, 0.15), inset 0 0 75px rgba(255, 100, 30, 0.08); }
}
/* --- Idle glitch on hero/page titles: slow down and soften --- */
.hero-title,
.page-title {
animation: idleGlitch 20s ease-in-out infinite, seraphimTextGlow 8s ease-in-out infinite !important;
}
/* --- Glitch badge: slow down flicker cycle --- */
.glitch-badge {
animation: glitchShift 14s ease-in-out infinite !important;
}
/* --- Holo counter flicker: reduce opacity dip, slow cycle --- */
.holo-counter {
animation: holoFlicker-damped 10s ease-in-out infinite !important;
}
@keyframes holoFlicker-damped {
0%, 100% {
opacity: 1;
text-shadow:
0 0 5px rgba(0, 255, 136, 0.35),
0 0 12px rgba(0, 255, 136, 0.15),
0 0 25px rgba(0, 255, 136, 0.06);
}
93% {
opacity: 0.88;
text-shadow: 0 0 3px rgba(0, 255, 136, 0.25);
}
95% {
opacity: 0.92;
text-shadow: 0 0 4px rgba(0, 255, 136, 0.3);
}
96% {
opacity: 1;
text-shadow:
0 0 5px rgba(0, 255, 136, 0.35),
0 0 12px rgba(0, 255, 136, 0.15);
}
}
/* --- Label flicker: reduce opacity dip 50% --- */
.privacy-banner-label {
animation: labelFlicker-damped 5s ease-in-out infinite !important;
}
@keyframes labelFlicker-damped {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
/* --- Ghost dubbing text: reduce flicker range --- */
.ghost-dubbing.translating {
animation: ghostDubFlicker-damped 1.2s ease-in-out 1 !important;
}
@keyframes ghostDubFlicker-damped {
0%, 100% { opacity: 1; }
50% { opacity: 0.95; }
}
/* --- Optical camo ripple: reduce blur --- */
.optical-camo-ripple.active {
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
/* --- SAC pulse rings: reduce starting opacity --- */
.sac-pulse-ring {
border-color: rgba(0, 255, 136, 0.06) !important;
}
/* --- Akira light trails: reduce opacity --- */
.akira-trail.active {
opacity: 0.4 !important;
}
/* --- Glitch text on hover: reduce text-shadow intensity --- */
.hero-title:hover,
.page-title:hover {
animation: glitchColor-damped 1s ease !important;
}
@keyframes glitchColor-damped {
0%, 100% { text-shadow: none; }
25% { text-shadow: -1px 0 rgba(255,0,64,0.08), 1px 0 rgba(0,255,170,0.08); }
50% { text-shadow: 1px 0 rgba(0,170,255,0.08), -1px 0 rgba(255,0,64,0.08); }
75% { text-shadow: -0.5px 0 rgba(255,0,64,0.05), 0.5px 0 rgba(0,255,170,0.05); }
}
/* --- Boot overlay: softer backdrop --- */
.boot-overlay {
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
}
/* --- Predator decloak flash: reduce white flash --- */
.predator-flash {
animation: decloakFlash-damped 0.5s ease-out !important;
}
@keyframes decloakFlash-damped {
0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
40% { box-shadow: 0 0 12px rgba(255,255,255,0.25); }
100%{ box-shadow: 0 0 0 rgba(255,255,255,0); }
}
/* --- Predator cloaked shimmer: reduce hue rotation --- */
.predator-cloaked {
animation: cloakShimmer-damped 4s ease-in-out infinite !important;
}
@keyframes cloakShimmer-damped {
0% { filter: blur(1.5px) hue-rotate(0deg); }
50% { filter: blur(1.5px) hue-rotate(8deg); }
100% { filter: blur(1.5px) hue-rotate(0deg); }
}
/* --- Scan line overlays: reduce everywhere --- */
.bg-scanlines,
.bg-scanlines::after {
opacity: 0.3 !important;
}
/* --- Waveform divider bars: reduce animation intensity --- */
.waveform-divider span {
opacity: 0.4 !important;
}
/* --- Blade Runner rain layers: reduce opacity 40% --- */
.blade-rain .rain-front { opacity: 0.22 !important; }
.blade-rain .rain-mid { opacity: 0.16 !important; }
.blade-rain .rain-back { opacity: 0.10 !important; }
/* --- Ghost dive static noise: reduce backdrop blur --- */
.ghost-dive-overlay {
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
/* --- Cyberbrain indicator dot: soften pulse --- */
.cb-dot {
animation-duration: 3s !important;
}
/* --- S9 scan line: reduce opacity --- */
.s9-scan-line {
opacity: 0.3 !important;
}
.batou-scan-line {
opacity: 0.3 !important;
}
/* --- Consultant chat scanlines: reduce --- */
.ace-scanline-drift {
opacity: 0.2 !important;
}