/* The loader: badtabs.com typed once, on the way in.
   Built against internetlabs.co, measured frame by frame — they wait 2.61s on
   blank white, then type at 220ms a character (a metronome), and the word fades
   to nothing at 5.53s even though their wordmark is sitting in the corner.
   This starts at 0.14s, types at a hand's rhythm, and lands ON the wordmark. */
.bt-veil {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* --vvh is the real visible height, published by darkmode.js off visualViewport.
       inset:0 is wrong on iOS: Safari's toolbar and an in-app browser's own bar are
       not in the CSS viewport, so the centre moves as they collapse and the word
       slides while it is being typed. */
    height: var(--vvh, 100svh);
    z-index: 9000;
    background: var(--bg);
    opacity: 1;
    transition: opacity .46s cubic-bezier(.16, 1, .3, 1);
}
.bt-veil.out { opacity: 0; }

.bt-type {
    /* Full-bleed and centred by the browser. This used to be a fixed box moved by
       a transform of innerWidth/2 minus a hardcoded 70 — a guess at half the word's
       width, so it was off centre at every viewport and drifted as the word grew.
       Flex centring is exact at every keystroke, and because the face is monospaced
       the line shifts by exactly half a character as it types rather than jittering.
       It also means the caret finishes dead centre once the field clears. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--vvh, 100svh);
    z-index: 9001;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font);
    font-weight: 450;
    font-size: clamp(19px, 2.6vw, 30px);
    letter-spacing: -.018em;
    color: var(--text);
}
.bt-line {
    /* The caret is taken OUT of the centred box. Inside it, the caret's width is
       counted when the line is centred, which pushes the word about half a caret
       to the left — measurably centred, optically not, because the eye centres on
       the word and not on the cursor after it. Absolute at left:100% hangs it off
       the end of the text without adding width, so the WORD is centred while it
       types, and on the empty field the caret lands exactly on the middle. */
    position: relative;
    display: inline-block;
    white-space: pre;
    /* THE DROP. An inline-block with no text has height 0, so the flex centring
       put the empty line 12px lower than the full one — the word jumped down the
       moment the first key landed, and jumped again when the field cleared.
       A fixed height means the box is the same whether it holds eleven characters
       or none, and nothing moves for the whole run. */
    height: 1.25em;
}

.bt-type .bt-caret {
    position: absolute;
    left: 100%;
    top: 0;
    display: inline-block;
    width: .54em;
    height: 1.08em;
    margin-left: .04em;
    background: var(--text);
    transform: translateY(.14em);
}
/* On an empty field the text has no width, so left:100% puts the caret's LEFT
   edge on the centre line and its body half a caret to the right. This is the
   last thing on screen before the page comes up, so it sits dead centre. */
.bt-type .bt-caret.home { transform: translate(-50%, .14em); }
.bt-type .bt-caret.idle { animation: bt-blink 1.06s steps(1, end) infinite; }
@keyframes bt-blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }


@media (prefers-reduced-motion: reduce) {
    .bt-veil, .bt-type { display: none; }
}