/* ============================================================
   Jasper's Tech Blog — Shared styles (loader, terminal chrome,
   keyframes, statusbar) used by both blog-page and blog-post.
   ============================================================ */

:root {
    --blog-bg:          #0a192f;
    --blog-surface:     #0a192f;
    --blog-surface2:    #0d1f38;
    --blog-surface3:    #112240;
    --blog-border:      rgba(255, 154, 26, 0.15);
    --blog-border2:     rgba(255, 154, 26, 0.35);
    --blog-orange:      #ff9a1a;
    --blog-gold:        #ffd166;
    --blog-text:        #e6f1ff;
    --blog-text-muted:  #8892b0;
    --blog-text-accent: #ccd6f6;
    --blog-card-bg:     #112240;
    --blog-card-hover:  #172d52;
    --blog-scan:        rgba(0, 0, 0, 0.22);
}

/* ── Loading screen ─────────────────────────────────────── */

.blog-loader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: var(--blog-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.blog-loader.blog-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.blog-loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.blog-loader__glow {
    position: absolute;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 154, 26, 0.25) 0%, transparent 70%);
    top: -60px;
    animation: loaderGlow 2s ease-in-out infinite alternate;
    pointer-events: none;
}

.blog-loader__mascot {
    width: 100px; height: 100px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 28px rgba(255, 154, 26, 0.8));
    animation: loaderBounce 0.6s ease-in-out infinite alternate;
    position: relative; z-index: 1;
}

.blog-loader__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem; font-weight: 700;
    color: var(--blog-text); letter-spacing: -0.02em; margin: 0;
}

.blog-loader__title em { color: var(--blog-orange); font-style: normal; }

.blog-loader__text {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem; color: var(--blog-text-muted);
}

.blog-loader__cursor { color: var(--blog-orange); animation: blog-blink 0.6s step-start infinite; }

.blog-loader__bar {
    width: 180px; height: 3px;
    background: rgba(255, 154, 26, 0.15);
    border-radius: 2px; overflow: hidden;
}

.blog-loader__bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--blog-orange), var(--blog-gold));
    border-radius: 2px;
    animation: loaderBar 1.8s ease-in-out forwards;
}

.blog-loader__hints {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem; color: #5a6a8a;
    display: flex; gap: 0.15rem;
}

.blog-loader__dots { animation: loaderDots 1.2s step-end infinite; }

/* ── Shared keyframes ──────────────────────────────────── */

@keyframes loaderBounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

@keyframes loaderGlow {
    from { opacity: 0.5; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1.1); }
}

@keyframes loaderBar {
    0%   { width: 0%; }
    30%  { width: 40%; }
    60%  { width: 70%; }
    100% { width: 100%; }
}

@keyframes loaderDots {
    0%   { content: ''; opacity: 0.4; }
    33%  { content: '.'; opacity: 0.6; }
    66%  { content: '..'; opacity: 0.8; }
    100% { content: '...'; opacity: 1; }
}

@keyframes blogFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes blogFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes blogSlideRight {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes blogScaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes blog-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Shared reduced-motion (loader) ────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .blog-loader { transition: none; }
    .blog-loader__mascot,
    .blog-loader__glow,
    .blog-loader__cursor { animation: none; }
}