:root {
    --black: #000;
    --cold: rgba(205, 238, 255, .82);
    --line: rgba(220, 239, 248, .18);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    background: var(--black);
    color: #fff;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body { overflow: hidden; }

button,
input { font: inherit; }

.landing {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.visual-stage,
.video-poster,
#hero-video,
#nexus,
.vignette,
.noise {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.visual-stage {
    z-index: -1;
    overflow: hidden;
    background: #000;
}

.video-poster {
    background: #000 url("../images/autc-wave-poster-desktop-4k.jpg") 50% 47% / cover no-repeat;
    opacity: .74;
    filter: saturate(.76) contrast(1.1);
    transform: scale(1.015);
    transition: opacity 1.8s ease;
}

#hero-video {
    object-fit: cover;
    object-position: 50% 47%;
    opacity: 0;
    filter: saturate(.8) contrast(1.06) brightness(.82);
    transition: opacity 1.8s ease;
}

.video-ready #hero-video { opacity: .82; }
.video-ready .video-poster { opacity: .08; }

#nexus {
    opacity: .22;
    mix-blend-mode: screen;
    transition: opacity 1.8s ease;
}

.video-ready #nexus { opacity: .07; }

.vignette {
    background:
        radial-gradient(ellipse at 50% 47%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .02) 50%, rgba(0, 0, 0, .32) 82%, rgba(0, 0, 0, .72) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 34%, transparent 62%, rgba(0, 0, 0, .7));
}

.noise {
    pointer-events: none;
    opacity: .035;
    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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.access-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding:
        clamp(22px, 3.2vw, 52px)
        max(clamp(22px, 3.2vw, 52px), env(safe-area-inset-right))
        max(clamp(22px, 3.2vw, 52px), env(safe-area-inset-bottom))
        max(clamp(22px, 3.2vw, 52px), env(safe-area-inset-left));
}

.access-form {
    width: min(460px, 100%);
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    opacity: .26;
    transform: translateY(2px);
    transition: opacity .55s ease, transform .55s ease;
}

.access-form:hover,
.access-form:focus-within {
    opacity: .95;
    transform: translateY(0);
}

.access-form input,
.access-form button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--cold);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .18em;
    touch-action: manipulation;
}

.access-form input {
    padding: 0 3px;
    caret-color: rgba(191, 235, 255, .9);
}

.access-form input::placeholder {
    color: rgba(222, 237, 244, .68);
    opacity: 1;
}

.access-form input:focus { border-color: rgba(196, 235, 255, .68); }

.access-form button {
    width: auto;
    padding: 0 3px 0 14px;
    border-bottom-color: transparent;
    color: rgba(222, 241, 250, .76);
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease, text-shadow .25s ease;
}

.access-form button:hover,
.access-form button:focus-visible {
    color: #fff;
    text-shadow: 0 0 18px rgba(127, 217, 255, .65);
}

.access-form input:focus-visible,
.access-form button:focus-visible {
    outline: 1px solid rgba(144, 222, 255, .54);
    outline-offset: 4px;
}

.access-error .access-form {
    opacity: .82;
    animation: access-denied .28s ease-in-out 2;
}

.access-error .access-form input { border-bottom-color: rgba(255, 125, 135, .4); }

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

@keyframes access-denied {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
}

@media (orientation: portrait) {
    .video-poster {
        background-image: url("../images/autc-wave-poster-mobile-4k.jpg");
        background-position: 50% 41%;
        opacity: .68;
        transform: scale(1.01);
    }

    #hero-video { object-position: 50% 41%; }

    .vignette {
        background:
            radial-gradient(ellipse at 50% 41%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .03) 52%, rgba(0, 0, 0, .38) 84%, rgba(0, 0, 0, .7) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, .24), transparent 38%, rgba(0, 0, 0, .82));
    }
}

@media (max-width: 900px) {
    .access-shell {
        justify-content: center;
        padding-right: max(24px, env(safe-area-inset-right));
        padding-left: max(24px, env(safe-area-inset-left));
    }

    .access-form {
        width: min(560px, 100%);
        opacity: .42;
    }

    .access-form input,
    .access-form button { font-size: 16px; letter-spacing: .12em; }
}

@media (max-width: 640px) {
    body { overflow-y: auto; }

    .access-shell {
        min-height: 100dvh;
        padding:
            20px
            max(18px, env(safe-area-inset-right))
            max(20px, env(safe-area-inset-bottom))
            max(18px, env(safe-area-inset-left));
    }

    .access-form {
        width: min(100%, 420px);
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px 16px 12px;
        border: 1px solid rgba(218, 238, 247, .08);
        border-radius: 14px;
        background: rgba(0, 0, 0, .38);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
        opacity: .58;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .access-form:focus-within { opacity: .97; }

    .access-form input,
    .access-form button {
        min-height: 46px;
        font-size: 16px;
        letter-spacing: .1em;
    }

    .access-form button {
        width: 100%;
        margin-top: 3px;
        padding: 0;
        border: 1px solid rgba(204, 236, 249, .14);
        border-radius: 9px;
        background: rgba(217, 242, 252, .035);
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .access-shell {
        align-items: flex-end;
        padding-top: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .access-form {
        width: min(620px, 100%);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        padding: 8px 12px;
    }

    .access-form button { width: auto; min-width: 92px; margin: 0; }
}

@media (hover: none) {
    .access-form { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    #hero-video { display: none; }
    #nexus { opacity: .09; }
    .video-poster { opacity: .7; transition: none; }
    .access-form { transition: none; }
    .access-error .access-form { animation: none; }
}