/**
 * ==============================================================================
 * MIND IN A BOX — THE MONUMENTAL DESIGN SYSTEM
 * Version: 6.0.0 — The Anti-AI Alchemy Edition
 * Architecture: Organic Asymmetry · Void Textures · Manuscript Mode ·
 *               Golden Spacing · Marginalia · WCAG AA Contrast
 * ==============================================================================
 */

/* ==========================================================================
   1. GLOBAL VARIABLES & DESIGN TOKENS — DARK SANCTUARY (DEFAULT MODE)
   ========================================================================== */
:root {
    /* === Core Void Palette === */
    --bg-base:            #06060a;
    --bg-void:            #020203;
    --bg-surface:         #0d0d13;
    --bg-surface-raised:  #181820;
    --bg-surface-elevated: #13131a;
    --bg-glass-light:     rgba(16, 16, 26, 0.50);
    --bg-glass-heavy:     rgba(5, 5, 10, 0.94);

    /* === Antique Copper-Gold Accents === */
    --gold-primary:       #c5a059;
    --gold-light:         #e5b964;
    --gold-dark:          #8b6d36;
    --gold-copper:        #b59551;
    --gold-glow-soft:     rgba(197, 160, 89, 0.10);
    --gold-glow-medium:   rgba(197, 160, 89, 0.22);
    --gold-glow-strong:   rgba(197, 160, 89, 0.42);
    --gold-border:        rgba(181, 149, 81, 0.20);
    --gold-border-active: rgba(229, 185, 100, 0.55);

    /* === Typography Colors — WCAG AA Compliant === */
    --text-primary:   #f0ede7;     /* contrast 14.5:1 on bg-base */
    --text-secondary: #a8a5a0;     /* contrast 5.8:1 on bg-base */
    --text-tertiary:  #6a6870;     /* contrast 4.6:1 on bg-base */
    --text-inverse:   #040406;
    --text-whisper:   rgba(160, 155, 145, 0.12); /* Marginalia ghost text */

    /* === Semantic Status === */
    --color-success:        #2ecc71;
    --color-success-bg:     rgba(46, 204, 113, 0.08);
    --color-success-border: rgba(46, 204, 113, 0.25);
    --color-error:          #e74c3c;
    --color-error-bg:       rgba(231, 76, 60, 0.08);
    --color-error-border:   rgba(231, 76, 60, 0.25);
    --color-warning:        #f39c12;
    --color-info:           #3498db;

    /* === Cinematic Shadows — Asymmetric Candle-light === */
    --shadow-xs:      0 1px 6px  rgba(0, 0, 0, 0.55);
    --shadow-sm:      0 3px 14px rgba(0, 0, 0, 0.65);
    --shadow-md:      0 10px 34px rgba(0, 0, 0, 0.80);
    --shadow-lg:      0 22px 60px rgba(0, 0, 0, 0.92);
    --shadow-gold-inner:  inset 0 0 28px rgba(197, 160, 89, 0.06);
    --shadow-gold-outer:  0 0 28px rgba(197, 160, 89, 0.09), 0 0 55px rgba(197, 160, 89, 0.03);
    --shadow-gold-active: 0 0 22px rgba(197, 160, 89, 0.28), inset 0 0 14px rgba(197, 160, 89, 0.07);
    /* Asymmetric candle: stronger bottom-left shadow */
    --shadow-candle:  2px 8px 32px rgba(197, 160, 89, 0.11),
                      -1px 3px 18px rgba(0, 0, 0, 0.96);

    /* === Blurs === */
    --blur-sm:  blur(8px);
    --blur-md:  blur(16px);
    --blur-lg:  blur(28px);
    --blur-xl:  blur(48px);

    /* === Transitions — Slow & Monumental === */
    --trans-fast:    0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --trans-medium:  0.60s cubic-bezier(0.2, 0.8, 0.2, 1);
    --trans-slow:    0.90s cubic-bezier(0.16, 1, 0.3, 1);
    --trans-majestic:1.10s cubic-bezier(0.16, 1, 0.3, 1);

    /* === Border Radii — ANTI-AI DOCTRINE ===
       Deliberate micro-variation between panels to break mechanical uniformity */
    --radius-none: 0px;
    --radius-xs:   2px;   /* Ultra-sharp edges */
    --radius-sm:   3px;   /* Default card edge */
    --radius-md:   5px;   /* Slightly less aggressive */
    --radius-lg:   7px;   /* Absolute maximum allowed */

    /* === Golden Spacing System (φ ≈ 1.618 ratios) === */
    --space-xs:   8px;
    --space-sm:   14px;
    --space-md:   24px;
    --space-lg:   40px;
    --space-xl:   64px;
    --space-2xl:  104px;

    /* === Z-Index Architecture === */
    --z-negative:       -1;
    --z-base:            1;
    --z-elevated:        10;
    --z-dropdown:        50;
    --z-header:          100;
    --z-bottom-bar:      200;
    --z-panic-btn:       500;
    --z-modal-backdrop:  900;
    --z-modal:           999;
    --z-toast:           1000;

    /* === Typography Scale === */
    --font-serif:  'Amiri', Georgia, serif;
    --font-sans:   'Cairo', system-ui, -apple-system, sans-serif;
    --font-mono:   'Courier New', Courier, monospace;

    /* === Mobile Bottom Bar === */
    --bottom-bar-height: 68px;
}

/* ==========================================================================
   1B. MANUSCRIPT MODE (وضع المخطوطة العتيقة)
   ========================================================================== */
html[data-mode="manuscript"] {
    --bg-base:            #F4F1EA;
    --bg-void:            #e4ded0;
    --bg-surface:         #f2ede3;
    --bg-surface-raised:  #e9e3d5;
    --bg-surface-elevated: rgba(238, 233, 220, 0.92);
    --bg-glass-light:     rgba(228, 220, 202, 0.60);
    --bg-glass-heavy:     rgba(196, 188, 170, 0.90);

    --gold-primary:       #7a5c28;
    --gold-light:         #9a7030;
    --gold-dark:          #5a3f18;
    --gold-copper:        #7a5c28;
    --gold-glow-soft:     rgba(122, 92, 40, 0.10);
    --gold-glow-medium:   rgba(122, 92, 40, 0.20);
    --gold-glow-strong:   rgba(122, 92, 40, 0.38);
    --gold-border:        rgba(122, 92, 40, 0.25);
    --gold-border-active: rgba(154, 112, 48, 0.55);

    --text-primary:   #2B2620;   /* contrast 14.8:1 on papyrus bg */
    --text-secondary: #4d3b28;   /* contrast 6.1:1 */
    --text-tertiary:  #7a6050;   /* contrast 4.5:1 — WCAG AA floor */
    --text-inverse:   #f2ede3;
    --text-whisper:   rgba(85, 65, 45, 0.12);

    --shadow-sm:     0 3px 14px rgba(70, 45, 15, 0.16);
    --shadow-md:     0 10px 34px rgba(70, 45, 15, 0.22);
    --shadow-lg:     0 22px 60px rgba(70, 45, 15, 0.30);
    --shadow-gold-inner: inset 0 0 28px rgba(122, 92, 40, 0.05);
    --shadow-gold-outer: 0 0 28px rgba(122, 92, 40, 0.08);
    --shadow-candle: 2px 8px 32px rgba(122, 92, 40, 0.13),
                     -1px 3px 18px rgba(40, 25, 10, 0.90);
}

/* Manuscript body background: papyrus texture + noise */
html[data-mode="manuscript"] body {
    background-image:
        url('https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=1200&q=80'),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    background-blend-mode: multiply, normal;
    background-size: cover, 300px 300px;
    background-attachment: fixed, fixed;
}

/* ==========================================================================
   2. ENTERPRISE RESET & NORMALIZATION
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    transition: background-color var(--trans-slow), color var(--trans-slow);
}

body {
    background-color: var(--bg-base);
    /* === VOID TEXTURE: Asymmetric candle-in-corner radial glow + noise ===
       Light source: upper-left, not centered — simulates candlelight in a corner */
    background-image:
        radial-gradient(ellipse 55% 45% at 18% 12%,
            rgba(197, 160, 89, 0.055) 0%,
            transparent 55%),
        radial-gradient(ellipse 80% 90% at 80% 85%,
            rgba(10, 8, 4, 0.80) 0%,
            transparent 65%),
        radial-gradient(ellipse 100% 100% at 50% 50%,
            rgba(14, 14, 22, 0.55) 0%,
            rgba(2, 2, 3, 0.99) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23noise)' opacity='0.032'/%3E%3C/svg%3E");
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.80;
    padding-bottom: var(--bottom-bar-height);
    transition:
        background-color var(--trans-slow),
        color var(--trans-slow);
}

/* Remove bottom bar padding on desktop */
@media (min-width: 769px) {
    body { padding-bottom: 0; }
}

/* ==========================================================================
   2.5 CORNER MARGINALIA — Handwritten whispers in page corners
   Poet/philosopher annotations that prove human authorship
   ========================================================================== */
body::before {
    content: 'كل ما يثقل عقلك يستحق أن يُقال';
    position: fixed;
    bottom: 90px;
    right: 18px;
    font-family: var(--font-serif);
    font-size: 10px;
    font-style: italic;
    color: var(--text-whisper);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.12em;
    pointer-events: none;
    z-index: var(--z-base);
    user-select: none;
}
body::after {
    content: '— ابكتيتوس';
    position: fixed;
    bottom: 88px;
    left: 18px;
    font-family: var(--font-serif);
    font-size: 10px;
    font-style: italic;
    color: var(--text-whisper);
    writing-mode: vertical-rl;
    letter-spacing: 0.10em;
    pointer-events: none;
    z-index: var(--z-base);
    user-select: none;
}

/* Hide marginalia on manuscript mode (papyrus handles the ambiance) */
html[data-mode="manuscript"] body::before,
html[data-mode="manuscript"] body::after {
    opacity: 0.4;
    color: rgba(90, 65, 40, 0.14);
}

/* Refined Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb {
    background: rgba(181, 149, 81, 0.18);
    border-radius: var(--radius-xs);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-primary); }

::selection {
    background-color: rgba(197, 160, 89, 0.35);
    color: var(--text-primary);
}

/* ==========================================================================
   3. TYPOGRAPHY SYSTEM — MONUMENTAL HIERARCHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--gold-light);
    line-height: 1.22;
    margin-bottom: var(--space-sm);
    font-weight: 700;
    text-shadow: 0 0 35px rgba(197, 160, 89, 0.12);
    transition: color var(--trans-slow), text-shadow var(--trans-slow);
}

/* Non-uniform letter-spacing per heading level — breaks machine uniformity */
h1 {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    letter-spacing: 0.075em;
    line-height: 1.15;
}
h2 {
    font-size: clamp(1.7rem, 3.5vw, 3rem);
    letter-spacing: 0.052em;
}
h3 {
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    letter-spacing: 0.038em;
}
h4 { font-size: 1.2rem;  letter-spacing: 0.030em; }
h5 { font-size: 1.05rem; letter-spacing: 0.025em; }
h6 { font-size: 0.95rem; letter-spacing: 0.020em; }

a {
    color: var(--gold-primary);
    text-decoration: none;
    transition: color var(--trans-fast);
}
a:hover { color: var(--gold-light); }

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    line-height: 1.85;
    max-width: 72ch; /* Optimal reading line length */
}

/* Marginalia / Corner Whispers (inline use) */
.text-whisper,
.marginalia {
    font-size: 0.68rem;
    color: var(--text-whisper);
    font-style: italic;
    font-family: var(--font-serif);
    letter-spacing: 0.04em;
    line-height: 1.55;
    opacity: 0.85;
}

/* Corner annotation — absolute positioned, page-level */
.corner-note {
    position: absolute;
    font-family: var(--font-serif);
    font-size: 10px;
    font-style: italic;
    color: var(--text-whisper);
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.08em;
    line-height: 1.6;
}
.corner-note--tr { top: 12px;    right: 14px;  writing-mode: vertical-rl; }
.corner-note--bl { bottom: 12px; left: 14px;   writing-mode: vertical-rl; transform: rotate(180deg); }
.corner-note--br { bottom: 12px; right: 14px; }
.corner-note--tl { top: 12px;    left: 14px; }

/* Manuscript-style strikethrough for evolving thought */
.thought-struck {
    text-decoration: line-through;
    text-decoration-color: rgba(197, 160, 89, 0.45);
    text-decoration-thickness: 1px;
    opacity: 0.55;
}

/* ==========================================================================
   4. LAYOUT & CONTAINERS — Golden Spacing
   ========================================================================== */
.container {
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}
.container-fluid { width: 100%; padding: 0 4%; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-md); }
.gap-3 { gap: var(--space-lg); }
.gap-4 { gap: var(--space-xl); }

/* Section spacing — generous cognitive breathing room */
.section {
    padding: var(--space-2xl) 0;
}
.section--sm {
    padding: var(--space-xl) 0;
}

/* ==========================================================================
   4.5 ANTI-AI BORDER DOCTRINE
   Each element gets its own micro-radius (1-2px variance) to break uniformity
   ========================================================================== */
.anti-ai-border {
    border-radius: 3px !important;
    border: 1px solid rgba(181,149,81,0.25) !important;
    outline: 1px solid rgba(181,149,81,0.08) !important;
    outline-offset: 2px !important;
}

/* Organic tilt — applies subtle rotation to specific panels */
.organic-tilt-1  { transform: rotate(0.15deg);  }
.organic-tilt-2  { transform: rotate(-0.20deg); }
.organic-tilt-3  { transform: rotate(0.10deg);  }

/* Use sparingly on decorative cards, NOT interactive panels */
.anti-ai-border.ornate-1 { border-radius: 4px 3px 4px 2px !important; }
.anti-ai-border.ornate-2 { border-radius: 2px 4px 3px 4px !important; }
.anti-ai-border.ornate-3 { border-radius: 3px 2px 4px 3px !important; }

/* ==========================================================================
   5. CARD & PANEL COMPONENTS — Anti-SaaS Doctrine (Max border-radius: 7px)
   ========================================================================== */

/* Monumental Stone Panel */
.stone-panel {
    background: linear-gradient(155deg,
        var(--bg-surface-raised) 0%,
        var(--bg-surface) 100%);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    box-shadow:
        var(--shadow-md),
        var(--shadow-gold-inner),
        var(--shadow-gold-outer);
    transition: border-color var(--trans-medium), box-shadow var(--trans-medium);
    position: relative;
    overflow: hidden;
    padding: var(--space-lg);
}

/* Hairline top-left edge light — simulates candle-in-corner catch */
.stone-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-copper) 0%, transparent 100%);
    opacity: 0.28;
    pointer-events: none;
}

.stone-panel:hover {
    border-color: rgba(181, 149, 81, 0.38);
    box-shadow: var(--shadow-lg), var(--shadow-gold-active);
}

/* Corner ornament marks — carved stone */
.stone-panel.ornate::after {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 10px; height: 10px;
    border-top: 1px solid var(--gold-copper);
    border-right: 1px solid var(--gold-copper);
    opacity: 0.40;
    pointer-events: none;
}

/* Glass Panel — Restrained Glassmorphism */
.glass-panel {
    background: var(--bg-surface-elevated);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: var(--trans-medium);
    padding: var(--space-lg);
}
.glass-panel:hover {
    box-shadow: var(--shadow-lg), var(--shadow-gold-outer);
    border-color: rgba(181, 149, 81, 0.35);
}

/* Minimal Glass Card */
.glass-card {
    background: rgba(255, 255, 255, 0.016);
    border: 1px solid rgba(181, 149, 81, 0.11);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    transition: var(--trans-fast);
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.026);
    border-color: var(--gold-border);
}

/* ==========================================================================
   6. FORM & INPUT ELEMENTS
   ========================================================================== */
.input-control {
    width: 100%;
    background: rgba(0, 0, 0, 0.50);
    border: 1px solid rgba(181, 149, 81, 0.18);
    border-radius: var(--radius-xs);
    padding: 15px 20px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
    transition:
        border-color var(--trans-fast),
        box-shadow var(--trans-fast),
        background var(--trans-fast);
    line-height: 1.7;
}
.input-control:focus {
    border-color: var(--gold-primary);
    background: rgba(0, 0, 0, 0.68);
    box-shadow:
        inset 0 0 0 1px rgba(197, 160, 89, 0.20),
        0 0 20px var(--gold-glow-soft);
}
.input-control::placeholder { color: var(--text-tertiary); font-style: italic; }

.input-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   7. BUTTON ARCHITECTURE — Monumental, Not Playful
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    border: none;
    border-radius: var(--radius-xs);   /* 2px — intentionally sharper than cards */
    padding: 14px 28px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    outline: none;
    text-decoration: none;
    transition:
        transform var(--trans-medium),
        box-shadow var(--trans-medium),
        background var(--trans-medium),
        border-color var(--trans-medium);
}
.btn:disabled { opacity: 0.50; cursor: not-allowed; filter: grayscale(0.65); }

.btn-primary {
    background: linear-gradient(135deg,
        var(--gold-primary) 0%,
        var(--gold-light)   50%,
        var(--gold-copper)  100%);
    color: var(--bg-base);
    box-shadow: 0 4px 18px var(--gold-glow-medium);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px var(--gold-glow-strong);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 10px var(--gold-glow-medium);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--gold-copper);
    color: var(--gold-light);
}
.btn-outline:hover:not(:disabled) {
    background: var(--gold-glow-soft);
    border-color: var(--gold-light);
    box-shadow: 0 0 20px var(--gold-glow-soft);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--gold-border);
    color: var(--text-primary);
}

/* Danger/Burn variant — Hold to Burn */
.btn-burn {
    position: relative;
    background: linear-gradient(135deg, #280a0a, #470f0f);
    border: 1px solid rgba(231, 76, 60, 0.32);
    color: #ff8a80;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.07);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    border-radius: var(--radius-xs);
}
.btn-burn .btn-text {
    position: relative;
    z-index: 2;
}
.burn-progress-bar {
    position: absolute;
    inset: 0;
    background: rgba(231, 76, 60, 0.38);
    width: 0%;
    z-index: 1;
    pointer-events: none;
}
.btn-burn:hover:not(:disabled) {
    box-shadow: 0 0 35px rgba(231, 76, 60, 0.18);
    border-color: rgba(231, 76, 60, 0.55);
}

/* Soul Fade Effect (تلاشي الروح) */
.soul-fade {
    animation: fadeSoul 2.5s ease-in forwards;
}
@keyframes fadeSoul {
    0%   { opacity: 1; filter: blur(0px);  transform: translateY(0); }
    100% { opacity: 0; filter: blur(10px); transform: translateY(-14px); }
}

/* Ego Punishment Shake */
.shake-active {
    animation: egoShake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes egoShake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px,  0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px,  0, 0); }
}

/* ==========================================================================
   8. BADGES & CHIPS — Sharp, Engraved Style
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
}
.badge-gold {
    background: var(--gold-glow-soft);
    border: 1px solid var(--gold-border);
    color: var(--gold-light);
}
.badge-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
}
.badge-error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error);
}

/* ==========================================================================
   9. GLOBAL ANIMATIONS — Slow, Majestic (0.6s–1.1s)
   ========================================================================== */
.anim-fade-in    { animation: fadeIn    var(--trans-medium)  both; }
.anim-slide-up   { animation: slideUp   var(--trans-slow)    both; }
.anim-slide-down { animation: slideDown var(--trans-slow)    both; }
.anim-scale-in   { animation: scaleIn   var(--trans-medium)  both; }
.anim-pulse-glow { animation: pulseGlow 3s infinite alternate; }
.anim-page-enter { animation: pageEnter var(--trans-slow)    both; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pulseGlow {
    0%   { box-shadow: 0 0 10px var(--gold-glow-soft); }
    100% { box-shadow: 0 0 38px var(--gold-glow-strong); }
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes pageExit {
    from { opacity: 1; transform: translateY(0)      scale(1); }
    to   { opacity: 0; transform: translateY(-14px)  scale(0.98); }
}

/* Page Transition Overlay */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-void);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.page-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Shimmer loading */
.shimmer-loading {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.012) 25%,
        rgba(197,160,89,0.038) 50%,
        rgba(255,255,255,0.012) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 2.2s infinite;
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ==========================================================================
   10. MECHANICAL THEME SWITCH (الترس الميكانيكي)
   ========================================================================== */
.mech-switch-container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mech-switch {
    position: relative;
    width: 58px;
    height: 28px;
    background: linear-gradient(to bottom, #09090c, #16161d);
    border-radius: 14px;
    border: 1px solid rgba(181, 149, 81, 0.25);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    display: block;
}
.mech-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #c5a059, #8b6d36);
    border-radius: 50%;
    box-shadow: inset 0 2px 2px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.8);
    transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), background 400ms;
}
.mech-switch::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 10px;
    width: 6px;
    height: 2px;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 1px;
    transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.mech-switch[data-active="true"] {
    background: linear-gradient(to bottom, #d4ccb8, #e6dec9);
    border-color: rgba(122, 92, 40, 0.35);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(255,255,255,0.7);
}
.mech-switch[data-active="true"]::before {
    transform: translateX(30px) rotate(180deg);
    background: linear-gradient(135deg, #5a3f18, #2B2620);
}
.mech-switch[data-active="true"]::after {
    transform: translateX(30px) rotate(180deg);
}
.mech-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 400ms;
    user-select: none;
}
html[data-mode="manuscript"] .mech-label {
    color: var(--text-secondary);
}

/* ==========================================================================
   11. NATIVE MOBILE BOTTOM BAR — The Ancestral Navigator
   ========================================================================== */
#bottomBar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-bar-height);
    z-index: var(--z-bottom-bar);
    background: linear-gradient(180deg, rgba(4, 4, 8, 0.72) 0%, rgba(2, 2, 4, 0.98) 100%);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border-top: 1px solid var(--gold-border);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.85), 0 -1px 0 var(--gold-border);
    align-items: stretch;
    justify-content: space-around;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 768px) {
    #bottomBar { display: flex; }
}

.bottom-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--text-tertiary);
    transition:
        color var(--trans-medium),
        transform var(--trans-medium);
    position: relative;
    cursor: pointer;
    border: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.bottom-bar-item:active { transform: scale(0.91); }

.bottom-bar-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: filter var(--trans-medium), transform var(--trans-medium);
}
.bottom-bar-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--trans-medium);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.85));
}

.bottom-bar-item.active,
.bottom-bar-item:hover { color: var(--gold-primary); }

.bottom-bar-item.active .bottom-bar-icon svg,
.bottom-bar-item:hover .bottom-bar-icon svg {
    filter:
        drop-shadow(0 0 6px rgba(197, 160, 89, 0.72))
        drop-shadow(0 1px 1px rgba(0,0,0,0.85));
    stroke: var(--gold-light);
}
.bottom-bar-item.active .bottom-bar-icon { transform: translateY(-3px); }

/* Active indicator */
.bottom-bar-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    border-radius: 0 0 2px 2px;
    animation: fadeIn var(--trans-medium) both;
}

.bottom-bar-label {
    font-family: var(--font-sans);
    font-size: 0.60rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    transition: color var(--trans-medium);
}

/* ==========================================================================
   12. FLOATING PANIC BUTTON (Existential Panic — Breathing Circle)
   ========================================================================== */
#panicBtn {
    position: fixed;
    bottom: calc(var(--bottom-bar-height) + 20px);
    left: 20px;
    z-index: var(--z-panic-btn);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28,12,12,0.96) 0%, rgba(8,4,4,0.99) 100%);
    border: 1px solid rgba(231, 76, 60, 0.28);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.09), 0 4px 16px rgba(0,0,0,0.72);
    transition: box-shadow var(--trans-medium), border-color var(--trans-medium), transform var(--trans-medium);
    animation: panicPulse 4s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}
#panicBtn:hover {
    border-color: rgba(231, 76, 60, 0.58);
    box-shadow: 0 0 38px rgba(231, 76, 60, 0.20), 0 4px 16px rgba(0,0,0,0.72);
    transform: scale(1.08);
}
#panicBtn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: rgba(231, 76, 60, 0.72);
    stroke-width: 1.8;
}
@keyframes panicPulse {
    0%   { box-shadow: 0 0 12px rgba(231,76,60,0.07), 0 4px 16px rgba(0,0,0,0.72); }
    50%  { box-shadow: 0 0 26px rgba(231,76,60,0.16), 0 4px 16px rgba(0,0,0,0.72); }
    100% { box-shadow: 0 0 12px rgba(231,76,60,0.07), 0 4px 16px rgba(0,0,0,0.72); }
}

@media (min-width: 769px) {
    #panicBtn { bottom: 24px; }
}

/* Breathing Circle Modal */
#breathingModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(2, 2, 4, 0.95);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: center;
}
#breathingModal.open { display: flex; animation: fadeIn 0.7s both; }

#breathingCircle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid rgba(197, 160, 89, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: breatheCycle 10s ease-in-out infinite;
    box-shadow:
        0 0 45px rgba(197,160,89,0.07),
        inset 0 0 45px rgba(197,160,89,0.035);
}
#breathingCircle::before {
    content: '';
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197,160,89,0.18) 0%, transparent 70%);
    animation: breatheInner 10s ease-in-out infinite;
}
@keyframes breatheCycle {
    0%,  100% { transform: scale(1.0);  border-color: rgba(197,160,89,0.22); }
    40%        { transform: scale(1.36); border-color: rgba(197,160,89,0.52); }
    70%        { transform: scale(0.88); border-color: rgba(197,160,89,0.16); }
}
@keyframes breatheInner {
    0%,  100% { opacity: 0.4; transform: scale(1.0); }
    40%        { opacity: 0.9; transform: scale(1.4); }
    70%        { opacity: 0.2; transform: scale(0.8); }
}
#breathingLabel {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--gold-light);
    letter-spacing: 0.09em;
    min-height: 2em;
    transition: opacity 0.8s;
}
#closeBreathing {
    margin-top: var(--space-xs);
    padding: 10px 26px;
    background: transparent;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-xs);
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.80rem;
    letter-spacing: 0.09em;
    cursor: pointer;
    transition: color var(--trans-fast), border-color var(--trans-fast);
}
#closeBreathing:hover { color: var(--gold-light); border-color: var(--gold-primary); }

/* ==========================================================================
   13. ELITISM & BIOMETRIC SYNC
   ========================================================================== */

/* Breathing Glow — Asymmetric (candle in upper-left) */
.bio-breath-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(ellipse 50% 40% at 20% 18%,
        rgba(197, 160, 89, 0.045) 0%,
        transparent 60%);
    animation: bioBreathing 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes bioBreathing {
    0%, 100% { transform: scale(1.0); opacity: 0.28; }
    50%       { transform: scale(1.18); opacity: 0.95; }
}

/* Rusted Dead Star */
.rusted-star {
    color: #8b4513;
    filter: drop-shadow(0 0 5px rgba(139, 69, 19, 0.50));
    width: 20px;
    height: 20px;
}
.slip-text {
    color: #8b4513;
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 0.95rem;
}

/* Organic Memory Fade (تلاشي الذكريات العضوي) */
.organic-memory {
    filter: blur(4px) grayscale(65%);
    opacity: 0.55;
    transition: filter 2s ease, opacity 2s ease, transform 0.3s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.organic-memory.focused {
    filter: blur(0px) grayscale(0%);
    opacity: 1;
}

/* Memory card faded/revealed (vault.html) */
.memory-entry.faded {
    filter: blur(5px);
    opacity: 0.55;
    cursor: pointer;
    transition: filter 1.2s ease, opacity 1.2s ease;
}
.memory-entry.faded.revealed {
    filter: blur(0);
    opacity: 1;
}

/* ==========================================================================
   14. SPA PAGE TRANSITION & CONTENT
   ========================================================================== */
.page-content {
    animation: pageEnter var(--trans-slow) both;
}

/* ==========================================================================
   13.5 VISUAL ALCHEMY & WEB ARTIFACTS
   ========================================================================== */

/* Stoic Img */
.stoic-img {
    background-color: #080808;
    filter: grayscale(100%) contrast(128%) brightness(72%);
    object-fit: cover;
    transition: filter var(--trans-slow);
}
.stoic-img:hover {
    filter: grayscale(65%) contrast(122%) brightness(82%);
}

/* Papyrus Parchment */
.papyrus-surface {
    background-image: url('https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=1200&q=80');
    background-color: rgba(8, 8, 8, 0.88);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}
html[data-mode="manuscript"] .papyrus-surface {
    background-color: rgba(240, 235, 225, 0.82);
    background-blend-mode: color-burn;
}

/* Hero Stoic Bust */
.hero-stoic-bg {
    position: relative;
    overflow: hidden;
}
.hero-stoic-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to top,  var(--bg-base) 5%,  transparent 60%),
        linear-gradient(to right, var(--bg-base) 10%, transparent 80%),
        url('https://images.unsplash.com/photo-1544717305-2782549b5136?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center 25%;
    filter: grayscale(100%) contrast(122%) brightness(42%);
    opacity: 0.82;
    pointer-events: none;
}

/* Sage Ghost Background */
.textarea-sage-wrapper {
    position: relative;
    z-index: 1;
}
.textarea-sage-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('https://images.unsplash.com/photo-1554188248-986adbb73be4?auto=format&fit=crop&w=1000&q=80');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(155%);
    opacity: 0.035;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity var(--trans-slow);
}
.textarea-sage-wrapper:focus-within::before { opacity: 0.075; }

/* Flames */
.flame-bg {
    position: relative;
    z-index: 1;
}
.flame-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('https://images.unsplash.com/photo-1509114397022-ed747cca3f65?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center bottom;
    mix-blend-mode: screen;
    opacity: 0.13;
    pointer-events: none;
    border-radius: inherit;
    -webkit-mask-image: radial-gradient(circle at bottom, black 10%, transparent 70%);
    mask-image: radial-gradient(circle at bottom, black 10%, transparent 70%);
    transition: opacity var(--trans-slow);
}
.flame-bg:hover::after { opacity: 0.22; }

/* Compass Covenant */
.compass-bg {
    position: relative;
    z-index: 1;
}
.compass-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('https://images.unsplash.com/photo-1508614589041-895b88991e3e?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(122%);
    opacity: 0.10;
    pointer-events: none;
    border-radius: inherit;
}

/* Handwritten Close Button */
.btn-handwritten-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--trans-medium), opacity var(--trans-medium);
    opacity: 0.55;
}
.btn-handwritten-close:hover {
    opacity: 1;
    transform: scale(1.12) rotate(-6deg);
}
.btn-handwritten-close svg {
    width: 24px;
    height: 24px;
    stroke: var(--gold-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    fill: none;
}

/* ==========================================================================
   14. MASTER HEADER LOGO & FOOTER
   ========================================================================== */
.master-header-logo {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    text-shadow: 0 2px 18px rgba(181, 149, 81, 0.38);
    transition: transform var(--trans-fast);
}
.master-header-logo:hover { transform: scale(1.02); }
.master-header-logo svg {
    width: 32px;
    height: 32px;
    stroke: var(--gold-light);
    filter: drop-shadow(0 0 10px rgba(181, 149, 81, 0.58));
}

.master-footer {
    border-top: 1px solid rgba(181, 149, 81, 0.13);
    background: linear-gradient(to top, #020203, transparent);
    padding: var(--space-2xl) var(--space-md) var(--space-xl);
    margin-top: var(--space-2xl);
    text-align: center;
    position: relative;
}
/* Footer corner marginalia */
.master-footer::before {
    content: '© عقل في صندوق 2026 — جميع الحقوق محفوظة';
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-serif);
    font-size: 0.70rem;
    color: var(--text-whisper);
    white-space: nowrap;
    letter-spacing: 0.06em;
    pointer-events: none;
}
.master-footer-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
}
.master-footer-logo {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--gold-dark);
}
.master-footer-links {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}
.master-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color var(--trans-fast);
}
.master-footer-links a:hover { color: var(--gold-primary); }
.master-footer-credo {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    border-top: 1px dashed rgba(255,255,255,0.04);
    padding-top: var(--space-sm);
    width: 100%;
    padding-bottom: var(--space-lg);
}

/* ==========================================================================
   15. PRINT UTILITIES
   ========================================================================== */
@media print {
    body {
        background: #fff !important;
        background-image: none !important;
        color: #000 !important;
    }
    .stone-panel, .glass-panel, .glass-card {
        background: none !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    .btn, .site-header, .site-footer, #bottomBar, #manuscriptToggle, #panicBtn {
        display: none !important;
    }
    h1, h2, h3 { color: #000 !important; text-shadow: none !important; }
    body::before, body::after { display: none !important; }
}

/* ==========================================================================
   16. DOPAMINE RETREAT (خلوة الدوبامين)
   ========================================================================== */
html[data-dopamine-retreat="true"] {
    filter: grayscale(100%) contrast(112%);
}
html[data-dopamine-retreat="true"] .site-header,
html[data-dopamine-retreat="true"] .master-footer,
html[data-dopamine-retreat="true"] #bottomBar,
html[data-dopamine-retreat="true"] .side-column,
html[data-dopamine-retreat="true"] .history-panel {
    display: none !important;
}
html[data-dopamine-retreat="true"] .page-content {
    background: #000;
}
html[data-dopamine-retreat="true"] .anti-ai-border {
    border-color: rgba(255,255,255,0.08) !important;
    outline: none !important;
}
html[data-dopamine-retreat="true"] body::before,
html[data-dopamine-retreat="true"] body::after {
    display: none;
}

#retreatBreakBtn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.35);
    padding: 10px 22px;
    font-family: var(--font-serif);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: all 0.35s;
    letter-spacing: 0.06em;
}
#retreatBreakBtn:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

/* ==========================================================================
   17. ANTI-AI LIGHT THEME (legacy .light-theme class)
   ========================================================================== */
.light-theme {
    --bg-base: #F4F1EA;
    --bg-void: #ECE9E1;
    --bg-surface: #FBF9F6;
    --bg-surface-raised: #f2eee5;
    --bg-surface-elevated: rgba(244, 241, 234, 0.85);
    --gold-primary: #8a6e35;
    --gold-light: #5c4a3d;
    --gold-border: rgba(92, 74, 61, 0.30);
    --text-primary: #1a1512;
    --text-secondary: #3d352b;
    --text-tertiary: #5c4a3d;
}

/* Hero Stoic BG alt (deduplication) */
.hero-stoic-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1544717305-2782549b5136?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
    opacity: 0.25;
    mix-blend-mode: luminosity;
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    pointer-events: none;
}