/* fw-fx.css - website-only visual effects: boot sequence, blueprint build-in and decrypt headings.
   Everything is namespaced "fwfx" and only switches on once Scripts/FwFx.js adds html.fwfx-on, so a page
   without scripts (or the offline help, which never loads this) is completely unaffected. */

/* ---- Boot sequence ------------------------------------------------------------------------ */
#fwfx-boot {
    position: fixed; inset: 0; z-index: 2147483000;
    background: #000; color: var(--fw-accent, #00BFFF);
    font: 14px/1.6 Consolas, "Lucida Console", monospace;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .45s ease;
}
#fwfx-boot.fwfx-out { opacity: 0; pointer-events: none; }
#fwfx-boot .fwfx-boot-box { width: min(560px, 86vw); }
#fwfx-boot .fwfx-boot-line { white-space: nowrap; overflow: hidden; opacity: 0; }
#fwfx-boot .fwfx-boot-line.fwfx-show { opacity: 1; }
#fwfx-boot .fwfx-boot-title { font-size: 18px; letter-spacing: .25em; margin-bottom: 14px; color: #fff; }
#fwfx-boot .fwfx-boot-ok { color: #00ff66; }
#fwfx-boot .fwfx-boot-bar { height: 2px; margin-top: 16px; background: rgba(255,255,255,.12); overflow: hidden; }
#fwfx-boot .fwfx-boot-bar > i { display: block; height: 100%; width: 0; background: var(--fw-accent, #00BFFF); box-shadow: 0 0 12px var(--fw-accent, #00BFFF); }
#fwfx-boot .fwfx-boot-skip { margin-top: 14px; font-size: 11px; opacity: .45; }

/* ---- Page build-in --------------------------------------------------------------------------- */
/* Until the first block is revealed the page content is covered (set in <head>, so nothing flashes). */
html.fwfx-cover .fw-page-background { opacity: 0 !important; }
/* Each block of the page waits hidden until it scrolls into view, then the mosaic wave (FwFx.js) or a fade reveals it. */
html.fwfx-on .fwfx-hide:not(.fwfx-in) { opacity: 0; }
html.fwfx-subtle .fwfx-in { animation: fwfx-fade .5s ease both; }
@keyframes fwfx-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Decrypt headings ---------------------------------------------------------------------- */
.fwfx-decrypting { font-variant-ligatures: none; }


/* ---- Customise drawer: the extra matrix controls make it tall, so let it scroll ------------- */
.fw-theme-bar { max-height: 78vh; overflow-y: auto; }
.fw-theme-bar input[type="range"] { width: 120px; vertical-align: middle; }
.fw-theme-bar label { margin-right: 12px; font-weight: normal; }