assets/css/boot.css

/*
 * ============================================================
 * XENEX GLASS OS
 * Boot Screen
 * ============================================================
 *
 * Design principle:
 * Realistic glass appearance without depending on heavy SVG
 * filter stacks.
 *
 * The loader uses:
 * - transparency
 * - layered gradients
 * - highlights
 * - shadows
 * - CSS transforms
 * - animated light
 *
 * No SVG filters.
 * No external libraries.
 */

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: #050505;
    color: #ffffff;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ------------------------------------------------------------
   BOOT ROOT
   ------------------------------------------------------------ */

.xenex-boot {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.035),
            transparent 34%
        ),
        #050505;

    opacity: 1;

    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}


/*
 * Added by boot.js when the boot sequence finishes.
 */
.xenex-boot.is-exiting {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ------------------------------------------------------------
   AMBIENT LIGHT FIELD
   ------------------------------------------------------------ */

.boot-background {
    position: absolute;
    inset: -20%;

    z-index: -2;

    pointer-events: none;

    overflow: hidden;
}


/*
 * These are deliberately soft.
 * They are not the glass itself.
 *
 * The moving light gives the glass something to react to.
 */

.boot-glow {
    position: absolute;

    width: 28rem;
    height: 28rem;

    border-radius: 50%;

    opacity: 0.12;

    filter: blur(80px);

    transform: translate3d(0, 0, 0);

    will-change: transform;
}


/* Blue */
.boot-glow-blue {
    top: 8%;
    left: 12%;

    background: #168cff;

    animation:
        blue-drift 9s ease-in-out infinite alternate;
}


/* Orange */
.boot-glow-orange {
    right: 10%;
    bottom: 10%;

    background: #ff7a18;

    animation:
        orange-drift 11s ease-in-out infinite alternate;
}


/* Red */
.boot-glow-red {
    right: 25%;
    top: 20%;

    background: #ff3045;

    animation:
        red-drift 13s ease-in-out infinite alternate;
}


@keyframes blue-drift {

    from {
        transform:
            translate3d(-8vw, -3vh, 0)
            scale(0.9);
    }

    to {
        transform:
            translate3d(15vw, 12vh, 0)
            scale(1.15);
    }
}


@keyframes orange-drift {

    from {
        transform:
            translate3d(8vw, 10vh, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(-14vw, -8vh, 0)
            scale(1.2);
    }
}


@keyframes red-drift {

    from {
        transform:
            translate3d(5vw, -5vh, 0)
            scale(0.8);
    }

    to {
        transform:
            translate3d(-12vw, 12vh, 0)
            scale(1.1);
    }
}


/* ------------------------------------------------------------
   BOOT CONTENT
   ------------------------------------------------------------ */

.boot-content {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(90vw, 440px);

    text-align: center;
}


/* ------------------------------------------------------------
   XENEX WORDMARK
   ------------------------------------------------------------ */

.xenex-wordmark {
    display: flex;
    align-items: baseline;

    margin-bottom: 42px;

    color: rgba(255, 255, 255, 0.96);

    font-size: clamp(2rem, 7vw, 3.1rem);
    font-weight: 500;
    letter-spacing: -0.055em;

    opacity: 0;

    transform: translateY(10px);

    animation:
        wordmark-in 1200ms
        350ms
        cubic-bezier(0.2, 0.8, 0.2, 1)
        forwards;
}


.xenex-wordmark .xenex-x {
    font-weight: 700;

    background:
        linear-gradient(
            120deg,
            #ffffff 10%,
            #55aaff 48%,
            #ffffff 82%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}


.xenex-wordmark small {
    margin-left: 8px;

    font-size: 0.35em;
    font-weight: 600;

    letter-spacing: 0.08em;

    opacity: 0.65;
}


@keyframes wordmark-in {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ------------------------------------------------------------
   GLASS LOADER
   ------------------------------------------------------------ */

.glass-loader {
    position: relative;

    width: min(72vw, 310px);

    padding: 10px;

    /*
     * The outer capsule is intentionally not heavily blurred.
     * We want it to look like physical glass rather than frosted
     * plastic.
     */

    border: 1px solid rgba(255, 255, 255, 0.20);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.035) 45%,
            rgba(255, 255, 255, 0.075)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 16px 45px rgba(0, 0, 0, 0.45);

    /*
     * This is the only backdrop blur used in the boot capsule.
     * It is deliberately restrained.
     */

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    opacity: 0;

    transform: scale(0.94);

    animation:
        loader-in 900ms
        800ms
        cubic-bezier(0.2, 0.8, 0.2, 1)
        forwards;
}


@keyframes loader-in {

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/*
 * A very subtle diagonal reflection across the glass.
 */

.glass-loader::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.12),
            transparent 22%,
            transparent 72%,
            rgba(255, 255, 255, 0.055)
        );

    pointer-events: none;
}


/* ------------------------------------------------------------
   INNER GLASS
   ------------------------------------------------------------ */

.loader-glass {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 7px 8px;

    border-radius: 10px;

    background:
        rgba(0, 0, 0, 0.25);

    overflow: hidden;
}


/* ------------------------------------------------------------
   THREE LOADING BARS
   ------------------------------------------------------------ */

.loader-bar {
    position: relative;

    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5);
}


/*
 * The moving light.
 *
 * It crosses each bar horizontally.
 * The slight skew makes it feel less like a simple
 * loading gradient and more like a passing light source.
 */

.loader-light {
    position: absolute;

    top: -5px;
    left: -35%;

    width: 35%;
    height: calc(100% + 10px);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.85),
            #ffffff,
            rgba(255, 255, 255, 0.5),
            transparent
        );

    transform: skewX(-18deg);

    filter: blur(0.3px);

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.65);

    will-change: transform;
}


/*
 * Each bar has a slightly different timing.
 * This prevents the three lights from looking mechanically
 * synchronized.
 */

.loader-bar:nth-child(1) .loader-light {
    animation:
        light-pass 2.4s linear infinite;
}


.loader-bar:nth-child(2) .loader-light {
    animation:
        light-pass 2.4s 500ms linear infinite;
}


.loader-bar:nth-child(3) .loader-light {
    animation:
        light-pass 2.4s 1000ms linear infinite;
}


@keyframes light-pass {

    0% {
        transform:
            translateX(0)
            skewX(-18deg);
    }

    100% {
        transform:
            translateX(390%)
            skewX(-18deg);
    }
}


/* ------------------------------------------------------------
   BOOT STATUS
   ------------------------------------------------------------ */

.boot-status {
    margin-top: 20px;

    min-height: 1.2em;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.72rem;
    font-weight: 400;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    opacity: 0;

    animation:
        status-in 800ms
        1100ms
        ease
        forwards;
}


@keyframes status-in {

    to {
        opacity: 1;
    }
}


/* ------------------------------------------------------------
   TRANSITION LAYER
   ------------------------------------------------------------ */

.boot-transition {
    position: absolute;
    inset: 0;

    z-index: 20;

    pointer-events: none;

    background: #050505;

    opacity: 0;
}


/*
 * JS will add this class when handing control to the
 * next Xenex OS module.
 */

.boot-transition.is-active {
    animation:
        transition-cover 850ms
        ease
        forwards;
}


@keyframes transition-cover {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .xenex-wordmark {
        opacity: 1;
        transform: none;
    }

    .glass-loader {
        opacity: 1;
        transform: none;
    }

    .boot-status {
        opacity: 1;
    }
}


/* ------------------------------------------------------------
   SMALL PHONES
   ------------------------------------------------------------ */

@media (max-width: 380px) {

    .xenex-wordmark {
        margin-bottom: 32px;
    }

    .glass-loader {
        width: 78vw;
        padding: 8px;
    }

    .loader-bar {
        height: 6px;
    }

    .boot-status {
        font-size: 0.64rem;
    }
}


/* ------------------------------------------------------------
   LARGE SCREENS
   ------------------------------------------------------------ */

@media (min-width: 1000px) {

    .glass-loader {
        width: 330px;
    }

    .loader-bar {
        height: 8px;
    }
}