/* Opening title: a split-flap departures board over a letterboxed crane shot of 47th Street. */

:root {
    --ink: #000;
    --paper: #efe3c4;
    --tungsten: #f2a541;
    --signal: #e65a3e;
    --flap-top: #25242a;
    --flap-bottom: #1a191e;
    --title-inset: clamp(22px, 7vw, 112px);
    /* Bars sized toward a 2.39:1 frame, but never swallowing a phone screen. */
    --bar: clamp(42px, calc((100vh - 100vw / 2.39) / 2), 15vh);
}

.boot {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: calc(var(--bar) + 32px) var(--title-inset) calc(var(--bar) + 40px);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.42) 34%, rgba(0, 0, 0, 0) 66%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 48%);
}

.boot-frame::before,
.boot-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--bar);
    background: var(--ink);
    z-index: 1;
}
.boot-frame::before { top: 0; }
.boot-frame::after { bottom: 0; }

.boot-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(980px, 100%);
}

/* ---------- split-flap tiles ---------- */

.boot-logo {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    margin: 0;
    font-size: clamp(50px, 9.4vw, 136px);
    line-height: 1;
}
.flap-row {
    display: inline-flex;
    font: 900 1em/1 "Big Shoulders Display", "Oswald", Impact, sans-serif;
    color: var(--paper);
}
.flap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 0.66em;
    height: 1.04em;
    margin-right: 0.055em;
    border-radius: 0.05em;
    background: linear-gradient(var(--flap-top) 0 49.3%, #050506 49.3% 50.7%, var(--flap-bottom) 50.7% 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 0.05em 0.12em rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
/* Hinge pins at the fold. */
.flap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 0.035em);
    height: 0.07em;
    background: linear-gradient(90deg, #000 0 0.05em, transparent 0.05em calc(100% - 0.05em), #000 calc(100% - 0.05em));
    z-index: 2;
}
.flap b {
    font-weight: 900;
    transform: translateY(0.035em);
    text-shadow: 0 0.02em 0 rgba(0, 0, 0, 0.5);
}
.flap.flip::after {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(#302f36, var(--flap-top));
    transform-origin: 50% 100%;
    animation: flap-fold 90ms ease-in forwards;
    z-index: 1;
}
@keyframes flap-fold {
    from { transform: scaleY(1); }
    to { transform: scaleY(0); }
}
.flap-gap {
    width: 0.24em;
    background: none;
    box-shadow: none;
}
.flap-gap::before { display: none; }
.flap-num { color: var(--tungsten); }
.flap-colon { width: 0.3em; background: none; box-shadow: none; }
.flap-colon::before { display: none; }

/* ---------- departure line ---------- */

.boot-departure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 22px 0 0;
}
.flap-sm { font-size: 28px; }
.flap-sm .flap { width: 0.64em; }
.flap-year .flap { transition: color 180ms ease; }
.flap-year.drift .flap { color: var(--signal); }
.boot-departure-text {
    color: rgba(239, 227, 196, 0.78);
    font: 600 17px/1.2 "Big Shoulders Text", "Oswald", sans-serif;
    letter-spacing: 0.04em;
}

.boot-line {
    max-width: 34em;
    margin: 22px 0 30px;
    color: rgba(239, 227, 196, 0.9);
    font: 18px/1.62 "Special Elite", "Courier New", monospace;
    text-wrap: pretty;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* ---------- call to action ---------- */

.boot-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}
.boot .cta {
    min-height: 60px;
    padding: 18px 34px 17px;
    border: 0;
    border-radius: 2px;
    background: var(--paper);
    color: #0d0b08;
    font: 900 22px/1 "Big Shoulders Display", "Oswald", sans-serif;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
    transition: background 140ms ease, transform 140ms ease;
}
.boot .cta:hover { background: var(--tungsten); }
.boot .cta:active { transform: translateY(1px); }
.boot .cta:focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 5px;
}

.boot-chip {
    max-width: 30em;
    color: rgba(239, 227, 196, 0.72);
    font: 600 15px/1.4 "Big Shoulders Text", "Oswald", sans-serif;
    letter-spacing: 0.03em;
    text-wrap: balance;
}
.boot-chip:empty { display: none; }

.vr-slot { margin-top: 16px; }
.vr-slot:empty { display: none; }
#VRButton, .vr-native {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    display: inline-block !important;
    opacity: 1 !important;
    font-family: "Big Shoulders Text", sans-serif !important;
}

/* ---------- bottom bar: controls and tonight's board ---------- */

.boot-foot {
    position: absolute;
    left: var(--title-inset);
    right: var(--title-inset);
    bottom: 0;
    height: var(--bar);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.boot-keys {
    color: rgba(239, 227, 196, 0.6);
    font: 600 14px/1 "Big Shoulders Text", "Oswald", sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.boot-keys kbd {
    display: inline-block;
    min-width: 1.7em;
    margin: 0 4px 0 12px;
    padding: 3px 6px 2px;
    border-radius: 2px;
    background: var(--flap-top);
    box-shadow: inset 0 -1px 0 #000;
    color: var(--paper);
    font: inherit;
    text-align: center;
}
.boot-keys kbd:first-child { margin-left: 0; }
.keys-touch { display: none; }
.boot-sponsor {
    margin: 0;
    color: rgba(242, 165, 65, 0.55);
    font: 600 12px/1.3 "Big Shoulders Text", "Oswald", sans-serif;
    letter-spacing: 0.08em;
    text-align: right;
    text-wrap: balance;
}

/* Which deploy you're looking at, quiet in the top bar opposite MUTE. */
.boot-build {
    position: absolute;
    top: 0;
    left: var(--title-inset);
    height: var(--bar);
    z-index: 2;
    display: flex;
    align-items: center;
    margin: 0;
    color: rgba(239, 227, 196, 0.38);
    font: 600 12px/1 "Big Shoulders Text", "Oswald", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ---------- the one opening sequence ---------- */

.boot-frame::before,
.boot-frame::after { animation: bars-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.boot-frame::before { transform-origin: top; }
.boot-frame::after { transform-origin: bottom; }
@keyframes bars-in { from { transform: scaleY(2.4); } }
.boot-line,
.boot-actions,
.boot-departure-text { animation: title-fade 700ms 1.1s ease both; }
@keyframes title-fade { from { opacity: 0; } }

/* Before ENTER the visor is just glass: no HUD, reticle, nav clutter or touch pads. */
body.pre-night .hud-cluster,
body.pre-night .visor-reticle,
body.pre-night .hud-bracket,
body.pre-night .crosshair,
body.pre-night .interact,
body.pre-night .wayfinder,
body.pre-night .mobile-actions,
body.pre-night .mobile-controls,
body.pre-night .camera-trigger,
body.pre-night .visor-top .logo,
body.pre-night .visor-top .status,
body.pre-night .top-links > :not(#muteBtn):not(#settingsBtn) {
    display: none !important;
}
/* MUTE and settings sit in the top bar, above the title scrim. */
body.pre-night .visor-top {
    top: calc(var(--bar) / 2 - 18px);
    right: var(--title-inset);
    left: auto;
    justify-content: flex-end;
    z-index: 3;
}
body.pre-night .top-links .icon-btn {
    border: 0;
    background: transparent;
    color: rgba(239, 227, 196, 0.6);
    font: 600 14px/1 "Big Shoulders Text", "Oswald", sans-serif;
    letter-spacing: 0.06em;
    padding: 10px 8px;
}
body.pre-night .top-links .icon-btn:hover {
    background: transparent;
    color: var(--paper);
}

@media (max-width: 720px), (pointer: coarse) {
    .keys-desk { display: none; }
    .keys-touch { display: inline; }
}

@media (max-width: 720px) {
    :root { --bar: 46px; }
    .boot { padding-bottom: calc(var(--bar) + 28px); }
    .boot-logo { font-size: clamp(34px, 11.4vw, 72px); }
    .flap-sm { font-size: 22px; }
    .boot-departure { margin-top: 16px; }
    .boot-departure-text { font-size: 15px; }
    .boot-line { font-size: 15px; margin: 16px 0 22px; }
    .boot-actions { width: 100%; }
    .boot .cta { width: 100%; min-height: 62px; font-size: 20px; }
    .boot-foot { justify-content: center; }
    .boot-keys { white-space: normal; text-align: center; font-size: 13px; }
    .boot-sponsor { display: none; }
}

@media (max-height: 600px) {
    :root { --bar: 34px; }
    .boot { padding-top: calc(var(--bar) + 16px); padding-bottom: calc(var(--bar) + 18px); }
    .boot-logo { font-size: clamp(34px, 7vw, 84px); }
    .boot-departure, .boot-chip { display: none; }
    .boot-line { margin: 12px 0 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .boot-frame::before, .boot-frame::after, .boot-line, .boot-actions, .boot-departure-text, .flap.flip::after { animation: none !important; }
}
html.reduced-fx .boot-frame::before,
html.reduced-fx .boot-frame::after,
html.reduced-fx .boot-line,
html.reduced-fx .boot-actions,
html.reduced-fx .boot-departure-text,
html.reduced-fx .flap.flip::after { animation: none !important; }