@font-face {
    font-family: doto;
    src: url('../fonts/Doto-Black.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-void: #080f1a;
    --color-surface: #0f1724;
    --color-phosphor: #11ece5;
    --color-phosphor-muted: #77d8d4;
    --color-ice: #f5ffff;
    --color-line: rgb(119 216 212 / 18%);
    --color-glow: rgb(17 236 229 / 24%);
    --color-shadow: rgb(1 7 13 / 70%);
    --ease-arrival: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keep this single-viewport surface from panning or exposing empty space. */
html {
    /* Positioning */
    width: 100%;
    height: 100%;

    /* Color */
    background-color: var(--color-surface);

    /* Text */
    text-align: center;
    color-scheme: dark;

    /* Other */
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    /* Positioning */
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    /* Box Model */
    box-sizing: border-box;
    margin: 0;
    padding: max(1.5rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.5rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));

    /* Color */
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 44%,
            rgb(17 236 229 / 8%),
            transparent clamp(12rem, 30vw, 32rem)
        ),
        radial-gradient(
            circle at 8% 16%,
            rgb(42 103 137 / 14%),
            transparent clamp(16rem, 34vw, 38rem)
        ),
        linear-gradient(180deg, var(--color-surface) 0%, var(--color-void) 100%);
    background-color: #080f1a;
    color: var(--color-phosphor);

    /* Text */
    font-family: doto, sans-serif;
    font-weight: 300;
    font-variation-settings:
        'wght' 300,
        'ROND' 11;

    /* Other */
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

body::before,
body::after {
    position: fixed;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

body::before {
    content: '';
    background: repeating-linear-gradient(
        180deg,
        rgb(245 255 255 / 2.5%) 0,
        rgb(245 255 255 / 2.5%) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 0.5;
    mix-blend-mode: screen;
}

body::after {
    content: '';
    background: radial-gradient(
        ellipse at center,
        transparent 34%,
        rgb(2 7 13 / 20%) 68%,
        rgb(2 7 13 / 76%) 100%
    );
}

a {
    color: var(--color-ice);
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--color-phosphor);
    outline-offset: 0.25rem;
    box-shadow: 0 0 1.25rem var(--color-glow);
}

.ambient-code {
    /* Positioning */
    position: fixed;
    z-index: 0;
    inset: 0;

    /* Box Model */
    margin: 0;
    overflow: hidden;

    /* Other */
    pointer-events: none;
}

.ambient-code code {
    /* Positioning */
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;

    /* Box Model */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    overflow: hidden;
    overscroll-behavior: none;

    /* Color */
    color: var(--color-phosphor);
    opacity: 0.09;
    text-shadow: 0 0 0.55rem rgb(17 236 229 / 34%);

    /* Text */
    text-align: left;
    font-size: clamp(0.7rem, 1.3vw, 0.7rem);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    /* Other */
    backface-visibility: hidden;
    contain: layout paint;
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%
    );
    transform: translate3d(0, 0, 0);
}

.ambient-code-track {
    /* Positioning */
    display: flex;
    flex-direction: column;

    /* Box Model */
    width: 100%;

    /* Other */
    animation: ambient-scroll 96s linear infinite;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.ambient-code-copy {
    /* Positioning */
    display: block;

    /* Box Model */
    flex: 0 0 auto;
    width: 100%;
}

.ambient-code-track-paused {
    animation-play-state: paused;
}

.site-main {
    /* Positioning */
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Box Model */
    width: 100%;
    box-sizing: border-box;
    padding: clamp(1rem, 3vw, 3rem) 0;

    /* Other */
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: console-arrival 900ms var(--ease-arrival) both;
}

.site-main::before,
.site-main::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.site-main::before {
    content: '';
    inset: clamp(0.75rem, 4vw, 3.5rem) clamp(0.5rem, 5vw, 6rem);
    border: 1px solid var(--color-line);
    opacity: 0.7;
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.site-main::after {
    content: '';
    top: 50%;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(119 216 212 / 22%),
        transparent
    );
    opacity: 0.7;
    filter: blur(0.2px);
}

/* Page acknowledgment. */
.site-credit {
    /* Positioning */
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 1rem;

    /* Box Model */
    max-width: min(24rem, calc(100% - 2rem));
    margin: 0;

    /* Color */
    color: rgb(245 255 255 / 78%);

    /* Text */
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    line-height: 1.4;
    text-align: right;
    text-shadow: 0 0 0.9rem rgb(17 236 229 / 16%);

    /* Other */
    animation: soft-arrival 1.1s var(--ease-arrival) 120ms both;
    overflow-wrap: anywhere;
}

.site-header,
.hero {
    position: relative;
    z-index: 1;
    width: 100%;
}

.brand {
    /* Positioning */
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;

    /* Box Model */
    margin: 0 auto 1.5rem;
    padding: 0 1rem;

    /* Color */
    color: var(--color-ice);
    text-shadow:
        0 0 0.04em var(--color-ice),
        0 0 0.45em rgb(17 236 229 / 28%),
        0 0 1.8em rgb(17 236 229 / 10%);

    /* Text */
    font-family: doto, sans-serif;
    font-size: clamp(2.5rem, 11vw, 7rem);
    font-weight: 400;
    font-variation-settings:
        'wght' 400,
        'ROND' 1;
    letter-spacing: -0.035em;
    line-height: 1;
    text-align: center;

    /* Other */
    animation: brand-arrival 1s var(--ease-arrival) 60ms both;
}

.brand-word {
    display: inline-block;
}

/* Automan-inspired Cursor: a small WebGL sculpture that replaces the old
   superscript asterisk while preserving the asterisk as a no-WebGL fallback. */
.brand-cursor {
    /* ================================================================
       CURSOR 3D — CENTRALIZED TUNING

       These are the only values normally needed to reposition or tune
       the mark. JavaScript reads the WebGL-related values from here.

       --cursor-size            Outer layout size relative to the brand.
       --cursor-x / --cursor-y  Visual offset without changing document flow.
       --cursor-render-scale    3D sculpture scale inside its canvas.
       --cursor-glow            0 = subdued, 1 = default, 2 = intense.
       --cursor-rotation-speed  0 = static, .5 = half speed, 2 = double speed.
       ================================================================ */
    --cursor-size: 0.18em;
    --cursor-x: -0.015em;
    --cursor-y: -0.08em;
    --cursor-render-scale: 0.7;
    --cursor-glow: 2;
    --cursor-rotation-speed: 11;

    /* Runtime values controlled by the renderer; do not tune these. */
    --brand-cursor-inner-opacity: 0.78;
    --brand-cursor-outer-opacity: 0.58;
    --brand-cursor-canvas-brightness: 1;

    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--cursor-size);
    height: var(--cursor-size);
    margin-left: 0;
    transform: translate(var(--cursor-x), var(--cursor-y));
    isolation: isolate;
    line-height: 1;
    pointer-events: none;
}

.brand-cursor::before,
.brand-cursor::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.brand-cursor::before {
    inset: 12%;
    background: radial-gradient(
        circle,
        rgb(245 255 255 / 48%) 0%,
        rgb(17 236 229 / 36%) 24%,
        rgb(17 236 229 / 7%) 46%,
        transparent 72%
    );
    filter: blur(0.08em);
    opacity: var(--brand-cursor-inner-opacity);
}

.brand-cursor::after {
    inset: -28%;
    background: radial-gradient(
        circle,
        rgb(17 236 229 / 13%) 0%,
        rgb(17 236 229 / 4%) 35%,
        transparent 70%
    );
    filter: blur(0.14em);
    opacity: var(--brand-cursor-outer-opacity);
}

.brand-cursor-canvas {
    position: absolute;
    z-index: 1;
    inset: -18%;
    display: block;
    width: 136%;
    height: 136%;
    opacity: 0;
    filter:
        brightness(var(--brand-cursor-canvas-brightness))
        drop-shadow(0 0 0.035em rgb(245 255 255 / 95%))
        drop-shadow(0 0 0.12em rgb(17 236 229 / 72%))
        drop-shadow(0 0 0.32em rgb(17 236 229 / 34%));
    transition: opacity 240ms var(--ease-arrival);
}

.brand-cursor-fallback {
    position: relative;
    z-index: 0;
    top: -0.13em;
    color: var(--color-phosphor);
    font-size: 0.3em;
    line-height: 1;
    text-shadow:
        0 0 0.12em var(--color-ice),
        0 0 0.8em rgb(17 236 229 / 55%);
    transition: opacity 120ms ease;
}

.brand-cursor-ready .brand-cursor-canvas {
    opacity: 1;
}

.brand-cursor-ready .brand-cursor-fallback {
    opacity: 0;
}

.hero-description {
    /* Positioning */
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    /* Box Model */

    /* Reserve three rendered lines and keep the viewport stable during reflow. */
    --hero-description-padding-block: 2rem;

    width: 100%;
    max-width: 52rem;
    box-sizing: border-box;
    height: calc(4.05em + var(--hero-description-padding-block));
    margin: 0;
    padding: 1rem 3rem;
    border: 0;
    overflow: hidden;

    /* Color */
    background: transparent;
    color: var(--color-phosphor-muted);

    /* Text */
    font: inherit;
    font-size: clamp(1.15rem, 1.9vw, 1.7rem);
    line-height: 1.35;
    text-align: left;
    text-shadow: 0 0 0.8rem rgb(17 236 229 / 14%);

    /* Other */
    animation: soft-arrival 900ms var(--ease-arrival) 260ms both;
    cursor: pointer;
    transition:
        color 420ms var(--ease-arrival),
        text-shadow 420ms var(--ease-arrival),
        opacity 180ms ease;
}

/* Fill each line up to the right edge and continue mid-word on the next
   line, so the typing caret advances continuously instead of jumping ahead
   word by word. */
.hero-description-text {
    display: block;
    width: 100%;
    min-width: 0;

    /* Text */
    /*word-break: break-all;*/
}

.hero-description[aria-disabled='true'] {
    /* Other */
    cursor: wait;
    opacity: 0.78;
}

.hero-description.shimmer-active {
    /* Text */
    color: var(--color-phosphor-muted);
    text-shadow: none;
}

/* Words stay plain inline boxes so the completed phrase wraps exactly like
   the character-by-character typing phase (no reflow when the shimmer starts). */
.typewriter-word {
    display: inline;
}

.typewriter-character {
    display: inline;
    color: inherit;
    vertical-align: baseline;
}

/* The shimmer is an infinite light pulse that travels through the actual glyphs. */
.hero-description.shimmer-active .typewriter-character {
    animation-delay: var(--shimmer-delay, 0ms);
    animation-duration: var(--shimmer-cycle, 4s);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: character-shimmer;
    animation-timing-function: var(--ease-arrival);
}

.hero-description.shimmer-active .hero-description-text::after {
    /* Text */
    color: var(--color-phosphor);
    text-shadow: 0 0 0.8em rgb(17 236 229 / 55%);
}

/* The lit window (1%) must match SHIMMER_LIGHT_END_RATIO in js/modules/typewriter.js. */
@keyframes character-shimmer {
    0%,
    1%,
    100% {
        color: var(--color-phosphor-muted);
        filter: brightness(1);
        text-shadow: none;
    }

    0.5% {
        color: var(--color-ice);
        filter: brightness(1.35);
        text-shadow:
            0 0 0.25em var(--color-ice),
            0 0 0.8em var(--color-phosphor),
            0 0 1.4em rgb(17 236 229 / 48%);
    }
}

.contact-list {
    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Box Model */
    margin: 0;
    gap: 0.15rem;

    /* Text */
    font-style: normal;
}

.contact-link {
    /* Positioning */
    position: relative;
    display: block;

    /* Box Model */
    padding: 0.55rem 1rem;

    /* Color */
    color: var(--color-ice);

    /* Text */
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    text-shadow: 0 0 0.8rem rgb(245 255 255 / 12%);

    /* Other */
    transition:
        color 180ms ease,
        text-shadow 180ms ease,
        transform 180ms ease;
}

.contact-link::after {
    content: '';
    position: absolute;
    right: 1rem;
    bottom: 0.25rem;
    left: 1rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(17 236 229 / 80%),
        transparent
    );
    opacity: 0.28;
    transform: scaleX(0.2);
    transition:
        opacity 180ms ease,
        transform 240ms var(--ease-arrival);
}

.contact-link:hover {
    color: var(--color-ice);
    text-shadow: 0 0 1rem rgb(17 236 229 / 38%);
    transform: translateY(-2px);
}

.contact-link:hover::after,
.contact-link:focus-visible::after {
    opacity: 0.9;
    transform: scaleX(1);
}

.hero-description-text::after,
.site-note::after {
    content: '|';
    animation: cursor-blink 4s ease-in-out infinite;
}

/* Offset each cursor so the interface feels observed rather than synchronized. */
.hero-description-text::after {
    animation-delay: -0.6s;
    animation-duration: 3.6s;
}

.site-note::after {
    animation-delay: -2.2s;
    animation-duration: 4.4s;
}

.site-footer {
    /* Positioning */
    position: relative;
    z-index: 1;

    /* Box Model */
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;

    /* Color */
    color: var(--color-phosphor-muted);

    /* Text */
    font-size: clamp(0.72rem, 1.1vw, 0.9rem);

    /* Other */
    animation: soft-arrival 1.1s var(--ease-arrival) 380ms both;
}

.site-footer::before {
    content: '';
    display: block;
    width: min(16rem, 34vw);
    height: 1px;
    margin: 0 auto 1rem;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(119 216 212 / 32%),
        transparent
    );
}

.client {
    margin: 0 0 0 47px;
    padding: 11px 47px;
    color: rgb(245 255 255 / 86%);
    text-align: right;
    text-shadow: 0 0 0.8rem rgb(17 236 229 / 12%);
}

.status-clock {
    margin: 0;
    color: var(--color-phosphor);
    letter-spacing: 0.08em;
    text-shadow: 0 0 0.7rem rgb(17 236 229 / 18%);
}

.status-clock [data-role] {
    display: block;
}

.site-note {
    width: 100%;
    box-sizing: border-box;
    min-height: 3rem;
    margin: 0;
    color: rgb(245 255 255 / 76%);
    text-shadow: 0 0 0.8rem rgb(17 236 229 / 12%);
}

.skip-link {
    position: fixed;
    z-index: 2;
    top: 1rem;
    left: 1rem;
    padding: 0.65rem 0.9rem;
    transform: translateY(-200%);
    background: var(--color-ice);
    color: var(--color-void);
    box-shadow: 0 0.5rem 1.5rem var(--color-shadow);
}

.skip-link:focus {
    transform: translateY(0);
}

@keyframes cursor-blink {
    0%,
    18% {
        opacity: 1;
    }

    19% {
        opacity: 0.56;
    }

    20% {
        opacity: 1;
    }

    21%,
    29% {
        opacity: 0.12;
    }

    30% {
        opacity: 0.82;
    }

    31%,
    56% {
        opacity: 1;
    }

    57% {
        opacity: 0.28;
    }

    58% {
        opacity: 0.9;
    }

    59%,
    64% {
        opacity: 0.18;
    }

    65%,
    100% {
        opacity: 1;
    }
}

@keyframes ambient-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes console-arrival {
    from {
        filter: blur(0.16rem) brightness(0.84);
        transform: translateY(0.45rem);
    }

    to {
        filter: blur(0) brightness(1);
        transform: translateY(0);
    }
}

@keyframes brand-arrival {
    from {
        filter: blur(0.12rem);
        opacity: 0.78;
        transform: scale(0.992);
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes soft-arrival {
    from {
        filter: blur(0.08rem);
        opacity: 0.72;
        transform: translateY(0.35rem);
    }

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

@media (prefers-reduced-motion: reduce) {
    .hero-description-text::after,
    .site-note::after,
    .ambient-code code,
    .site-main,
    .site-credit,
    .brand,
    .hero-description,
    .site-footer {
        animation: none;
    }

    .site-main,
    .brand,
    .hero-description,
    .site-credit,
    .site-footer,
    .ambient-code code {
        filter: none;
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    .hero-description.shimmer-active {
        color: var(--color-phosphor-muted);
        text-shadow: 0 0 0.8rem rgb(17 236 229 / 14%);
        animation: none;
    }

    .hero-description.shimmer-active .typewriter-character {
        animation: none;
        filter: none;
        text-shadow: none;
    }

    .ambient-code-track {
        animation: none;
        transform: none;
        will-change: auto;
    }

    .brand-cursor-canvas,
    .brand-cursor-fallback {
        transition: none;
    }

    .contact-link,
    .contact-link::after,
    .hero-description {
        transition-duration: 0ms;
    }
}

@media (width <= 575.98px), (height <= 600px) {
    body {
        padding: max(1rem, env(safe-area-inset-top))
            max(0.75rem, env(safe-area-inset-right))
            max(1rem, env(safe-area-inset-bottom))
            max(0.75rem, env(safe-area-inset-left));
        font-size: 1rem;
    }

    .site-main::before {
        inset: 0.5rem 0.35rem;
    }

    .site-credit {
        top: 0.5rem;
        right: 0.75rem;
        max-width: calc(100% - 1.5rem);
        font-size: clamp(0.6rem, 2.2vw, 0.75rem);
    }

    .brand {
        margin: 0 auto 1.25rem;
        padding: 0 0.75rem;
        line-height: 0.8;
    }

    .hero-description {
        --hero-description-padding-block: 1.2rem;

        padding: 0.6rem 1.5rem;
        font-size: clamp(1rem, 3.6vw, 1.3rem);
    }

    .contact-link {
        padding: 0.6rem 1.5rem;
        font-size: clamp(0.9rem, 3vw, 1.1rem);
    }

    .ambient-code code {
        padding: 0 12px;
        opacity: 0.055;
        font-size: clamp(0.7rem, 1.3vw, 0.7rem);
    }

    .ambient-code-track {
        animation-duration: 132s;
    }

    .site-footer {
        width: auto;
        font-size: clamp(0.7rem, 2.2vw, 0.85rem);
    }

    .site-footer::before {
        width: min(12rem, 42vw);
        margin-bottom: 0.75rem;
    }

    .client {
        margin: 0;
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .site-note {
        min-height: 2.4rem;
        padding: 0 0.75rem;
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

@media (orientation: landscape) and (height <= 575.98px) {
    body {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(13rem, 0.88fr);
        grid-template-rows: 1fr;
        align-items: center;
        column-gap: clamp(1rem, 4vw, 2.25rem);
        padding: max(0.75rem, env(safe-area-inset-top))
            max(0.75rem, env(safe-area-inset-right))
            max(0.75rem, env(safe-area-inset-bottom))
            max(0.75rem, env(safe-area-inset-left));
    }

    .site-main {
        grid-column: 1;
        justify-self: center;
        flex: none;
        justify-content: center;
        min-width: 0;
        padding-top: 0;
    }

    .brand {
        margin: 0 auto 0.5rem;
        font-size: clamp(2rem, 11vh, 3.5rem);
    }

    .hero-description {
        --hero-description-padding-block: 0.8rem;

        padding: 0.4rem 1.5rem;
        font-size: clamp(0.9rem, 3vh, 1.15rem);
    }

    .contact-link {
        padding: 0.2rem 1rem;
        font-size: clamp(0.8rem, 2.4vh, 1rem);
    }

    .site-footer {
        grid-column: 2;
        justify-self: center;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
        font-size: clamp(0.68rem, 1.9vh, 0.82rem);
        text-align: left;
    }

    .client {
        padding: 0.4rem 1rem;
        text-align: left;
    }

    .site-note {
        min-height: 1.8rem;
        max-height: 4.8rem;
        padding: 0;
        overflow: hidden;
    }
}

@media (width <= 360px) {
    .hero-description,
    .contact-link {
        padding: 0.5rem 1rem;
    }

    .hero-description {
        --hero-description-padding-block: 1rem;
    }
}