:root {
    --ink: #05070b;
    --space: #080b11;
    --paper: #f3f1e9;
    --blue: #a9d8ff;
    --blue-deep: #275e8b;
    --electric: #74bfff;
    --line: rgba(202, 224, 241, 0.24);
    --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html {
    background: var(--ink);
    color: var(--paper);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
    background: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-rendering: geometricPrecision;
}

body.is-loading { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: .75rem 1rem;
    color: var(--ink);
    background: var(--paper);
    transform: translateY(-180%);
}

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

.loader {
    position: fixed;
    z-index: 900;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--ink);
    transition: opacity .8s var(--ease), visibility .8s;
}

.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image: radial-gradient(circle, rgba(255,255,255,.25) 0 1px, transparent 1.5px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at center, #000, transparent 65%);
}

.loader__dot {
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 18px 5px rgba(120, 194, 255, .35);
    animation: loader-pulse 1.5s ease-in-out infinite;
}

.loader p {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    margin: 0;
    font: 500 .65rem/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .18em;
}

body.is-ready .loader { opacity: 0; visibility: hidden; }

@keyframes loader-pulse {
    50% { transform: scale(1.8); box-shadow: 0 0 35px 10px rgba(120, 194, 255, .55); }
}

.cursor {
    position: fixed;
    z-index: 800;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(169, 216, 255, .66);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
    transform: translate3d(-100px, -100px, 0);
    transition: width .25s, height .25s, border-color .25s;
}

.cursor span {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: white;
    transform: translate(-50%, -50%);
}

.cursor.is-active { width: 58px; height: 58px; border-color: white; }

.page-progress {
    position: fixed;
    z-index: 700;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--blue);
    box-shadow: 0 0 12px var(--electric);
}

.masthead {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 1.5rem 2rem;
    pointer-events: none;
    font: 500 .63rem/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .15em;
    mix-blend-mode: difference;
    transition: opacity .45s ease;
}

.masthead.is-hidden { opacity: 0; visibility: hidden; }

.masthead a { pointer-events: auto; text-decoration: none; }
.masthead a span { margin-left: .12em; font-size: .6em; vertical-align: top; }
.masthead p { margin: 0; }
.masthead__phase { justify-self: end; }

.sequence { height: 720vh; background: var(--ink); }

.sequence__sticky,
.aperture__sticky,
.horizon__sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    overflow: hidden;
}

.sequence__canvas,
.sequence__fallback,
.aperture__source {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sequence__canvas { background: var(--ink); }

.sequence__fallback,
.aperture__source {
    display: none;
    background: var(--ink) url("assets/sequence/frame-119.webp") center / cover no-repeat;
}

.film-grain {
    position: absolute;
    z-index: 8;
    inset: -30%;
    opacity: .12;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    animation: grain .35s steps(2) infinite;
    mix-blend-mode: screen;
}

@keyframes grain {
    0% { transform: translate3d(-2%, 3%, 0); }
    25% { transform: translate3d(3%, -4%, 0); }
    50% { transform: translate3d(5%, 2%, 0); }
    75% { transform: translate3d(-4%, -1%, 0); }
    100% { transform: translate3d(1%, 5%, 0); }
}

.chapter {
    position: absolute;
    z-index: 10;
    left: 7vw;
    top: 50%;
    max-width: 86vw;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 42px, 0);
    transition: opacity .5s ease, transform .9s var(--ease);
}

.chapter.is-active { opacity: 1; transform: translate3d(0, -50%, 0); }

.chapter p,
.panel > p {
    margin: 0 0 1.2rem;
    font: 600 .64rem/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .2em;
}

.chapter h1,
.chapter h2,
.panel h2 {
    margin: 0;
    font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(3.6rem, 10vw, 10.5rem);
    font-stretch: condensed;
    font-weight: 400;
    line-height: .82;
    letter-spacing: -.075em;
}

.chapter--signal,
.chapter--world { left: auto; right: 7vw; text-align: right; }
.chapter--system { top: auto; bottom: 10vh; }
.chapter--system.is-active { transform: translateY(0); }
.chapter--world h2 { font-size: clamp(3rem, 8.5vw, 9rem); }

.scroll-cue {
    position: absolute;
    z-index: 11;
    left: 2rem;
    bottom: 1.8rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    font: 500 .6rem/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
}

.scroll-cue span { width: 30px; height: 1px; background: currentColor; animation: cue 1.5s ease-in-out infinite; }
@keyframes cue { 50% { width: 58px; opacity: .35; } }

.aperture { height: 360vh; background: var(--ink); }
.aperture__source { display: block; }

.aperture__source::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(5,7,11,.1) 30%, var(--ink) 78%);
}

.aperture__reveal {
    --mask-radius: 0vmax;
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 50% 46%, rgba(255,255,255,.98) 0 8%, rgba(169,216,255,.9) 25%, rgba(92,159,211,.82) 50%, #dce9ec 78%),
        var(--blue);
    clip-path: circle(var(--mask-radius) at 50% 50%);
    will-change: clip-path;
}

.aperture__reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(circle, rgba(5,7,11,.9) 0 1px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: radial-gradient(circle at center, transparent 12%, #000 82%);
}

.aperture__reveal > img {
    position: relative;
    z-index: 3;
    width: clamp(124px, 16vw, 224px);
    filter: drop-shadow(0 24px 34px rgba(7, 20, 34, .16));
}

.aperture__reveal > p {
    position: absolute;
    z-index: 3;
    bottom: 7vh;
    left: 50%;
    width: 100%;
    margin: 0;
    text-align: center;
    font: 600 clamp(.72rem, 1vw, 1rem)/1.35 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .18em;
    transform: translateX(-50%);
}

.aperture__orbital {
    position: absolute;
    z-index: 1;
    inset: 50% auto auto 50%;
    width: min(78vw, 800px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.aperture__orbital i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(5,7,11,.2);
    border-radius: 50%;
    animation: orbit 18s linear infinite;
}

.aperture__orbital i:nth-child(2) { inset: 14%; animation-duration: 13s; animation-direction: reverse; }
.aperture__orbital i:nth-child(3) { inset: 28%; animation-duration: 9s; }
.aperture__orbital i::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ink);
}

@keyframes orbit { to { rotate: 1turn; } }

.aperture__label {
    position: absolute;
    z-index: 3;
    left: 2rem;
    bottom: 1.8rem;
    margin: 0;
    font: 500 .6rem/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
    mix-blend-mode: difference;
}

.horizon { height: 380vh; background: var(--paper); }
.horizon__sticky { color: var(--ink); background: var(--paper); }

.horizon__meta {
    position: absolute;
    z-index: 5;
    top: 4.6rem;
    left: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
    font: 600 .6rem/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
    mix-blend-mode: difference;
}

.horizon__line { flex: 1; height: 1px; background: currentColor; opacity: .28; }

.horizon__track {
    display: flex;
    width: 200vw;
    height: 100%;
    will-change: transform;
}

.panel {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    padding: 16vh 6vw 9vh;
    overflow: hidden;
    border-right: 1px solid rgba(5,7,11,.22);
}

.panel h2 { max-width: 90vw; font-size: clamp(4rem, 11vw, 11rem); }
.panel--projects { background: var(--paper); }

.project-orbit {
    position: absolute;
    right: 7vw;
    bottom: 5vh;
    width: min(36vw, 470px);
    aspect-ratio: 1;
}

.project-orbit > i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(5,7,11,.34);
    border-radius: 50%;
}

.project-orbit > i:nth-child(2) { inset: 20%; }
.project-orbit > i:nth-child(3) { inset: 40%; }

.project-orbit::before,
.project-orbit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background: rgba(5,7,11,.16);
    transform: translate(-50%, -50%) rotate(-28deg);
}

.project-orbit::after { transform: translate(-50%, -50%) rotate(62deg); }

.project-orbit__core {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: clamp(54px, 6vw, 82px);
    transform: translate(-50%, -50%);
}

.project-orbit__core img {
    filter: drop-shadow(0 12px 16px rgba(5,7,11,.16));
}

.project-orbit__node {
    position: absolute;
    z-index: 3;
    top: 8%;
    right: 4%;
    display: grid;
    min-width: 92px;
    padding: .8rem .9rem;
    color: var(--paper);
    background: var(--blue-deep);
    box-shadow: 0 12px 30px rgba(39,94,139,.2);
    animation: project-float 3.4s ease-in-out infinite;
}

.project-orbit__node span,
.project-orbit__node strong {
    font: 600 .58rem/1.25 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .14em;
}

.project-orbit__node span { opacity: .62; }
.project-orbit__node strong { margin-top: .35rem; font-size: .72rem; }

.project-orbit__satellite {
    position: absolute;
    z-index: 2;
    left: 2%;
    bottom: 24%;
    width: 11px;
    aspect-ratio: 1;
    border: 2px solid var(--blue-deep);
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 0 0 7px rgba(39,94,139,.12);
}

@keyframes project-float {
    50% { transform: translateY(-10px); }
}

.panel--luthn {
    display: grid;
    place-items: center;
    color: var(--paper);
    background:
        radial-gradient(circle at 50% 50%, rgba(39, 94, 139, .32), transparent 36%),
        var(--ink);
}

.panel--luthn::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(circle, var(--blue) 0 1px, transparent 1.5px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, #000, transparent 67%);
}

.project-state {
    position: absolute;
    z-index: 4;
    top: 15vh;
    left: 6vw;
    display: flex;
    align-items: center;
    gap: .65rem;
    font: 600 .63rem/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .17em;
}

.project-state i {
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 14px var(--electric);
    animation: loader-pulse 1.8s ease-in-out infinite;
}

.luthn-lockup {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.2rem, 2.8vh, 2rem);
}

.luthn-wordmark {
    width: min(36vw, 435px);
}

.luthn-system {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(62vw, 760px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.luthn-system i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(169,216,255,.14);
    border-radius: 50%;
    animation: orbit 26s linear infinite;
}

.luthn-system i:nth-child(2) { inset: 18%; animation-duration: 18s; animation-direction: reverse; }
.luthn-system i:nth-child(3) { inset: 36%; animation-duration: 11s; }

.luthn-system span {
    position: absolute;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 16px rgba(116,191,255,.72);
}

.luthn-system span:nth-of-type(1) { top: 8%; left: 46%; }
.luthn-system span:nth-of-type(2) { top: 51%; left: 13%; }
.luthn-system span:nth-of-type(3) { right: 18%; bottom: 19%; }

.project-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font: 600 clamp(.76rem, .9vw, .94rem)/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
}

.project-link a {
    display: grid;
    place-items: center;
    width: 36px;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
    transition: color .25s, background .25s, transform .25s;
}

.project-link a:hover,
.project-link a:focus-visible {
    color: var(--ink);
    background: var(--blue);
    transform: scale(1.08);
    outline: none;
}

.project-link svg { width: 16px; height: 16px; }

.finale {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.35rem, 3vh, 2.2rem);
    min-height: 100svh;
    padding: 10vh 1.5rem;
    overflow: hidden;
    text-align: center;
    background: var(--ink);
}

.finale h2 {
    z-index: 2;
    margin: 0;
    font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(5rem, 12vw, 11rem);
    font-weight: 400;
    line-height: .72;
    letter-spacing: -.08em;
}

.finale__logo {
    position: relative;
    z-index: 2;
    width: clamp(92px, 10vw, 148px);
    filter: drop-shadow(0 16px 28px rgba(169,216,255,.12));
}

.finale__vision {
    position: relative;
    z-index: 2;
    max-width: 34rem;
    margin: 0 0 clamp(1.2rem, 3vh, 2.4rem);
    text-align: center;
    font: 600 clamp(.68rem, .82vw, .86rem)/1.5 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
}

.finale a {
    z-index: 2;
    margin: 0;
    font: 500 clamp(.72rem, 1vw, .95rem)/1.5 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .14em;
}

.finale a {
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.54);
    padding-bottom: .4rem;
}

.finale__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(85vw, 900px);
    aspect-ratio: 1;
    border: 1px solid rgba(169,216,255,.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 9vw rgba(169,216,255,.025),
        0 0 0 18vw rgba(169,216,255,.018),
        inset 0 0 120px rgba(169,216,255,.06);
}

@media (max-width: 720px) {
    .masthead { padding: 1.2rem; grid-template-columns: 1fr 1fr; }
    .masthead > p:nth-child(2) { display: none; }
    .chapter { left: 1.2rem; right: auto; top: 22vh; transform: translateY(30px); }
    .chapter.is-active { transform: translateY(0); }
    .chapter--signal,
    .chapter--world { left: 1.2rem; right: 1.2rem; top: auto; bottom: 12vh; text-align: left; }
    .chapter--system { left: 1.2rem; bottom: 12vh; }
    .chapter h1,
    .chapter h2 { font-size: clamp(3rem, 17vw, 6rem); }
    .chapter--world h2 { font-size: clamp(2.7rem, 14.5vw, 5.2rem); }
    .scroll-cue { left: 1.2rem; bottom: 1.2rem; }
    .scroll-cue { font-size: .52rem; }
    .aperture__label { left: 1.2rem; bottom: 1.2rem; }
    .aperture__reveal > p { bottom: 10vh; padding: 0 1.2rem; font-size: .62rem; }
    .horizon__meta { top: 3.7rem; left: 1.2rem; right: 1.2rem; }
    .panel { padding: 16vh 1.2rem 8vh; }
    .panel h2 { font-size: clamp(3.4rem, 18vw, 6rem); }
    .project-orbit { right: -10vw; bottom: 7vh; width: 72vw; }
    .project-orbit__node { min-width: 76px; padding: .65rem .7rem; }
    .project-orbit__node strong { font-size: .62rem; }
    .project-state { top: 14vh; left: 1.2rem; }
    .luthn-wordmark { width: 42vw; }
    .luthn-system { width: 115vw; }
    .luthn-lockup { gap: 1.25rem; }
    .project-link { font-size: .66rem; gap: .7rem; }
    .project-link a { width: 32px; }
    .finale { min-height: 100svh; gap: 1.5rem; }
    .finale h2 { font-size: clamp(5rem, 25vw, 7rem); }
    .finale__vision { max-width: 19rem; margin-bottom: 1.5rem; font-size: .62rem; }
}

@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    .sequence { height: 120svh; }
    .sequence__canvas { display: none; }
    .sequence__fallback { display: block; }
    .chapter { display: none; }
    .chapter--world { display: block; opacity: 1; transform: none; }
    .aperture { height: 110svh; }
    .aperture__reveal { clip-path: none; }
    .horizon { height: auto; }
    .horizon__sticky { position: relative; height: auto; overflow: visible; }
    .horizon__track { display: block; width: 100%; transform: none !important; }
    .panel { width: 100%; min-height: 100svh; }
}