/* ============================================
   INOVOID — Shared Styles
   ============================================
   Common CSS used across all pages.
   Tailwind CSS handles most styling via CDN.
   This file is for custom animations, utilities,
   and shared design tokens not covered by Tailwind.
   ============================================ */

/* --- Design Tokens --- */
:root {
    --primary: #137fec;
    --bg-light: #f6f7f8;
    --bg-dark: #101922;
}

/* --- Base --- */
body {
    font-family: 'Space Grotesk', sans-serif;
}

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.animate-fade-in       { animation: fadeInUp 0.5s ease-out both; }
.animate-fade-in-delay-1 { animation: fadeInUp 0.5s ease-out 0.1s both; }
.animate-fade-in-delay-2 { animation: fadeInUp 0.5s ease-out 0.2s both; }
.animate-fade-in-delay-3 { animation: fadeInUp 0.5s ease-out 0.3s both; }
.animate-scale-in      { animation: scaleIn 0.4s ease-out both; }

/* --- Glass Panel Effect --- */
.glass-panel {
    background: rgba(16, 25, 34, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(19, 127, 236, 0.2);
}
html:not(.dark) .glass-panel {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(19, 127, 236, 0.15);
}

/* --- Background Patterns --- */
.tech-grid {
    background-image: radial-gradient(circle at 2px 2px, rgba(19, 127, 236, 0.15) 1px, transparent 0);
    background-size: 32px 32px;
}

.grid-pattern {
    background-image: radial-gradient(rgba(19, 127, 236, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

.hero-gradient {
    background: radial-gradient(circle at 50% 50%, rgba(19, 127, 236, 0.15) 0%, transparent 70%);
}

/* --- Editor --- */
.editor-content:empty:before {
    content: attr(data-placeholder);
    color: #4b5563;
}

/* --- Prose (Post Content) --- */
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose p  { margin-bottom: 1rem; line-height: 1.8; }
.prose pre { background: #0f172a; border: 1px solid #1e293b; border-radius: 0.75rem; padding: 1rem; margin: 1.5rem 0; overflow-x: auto; }
.prose code { font-family: monospace; font-size: 0.875rem; }
.prose ul, .prose ol { margin: 1rem 0; padding-left: 1.5rem; }
.prose li  { margin-bottom: 0.5rem; }
.prose blockquote { border-left: 4px solid #137fec; padding-left: 1rem; margin: 1.5rem 0; color: #94a3b8; font-style: italic; }

/* --- Mobile Menu --- */
.mobile-menu-overlay { transition: opacity 0.3s ease, visibility 0.3s ease; }
.mobile-menu-overlay.hidden { opacity: 0; visibility: hidden; }
.mobile-menu-overlay:not(.hidden) { opacity: 1; visibility: visible; }
.mobile-menu-panel { transition: transform 0.3s ease; }
.mobile-menu-overlay.hidden .mobile-menu-panel { transform: translateX(100%); }

/* --- Toggle Switch --- */
.toggle-checkbox:checked { background-color: #137fec; }
.toggle-checkbox:checked + .toggle-label { background-color: #137fec; }
.toggle-checkbox:checked + .toggle-label .toggle-dot { transform: translateX(100%); }