/**
* Persona Quest - Modular CSS Architecture
* Strictly following R-Series UI/UX Standards
*/
/* 1. Core Layer: Variables, Resets, Typography */
:root {
/* Colors - Base */
--bg-dark: #020617;
--bg-dark-rgb: 2, 6, 23;
--bg-slate: #0f172a;
--bg-slate-rgb: 15, 23, 42;
--bg-deep: #05050a;
/* Text Colors - Semantic Scale */
--text-primary: #ffffff;
--text-primary-rgb: 255, 255, 255;
--text-secondary: rgba(255, 255, 255, 0.85);
--text-main: #ffffff;
--text-muted: #94a3b8; /* slate-400 */
--text-faint: rgba(255, 255, 255, 0.45);
--text-contrast-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0,0,0,0.5);
--text-glow-soft: 0 0 10px rgba(255, 255, 255, 0.3);
/* Slate Palette - constellation design system */
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1e293b;
--slate-900: #0f172a;
--slate-950: #020617;
/* Typography Tokens */
--font-heading: 'Syne', sans-serif;
--font-serif: 'Instrument Serif', serif;
/* Zwei-Serifen-System (bewusst): --font-serif (Instrument Serif) ist die
fließende, editoriale „Stimme" (Landing-Hero, Hub-H1). --font-display-serif
(Cinzel) ist die inschriftliche „Titel/Monument"-Serife (Report-
Sektionstitel). Beide klassisch, mit gemeinsamen Nebenrollen (Mono-Caps-
Eyebrows, Body, Farbe, Gravur). Ref: Unified Visual Language §Typografie. */
--font-display-serif: 'Cinzel', serif;
--font-body: 'Outfit', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--letter-spacing-radical: -0.02em;
--letter-spacing-interface: 0.01em;
--letter-spacing-story: 0.05em;
/* Text Size Scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
/* Spacing Scale */
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-14: 3.5rem; /* 56px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
--spacing-32: 8rem; /* 128px */
/* Semantic Spacing Aliases */
--spacing-xs: var(--spacing-1);
--spacing-sm: var(--spacing-2);
--spacing-md: var(--spacing-4);
--spacing-lg: var(--spacing-6);
--spacing-xl: var(--spacing-8);
--spacing-2xl: var(--spacing-12);
/* Legacy Space Aliases (used in landing components) */
--space-xs: var(--spacing-xs);
--space-sm: var(--spacing-sm);
--space-md: var(--spacing-md);
--space-lg: var(--spacing-lg);
--space-xl: var(--spacing-xl);
--space-2xl: var(--spacing-2xl);
--space-4xl: var(--spacing-16);
--space-6xl: var(--spacing-24);
--space-8xl: var(--spacing-32);
/* Radii */
--radius-sm: 0.375rem; /* 6px */
--radius-md: 0.75rem; /* 12px */
--radius-lg: 1rem; /* 16px */
--radius-xl: 1.5rem; /* 24px */
--radius-2xl: 2.5rem; /* 40px */
--radius-pill: 9999px;
--radius-full: var(--radius-pill);
/* Aura & Glow Tokens */
--aura-soft: 0 0 20px rgba(var(--accent-primary-rgb), 0.3);
--aura-medium: 0 0 40px rgba(var(--accent-primary-rgb), 0.5);
--aura-hard: 0 0 60px rgba(var(--accent-primary-rgb), 0.7);
/* Accents */
--accent-arcane: #9d8df1;
--accent-arcane-rgb: 157, 141, 241;
--accent-secondary: #06b6d4;
--accent-secondary-rgb: 6, 182, 212;
--accent-primary: #a78bfa;
--accent-primary-rgb: 167, 139, 250;
--accent-tertiary: #fcd34d;
--accent-tertiary-rgb: 252, 211, 77;
--accent-quaternary: #c084fc;
--accent-quaternary-rgb: 192, 132, 252;
--accent-quinary: #f59e0b;
--accent-quinary-rgb: 245, 158, 11;
--accent-mystic: #fcd34d;
--accent-mystic-rgb: 252, 211, 77;
--accent-gold: #d4af37;
--accent-gold-rgb: 212, 175, 55;
--accent-gold-bright: #fef08a;
--accent-gold-bright-rgb: 254, 240, 138;
--accent-gold-glow: #fde047;
--accent-gold-glow-rgb: 253, 224, 71;
/* Mystic Accent Variants */
--mystic-accent-soft: rgba(var(--accent-mystic-rgb), 0.15);
--mystic-accent-medium: rgba(var(--accent-mystic-rgb), 0.4);
--mystic-accent-strong: rgba(var(--accent-mystic-rgb), 0.8);
--mystic-accent-glow: 0 0 20px rgba(var(--accent-mystic-rgb), 0.4);
/* Primary Accent Variants */
--primary-accent-soft: rgba(var(--accent-primary-rgb), 0.15);
--primary-accent-medium: rgba(var(--accent-primary-rgb), 0.4);
--primary-accent-strong: rgba(var(--accent-primary-rgb), 0.8);
--primary-accent-glow: 0 0 20px rgba(var(--accent-primary-rgb), 0.4);
/* Semantic Colors */
--success: #10b981;
--success-rgb: 16, 185, 129;
--danger: #f43f5e;
--danger-rgb: 244, 63, 94;
--warning: #f59e0b;
--info: #3b82f6;
--whatsapp: #25d366;
--whatsapp-rgb: 37, 211, 102;
--whatsapp-hover: #075e54;
/* Brand Colors */
--brand-google-blue: #4285F4;
--brand-google-green: #34A853;
--brand-google-yellow: #FBBC05;
--brand-google-red: #EA4335;
/* Feature Specific Colors (Result Screen) */
--color-growth: #60a5fa;
--color-growth-rgb: 96, 165, 250;
--color-shadow: #f43f5e;
--color-match: #10b981;
--color-match-light: #34d399;
--color-shadow-light: #fecaca;
/* Hub & Interaction Accents */
--hub-accent: #a8b4ff;
--hub-accent-rgb: 168, 180, 255;
--hub-accent-soft: rgba(var(--hub-accent-rgb), 0.08);
--hub-accent-medium: rgba(var(--hub-accent-rgb), 0.15);
--hub-accent-strong: rgba(var(--hub-accent-rgb), 0.25);
--hub-accent-glow: 0 0 24px rgba(var(--hub-accent-rgb), 0.25);
/* Quest Type Colors */
--color-quest-mirror: #7ec8e3;
--color-quest-shadow: #b388ff;
--color-quest-impulse: #ffd180;
--color-quest-chronicle: #a5d6a7;
/* Shadow Sections (Behavioral/Moral) */
--color-shadow-surface: rgba(244, 63, 94, 0.04);
--color-shadow-border: rgba(244, 63, 94, 0.1);
/* Utility Colors */
--white: #ffffff;
--white-rgb: 255, 255, 255;
--black: #000000;
--black-rgb: 0, 0, 0;
/* Semantics */
--overlay-dark: rgba(0, 0, 0, 0.8);
/* Glassmorphism 2.0 (Liquid Glass) */
--glass-blur: 15px;
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-border-faint: rgba(255, 255, 255, 0.03);
--glass-light: rgba(255, 255, 255, 0.05);
--glass-overlay: rgba(0, 0, 0, 0.6);
--glass-overlay-rgb: 0, 0, 0;
--glass-overlay-soft: rgba(0, 0, 0, 0.4);
--glass-overlay-deep: rgba(0, 0, 0, 0.85);
--glass-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.5);
/* Semantic Surfaces */
--surface-base: var(--bg-dark);
--surface-bg: var(--bg-dark);
--surface-glass: var(--glass-bg);
--surface-glass-deep: var(--glass-overlay-deep);
--surface-glass-soft: rgba(var(--bg-dark-rgb), 0.45);
--surface-elevated: rgba(255, 255, 255, 0.06);
--surface-ghost: rgba(255, 255, 255, 0.08);
--surface-accent: rgba(var(--accent-primary-rgb), 0.08);
--surface-accent-secondary: rgba(var(--accent-secondary-rgb), 0.08);
/* Semantic Borders */
--border-glass: var(--glass-border);
--border-subtle: var(--glass-border);
--border-accent-primary: rgba(var(--accent-primary-rgb), 0.4);
--border-accent-secondary: rgba(var(--accent-secondary-rgb), 0.4);
--border-accent-secondary-soft: rgba(var(--accent-secondary-rgb), 0.15);
/* Z-Index Scale */
--z-negative: -1;
--z-base: 1;
--z-dock: 10;
--z-nav: 50;
--z-overlay: 100;
--z-modal: 200;
--z-toast: 500;
--z-max: 9999;
/* Timing & Easing (R-Core) */
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
--transition-fast: 0.2s var(--ease-out-expo);
--transition-smooth: 0.4s var(--ease-out-expo);
--transition-deliberate: 0.8s var(--ease-out-expo);
/* Effects */
--shadow-glow: 0 0 15px var(--accent-primary);
--glow-cap-soft: 8px;
--glow-cap-medium: 12px;
--glow-cap-hard: 20px;
/* Portal & Warp Transformation Tokens */
--portal-glow: 0 0 60px rgba(var(--accent-primary-rgb), 0.5);
--portal-size: 300px;
--warp-intensity: 0;
--plasma-speed: 2s;
--descent-progress: 0;
/* Legacy Signal Aliases (kept for older orb/loading visuals; not product paths) */
--path-logic-color: #00e5ff;
--path-logic-rgb: 0, 229, 255;
--path-intuition-color: #f59e0b;
--path-intuition-rgb: 245, 158, 11;
/* HEXACO Dimension Colors */
--color-dim-o: #8b5cf6;
--color-dim-o-rgb: 139, 92, 246;
--color-dim-c: #3b82f6;
--color-dim-c-rgb: 59, 130, 246;
--color-dim-e: #f59e0b;
--color-dim-e-rgb: 245, 158, 11;
--color-dim-a: #10b981;
--color-dim-a-rgb: 16, 185, 129;
--color-dim-n: #ec4899;
--color-dim-n-rgb: 236, 72, 153;
--color-dim-h: #06b6d4;
--color-dim-h-rgb: 6, 182, 212;
/* Orb Specific Tokens */
--orb-cyan-mid: #0891b2;
--orb-cyan-deep: #083344;
--orb-violet-mid: #6d28d9;
--orb-violet-deep: #2e1065;
--orb-amber-mid: #b45309;
--orb-amber-deep: #78350f;
/* Scene-Specific Cool/Warm Depth Colors */
--scene-logic-bright: #b8f7ff;
--scene-logic-deep: #1e1b4b;
--scene-intuition-bright: #ddd6fe;
--scene-intuition-deep: #4c1d95;
/* Atmospheric Mood Tokens */
--mood-amber: #f59e0b;
--mood-amber-rgb: 245, 158, 11;
--mood-mint: #a7f3d0;
--mood-mint-rgb: 167, 243, 208;
--mood-flare: #f97316;
--mood-flare-rgb: 249, 115, 22;
--mood-neon: #22d3ee;
--mood-neon-rgb: 34, 211, 238;
--mood-cyan: #06b6d4;
--mood-cyan-rgb: 6, 182, 212;
--mood-slate: #94a3b8;
--mood-slate-rgb: 148, 163, 184;
--mood-indigo: #818cf8;
--mood-indigo-rgb: 129, 140, 248;
--mood-void-night: #1e1b4b;
--mood-void-purple: #2e1a4b;
--mood-violet: #a78bfa;
--mood-violet-rgb: 167, 139, 250;
/* Atmospheric Tints – richer for Life-is-Strange mood system */
--tint-amber: rgba(60, 30, 0, 0.35);
--tint-mint: rgba(10, 40, 25, 0.28);
--tint-flare: rgba(55, 12, 0, 0.38);
--tint-neon: rgba(0, 30, 45, 0.32);
--tint-cyan: rgba(0, 20, 50, 0.32);
--tint-slate: rgba(15, 18, 28, 0.28);
--tint-indigo: rgba(8, 0, 35, 0.38);
--tint-violet: rgba(20, 5, 40, 0.28);
/* Space Descent & Plasma Tokens (R-Custom) */
--plasma-glow: 0 0 30px rgba(167, 139, 250, 0.6);
--impulse-accent: #fcd34d;
--space-depth-z: 1200px;
--liquid-btn-filter: url(#gooey-filter);
--warp-speed-blur: 0px;
--bg-accent-gradient: radial-gradient(circle at 50% 50%, rgba(var(--accent-primary-rgb), 0.1), transparent 80%);
--bg-dark-accent: #050510;
--bg-dark-accent-rgb: 5, 5, 16;
--accent-magenta: #f472b6;
--accent-magenta-rgb: 244, 114, 182;
/* Layout Guard Hardening */
--layout-max-width: 1440px;
--layout-safe-padding: clamp(2rem, 5vw, 6rem);
--layout-bottom-safe: clamp(100px, 15vh, 180px);
--report-shell-max-width: 940px;
/* ==========================================================
* Editorial Aetherpunk – LANDING-VISUAL-02 (Brief v2.1)
* Reference: Persona_Quest_Landingpage_Visual_Brief.md §6, §7, §8
* Two-metal restraint: cool platinum (structural) + warm antique
* gold (primary actions, chapter sigil). No third metal without
* documented exception (Brief §2.5).
* ========================================================== */
/* Editorial Surfaces */
--surface-page: #080b13;
--surface-page-rgb: 8, 11, 19;
--surface-card: #0e1220;
--surface-card-rgb: 14, 18, 32;
--surface-card-strong: #131826;
--surface-card-strong-rgb: 19, 24, 38;
/* Two-Metal Palette */
--metal-platinum: #a9b0bb;
--metal-platinum-rgb: 169, 176, 187;
--metal-platinum-border: rgba(169, 176, 187, 0.32);
--metal-platinum-inset: rgba(169, 176, 187, 0.09);
--metal-platinum-strong: rgba(169, 176, 187, 0.55);
--metal-gold: #d6b87a;
--metal-gold-rgb: 214, 184, 122;
--metal-gold-border: rgba(214, 184, 122, 0.55);
--metal-gold-inset: rgba(214, 184, 122, 0.16);
--metal-gold-strong: rgba(214, 184, 122, 0.70);
/* Kodex axes: stable semantic tokens for reveal, report and artifact UI. */
--kodex-system-lawful: #d8bd7a;
--kodex-system-neutral: #8fcac5;
--kodex-system-chaotic: #c48a6a;
--kodex-focus-care: #8ab5d8;
--kodex-focus-fairness: #d8bd7a;
--kodex-focus-loyalty: #b58ee8;
/* Editorial Text Scale */
--text-aether-primary: #f1ede1;
--text-aether-body: #c8ccd2;
--text-aether-muted: #8a8f97;
--text-aether-faint: #6e7176;
--text-aether-extra-faint: #4a4d52;
/* Mono-Caps Letter-Spacing */
--ls-mono-button: 0.28em;
--ls-mono-eyebrow: 0.30em;
--ls-mono-marker: 0.32em;
--ls-mono-chip: 0.22em;
--ls-italic-title: 0.005em;
/* Engraved Double-Border Aliases */
--engrave-platinum: 1px solid var(--metal-platinum-border);
--engrave-platinum-inset: inset 0 0 0 1px var(--metal-platinum-inset);
--engrave-gold: 1px solid var(--metal-gold-border);
--engrave-gold-inset: inset 0 0 0 1px var(--metal-gold-inset);
/* ==========================================================
* Unified Visual Language – „Deco-Rahmen + persönliche Farbe"
* Ref: Persona_Quest_Unified_Visual_Language_2026-06-14.md
* Schicht A (Rahmen) = statische Metalle/Gravur (oben definiert).
* Schicht B (Akzent) = persönliche Signal-Farbe; zur Laufzeit via
* getPersonaThemeVars() auf .hub-shell/Report injiziert. Hier nur
* sinnvolle Fallbacks, damit die Aliase auch ohne Ergebnis auflösen.
* ========================================================== */
/* Persona-Akzent Fallbacks (werden zur Laufzeit überschrieben) */
--pq-signal-rgb: 167, 139, 250; /* Fallback: arcane violet */
--pq-signal-secondary-rgb: 6, 182, 212; /* Fallback: cyan */
/* Verzierungs-Intensität – EINE Stellschraube (0 ruhig … 1 reich) */
--deco-ornament-level: 0.62;
/* Schicht B – sichtbare Stufen des persönlichen Akzents.
Ersetzen die unsichtbaren ~0.05-Floors im Hub. */
--accent-veil-faint: rgba(var(--pq-signal-rgb), 0.10);
--accent-veil-soft: rgba(var(--pq-signal-rgb), 0.20);
--accent-veil-strong: rgba(var(--pq-signal-rgb), 0.34);
--accent-line: rgba(var(--pq-signal-rgb), 0.55);
--accent-glow-visible: 0 0 28px rgba(var(--pq-signal-rgb), 0.28);
--accent-ink: color-mix(in oklab, rgb(var(--pq-signal-rgb)) 82%, white);
/* Schicht A – sichtbare Metall-Schleier (Zwei-Metall-Rahmen) */
--metal-gold-veil: rgba(var(--metal-gold-rgb), 0.10);
--metal-gold-veil-strong: rgba(var(--metal-gold-rgb), 0.20);
--metal-platinum-veil: rgba(var(--metal-platinum-rgb), 0.08);
/* Deco-Panel-Grammatik – geteilter Behälter über alle Flächen.
Graphit-Karte + dezenter Persona-Schleier + Glaslicht. */
--panel-radius: 8px;
/* Mehrstufige, graphit-blau getönte Elevation – wirkt edler als ein
einzelner harter Schwarz-Schatten. */
--panel-shadow:
0 3px 8px rgba(4, 7, 13, 0.4),
0 14px 28px rgba(4, 7, 13, 0.36),
0 28px 60px rgba(4, 7, 13, 0.4);
--panel-bg:
linear-gradient(135deg, var(--metal-gold-veil), transparent 46%),
linear-gradient(34deg, transparent 40%, var(--metal-platinum-veil), transparent 80%),
linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
var(--surface-card);
--panel-bg-strong:
linear-gradient(135deg, var(--metal-gold-veil-strong), transparent 48%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
var(--surface-card-strong);
--panel-border: var(--metal-platinum-border);
--panel-border-gold: var(--metal-gold-border);
--panel-engrave: var(--engrave-platinum-inset);
--panel-engrave-gold: var(--engrave-gold-inset);
}
/* Responsiveness (R5 Implementation) */
@media (max-width: 768px) {
:root {
--glass-blur: 8px;
--glow-cap-soft: 6px;
--glow-cap-medium: 10px;
--glow-cap-hard: 16px;
}
}
/* Accessibility: Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
html:root body * {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
scroll-behavior: auto;
}
/* Keep layout transforms but remove decorative ones */
html:root body .plasma-text {
animation: none;
background-position: 0% center;
}
html:root body .float-subtle,
html:root body .vision-track {
animation: none;
}
}
.keyword-ping-trigger {
display: inline;
color: var(--accent-primary);
font-weight: 600;
cursor: help;
border-bottom: 1px dashed rgba(var(--accent-primary-rgb), 0.3);
transition: all 0.3s var(--ease-out-expo);
}
.keyword-ping-trigger:hover {
color: var(--accent-mystic);
border-color: var(--accent-mystic);
text-shadow: 0 0 10px rgba(var(--accent-mystic-rgb), 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
min-height: 100%;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, var(--bg-slate) 0%, var(--bg-dark) 100%);
color: var(--text-main);
overflow-x: hidden;
overflow-y: auto;
}
#root {
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.fade-in { opacity: 1; transition: opacity 0.4s ease-out; }
.fade-out { opacity: 0; transition: opacity 0.3s ease-in; }
/* Global grain overlay – sits over entire app, pointer-events:none */
.grain-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 0.022;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size: 220px 220px;
}
@media (max-width: 480px) {
.grain-overlay { opacity: 0.014; }
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
font-weight: 500;
}
a:hover {
text-decoration: underline;
opacity: 0.8;
}
a:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 4px;
border-radius: 4px;
}
/* Global List Reset (Prevents Ghost Dots) */
ul, ol {
list-style: none; /* Default to no bullets for our Modern-Mystic UI */
padding: 0;
margin: 0;
}
/* Explicit opt-in for textual lists if needed */
.text-list {
list-style: disc;
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.text-list li {
margin-bottom: 0.5rem;
}
/* Utilities */
.hidden-preload {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
z-index: var(--z-negative);
}
/* Brand Typography - Defined in variables.css */
/* Base Typography - Mobile First */
body {
font-family: var(--font-body);
font-size: var(--text-sm); /* 14px */
line-height: 1.5;
color: var(--text-main);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bg-dark);
}
@media (min-width: 768px) {
body {
font-size: var(--text-base); /* 16px */
}
}
h1, h2, h3, .card-title, .result-archetype-title, .step-number {
font-family: var(--font-heading);
letter-spacing: var(--letter-spacing-radical);
font-weight: 700;
}
/* Modern-Mystic Special Styles */
.font-serif {
font-family: var(--font-serif);
text-transform: none;
font-style: italic;
font-weight: 400;
}
.font-mono {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: var(--text-xs);
opacity: 0.8;
}
.intro-title {
font-family: var(--font-serif);
font-size: var(--text-6xl);
line-height: 1.1;
text-transform: none;
font-style: italic;
margin-bottom: var(--spacing-6);
color: var(--text-primary);
text-shadow: 0 0 40px rgba(var(--accent-primary-rgb), 0.2);
}
.archetype-title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
letter-spacing: var(--letter-spacing-radical);
text-transform: uppercase;
background: linear-gradient(to right, var(--text-primary), var(--accent-primary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-label {
font-family: var(--font-mono);
color: var(--accent-secondary);
display: block;
margin-bottom: var(--spacing-2);
}
/* Typography Color Utilities */
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-arcane); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-white { color: var(--white); }
.text-secondary { color: var(--text-secondary); }
/* Typography Utilities */
.text-metadata {
font-size: var(--text-xs); /* 12px */
color: var(--text-muted);
line-height: 1.4;
}
@media (min-width: 768px) {
.text-metadata {
font-size: var(--text-sm); /* 14px */
}
}
.text-bold { font-weight: 700; }
.text-extrabold { font-weight: 800; }
.text-body-large {
font-size: var(--text-base); /* 16px */
line-height: 1.6;
}
@media (min-width: 768px) {
.text-body-large {
font-size: var(--text-xl); /* 20px */
}
}
.text-match-light { color: var(--color-match-light); }
.text-shadow { color: var(--color-shadow); }
.text-growth { color: var(--color-growth); }
.text-match { color: var(--color-match); }
.clear-text {
color: var(--text-main);
line-height: 1.6;
}
.glitch-text {
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 900;
text-shadow:
-1px 0px 0px rgba(255, 0, 193, 0.2),
1px 0px 0px rgba(0, 255, 249, 0.2),
0px 0px var(--glow-cap-soft) rgba(255,255,255,0.05);
margin-left: 0.15em;
transition: all 0.3s var(--ease-out-expo);
position: relative;
}
@media (min-width: 768px) {
.glitch-text {
letter-spacing: 0.25em;
margin-left: 0.25em;
}
}
.glitch-text:hover {
animation: rgb-glitch 0.6s infinite alternate;
text-shadow:
-2px 0px 0px rgba(255, 0, 193, 0.4),
2px 0px 0px rgba(0, 255, 249, 0.4),
0px 0px var(--glow-cap-medium) rgba(255,255,255,0.2);
cursor: help;
}
@media (prefers-reduced-motion: reduce) {
.glitch-text:hover {
animation: none;
}
}
/* 2. Shared Layer: Patterns, Utilities, Overlays */
/* Standard Button System (Mobile First) */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
font-weight: 700;
font-family: 'Outfit', sans-serif;
cursor: pointer;
transition: all 0.3s var(--ease-out-expo);
border: none;
outline: none;
gap: 8px;
text-decoration: none;
padding: var(--spacing-3) var(--spacing-6);
font-size: 15px;
}
@media (min-width: 768px) {
.btn {
padding: 14px 28px;
font-size: 16px;
}
}
.btn:active {
transform: translateY(1px) scale(0.98);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Variants */
.btn-primary {
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
color: white;
box-shadow: 0 8px 24px rgba(var(--accent-primary-rgb), 0.4);
}
.btn-primary:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 30px rgba(var(--accent-primary-rgb), 0.6);
}
.btn-secondary {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
color: var(--accent-arcane);
}
.btn-secondary:hover {
background: var(--glass-light);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-ghost {
background: transparent;
color: var(--text-muted);
}
.btn-ghost:hover {
background: var(--glass-border-faint);
color: white;
}
.btn-arcane {
background: var(--bg-slate);
border: 1px solid var(--accent-arcane);
color: var(--accent-arcane);
box-shadow: 0 0 10px rgba(var(--accent-arcane-rgb, 157, 141, 241), 0.1);
}
.btn-arcane:hover {
box-shadow: 0 0 20px var(--accent-arcane);
background: rgba(var(--accent-arcane-rgb, 157, 141, 241), 0.05);
transform: translateY(-1px);
}
/* Sizes */
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-md { padding: 14px 28px; font-size: 16px; }
.btn-lg { padding: 18px 36px; font-size: 18px; }
/* Desktop overrides for sizes if needed */
@media (min-width: 768px) {
.btn-lg { padding: 20px 42px; font-size: 20px; }
}
/* Utilities */
.btn-full { width: 100%; }
.btn-glow { box-shadow: 0 0 20px var(--accent-primary); }
.btn-pill {
border-radius: 50px;
background: var(--glass-overlay);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--white);
border: 1px solid var(--glass-border);
}
.btn-pill:hover {
background: var(--glass-overlay-deep);
border-color: rgba(255, 255, 255, 0.3);
}
.secondary-button {
background: var(--glass-light);
color: white;
border: 1px solid var(--glass-border);
padding: 12px;
border-radius: 12px;
font-weight: 600;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.2s;
width: 100%;
}
@media (min-width: 768px) {
.secondary-button {
padding: 14px;
}
}
.secondary-button:hover {
background: var(--glass-border-faint);
}
.action-button {
background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
color: white;
border: none;
border-radius: 12px;
padding: 16px 20px;
font-size: 15px;
font-weight: 700;
font-family: 'Outfit', sans-serif;
cursor: pointer;
width: 100%;
box-shadow: 0 10px 30px rgba(var(--success-rgb, 16, 185, 129), 0.4);
transition: all 0.3s;
}
@media (min-width: 768px) {
.action-button {
padding: 18px 24px;
font-size: 16px;
}
}
.action-button:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(var(--success-rgb, 16, 185, 129), 0.6);
}
.share-button {
background: var(--whatsapp);
color: white;
border: none;
padding: 12px;
border-radius: 10px;
font-weight: 600;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.2s;
}
@media (min-width: 768px) {
.share-button {
padding: 14px;
}
}
.share-button:hover {
background: var(--whatsapp-hover);
}
.copy-button {
background: var(--glass-border-faint);
color: white;
border: none;
padding: 12px;
border-radius: 10px;
font-weight: 600;
flex: 1;
cursor: pointer;
transition: all 0.2s;
}
@media (min-width: 768px) {
.copy-button {
padding: 14px;
}
}
.copy-button:hover {
background: var(--glass-light);
}
.copy-button.copied {
background: var(--success);
}
.text-button {
background: none;
border: none;
color: var(--text-muted);
font-size: 14px;
font-weight: 600;
cursor: pointer;
padding: 8px 16px;
transition: color 0.2s;
}
.text-button:hover {
color: white;
}
/* Floating Sound Toggle */
.sound-toggle {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--glass-overlay-deep);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
transition: all 0.3s var(--ease-out-expo);
font-size: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.sound-toggle:hover {
transform: scale(1.1) translateY(-2px);
background: var(--glass-light);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 12px 40px rgba(var(--accent-primary-rgb), 0.3);
}
.sound-toggle:active {
transform: scale(0.95);
}
@media (max-width: 768px) {
.sound-toggle {
bottom: 20px;
right: 20px;
width: 44px;
height: 44px;
font-size: 18px;
}
}
/* Crystalline / Arcane Variant (Hardened UI) */
.btn-crystalline {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border-faint);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 10px 20px;
border-radius: 14px;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.4s var(--ease-out-expo);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-crystalline:hover {
background: rgba(var(--accent-primary-rgb), 0.08);
color: white;
border-color: var(--accent-primary);
box-shadow: 0 0 25px rgba(var(--accent-primary-rgb), 0.25);
letter-spacing: 2.5px;
transform: translateY(-1px);
}
.btn-crystalline:active {
transform: translateY(1px) scale(0.97);
}
/* Arcane Glass CTA (Premium Branding) */
.btn-arcane-glass {
background: rgba(10, 12, 20, 0.75); /* Deep obsidian */
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
border: 0.5px solid rgba(var(--accent-secondary-rgb), 0.3);
color: var(--white);
padding: 18px 52px;
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.35em;
text-transform: uppercase;
border-radius: 40px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.7),
inset 0 0 30px rgba(var(--accent-secondary-rgb), 0.05);
display: inline-flex;
align-items: center;
justify-content: center;
outline: none;
}
.btn-arcane-glass::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(var(--white-rgb), 0.08),
transparent 40%,
rgba(var(--accent-secondary-rgb), 0.05) 80%
);
pointer-events: none;
}
.btn-arcane-glass::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 40px;
padding: 1px;
background: linear-gradient(
135deg,
rgba(var(--accent-secondary-rgb), 0.4),
rgba(var(--accent-primary-rgb), 0.4)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.6;
transition: opacity 0.6s ease;
}
/* Void-Glass CTA (New Premium Hero Style) - Minimalist & Sentient */
.btn-void-glass {
background: rgba(8, 10, 15, 0.9); /* Deep abyss */
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(var(--accent-secondary-rgb), 0.25);
color: var(--white);
padding: 20px 60px;
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.45em;
text-transform: uppercase;
border-radius: 4px; /* More crystalline/shard-like than pill */
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.7),
inset 0 0 40px rgba(var(--accent-secondary-rgb), 0.05);
display: inline-flex;
align-items: center;
justify-content: center;
outline: none;
}
.btn-void-glass::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(var(--accent-secondary-rgb), 0.2),
transparent 50%,
rgba(var(--accent-primary-rgb), 0.1) 100%
);
opacity: 0.6;
pointer-events: none;
}
.btn-void-glass::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(var(--accent-secondary-rgb), 0.2),
transparent
);
opacity: 0; /* Hide by default to prevent stripe bleed when overflow-visible (Task 18) */
transition: opacity 0.4s ease;
pointer-events: none;
}
.btn-void-glass:hover {
background: rgba(var(--accent-secondary-rgb), 0.05);
border-color: rgba(var(--accent-secondary-rgb), 0.7);
box-shadow:
0 15px 45px rgba(var(--accent-secondary-rgb), 0.35),
inset 0 0 20px rgba(var(--accent-secondary-rgb), 0.1);
letter-spacing: 0.5em;
transform: translateY(-2px) scale(1.01);
}
.btn-void-glass:hover::after {
left: 100%;
transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-void-glass .btn-label {
position: relative;
z-index: 2;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}
.btn-arcane-glass:hover {
background: rgba(var(--accent-secondary-rgb), 0.12);
border-color: rgba(var(--accent-secondary-rgb), 0.6);
box-shadow:
0 15px 60px rgba(var(--accent-secondary-rgb), 0.35),
0 0 20px rgba(var(--accent-primary-rgb), 0.2);
letter-spacing: 0.38em;
transform: translateY(-3px) scale(1.02);
}
.btn-arcane-glass:hover::after {
opacity: 1;
}
.btn-arcane-glass .btn-glow-layer {
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(var(--accent-secondary-rgb), 0.4),
transparent 65%
);
opacity: 0;
transition: opacity 0.5s ease;
}
.btn-arcane-glass:hover .btn-glow-layer {
opacity: 1;
}
/* Calmer CTA Pulsation - Ambient & Slow */
.cta-glow-pulse {
position: absolute;
inset: -6px;
border-radius: 48px;
box-shadow:
0 0 45px rgba(var(--accent-secondary-rgb), 0.2),
0 0 80px rgba(var(--accent-primary-rgb), 0.08);
opacity: 0;
pointer-events: none;
animation: cta-pulse-ambient 12s infinite ease-in-out;
}
@keyframes cta-pulse-ambient {
0%, 100% { opacity: 0.02; transform: scale(0.98); filter: blur(6px); }
50% { opacity: 0.12; transform: scale(1.04); filter: blur(10px); }
}
/* Global Button Hardening (R8/Nav Gore Prevention) */
button {
-webkit-tap-highlight-color: transparent;
outline: none;
}
button:focus-visible {
outline: 2px solid rgba(var(--metal-gold-rgb), 0.78);
outline-offset: 4px;
box-shadow:
0 0 0 1px rgba(241, 237, 225, 0.18),
0 0 0 4px rgba(5, 7, 11, 0.74);
}
/* ============================================================
* Editorial Aetherpunk – LANDING-VISUAL-02 (Brief v2.1)
* Two-metal restraint: warm antique gold for primary actions,
* cool platinum for secondary. Mono-caps with wide letter-spacing,
* engraved double-border via outer border + inset shadow.
* No drop shadows, no glows, no gradients.
*
* Usage:
*
*
*
* Reference: Persona_Quest_Landingpage_Visual_Brief.md §7.5, §8.2, §11.2.
* ============================================================ */
.btn-aetherpunk-primary,
.btn-aetherpunk-secondary {
font-family: var(--font-mono);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--ls-mono-button);
border-radius: 2px;
padding: 13px 24px;
font-size: 0.6875rem; /* 11px – Aetherpunk Mono-Caps Skala */
transition:
border-color 0.3s var(--ease-out-expo),
box-shadow 0.3s var(--ease-out-expo),
color 0.3s var(--ease-out-expo);
}
.btn-aetherpunk-primary {
background: var(--surface-card-strong);
color: var(--metal-gold);
border: var(--engrave-gold);
box-shadow: var(--engrave-gold-inset);
}
.btn-aetherpunk-primary:hover {
border-color: var(--metal-gold);
box-shadow: inset 0 0 0 1px var(--metal-gold-strong);
color: var(--text-aether-primary);
}
.btn-aetherpunk-primary:active {
transform: translateY(1px) scale(0.99);
}
.btn-aetherpunk-secondary {
background: transparent;
color: var(--text-aether-body);
border: var(--engrave-platinum);
box-shadow: var(--engrave-platinum-inset);
}
.btn-aetherpunk-secondary:hover {
border-color: var(--metal-platinum-strong);
box-shadow: inset 0 0 0 1px var(--metal-platinum-strong);
color: var(--text-aether-primary);
}
.btn-aetherpunk-primary:focus-visible,
.btn-aetherpunk-secondary:focus-visible {
border-color: var(--metal-gold-strong);
color: var(--text-aether-primary);
}
.btn-aetherpunk-secondary:active {
transform: translateY(1px) scale(0.99);
}
/* Disabled-State respektiert Editorial-Regel:
* keine Glows, nur reduzierte Opazität und kein Hover-Versprechen. */
.btn-aetherpunk-primary:disabled,
.btn-aetherpunk-secondary:disabled,
.btn-aetherpunk-primary[aria-disabled='true'],
.btn-aetherpunk-secondary[aria-disabled='true'] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Glassmorphism 2.0 Utility */
.glass-liquid, .glass-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)) saturate(180%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: var(--glass-container-padding, var(--spacing-6));
box-shadow: var(--glass-shadow);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.glass-liquid:hover, .glass-card:hover {
border-color: rgba(var(--white-rgb), 0.25);
box-shadow: 0 12px 40px rgba(var(--accent-primary-rgb), 0.2);
}
.glass-v2 {
background: var(--glass-light);
backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: 32px;
padding: 24px; /* Mobile first */
box-shadow: 0 40px 100px rgba(var(--black-rgb), 0.6);
}
@media (min-width: 768px) {
.glass-v2 {
padding: 48px;
}
}
/* ============================================================
* Editorial Aetherpunk – LANDING-VISUAL-02 (Brief v2.1)
* Engraved card variant: scharfe Ecken, eingravierter Doppelrand,
* keine Glas-Blur (Surface ist solide, kein Glasstil). Vier
* CornerChevron-Komponenten werden vom GlassContainer automatisch
* an den Ecken platziert – overflow: visible ist deshalb Pflicht.
*
* Reference: Persona_Quest_Landingpage_Visual_Brief.md §7.5, §9.1, §10.1.
* ============================================================ */
.glass-engraved {
position: relative;
background: var(--surface-card);
border: var(--engrave-platinum);
box-shadow: var(--engrave-platinum-inset);
border-radius: 0;
padding: var(--glass-container-padding, var(--spacing-6));
overflow: visible;
transition:
border-color 0.3s var(--ease-out-expo),
box-shadow 0.3s var(--ease-out-expo);
}
.glass-engraved:hover {
border-color: var(--metal-platinum-strong);
box-shadow: inset 0 0 0 1px var(--metal-platinum-strong);
}
/* Gold-Variante für Hero- und Signatur-Karten (Brief §9.1).
* Verwendung über metal="gold" Prop am GlassContainer. */
.glass-engraved.is-gold {
border: var(--engrave-gold);
box-shadow: var(--engrave-gold-inset);
}
.glass-engraved.is-gold:hover {
border-color: var(--metal-gold-strong);
box-shadow: inset 0 0 0 1px var(--metal-gold-strong);
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spinReverse { 100% { transform: rotate(-360deg); } }
@keyframes pulseCore { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 30px white; } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes pulse-indicator {
0% { transform: scale(1); box-shadow: 0 0 0px var(--accent-secondary); border-color: rgba(var(--accent-secondary-rgb), 0.4); }
50% { transform: scale(1.1); box-shadow: 0 0 12px var(--accent-secondary); border-color: rgba(var(--accent-secondary-rgb), 0.8); }
100% { transform: scale(1); box-shadow: 0 0 0px var(--accent-secondary); border-color: rgba(var(--accent-secondary-rgb), 0.4); }
}
@keyframes floatEmoji { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes slideInFromRight {
0% { transform: translateX(50px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutToLeft {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(-50px); opacity: 0; }
}
@keyframes slideUp {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes creatureSubtleBreath {
0% { transform: scale(1.0); }
100% { transform: scale(1.05); }
}
@keyframes creatureBreath {
0%, 100% { transform: scale(1) translateY(0px); }
50% { transform: scale(1.03) translateY(-4px); }
}
@keyframes creatureReveal {
0% {
opacity: 0;
filter: blur(20px) brightness(2);
transform: scale(0.85);
}
60% {
opacity: 1;
filter: blur(2px) brightness(1.3);
transform: scale(1.04);
}
100% {
opacity: 1;
filter: blur(0px) brightness(1);
transform: scale(1);
}
}
@keyframes auraGlow {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.08); }
}
@keyframes shadowGlowRotate {
0% { transform: scale(1); opacity: 0.6; filter: hue-rotate(0deg); }
50% { transform: scale(1.02); opacity: 1; filter: hue-rotate(30deg); }
100% { transform: scale(1); opacity: 0.6; filter: hue-rotate(0deg); }
}
@keyframes tabReveal {
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseIcon {
0% { transform: scale(0.9); opacity: 0.7; }
100% { transform: scale(1.1); opacity: 1; }
}
@keyframes dotPulse {
0%, 100% { transform: scale(0.5); opacity: 0.3; }
50% { transform: scale(1.2); opacity: 1; }
}
@keyframes rgb-glitch {
0% { filter: none; }
20% {
filter: drop-shadow(-2px 0 0 rgba(var(--danger-rgb), 0.7))
drop-shadow(2px 0 0 rgba(var(--accent-secondary-rgb), 0.7));
transform: translateX(1px);
}
40% {
filter: drop-shadow(2px 0 0 rgba(var(--danger-rgb), 0.5))
drop-shadow(-2px 0 0 rgba(var(--accent-secondary-rgb), 0.5));
transform: translateX(-1px);
}
60% {
filter: drop-shadow(-1px 0 0 rgba(var(--danger-rgb), 0.3));
transform: translateX(0.5px);
}
100% { filter: none; transform: translateX(0); }
}
@keyframes liquid-text {
0% { letter-spacing: -0.1em; opacity: 0; filter: blur(8px); }
60% { letter-spacing: 0.05em; opacity: 0.8; filter: blur(2px); }
100% { letter-spacing: 0; opacity: 1; filter: blur(0); }
}
@keyframes float-liquid {
0%, 100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-10px) rotate(1deg); }
66% { transform: translateY(5px) rotate(-0.5deg); }
}
.animation-slide-in {
animation: slideInFromRight 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.animation-slide-out {
animation: slideOutToLeft 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Reduced Motion Support (R5) */
@media (prefers-reduced-motion: reduce) {
.animation-slide-in, .animation-slide-out {
animation: none;
opacity: 1;
}
}
.glitch-flash {
animation: rgb-glitch 0.2s steps(2, end) infinite;
filter: brightness(1.5) contrast(1.2);
pointer-events: none;
}
/**
* Sketchy Borders & Radical UI Textures
* Uses SVG filters from index.html to create organic, hand-drawn effects.
*/
.sketchy-border {
position: relative;
border: 2px solid var(--glass-border);
filter: url(#sketchy);
transition: filter 0.3s var(--ease-out-expo);
}
.sketchy-border:hover {
filter: url(#sketchy) brightness(1.2);
}
/* Radical Glass Card with Organic Edge */
.glass-card-radical {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: 4px; /* Slightly sharper but then distorted by mask */
position: relative;
overflow: hidden;
}
.glass-card-radical::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--accent-primary);
opacity: 0.3;
pointer-events: none;
filter: url(#sketchy);
}
/* Magnetic Button Base Style */
.btn-magnetic {
position: relative;
transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform;
}
.btn-magnetic:active {
transform: scale(0.95);
}
/* Organic Aether Overlay */
.aether-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
background:
radial-gradient(circle at 20% 30%, rgba(var(--accent-primary-rgb), 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(var(--accent-secondary-rgb), 0.05) 0%, transparent 50%);
filter: blur(60px);
animation: aetherPulse 15s infinite alternate ease-in-out;
}
@keyframes aetherPulse {
0% { opacity: 0.4; transform: scale(1); }
100% { opacity: 0.7; transform: scale(1.1); }
}
/* Dreamy Vignette */
.dreamy-vignette {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 2;
background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.6) 100%);
}
/* Premium Noise Grain */
.noise-grain {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
opacity: 0.02;
pointer-events: none;
z-index: 999;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
@keyframes fogDrift {
0% { transform: scale(1) translate(0,0); }
50% { transform: scale(1.1) translate(-2%, 3%); }
100% { transform: scale(1.05) translate(2%, -3%); }
}
/* Technical grids removed in favor of organic Aether */
/* Glitch Effects (Spider-Verse inspired) */
.glitch-text {
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 900;
position: relative;
text-shadow:
-1px 0px 0px rgba(var(--danger-rgb), 0.3),
1px 0px 0px rgba(var(--accent-secondary-rgb), 0.3);
transition: all 0.3s ease;
}
.glitch-text:hover {
animation: rgb-glitch 0.6s infinite alternate;
text-shadow:
-2px 0px 0px rgba(var(--danger-rgb), 0.5),
2px 0px 0px rgba(var(--accent-secondary-rgb), 0.5),
0 0 10px rgba(255,255,255,0.2);
}
@keyframes rgb-glitch {
0% { transform: translate(0); }
25% { transform: translate(-1px, 1px); }
50% { transform: translate(1px, -1px); }
75% { transform: translate(-1px, -1px); }
100% { transform: translate(1px, 1px); }
}
/* Sketchy Borders (Comic Book Style) */
.sketchy-border {
border: 2px solid rgba(255, 255, 255, 0.5);
background: var(--glass-bg);
box-shadow:
-1px 0px 3px rgba(var(--danger-rgb), 0.4),
1px 0px 3px rgba(var(--accent-secondary-rgb), 0.4);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sketchy-border:hover {
transform: scale(1.02) rotate(0.5deg);
box-shadow:
-2px 0px 8px rgba(var(--danger-rgb), 0.6),
2px 0px 8px rgba(var(--accent-secondary-rgb), 0.6);
}
@media (max-width: 768px) {
.noise-grain { opacity: 0.013; }
.aether-overlay { filter: blur(40px); }
}
/*
Persona Quest: Refraction Glassmorphism (Glass 3.0)
Zweck: Lichtbrechungen, Mesh-Gradienten & Fluid-Elements
*/
.glass-refraction {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)) saturate(200%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(200%);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
position: relative;
overflow: hidden;
}
.glass-refraction::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle at center,
rgba(var(--accent-primary-rgb), 0.1) 0%,
transparent 50%
);
animation: refraction-rotate 10s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes refraction-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes plasma-flow {
from { background-position: 0% center; }
to { background-position: 200% center; }
}
/* Mesh Gradient for Section Backgrounds */
.mesh-bg-dynamic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: var(--bg-dark);
background-image:
radial-gradient(at 0% 0%, rgba(var(--accent-primary-rgb), 0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(var(--accent-secondary-rgb), 0.15) 0px, transparent 50%);
filter: blur(80px);
opacity: 0.8;
pointer-events: none;
}
/* Liquid Button Masking */
.btn-liquid {
filter: var(--liquid-btn-filter);
transition: transform 0.3s var(--ease-out-expo);
}
.btn-liquid:hover {
transform: scale(1.05);
}
.btn-liquid:active {
transform: scale(0.95);
}
.btn-liquid-content {
position: relative;
z-index: 2;
}
.btn-glow-aura {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(var(--accent-primary-rgb), 0.4), transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.btn-liquid:hover .btn-glow-aura {
opacity: 1;
}
/* Responsiveness (R5) */
@media (max-width: 768px) {
.glass-refraction {
backdrop-filter: blur(8px) saturate(160%);
-webkit-backdrop-filter: blur(8px) saturate(160%);
}
.mesh-bg-dynamic {
filter: blur(40px);
opacity: 0.6;
}
}
@media (max-width: 480px) {
.plasma-text {
animation-duration: 4s; /* Slower on mobile for performance */
}
}
/* ═══════════════════════════════════════════════════════════════════════
Design System: Chips & Badges (Shared)
Standardized indicators for metadata, status, and tags.
═══════════════════════════════════════════════════════════════════════ */
.chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--surface-glass);
border: 1px solid var(--glass-border);
color: var(--text-secondary);
transition: all var(--transition-fast);
white-space: nowrap;
}
/* Variants */
.chip-primary {
border-color: rgba(var(--accent-primary-rgb), 0.3);
color: var(--accent-primary);
}
.chip-secondary {
border-color: rgba(var(--accent-secondary-rgb), 0.3);
color: var(--accent-secondary);
}
.chip-mystic {
border-color: rgba(var(--accent-mystic-rgb), 0.3);
color: var(--accent-mystic);
}
.chip-success {
border-color: rgba(var(--success-rgb), 0.3);
color: var(--success);
}
.chip-warning {
border-color: rgba(var(--warning-rgb), 0.3);
color: var(--warning);
}
.chip-error {
border-color: rgba(var(--error-rgb), 0.3);
color: var(--error);
}
.chip-info {
border-color: rgba(var(--accent-primary-rgb), 0.3);
color: var(--accent-primary);
}
.chip-outline {
background: transparent;
}
.chip-glass {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
/* Icon Support */
.chip-icon {
margin-right: var(--spacing-1);
font-size: 1.2em;
}
/* Stat Chip specific (from Hub) */
.stat-chip {
display: flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-4);
border-radius: var(--radius-md);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
flex: 1;
}
.stat-chip .value {
display: block;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.stat-chip .label {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
font-family: var(--font-mono);
}
/* ── Responsiveness ────────────────────────────────────────────────── */
@media (max-width: 480px) {
.stat-chip {
padding: var(--spacing-2) var(--spacing-3);
}
.stat-chip .value {
font-size: var(--text-sm);
}
}
/* ============================================================
* Editorial Aetherpunk – LANDING-VISUAL-02 (Brief v2.1)
* Aetherpunk Chip: rechteckig statt Pill, Mono-Caps mit Punkt-
* Indikator. Default Platin (neutral), is-active aktiviert
* Gold (Premium/Active), aria-disabled='true' aktiviert Muted-State.
*
* Reference: Persona_Quest_Landingpage_Visual_Brief.md §8.4, §11.2.
* ============================================================ */
.chip-aetherpunk {
background: transparent;
border: 1px solid var(--metal-platinum-border);
box-shadow: inset 0 0 0 1px var(--metal-platinum-inset);
border-radius: 2px;
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.5625rem; /* 9px per Brief §8.4 */
letter-spacing: var(--ls-mono-chip);
color: var(--text-aether-body);
padding: 6px 14px;
gap: 8px;
text-transform: uppercase;
transition:
border-color 0.3s var(--ease-out-expo),
box-shadow 0.3s var(--ease-out-expo),
color 0.3s var(--ease-out-expo);
}
.chip-aetherpunk::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--metal-platinum);
flex-shrink: 0;
}
/* Active/Premium-State: Gold-Akzent */
.chip-aetherpunk.is-active {
background: rgba(214, 184, 122, 0.04);
border-color: var(--metal-gold-border);
box-shadow: inset 0 0 0 1px var(--metal-gold-inset);
color: var(--metal-gold);
}
.chip-aetherpunk.is-active::before {
background: var(--metal-gold);
}
/* Muted/Disabled-State (Chip ist , nicht