@font-face {
    font-family: "AUTONOMIAI Wordmark Block";
    src: url("../fonts/autonomiai-wordmark-block.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: block;
}

body.is-booting,
body.is-boot-revealing {
    background: #07070d;
}

body.is-booting .desktop-shell {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.is-boot-revealing .desktop-shell {
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transition: opacity 720ms ease;
}

body.is-booting .desktop-area,
body.is-booting .taskbar {
    opacity: 0;
}

body.is-boot-revealing .desktop-area {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 520ms ease 180ms,
        transform 520ms ease 180ms;
}

body.is-boot-revealing .taskbar {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 480ms ease 420ms,
        transform 480ms ease 420ms;
}

.boot-sequence {
    --first-screen-boot-top: clamp(3rem, 7vh, 6rem);
    --first-screen-boot-left: clamp(2rem, 8vw, 12rem);
    --first-screen-brand-offset-y: -50px;
    --first-screen-progress-offset-y: -61px;

    position: fixed;
    inset: 0;
    z-index: 100;
    min-width: 320px;
    overflow: hidden;
    isolation: isolate;
    background: #000;
    color: #fff;
    font-family: "Share Tech Mono", Consolas, "Lucida Console", "Courier New", monospace;
    pointer-events: auto;
}

.boot-sequence__ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(20, 5, 45, 0.6) 0%, rgba(7, 7, 13, 1) 60%);
    transition: opacity 1.5s ease;
}

.boot-sequence__ambient.is-visible {
    opacity: 1;
}

.boot-sequence__vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
}

.boot-sequence__scanlines {
    position: absolute;
    inset: 0;
    z-index: 12;
    opacity: 0.03;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, #000 0px, #000 1px, transparent 1px, transparent 4px);
}

.boot-sequence__body {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 0;
    padding: 3rem 2rem;
}

.boot-sequence__frame {
    display: contents;
}

.boot-sequence__boot-area {
    position: absolute;
    top: var(--first-screen-boot-top);
    left: var(--first-screen-boot-left);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: clamp(0.78rem, 1.4vw, 0.95rem);
    white-space: pre;
    transform: translate(0, -20px);
}

.boot-sequence__prompt-line {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0.25rem;
}

.boot-sequence__prompt-user {
    color: rgba(255, 255, 255, 0.5);
}

.boot-sequence__prompt-command {
    color: #e2e2ff;
}

.boot-sequence__logs {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.boot-sequence__log-line {
    display: flex;
    align-items: center;
    gap: 0;
    height: 1.4em;
}

.boot-sequence__log-tag {
    color: rgba(255, 255, 255, 0.3);
    white-space: pre;
}

.boot-sequence__log-msg {
    min-width: 34ch;
    color: rgba(255, 255, 255, 0.5);
    white-space: pre;
}

.boot-sequence__log-ok {
    color: rgba(40, 200, 80, 0.7);
    font-weight: 700;
    white-space: pre;
}

.boot-sequence__cursor {
    color: #e2e2ff;
    animation: bootCursorBlink 1.06s step-end infinite;
}

.boot-sequence__cursor--spaced {
    margin-left: 0.25rem;
}

.boot-sequence__logo-wrapper {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: center;
    margin-bottom: clamp(2rem, 4vh, 3.5rem);
    isolation: isolate;
    opacity: 0;
    transform: translate(0, var(--first-screen-brand-offset-y));
}

.boot-sequence__logo-wrapper.is-visible {
    opacity: 1;
    transition: opacity 0.4s ease;
}

.boot-sequence__logo-glow {
    position: absolute;
    top: 52%;
    left: 50%;
    z-index: 0;
    width: min(78vw, 1000px);
    height: clamp(90px, 14vw, 180px);
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 26% 50%, rgba(74, 158, 255, 0.05), transparent 27%),
        radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.06), transparent 28%);
    filter: blur(18px);
    transform: translate(-50%, -50%);
}

.boot-sequence__logo-glow.is-visible {
    opacity: 0.22;
    transition: opacity 1.2s ease 1.5s;
}

.boot-sequence__logo-reveal {
    position: relative;
    z-index: 3;
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
}

.boot-sequence__logo-reveal.is-revealing {
    animation: bootRevealWordmark 2s steps(6, end) forwards;
}

.boot-sequence__logo-reveal.is-complete {
    clip-path: inset(0 0 0% 0);
}

.autonomiai-wordmark-root {
    --wordmark-box-width: min(88vw, 78rem);
    --wordmark-box-height: calc(var(--wordmark-box-width) * 96 / 712);
    --wordmark-font-scale: 0.124;
    --wordmark-letter-spacing: 0em;
    --wordmark-inline-padding: clamp(0.35rem, 0.85vw, 0.75rem);
    --wordmark-word-gap: 0.28em;
    --wordmark-kern-wi: -0.14em;
    --wordmark-kern-il: -0.04em;
    --wordmark-kern-ll: -0.34em;
    --wordmark-kern-li: -0.36em;
    --wordmark-kern-ia: -0.12em;
    --wordmark-kern-am: -0.08em;
    --wordmark-kern-os: -0.1em;

    position: relative;
    display: grid;
    place-items: center;
    width: var(--wordmark-box-width);
    height: var(--wordmark-box-height);
    overflow: visible;
}

.autonomiai-wordmark {
    display: block;
    width: max-content;
    max-width: none;
    padding-inline: var(--wordmark-inline-padding);
    overflow: visible;
    color: transparent;
    font-family: "AUTONOMIAI Wordmark Block", "Lucida Console", "Courier New", monospace;
    font-size: calc((var(--wordmark-box-width) - (var(--wordmark-inline-padding) * 2)) * var(--wordmark-font-scale));
    font-weight: 400;
    font-feature-settings: "liga" 0, "kern" 0;
    font-kerning: none;
    font-synthesis: none;
    font-variant-ligatures: none;
    letter-spacing: var(--wordmark-letter-spacing);
    line-height: 1;
    text-align: center;
    text-rendering: geometricPrecision;
    user-select: none;
    white-space: nowrap;
    background: linear-gradient(
        90deg,
        #4a9eff 0%,
        #5d8dfd 18%,
        #6f81fb 36%,
        #7c6bfa 50%,
        #9160f8 76%,
        #a855f7 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.william-os-wordmark__visual {
    display: inline-flex;
    align-items: center;
    gap: var(--wordmark-word-gap);
}

.william-os-wordmark__word {
    display: inline-flex;
    align-items: center;
}

.william-os-wordmark__letter {
    display: inline-block;
}

/* Optical kerning compensates sidebearings baked into the authorial glyph masters. */
.william-os-wordmark__letter--wi {
    margin-left: var(--wordmark-kern-wi);
}

.william-os-wordmark__letter--il {
    margin-left: var(--wordmark-kern-il);
}

.william-os-wordmark__letter--ll {
    margin-left: var(--wordmark-kern-ll);
}

.william-os-wordmark__letter--li {
    margin-left: var(--wordmark-kern-li);
}

.william-os-wordmark__letter--ia {
    margin-left: var(--wordmark-kern-ia);
}

.william-os-wordmark__letter--am {
    margin-left: var(--wordmark-kern-am);
}

.william-os-wordmark__letter--os {
    margin-left: var(--wordmark-kern-os);
}

.boot-sequence__progress-slot {
    display: grid;
    min-height: clamp(2rem, 3.2vh, 2.8rem);
    place-items: start center;
}

.boot-sequence__progress-section {
    z-index: 10;
    margin-top: clamp(0.8rem, 1.5vh, 1.2rem);
    text-align: center;
    opacity: 0;
    transform: translate(0, var(--first-screen-progress-offset-y));
}

.boot-sequence__progress-section.is-visible {
    opacity: 1;
    transition: opacity 0.5s ease 0.2s;
}

.boot-sequence__progress-bar {
    color: rgba(255, 255, 255, 0.4);
    font-family: "Share Tech Mono", Consolas, "Lucida Console", "Courier New", monospace;
    font-size: clamp(0.7rem, 1.1vw, 0.85rem);
    white-space: nowrap;
}

.boot-sequence__block-filled {
    color: #4a9eff;
    background: linear-gradient(90deg, #4a9eff, #7c6bfa, #a855f7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.boot-sequence__block-empty {
    color: rgba(255, 255, 255, 0.08);
}

.boot-sequence__progress-label {
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.12em;
}

.boot-sequence__progress-separator.is-hidden {
    display: none;
}

.boot-sequence.is-exiting {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 680ms ease,
        visibility 0s linear 680ms;
}

.boot-sequence .is-hidden {
    visibility: hidden;
    pointer-events: none;
}

@keyframes bootCursorBlink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes bootRevealWordmark {
    0% {
        clip-path: inset(0 0 100% 0);
    }

    100% {
        clip-path: inset(0 0 0% 0);
    }
}

@media (max-width: 720px) {
    .autonomiai-wordmark-root {
        --wordmark-box-width: min(94vw, 42rem);
        --wordmark-font-scale: 0.122;
        --wordmark-letter-spacing: 0em;
        --wordmark-inline-padding: clamp(0.25rem, 0.9vw, 0.55rem);
        --wordmark-word-gap: 0.26em;
    }
}

@media (max-width: 640px) {
    .boot-sequence {
        --first-screen-mobile-boot-x: 0vw;
        --first-screen-mobile-boot-y: -2.5svh;
        --first-screen-mobile-boot-scale: 1.05;
        --first-screen-mobile-wordmark-x: 0vw;
        --first-screen-mobile-wordmark-y: -6svh;
        --first-screen-mobile-wordmark-scale: 1.15;
        --first-screen-mobile-progress-x: 0vw;
        --first-screen-mobile-progress-y: -3.5svh;
        --first-screen-mobile-progress-scale: 0.95;
        --first-screen-mobile-progress-width: 100vw;
        --first-screen-mobile-boot-row-min: 0rem;
        --first-screen-mobile-brand-row-min: 4rem;
        --first-screen-mobile-brand-flex: 0.2fr;
        --first-screen-mobile-email-area: 20svh;
        --first-screen-mobile-email-flex: 0.6fr;
        --first-screen-mobile-row-gap: 0svh;
        --first-screen-mobile-progress-gap: 0svh;
    }

    .boot-sequence__body {
        padding: var(--resp-shell-padding-block, 2.25rem) var(--resp-shell-padding-inline, 1rem) 1.5rem;
    }

    .boot-sequence__frame {
        --first-screen-boot-top: clamp(0.85rem, 3svh, 1.6rem);
        --first-screen-boot-left: clamp(0.65rem, 4vw, 1.25rem);
        --first-screen-brand-offset-y: 0px;
        --first-screen-progress-offset-y: 0px;

        display: grid;
        flex: 1 1 auto;
        grid-template-areas:
            "boot"
            "brand"
            "progress"
            "email";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows:
            minmax(var(--first-screen-mobile-boot-row-min), auto)
            minmax(var(--first-screen-mobile-brand-row-min), var(--first-screen-mobile-brand-flex))
            auto
            minmax(var(--first-screen-mobile-email-area), var(--first-screen-mobile-email-flex));
        align-self: stretch;
        width: 100%;
        min-height: 0;
        row-gap: var(--first-screen-mobile-row-gap);
    }

    .boot-sequence__boot-area {
        position: relative;
        top: auto;
        left: auto;
        grid-area: boot;
        justify-self: start;
        max-width: 100%;
        gap: 0.2rem;
        font-size: clamp(0.58rem, 1.55vw, 0.68rem);
        transform:
            translate(
                var(--first-screen-mobile-boot-x),
                var(--first-screen-mobile-boot-y)
            )
            scale(var(--first-screen-mobile-boot-scale));
        transform-origin: top left;
    }

    .boot-sequence__logo-wrapper {
        grid-area: brand;
        justify-self: center;
        align-self: end;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        transform:
            translate(
                var(--first-screen-mobile-wordmark-x),
                var(--first-screen-mobile-wordmark-y)
            );
    }

    .boot-sequence__logo-reveal {
        transform: scale(var(--first-screen-mobile-wordmark-scale));
        transform-origin: center;
    }

    .boot-sequence__progress-slot {
        grid-area: progress;
        justify-self: center;
        width: 100%;
        min-height: clamp(1.25rem, 2.6svh, 1.7rem);
    }

    .boot-sequence__progress-section {
        margin-top: var(--first-screen-mobile-progress-gap);
        transform:
            translate(
                var(--first-screen-mobile-progress-x),
                var(--first-screen-mobile-progress-y)
            )
            scale(var(--first-screen-mobile-progress-scale));
        transform-origin: top center;
    }

    .boot-sequence__progress-bar {
        display: inline-block;
        width: min(100%, var(--first-screen-mobile-progress-width));
        max-width: min(100%, var(--first-screen-mobile-progress-width));
        font-size: clamp(0.54rem, 1.58vw, 0.66rem);
        line-height: 1.28;
        white-space: normal;
    }

    .boot-sequence__progress-label {
        letter-spacing: 0.06em;
    }
}

@media (max-width: 640px) and (min-width: 380px) and (min-height: 760px) {
    .boot-sequence {
        --first-screen-mobile-boot-scale: 1.1;
        --first-screen-mobile-wordmark-y: -6.5svh;
        --first-screen-mobile-progress-y: -4svh;
        --first-screen-mobile-progress-scale: 1;
    }
}

@media (max-width: 420px) {
    .autonomiai-wordmark-root {
        --wordmark-box-width: min(90vw, 32rem);
        --wordmark-font-scale: 0.118;
        --wordmark-letter-spacing: 0em;
        --wordmark-inline-padding: clamp(0.18rem, 0.8vw, 0.36rem);
        --wordmark-word-gap: 0.24em;
    }
}

@media (max-width: 340px), (max-width: 640px) and (max-height: 540px) {
    .boot-sequence {
        --first-screen-mobile-boot-scale: 0.85;
        --first-screen-mobile-wordmark-y: -10svh;
        --first-screen-mobile-wordmark-scale: 1.06;
        --first-screen-mobile-progress-y: -6svh;
        --first-screen-mobile-progress-scale: 0.76;
        --first-screen-mobile-progress-width: 80vw;
        --first-screen-mobile-email-area: 30svh;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-boot-revealing .desktop-shell,
    body.is-boot-revealing .desktop-area,
    body.is-boot-revealing .taskbar,
    .boot-sequence.is-exiting,
    .boot-sequence__ambient,
    .boot-sequence__logo-wrapper,
    .boot-sequence__logo-glow,
    .boot-sequence__progress-section {
        transition-duration: 120ms;
        transition-delay: 0ms;
    }

    .boot-sequence__cursor {
        animation-duration: 1.6s;
    }

}