/* ============================================================
   BOOT OVERLAY
   ============================================================ */
.boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--byte-ink-950);
    color: var(--byte-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--byte-font-mono);
    animation: boot-in 220ms ease-out;
}
.boot-overlay.fading { animation: boot-out 500ms ease-out forwards; }
@keyframes boot-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-out { to { opacity: 0; transform: scale(1.02); } }
.boot__inner {
    width: min(540px, 88vw);
    text-align: left;
}
.boot__logo {
    display: flex;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}
.boot__logo::before { width: 28px; height: 28px; }

/* ============================================================
   BYTE WORDMARK — shared brand component
   Mirrors the menubar logo (Byte / Side[orange] / .[orange,pulse] / io[muted])
   with optional graphic icon. Used in: boot, power-overlay, lock-screen.
   Scale via font-size on parent; icon size via .byte-wordmark::before.
   ============================================================ */
.byte-wordmark {
    display: inline-flex;
    align-items: center;
    font-family: var(--byte-font-mono);
    font-weight: 700;
    color: var(--byte-text);
    letter-spacing: 0.02em;
}
.byte-wordmark::before {
    content: '';
    width: 22px;
    height: 22px;
    margin-right: 10px;
    background-image: url('/assets/icons/favicon-96x96.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 8px var(--byte-primary-glow));
    flex-shrink: 0;
}
.byte-wordmark__side { color: var(--byte-primary); }
.byte-wordmark__dot  { color: var(--byte-primary); font-weight: 700; }
.byte-wordmark__io   { color: var(--byte-text-muted); font-weight: 500; }
.byte-wordmark--animated .byte-wordmark__dot {
    animation: byte-wordmark-pulse 2.4s ease-in-out infinite;
}
@keyframes byte-wordmark-pulse {
    0%, 100% { opacity: 1;    color: var(--byte-primary); }
    50%      { opacity: 0.55; color: var(--byte-primary-hover); }
}
@media (prefers-reduced-motion: reduce) {
    .byte-wordmark--animated .byte-wordmark__dot { animation: none; }
}
.boot__tagline {
    font-size: 13px;
    color: var(--byte-text-muted);
    text-align: left;
    margin-bottom: 28px;
    letter-spacing: 0.01em;
}
.boot__lines {
    font-size: 13px;
    line-height: 1.8;
    color: var(--byte-text-muted);
    min-height: 200px;
}
.boot__line {
    animation: boot-line 280ms ease-out;
    white-space: pre;
    overflow: hidden;
}
.boot__line--welcome {
    margin-top: 16px;
    color: var(--byte-primary);
    font-size: 16px;
    font-weight: 500;
}
@keyframes boot-line { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.boot__bar {
    margin-top: 28px;
    height: 2px;
    background: var(--byte-border-strong);
    overflow: hidden;
    border-radius: 1px;
}
.boot__bar span {
    display: block;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--byte-primary), transparent);
    animation: boot-progress 1.2s linear infinite;
}
@keyframes boot-progress { from { transform: translateX(-100%); } to { transform: translateX(420%); } }