/* HasanTaVision Custom Styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Brand palette + typography */
:root {
    /* Warmer 2025 palette: Terracotta + Mango + Electric Mint (no purple) */
    --brand-ink: #0b0706;
    --brand-muted: #3b2e27;
    --brand-surface: #fff9f4;
    --brand-bg-1: #100c0a;
    --brand-bg-2: #140f0c;
    --brand-highlight: #ffe1cb;
    --brand-primary-50: #fff1e7;
    --brand-primary-100: #ffd8c0;
    --brand-primary-200: #fcb68f;
    --brand-primary-400: #ef8a5c;
    --brand-primary-500: #e2693e; /* terracotta */
    --brand-primary-600: #c5532f;
    --brand-primary-700: #9d4227;
    --brand-accent-400: #ffd28f; /* mango */
    --brand-accent-500: #ffae45;
    --brand-accent-600: #ff9230;
    --brand-electric-500: #5ef0c6; /* mint pop */
    --brand-electric-600: #2dd8a1;
    --brand-border: #e7c8b3;
    --brand-shadow: 0 18px 50px rgba(11, 7, 6, 0.26);
    --brand-font: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --brand-base-gradient:
        radial-gradient(circle at 12% 18%, rgba(226, 105, 66, 0.34), transparent 38%),
        radial-gradient(circle at 82% 18%, rgba(255, 176, 68, 0.3), transparent 46%),
        radial-gradient(circle at 68% 74%, rgba(46, 216, 161, 0.2), transparent 42%),
        linear-gradient(180deg, #0f0b09 0%, #130f0b 45%, #0d1311 100%);
}

body {
    font-family: var(--brand-font);
    color: var(--brand-ink);
    background: var(--brand-base-gradient);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-ink);
    letter-spacing: -0.01em;
}

p, li, small, span {
    color: var(--brand-muted);
}

.card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow);
}

/* Brand utilities */
.bg-brand-base { background: var(--brand-base-gradient); }
.bg-brand-ink { background-color: var(--brand-ink) !important; color: #f8fafc !important; }
.text-brand-ink { color: var(--brand-ink) !important; }
.text-brand-muted { color: var(--brand-muted) !important; }
.bg-brand-surface { background: var(--brand-surface) !important; }
.bg-brand-highlight { background: var(--brand-highlight) !important; }
.border-brand { border-color: var(--brand-border) !important; }
.border-brand-soft { border-color: rgba(236, 217, 204, 0.7) !important; }
.bg-brand-panel { background: rgba(255, 249, 243, 0.92); }

/* Higher contrast on dark sections */
.text-on-dark-muted { color: #efe7df !important; text-shadow: 0 1px 5px rgba(0,0,0,0.28); }

/* High-contrast helpers for dark sections */
.text-on-dark {
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.text-on-dark-muted {
    color: #e4edf7 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
}

/* Re-theme Tailwind utility colors to new palette */
.bg-indigo-50        { background-color: #fdeee4 !important; }
.bg-indigo-100       { background-color: var(--brand-primary-100) !important; }
.bg-indigo-200       { background-color: var(--brand-primary-200) !important; }
.bg-indigo-500       { background-color: var(--brand-primary-500) !important; }
.bg-indigo-600       { background-color: var(--brand-primary-600) !important; }
.bg-indigo-700       { background-color: var(--brand-primary-700) !important; }
.text-indigo-500     { color: var(--brand-primary-500) !important; }
.text-indigo-600     { color: var(--brand-primary-600) !important; }
.text-indigo-700     { color: var(--brand-primary-700) !important; }
.text-indigo-900     { color: var(--brand-ink) !important; }
.border-indigo-200   { border-color: var(--brand-border) !important; }
.border-indigo-100   { border-color: #f6e5d6 !important; }
.hover\:text-indigo-600:hover { color: var(--brand-primary-600) !important; }
.hover\:text-indigo-700:hover { color: var(--brand-primary-700) !important; }
.hover\:bg-indigo-50:hover    { background-color: #fcefe4 !important; }
.hover\:bg-indigo-700:hover   { background-color: #7c3a24 !important; }
.hover\:bg-indigo-600:hover   { background-color: #a04c32 !important; }

/* Accent mapped to warm mango/sunset (no purple hues) */
.bg-purple-400       { background-color: var(--brand-accent-400) !important; }
.bg-purple-500       { background-color: var(--brand-accent-500) !important; }
.bg-purple-600       { background-color: var(--brand-accent-600) !important; }
.text-purple-600     { color: var(--brand-accent-600) !important; }

/* Gradients tuned to warm palette */
.from-indigo-600 {
    --tw-gradient-from: var(--brand-primary-600) !important;
    --tw-gradient-to: rgba(200, 90, 51, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-indigo-500 {
    --tw-gradient-from: var(--brand-primary-500) !important;
    --tw-gradient-to: rgba(227, 112, 70, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-indigo-400 {
    --tw-gradient-from: var(--brand-primary-400) !important;
    --tw-gradient-to: rgba(238, 149, 103, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-purple-600 {
    --tw-gradient-to: var(--brand-accent-600) !important;
}
.to-purple-400 {
    --tw-gradient-to: var(--brand-accent-400) !important;
}

/* Buttons and pills feel lighter */
.rounded-full,
.px-6.py-2,
.px-8.py-4 {
    box-shadow: 0 12px 30px rgba(227, 112, 70, 0.16);
}
.bg-white {
    background-color: var(--brand-surface);
}

/* Neon outline utility for CTA chips */
.glow-border {
    box-shadow: 0 0 0 1px rgba(78, 242, 232, 0.4), 0 20px 50px rgba(22, 224, 208, 0.22);
}

.glow-card {
    background: linear-gradient(135deg, rgba(168, 107, 81, 0.16), rgba(166, 123, 255, 0.16))
        padding-box,
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(78, 242, 232, 0.25)) border-box;
    border: 1px solid transparent;
}


/* Custom gradient animations */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}

/* Glassmorphism effect */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Floating animation for decorative elements */
@keyframes float-slow {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0);
    }
}

.float-slow {
    animation: float-slow 10s ease-in-out infinite;
}

/* Hero scroll indicator */
@keyframes bounce-soft {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.scroll-indicator-dot {
    animation: bounce-soft 1.6s ease-in-out infinite;
}

/* Extra floating / orbit-style animation */
@keyframes float-rotate {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(4deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.float-rotate {
    animation: float-rotate 18s ease-in-out infinite;
}

/* Neural network background layer (hero) */
.neural-layer {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    mix-blend-mode: screen;
}

.nn-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, #e0faff, #22d3ee);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.75);
    animation: nn-pulse 4.2s ease-in-out infinite;
}

.nn-node-1 { top: 16%; left: 16%; animation-delay: 0s; }
.nn-node-2 { top: 30%; left: 40%; animation-delay: 0.6s; }
.nn-node-3 { top: 50%; left: 24%; animation-delay: 1.1s; }
.nn-node-4 { top: 24%; right: 10%; animation-delay: 0.9s; }
.nn-node-5 { top: 58%; right: 18%; animation-delay: 1.7s; }
.nn-node-6 { bottom: 14%; left: 52%; animation-delay: 1.3s; }

@keyframes nn-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.2;
    }
    40% {
        transform: scale(1.4);
        opacity: 0.95;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.25;
    }
}

.nn-connection {
    position: absolute;
    height: 1px;
    background: linear-gradient(to right,
        rgba(34, 211, 238, 0.1),
        rgba(34, 211, 238, 0.9),
        rgba(34, 211, 238, 0.1)
    );
    transform-origin: left center;
    opacity: 0.6;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.55);
    animation: nn-flow 6s ease-in-out infinite;
}

.nn-connection-1 { top: 20%; left: 18%; width: 26%; transform: rotate(8deg); animation-delay: 0.2s; }
.nn-connection-2 { top: 34%; left: 20%; width: 30%; transform: rotate(18deg); animation-delay: 0.9s; }
.nn-connection-3 { top: 44%; left: 42%; width: 24%; transform: rotate(-12deg); animation-delay: 1.4s; }
.nn-connection-4 { top: 28%; right: 18%; width: 18%; transform: rotate(14deg); animation-delay: 0.5s; }
.nn-connection-5 { top: 52%; right: 12%; width: 22%; transform: rotate(-10deg); animation-delay: 1.9s; }

@keyframes nn-flow {
    0% {
        opacity: 0.1;
        box-shadow: 0 0 4px rgba(129, 140, 248, 0.3);
    }
    40% {
        opacity: 0.9;
        box-shadow: 0 0 18px rgba(129, 140, 248, 0.9);
    }
    100% {
        opacity: 0.15;
        box-shadow: 0 0 4px rgba(129, 140, 248, 0.35);
    }
}

.nn-equation {
    position: absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: rgba(226, 232, 240, 0.85);
    opacity: 0;
    filter: blur(0.4px);
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
    animation: equation-fade 12s ease-in-out infinite;
}

.nn-equation-1 { top: 18%; right: 14%; animation-delay: 0s; }
.nn-equation-2 { top: 40%; right: 8%; animation-delay: 2.5s; }
.nn-equation-3 { bottom: 18%; left: 18%; animation-delay: 4.5s; }

@keyframes equation-fade {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    20% {
        opacity: 0.9;
        transform: translateY(0);
    }
    70% {
        opacity: 0.85;
        transform: translateY(-4px);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* Scroll reveal for sections */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 0.08s;
}

.reveal-delay-2 {
    transition-delay: 0.16s;
}

.reveal-delay-3 {
    transition-delay: 0.24s;
}

.reveal-delay-4 {
    transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
    .animate-gradient,
    .float-slow,
    .float-rotate,
    .scroll-indicator-dot,
    .nn-node,
    .nn-connection,
    .nn-equation {
        animation: none !important;
    }

    .reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Medium-esque story layout tweaks */
.article-body {
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.75;
    color: #0f172a;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.article-body p {
    color: #0f172a;
}

.article-body a {
    color: #0891b2;
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 2px;
}

.article-body pre {
    background: #0b1224;
    color: #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid #1f2937;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.article-body code {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.95em;
    background: #0f172a;
    color: #7dd3fc;
    padding: 0.15em 0.35em;
    border-radius: 6px;
}

.article-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.codehilite .hll { background-color: #1f2937 }
.codehilite  { background: #0b1224; color: #e2e8f0; }
.codehilite .c { color: #94a3b8 } /* Comment */
.codehilite .err { color: #f87171 } /* Error */
.codehilite .k { color: #c084fc } /* Keyword */
.codehilite .o { color: #38bdf8 } /* Operator */
.codehilite .cm { color: #94a3b8 }
.codehilite .cp { color: #fbbf24 }
.codehilite .c1 { color: #94a3b8 }
.codehilite .cs { color: #94a3b8 }
.codehilite .gd { color: #ef4444 }
.codehilite .ge { font-style: italic }
.codehilite .gh { color: #38bdf8; font-weight: bold }
.codehilite .gi { color: #22c55e }
.codehilite .go { color: #94a3b8 }
.codehilite .gp { color: #94a3b8 }
.codehilite .gs { font-weight: bold }
.codehilite .gu { color: #38bdf8; font-weight: bold }
.codehilite .gt { color: #f87171 }
.codehilite .kc { color: #c084fc }
.codehilite .kd { color: #c084fc }
.codehilite .kn { color: #38bdf8 }
.codehilite .kp { color: #c084fc }
.codehilite .kr { color: #c084fc }
.codehilite .kt { color: #a5b4fc }
.codehilite .m { color: #fbbf24 }
.codehilite .s { color: #22c55e }
.codehilite .na { color: #7dd3fc }
.codehilite .nb { color: #e2e8f0 }
.codehilite .nc { color: #7dd3fc }
.codehilite .no { color: #f97316 }
.codehilite .nd { color: #7dd3fc }
.codehilite .ni { color: #e2e8f0 }
.codehilite .ne { color: #f97316 }
.codehilite .nf { color: #38bdf8 }
.codehilite .nl { color: #e2e8f0 }
.codehilite .nn { color: #7dd3fc }
.codehilite .nt { color: #38bdf8 }
.codehilite .nv { color: #e2e8f0 }
.codehilite .ow { color: #38bdf8 }
.codehilite .w { color: #cbd5e1 }
.codehilite .mf { color: #fbbf24 }
.codehilite .mh { color: #fbbf24 }
.codehilite .mi { color: #fbbf24 }
.codehilite .mo { color: #fbbf24 }
.codehilite .sb { color: #22c55e }
.codehilite .sc { color: #22c55e }
.codehilite .sd { color: #22c55e }
.codehilite .s2 { color: #22c55e }
.codehilite .se { color: #f97316 }
.codehilite .sh { color: #22c55e }
.codehilite .si { color: #22c55e }
.codehilite .sx { color: #22c55e }
.codehilite .sr { color: #22c55e }
.codehilite .s1 { color: #22c55e }
.codehilite .ss { color: #22c55e }
.codehilite .bp { color: #e2e8f0 }
.codehilite .vc { color: #e2e8f0 }
.codehilite .vg { color: #e2e8f0 }
.codehilite .vi { color: #e2e8f0 }
.codehilite .il { color: #fbbf24 }

.story-actions {
    min-width: 72px;
}

.story-action-btn {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.story-action-btn:hover {
    transform: translateY(-2px);
    border-color: #bae6fd;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.story-action-btn:active {
    transform: translateY(0);
}

.story-mobile-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    padding: 10px 14px;
    backdrop-filter: blur(12px);
}

.story-mobile-btn {
    height: 42px;
    border-radius: 999px;
    background: #0f172a;
    color: #f8fafc;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.paywall-box {
    margin-top: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #ecfeff, #f8fafc);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.paywall-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid #06b6d4;
    background: #06b6d4;
    color: #ecfeff;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.paywall-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(6, 182, 212, 0.35);
}

.paywall-btn.secondary {
    background: #ffffff;
    color: #0f172a;
    border-color: #e2e8f0;
}

.paywall-btn.secondary:hover {
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.paywall-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}

.paywall-modal.show {
    display: flex;
}

.paywall-modal__card {
    width: min(480px, 100%);
    background: #ffffff;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    position: relative;
    border: 1px solid #e2e8f0;
}

.paywall-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 36px;
    width: 36px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    cursor: pointer;
}

.paywall-modal__close:hover {
    background: #eef2ff;
}