/* =========================================================================
   18-preloader.css — dark code-editor front-loader. A syntax-highlighted
   window boots the portfolio, lines reveal top-to-bottom, then it fades.
   ========================================================================= */

.preloader {
    background: radial-gradient(120% 120% at 50% 30%, #0a0e18 0%, #05070c 70%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

/* the code editor stays dark on both themes — a light-syntax-on-white
   splash looked garish. It's a brief overlay that fades either way. */

.preloader .preloader-content { display: none !important; }

/* --- window ------------------------------------------------------------- */
.preloader-window {
    width: min(92vw, 480px);
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    animation: pwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pwPop {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.pw-titlebar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0.85rem;
    background: #11161f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
}
.pw-dots { display: inline-flex; gap: 6px; }
.pw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2b323d; }
.pw-dots i:nth-child(1) { background: #ff5f57; }
.pw-dots i:nth-child(2) { background: #febc2e; }
.pw-dots i:nth-child(3) { background: #28c840; }
.pw-file { color: #8b95a5; letter-spacing: 0.02em; }
.pw-status {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
    color: #59e0a8; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em;
}
.pw-status-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #2ef2a0;
    box-shadow: 0 0 8px rgba(46, 242, 160, 0.7);
    animation: pwBlink 1s ease-in-out infinite;
}
@keyframes pwBlink { 50% { opacity: 0.35; } }

/* --- code --------------------------------------------------------------- */
.pw-code {
    padding: 0.9rem 1rem 1rem;
    font-size: 0.8rem;
    line-height: 1.62;
    background:
        linear-gradient(#0d1117, #0d1117) padding-box;
}
.pw-line {
    white-space: pre;
    opacity: 0;
    transform: translateY(3px);
    animation: pwLine 0.34s ease forwards;
}
.pw-line:nth-child(1)  { animation-delay: 0.04s; }
.pw-line:nth-child(2)  { animation-delay: 0.08s; }
.pw-line:nth-child(3)  { animation-delay: 0.12s; }
.pw-line:nth-child(4)  { animation-delay: 0.16s; }
.pw-line:nth-child(5)  { animation-delay: 0.20s; }
.pw-line:nth-child(6)  { animation-delay: 0.24s; }
.pw-line:nth-child(7)  { animation-delay: 0.28s; }
.pw-line:nth-child(8)  { animation-delay: 0.32s; }
.pw-line:nth-child(9)  { animation-delay: 0.36s; }
.pw-line:nth-child(10) { animation-delay: 0.40s; }
@keyframes pwLine { to { opacity: 1; transform: none; } }

.pw-ln {
    display: inline-block; width: 1.6em; margin-right: 0.9em;
    color: #3d4553; text-align: right; user-select: none;
}
.pw-ind { white-space: pre; }

/* syntax palette — calm, modern, not neon */
.c-kw   { color: #c79bff; }   /* keywords: soft violet */
.c-str  { color: #7ee0a8; }   /* strings: soft green   */
.c-fn   { color: #6cb6ff; }   /* functions: blue       */
.c-var  { color: #e6edf3; }   /* identifiers: near-white */
.c-prop { color: #7fd6e6; }   /* properties: cyan      */
.c-op   { color: #ff9bb3; }   /* operators: rose       */
.c-cm   { color: #5b6572; font-style: italic; } /* comments */
.c-pl   { color: #8b95a5; }   /* punctuation           */

.pw-caret {
    display: inline-block;
    width: 7px; height: 1.05em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: #2ef2a0;
    animation: pwCaret 0.8s steps(1) 0.42s infinite;
    opacity: 0;
}
@keyframes pwCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- progress ----------------------------------------------------------- */
.pw-progress {
    padding: 0 1rem 1rem;
}
.pw-track {
    height: 3px; border-radius: 3px; overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}
.pw-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #2ef2a0, #6cb6ff);
    border-radius: 3px;
    transition: width 0.12s linear;
    box-shadow: 0 0 12px rgba(46, 242, 160, 0.4);
}
.pw-meta {
    display: flex; justify-content: space-between; margin-top: 0.55rem;
    font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: #6b7688;
}
.pw-meta #progress-percentage { color: #9fb0c3; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .preloader-window, .pw-line { animation: none !important; opacity: 1 !important; transform: none !important; }
    .pw-caret, .pw-status-dot { animation: none !important; }
}