/* ============================================================================
   DYNAMIC BACKGROUND EFFECTS
   Multiple background animation options for the entire site
   ============================================================================ */

/* ============================================================================
   OPTION 1: ANIMATED GRADIENT BACKGROUND (Default, Lightweight)
   Smooth color transitions creating a flowing gradient effect
   ============================================================================ */

/* Base background container */
#page-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

/* Animated gradient background */
.bg-animated-gradient {
    background: linear-gradient(
        -45deg,
        #ee7752,
        #e73c7e,
        #23a6d5,
        #23d5ab
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Professional variant - subtle blue/purple gradient */
.bg-animated-gradient.professional {
    background: linear-gradient(
        -45deg,
        #667eea 0%,
        #764ba2 25%,
        #f093fb 50%,
        #4facfe 75%,
        #667eea 100%
    );
    background-size: 400% 400%;
}

/* Dark mode variant */
.bg-animated-gradient.dark-mode {
    background: linear-gradient(
        -45deg,
        #1a1a2e,
        #16213e,
        #0f3460,
        #533483
    );
    background-size: 400% 400%;
}

/* Ocean variant */
.bg-animated-gradient.ocean {
    background: linear-gradient(
        -45deg,
        #2e3192,
        #1bffff,
        #4facfe,
        #00f2fe
    );
    background-size: 400% 400%;
}

/* Sunset variant */
.bg-animated-gradient.sunset {
    background: linear-gradient(
        -45deg,
        #ff6b6b,
        #feca57,
        #ee5a6f,
        #f79d00
    );
    background-size: 400% 400%;
}

/* Gradient animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ============================================================================
   OPTION 2: GEOMETRIC PATTERN BACKGROUND
   Animated geometric shapes creating depth and movement
   ============================================================================ */

.bg-geometric {
    background-color: #f0f4f8;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    position: relative;
}

.bg-geometric::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(30deg, rgba(99, 102, 241, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(99, 102, 241, 0.05) 87.5%, rgba(99, 102, 241, 0.05)),
        linear-gradient(150deg, rgba(99, 102, 241, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(99, 102, 241, 0.05) 87.5%, rgba(99, 102, 241, 0.05)),
        linear-gradient(30deg, rgba(99, 102, 241, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(99, 102, 241, 0.05) 87.5%, rgba(99, 102, 241, 0.05)),
        linear-gradient(150deg, rgba(99, 102, 241, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(99, 102, 241, 0.05) 87.5%, rgba(99, 102, 241, 0.05));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px;
    animation: geometricMove 20s linear infinite;
}

.bg-geometric.dark-mode {
    background-color: #0f172a;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 50%);
}

@keyframes geometricMove {
    0% {
        background-position: 0 0, 0 0, 40px 70px, 40px 70px;
    }
    100% {
        background-position: 80px 140px, 80px 140px, 120px 210px, 120px 210px;
    }
}

/* ============================================================================
   OPTION 3: MESH GRADIENT (Modern, Subtle)
   Blurred blob gradients creating a soft, modern aesthetic
   ============================================================================ */

.bg-mesh-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.bg-mesh-gradient::before,
.bg-mesh-gradient::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 20s ease-in-out infinite;
}

.bg-mesh-gradient::before {
    background: radial-gradient(circle, #667eea 0%, transparent 70%);
    top: -250px;
    left: -250px;
    animation-delay: 0s;
}

.bg-mesh-gradient::after {
    background: radial-gradient(circle, #f093fb 0%, transparent 70%);
    bottom: -250px;
    right: -250px;
    animation-delay: -10s;
}

.bg-mesh-gradient.dark-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* ============================================================================
   OPTION 4: PARTICLE GRID (Canvas-based, requires JS)
   Animated dots creating a dynamic network effect
   ============================================================================ */

#particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ============================================================================
   OPTION 5: WAVES BACKGROUND
   Animated SVG waves for a calm, flowing effect
   ============================================================================ */

.bg-waves {
    background: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1000px 1000px 0 0;
}

.wave:nth-child(1) {
    animation: wave 10s linear infinite;
    z-index: 1;
    opacity: 0.5;
    bottom: 0;
    height: 80px;
}

.wave:nth-child(2) {
    animation: wave 15s linear infinite reverse;
    z-index: 2;
    opacity: 0.3;
    bottom: 10px;
    height: 100px;
}

.wave:nth-child(3) {
    animation: wave 20s linear infinite;
    z-index: 3;
    opacity: 0.2;
    bottom: 20px;
    height: 120px;
}

@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.8);
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

/* ============================================================================
   CONTENT OVERLAY
   Ensure content remains readable with semi-transparent overlay
   ============================================================================ */

.page-body {
    position: relative;
    z-index: 1;
}

/* Optional: Add a subtle overlay to improve text readability */
.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 0;
    pointer-events: none;
}

.dark .bg-overlay {
    background: rgba(15, 23, 42, 0.85);
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .bg-animated-gradient,
    .bg-geometric::before,
    .bg-mesh-gradient::before,
    .bg-mesh-gradient::after,
    .wave {
        animation: none;
    }
}

/* GPU acceleration */
#page-bg,
.bg-animated-gradient,
.bg-geometric,
.bg-mesh-gradient {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: background-position;
}

/* ============================================================================
   BLOG/PROJECT DETAIL PAGE - TEXT VISIBILITY FIX
   Override Tailwind's dark:prose-invert to force readable dark text
   SCOPED: Only applies to article > main > .prose (blog/project detail pages)
   ============================================================================ */

/* 1. LIGHT BACKGROUND CONTAINER for prose content (blog/project pages only) */
html.dark article main .prose,
html.dark article .prose.dark\:prose-invert {
    background-color: rgba(255, 255, 255, 0.95) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    margin-top: 1rem !important;
}

/* 2. FORCE DARK TEXT - Override Tailwind CSS Variables */
html.dark article main .prose,
html.dark article .prose.dark\:prose-invert {
    --tw-prose-body: #1a202c !important;
    --tw-prose-headings: #111827 !important;
    --tw-prose-lead: #374151 !important;
    --tw-prose-links: #2563eb !important;
    --tw-prose-bold: #111827 !important;
    --tw-prose-counters: #4b5563 !important;
    --tw-prose-bullets: #4b5563 !important;
    --tw-prose-hr: #d1d5db !important;
    --tw-prose-quotes: #374151 !important;
    --tw-prose-quote-borders: #d1d5db !important;
    --tw-prose-captions: #4b5563 !important;
    --tw-prose-th-borders: #d1d5db !important;
    --tw-prose-td-borders: #e5e7eb !important;
}

/* 3. DIRECT COLOR OVERRIDES for all text elements */
html.dark article main .prose,
html.dark article main .prose p,
html.dark article main .prose li,
html.dark article main .prose span,
html.dark article main .prose strong,
html.dark article main .prose em,
html.dark article main .prose blockquote,
html.dark article main .prose td,
html.dark article main .prose th {
    color: #1a202c !important;
}

html.dark article main .prose h1,
html.dark article main .prose h2,
html.dark article main .prose h3,
html.dark article main .prose h4,
html.dark article main .prose h5,
html.dark article main .prose h6 {
    color: #111827 !important;
    /* Override golden gradient from glassmorphism-cards.css */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Links - keep visible with accent color */
html.dark article main .prose a {
    color: #2563eb !important;
    text-decoration: underline !important;
}

html.dark article main .prose a:hover {
    color: #1d4ed8 !important;
}

/* 4. TYPOGRAPHY UPGRADE */
html.dark article main .prose,
html.dark article main .prose *:not(.katex):not(.katex *):not(.katex-display):not(.katex-display *) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Preserve KaTeX math fonts - do not override */
html.dark article main .prose .katex,
html.dark article main .prose .katex *,
html.dark article main .prose .katex-display,
html.dark article main .prose .katex-display *,
article main .prose .katex,
article main .prose .katex *,
.katex,
.katex * {
    font-family: KaTeX_Main, "Times New Roman", serif !important;
}

html.dark article main .prose p,
html.dark article main .prose li {
    line-height: 1.8 !important;
    margin-bottom: 1.25rem !important;
}

html.dark article main .prose h1 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.2 !important;
}

html.dark article main .prose h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

html.dark article main .prose h3 {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

/* Lists */
html.dark article main .prose ul,
html.dark article main .prose ol {
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
}

html.dark article main .prose li {
    margin-bottom: 0.5rem !important;
}

/* Blockquotes */
html.dark article main .prose blockquote {
    border-left: 4px solid #d1d5db !important;
    padding: 1rem !important;
    margin: 1.5rem 0 !important;
    font-style: italic !important;
    background-color: rgba(243, 244, 246, 0.5) !important;
    border-radius: 0 8px 8px 0 !important;
    color: #374151 !important;
}

html.dark article main .prose blockquote p {
    color: #374151 !important;
    margin-bottom: 0 !important;
}

/* Code blocks */
html.dark article main .prose code {
    color: #1e40af !important;
    background-color: rgba(229, 231, 235, 0.8) !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.875em !important;
}

html.dark article main .prose pre {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    overflow-x: auto !important;
}

html.dark article main .prose pre code {
    color: #e5e7eb !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Tables */
html.dark article main .prose table {
    width: 100% !important;
    margin: 1.5rem 0 !important;
    border-collapse: collapse !important;
}

html.dark article main .prose th,
html.dark article main .prose td {
    border: 1px solid #d1d5db !important;
    padding: 0.75rem !important;
    color: #1a202c !important;
}

html.dark article main .prose th {
    background-color: #f3f4f6 !important;
    font-weight: 600 !important;
}

/* HR */
html.dark article main .prose hr {
    border-color: #d1d5db !important;
    margin: 2rem 0 !important;
}

/* Images */
html.dark article main .prose img {
    border-radius: 0.5rem !important;
    margin: 1.5rem 0 !important;
}

html.dark article main .prose figcaption {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
}

/* KaTeX/Math content */
html.dark article main .prose .katex,
html.dark article main .prose .katex * {
    color: #1a202c !important;
}

/* 5. ARTICLE TITLE (outside prose container, but inside article > main) */
html.dark article main > h1 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* 6. TABLE OF CONTENTS (only in article context) */
html.dark article #TableOfContents a,
html.dark article nav[aria-label="table of contents"] a {
    color: #374151 !important;
}

html.dark article #TableOfContents a:hover,
html.dark article nav[aria-label="table of contents"] a:hover {
    color: #2563eb !important;
}