/* ══════════════════════════════════════════════
   DataVyom — styles.css
   Sections:
     1.  Theme Variables
     2.  Global base
     3.  Animations
     4.  Typography
     5.  Layout helpers
     6.  Nav
     7.  Cards
     8.  Modal & article body
     9.  Like button & Giscus
     10. Theme toggle
     11. Scrollbar
     12. Scroll progress bar
   ══════════════════════════════════════════════ */

/* ── 1. THEME VARIABLES ── */
:root {
    --bg-page:          linear-gradient(135deg, #060d1f 0%, #0a1628 40%, #0f1f3d 100%);
    --bg-card:          rgba(255,255,255,0.05);
    --bg-card-hover:    rgba(255,255,255,0.10);
    --bg-nav:           rgba(0,0,0,0.80);
    --bg-modal:         linear-gradient(135deg,#0f172a,#1e1b4b);
    --bg-modal-overlay: rgba(0,0,0,0.85);
    --bg-code:          rgba(0,0,0,0.5);
    --border:           rgba(6,182,212,0.20);
    --border-hover:     rgba(6,182,212,0.50);
    --text-primary:     #ffffff;
    --text-secondary:   #cbd5e1;
    --text-muted:       #94a3b8;
    --text-faint:       #64748b;
    --blob-opacity:     0.10;
    --scrollbar-track:  #060d1f;
    --scrollbar-border: #1e293b;
    --article-h2:       #22d3ee;
    --article-h3:       #93c5fd;
    --article-p:        #cbd5e1;
    --article-strong:   #e2e8f0;
    --article-quote:    #94a3b8;
    --article-code-bg:  rgba(6,182,212,0.15);
    --article-code-fg:  #67e8f9;
    --article-pre-code: #a5f3fc;
    --theme-transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
body.light {
    --bg-page:          linear-gradient(135deg, #e8f4fd 0%, #dbeafe 40%, #ede9fe 100%);
    --bg-card:          rgba(255,255,255,0.75);
    --bg-card-hover:    rgba(255,255,255,0.95);
    --bg-nav:           rgba(255,255,255,0.90);
    --bg-modal:         linear-gradient(135deg,#f0f9ff,#ede9fe);
    --bg-modal-overlay: rgba(15,23,42,0.60);
    --bg-code:          rgba(226,232,240,0.8);
    --border:           rgba(6,182,212,0.25);
    --border-hover:     rgba(6,182,212,0.60);
    --text-primary:     #0f172a;
    --text-secondary:   #1e293b;
    --text-muted:       #475569;
    --text-faint:       #64748b;
    --blob-opacity:     0.18;
    --scrollbar-track:  #dbeafe;
    --scrollbar-border: #bfdbfe;
    --article-h2:       #0369a1;
    --article-h3:       #1d4ed8;
    --article-p:        #1e293b;
    --article-strong:   #0f172a;
    --article-quote:    #475569;
    --article-code-bg:  rgba(6,182,212,0.12);
    --article-code-fg:  #0369a1;
    --article-pre-code: #1e40af;
}

/* ── 2. GLOBAL BASE ── */
*,*::before,*::after { box-sizing:border-box; transition:var(--theme-transition); scroll-behavior:smooth }
body { margin:0; background:var(--bg-page); color:var(--text-primary); font-family:system-ui,-apple-system,sans-serif }
.animate-float,.animate-blob,.animate-gradient,.animate-slide-up,.animate-pulse-glow,
.video-card,.article-card,.like-btn {
    transition:transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease,
               background 0.35s ease,border-color 0.35s ease,color 0.35s ease;
}

/* ── 3. ANIMATIONS ── */
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes blob     { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-50px) scale(1.1)} 66%{transform:translate(-20px,20px) scale(0.9)} }
@keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes slide-up { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px rgba(6,182,212,.5)} 50%{box-shadow:0 0 40px rgba(6,182,212,.9)} }
@keyframes modal-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }

.animate-float        { animation:float 3s ease-in-out infinite }
.animate-blob         { animation:blob 7s ease-in-out infinite }
.animate-gradient     { background-size:200% 200%; animation:gradient-shift 3s ease infinite }
.animate-slide-up     { animation:slide-up .6s ease-out forwards }
.animate-pulse-glow   { animation:pulse-glow 2s ease-in-out infinite }
.animation-delay-2000 { animation-delay:2s }
.animation-delay-4000 { animation-delay:4s }

/* ── 4. TYPOGRAPHY ── */
.text-gradient { background:linear-gradient(to right,#22d3ee,#3b82f6,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
body.light .text-gradient { background:linear-gradient(to right,#0891b2,#2563eb,#7c3aed); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.tag-pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase }

/* ── 5. LAYOUT HELPERS ── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.blob-el { opacity:var(--blob-opacity) }

/* ── 6. NAV ── */
.nav-scrolled { background:var(--bg-nav) !important; backdrop-filter:blur(12px) }

/* ── 7. CARDS ── */
.video-card:hover   { transform:translateY(-10px) }
.article-card:hover { transform:translateY(-8px) }

/* ── 8. MODAL & ARTICLE BODY ── */
.modal-overlay {
    position:fixed; inset:0; background:var(--bg-modal-overlay); backdrop-filter:blur(8px);
    z-index:1000; display:flex; align-items:flex-start; justify-content:center;
    padding:20px; overflow-y:auto; animation:fadeIn .2s ease;
}
.modal-box {
    background:var(--bg-modal); border:1px solid var(--border); border-radius:20px;
    width:100%; max-width:780px; margin:auto; animation:modal-in .25s ease; position:relative;
}
body.light .modal-box { box-shadow:0 25px 60px rgba(0,0,0,0.15) }

.article-body h2 { font-size:1.5rem; font-weight:700; color:var(--article-h2); margin:1.5rem 0 .75rem }
.article-body h3 { font-size:1.2rem; font-weight:600; color:var(--article-h3); margin:1.2rem 0 .5rem }
.article-body p  { color:var(--article-p); line-height:1.8; margin-bottom:1rem }
.article-body ul,.article-body ol { color:var(--article-p); line-height:1.8; margin-bottom:1rem; padding-left:1.5rem }
.article-body li { margin-bottom:.4rem }
.article-body code { background:var(--article-code-bg); color:var(--article-code-fg); padding:2px 6px; border-radius:4px; font-family:monospace; font-size:.9em }
.article-body pre { background:var(--bg-code); border:1px solid var(--border); border-radius:8px; padding:1rem; overflow-x:auto; margin-bottom:1rem }
.article-body pre code { background:none; padding:0; color:var(--article-pre-code); font-size:.85rem }
.article-body strong { color:var(--article-strong); font-weight:700 }
.article-body blockquote { border-left:3px solid #22d3ee; padding-left:1rem; color:var(--article-quote); font-style:italic; margin-bottom:1rem }

/* ── 9. LIKE BUTTON & GISCUS ── */
.like-btn { transition:all .2s ease }
.like-btn:hover { transform:scale(1.1) }
.giscus { margin-top:0 }

/* ── 10. THEME TOGGLE ── */
.theme-toggle {
    width:36px; height:36px; border-radius:8px;
    border:1px solid rgba(125,125,125,0.25); background:transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s ease,border-color 0.2s ease,transform 0.15s ease;
    flex-shrink:0; color:inherit;
}
.theme-toggle:hover { background:rgba(125,125,125,0.12); border-color:rgba(125,125,125,0.4); transform:scale(1.08) }
.theme-toggle svg { transition:transform 0.4s ease }
.theme-toggle:hover svg { transform:rotate(20deg) }

/* ── 11. SCROLLBAR ── */
::-webkit-scrollbar { width:8px }
::-webkit-scrollbar-track { background:var(--scrollbar-track) }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#22d3ee,#3b82f6); border-radius:4px; border:1px solid var(--scrollbar-border) }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#67e8f9,#60a5fa) }

/* ── 12. SCROLL PROGRESS BAR ── */
#scroll-progress {
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg,#22d3ee,#3b82f6,#8b5cf6);
    z-index:9999; box-shadow:0 0 10px rgba(34,211,238,0.8); transition:width 0.1s linear;
}