/* ==========================================================================
   Title screen. Plays over Home's live background on every arrival from
   outside the site and every refresh. Driven by title-screen.js; replay with
   ?title.

   html.title-on    the title owns the screen: only the background shows
   html.title-hold  nav, socials, Bit and the cards wait offstage
   html.title-played  Home arrived through the title, so its own entrance
                    animations stand down
   html.title-swap  the title drops out while Home builds itself, block by block
   html.title-live  the title's own cover has painted, so the first-paint
                    cover below can go.
   ========================================================================== */

/* ---- Home waits ---- */
html.title-hold .nav-link,
html.title-hold .social-link {
    animation-play-state: paused;
}

/* !important: the logo and controls run their own entrance animations, and
   those outrank a plain declaration. */
html.title-hold .navbar {
    opacity: 0 !important;
    pointer-events: none;
}

html.title-hold .mc-root {
    opacity: 0;
    pointer-events: none;
}

html.title-played .nav-link {
    animation: none;
    opacity: 1;
    transform: none;
}

html.title-played .social-link {
    animation: none;
    opacity: 1;
}

/* The blocks are the entrance, so nothing fades in behind them */
html.title-swap .carousel-counter,
html.title-swap .carousel-nav,
html.title-swap .arena-tab {
    transition: none;
}

html.title-hold .section-carousel,
html.title-hold .carousel-counter,
html.title-hold .carousel-nav {
    opacity: 0 !important;
    pointer-events: none;
}

/* The body's fade-in would show through the cover */
html.title-on body {
    opacity: 1 !important;
    animation: none !important;
}

/* Dark from the very first paint, before the script has run */
html.title-on:not(.title-live)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 199;
    background: #0c0b0a;
}

.title-layer {
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow: hidden;
    color: #fff;
    cursor: url('assets/pointer.cur'), pointer;
    touch-action: none;
}

.title-cover, .title-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.title-cover { image-rendering: pixelated; }

/* Everything the closing swap cuts away */
.title-stage {
    position: absolute;
    inset: 0;
}

.title-center {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1040px, calc(100vw - 32px));
    text-align: center;
}

/* ---- Name ---- */
.title-logo {
    --e: 0.042em;
    font-family: var(--px-font);
    font-size: min(calc(var(--text-128) * 0.95), 10.4vw);
    font-weight: 400;
    font-synthesis: none;
    line-height: 0.9;
    white-space: nowrap;
    visibility: hidden;
}

.is-logo .title-logo { visibility: visible; }

.is-lit .title-logo {
    text-shadow:
        0 var(--e) 0 #2f96ff,
        0 calc(var(--e) * 2) 0 #1180f9,
        0 calc(var(--e) * 3) 0 #0a4a9a,
        0 calc(var(--e) * 4) 0 #0c0b0a;
    animation: title-extrude 0.28s steps(1, end) both;
}

/* The blue drops out of the letters one row at a time */
@keyframes title-extrude {
    0% { text-shadow: none; }
    25% { text-shadow: 0 var(--e) 0 #2f96ff; }
    50% { text-shadow: 0 var(--e) 0 #2f96ff, 0 calc(var(--e) * 2) 0 #1180f9; }
    75% { text-shadow: 0 var(--e) 0 #2f96ff, 0 calc(var(--e) * 2) 0 #1180f9, 0 calc(var(--e) * 3) 0 #0a4a9a; }
}

/* ---- Tagline and menu ----
   One clear step down at each level: name, tagline, menu, hint. The details
   are metadata, so they sit in the bottom row with the clock. */
.title-tag {
    margin-top: 30px;
    font-family: var(--px-font);
    font-size: min(var(--text-36), 5vw);
    font-weight: 400;
    font-synthesis: none;
    line-height: 1.05;
    color: #fff;
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.3s steps(5, end), translate 0.3s steps(5, end);
}

.title-tag em {
    font-style: normal;
    color: #7fc4ff;
}

/* Tall enough for either list, so the name never shifts between them */
.title-lists {
    position: relative;
    width: 100%;
    height: 206px;
    margin-top: 34px;
    visibility: hidden;
}

.title-list {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    list-style: none;
    transition: translate 0.2s steps(4, end), opacity 0.2s steps(4, end), visibility 0s;
}

.title-list li { width: min(340px, 100%); }

.title-list.is-away {
    translate: -36px 0;
    opacity: 0;
    visibility: hidden;
    transition: translate 0.2s steps(4, end), opacity 0.2s steps(4, end), visibility 0s 0.2s;
}

.title-levels.is-away { translate: 36px 0; }

/* Spaced to fill the same height as the longer list, so the hint stays close */
.title-menu { gap: 14px; }

.title-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px 34px 7px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--px-font);
    font-size: var(--text-28);
    line-height: 1;
    text-decoration: none;
}

.title-levels .title-item {
    justify-content: space-between;
    padding-block: 3px 4px;
    font-size: var(--text-24);
}

.title-levels .title-back { justify-content: center; margin-top: 4px; font-size: var(--text-22); }
.title-item small { font-family: inherit; font-size: var(--text-20); opacity: 0.72; }

/* The selected row is the site's active key: white, with a hard edge */
.title-item.is-sel {
    background: #fff;
    color: #161514;
    box-shadow: 0 3px 0 #8d8c88;
}

.title-item.is-sel::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -8px;
    border-block: 8px solid transparent;
    border-left: 10px solid #1180f9;
}

.title-item:focus-visible {
    outline: 3px solid #2f96ff;
    outline-offset: 3px;
}

.title-hint {
    min-height: 1.1em;
    margin-top: 12px;
    font-family: var(--px-font);
    font-size: var(--text-20);
    line-height: 1.1;
    color: #7fc4ff;
    opacity: 0;
    transition: opacity 0.3s steps(5, end) 0.3s;
}

.title-hud {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 22px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: baseline;
    font-family: var(--px-font);
    font-size: var(--text-20);
    line-height: 1;
    color: rgba(255, 255, 255, 0.72);
    opacity: 0;
    transition: opacity 0.3s steps(5, end) 0.3s;
}

.title-keys { text-align: right; }

.title-details span + span::before {
    content: '\00b7';
    margin-inline: 8px;
}

/* ---- Everything lands ---- */
.is-ready .title-tag { opacity: 1; translate: 0 0; }
.is-ready .title-hud, .is-ready .title-hint { opacity: 1; }
.is-ready .title-lists { visibility: visible; }

/* The rows drop in one after another, like keys */
.is-entering .title-menu li { animation: title-key 0.36s steps(6, end) both; }
.is-entering .title-menu li:nth-child(2) { animation-delay: 0.07s; }
.is-entering .title-menu li:nth-child(3) { animation-delay: 0.14s; }
.is-entering .title-menu li:nth-child(4) { animation-delay: 0.21s; }

@keyframes title-key {
    0% { opacity: 0; translate: 0 -26px; }
    70% { opacity: 1; translate: 0 3px; }
    100% { opacity: 1; translate: 0 0; }
}

/* Closing to a case study: a dither fills the screen */
.title-wipe {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none;
}

/* ---- Leaving: the blocks swap the title for Home ---- */
.is-out { pointer-events: none; }

/* Press start, in the middle of the screen. It blinks while waiting and blinks
   out in steps once pressed. */
.title-press {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-family: 'Jersey 25', sans-serif;
    font-weight: 400;
    font-size: var(--text-36);
    line-height: 1;
    text-align: center;
    translate: 0 -50%;
    visibility: hidden;
    cursor: inherit;
}

.title-press:focus-visible { outline: none; color: #7fc4ff; }

.is-waiting .title-press {
    visibility: visible;
    animation: title-blink 1.2s steps(1, end) infinite;
}

.is-started .title-press {
    visibility: visible;
    animation: title-press-out 0.24s steps(3, end) forwards;
}

.is-logo .title-press { display: none; }

@keyframes title-blink { 55% { visibility: hidden; } }
@keyframes title-press-out { to { opacity: 0; } }

@media (max-width: 1060px) {
    .title-hud { font-size: var(--text-16); }
    .title-keys { display: none; }
}

@media (max-width: 640px) {
    .title-logo { font-size: 20vw; white-space: normal; }
    .title-tag { max-width: 13em; margin-top: 20px; font-size: var(--text-28); }
    .title-lists { margin-top: 20px; }
    .title-item { font-size: var(--text-24); }
    .title-hint { font-size: var(--text-18); }

    /* Too narrow for one row: the details stack and the clock steps aside */
    .title-hud { display: block; text-align: center; }
    .title-clock { display: none; }
    .title-details span { display: block; line-height: 1.25; }
    .title-details span + span::before { content: none; }
    .title-hud { left: 16px; right: 16px; bottom: 16px; font-size: var(--text-16); }
}

@media (max-height: 720px) {
    .title-tag { margin-top: 16px; font-size: min(var(--text-28), 7vw); }
    .title-lists { height: 190px; margin-top: 18px; }
    .title-menu { gap: 16px; }
    .title-item { font-size: var(--text-24); padding-block: 3px 5px; }
    .title-levels .title-item { font-size: var(--text-20); padding-block: 2px 3px; }
    .title-hint { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .is-lit .title-logo, .is-entering .title-menu li { animation: none; }
    .title-tag, .title-hud, .title-hint, .title-list { transition: none; }
}