/* The home page: the hero, the tour of features as a bento of screens, the rows
   that go into each, the index, TaoolKit, pricing and the download. */

main { display: block; }

section { position: relative; }

/* ---------- Hero ---------- */

.hero {
    /* the screen's height, less the menu above it */
    min-height: calc(100vh - var(--bz-top) - var(--bz-chin) - var(--tmux) - var(--site-menu));
    min-height: calc(100dvh - var(--bz-top) - var(--bz-chin) - var(--tmux) - var(--site-menu));
    display: grid;
    align-content: center;
    /* Below, room for the POST screen's last line (.post). */
    padding: 28px 0 56px;
    overflow: hidden;
}

/* Auto margins would keep a grid item from stretching. */
.hero > .wrap { width: 100%; }

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
    gap: 32px;
    width: 100%;
}

.hero-text { padding-bottom: 36px; }

/* The power-on self test that prints before the wordmark: fast, dim, and gone from the
   accessibility tree, since it says nothing. */
.boot {
    min-height: 7.5em;
    margin-bottom: 18px;
    color: var(--dim);
    font: 12px/1.5 var(--mono);
    white-space: pre-wrap;
}

.boot .ok { color: var(--ok); }

.tagline { margin-top: 20px; font-size: 20px; text-wrap: balance; }

.hero .ls { margin-top: 14px; --rows: 8; color: var(--phosphor); }
/* A long one on two lines (.tall), the second under its words, at the foot of the first column,
   so its height costs no other row. */
.hero .ls li { padding-left: 2ch; text-indent: -2ch; }
/* Where three columns don't fit (a phone), two of twelve, as ls fits its columns to the
   terminal, in a face just small enough for the longest word in each (39 characters with the
   gap); there .tall takes the first column's last two rows, the four words after it flowing in
   above, so it's at the column's foot there too. Beside the koala, the three run on into its
   side. */
@media (max-width: 860px) {
    .hero-text { container-type: inline-size; }
    @container (max-width: 54ch) {
        .hero .ls { --rows: 13; font-size: min(1em, 100cqi / 24.8); }
        .hero .ls .tall { grid-area: -3 / 1 / -1; }
    }
}
.hero .actions { margin-top: 26px; }
.hero .platforms { margin-top: 14px; font-size: 14px; }

/* A short window: the wordmark a step smaller, so the hero fits above the fold. */
@media (min-width: 1001px) and (max-height: 860px) { .hero .wordmark { font-size: 110px; } }

/* The page loads as one sequence: the boot log, the wordmark typed, then the rest printed
   (hero.js). "booting" is set before the page paints; each part is hidden until the sequence
   shows it, or 8 seconds in if it never does. */
.booting .hero .seq { visibility: hidden; animation: seq-fallback 0s 8s forwards; }
.booting .hero .seq.on { visibility: visible; animation: none; }
@keyframes seq-fallback { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .booting .hero .seq { visibility: visible; animation: none; } }

/* The menu above it waits for the sequence too, and comes on once the devices have printed
   (hero.js): each button switches on in turn, left to right, as a CRT's phosphor does, bright
   and soft for a moment, a flicker, then steady. It keeps its place while it's hidden, so
   nothing moves when it shows. */
.booting .site-menu .btn { visibility: hidden; animation: seq-fallback 0s 8s forwards; }
.booting .site-menu.on .btn { visibility: visible; animation: menu-on 620ms ease-out both; }
.booting .site-menu.on .btn:nth-child(2) { animation-delay: 110ms; }
.booting .site-menu.on .btn:nth-child(3) { animation-delay: 220ms; }
.booting .site-menu.on .btn:nth-child(4) { animation-delay: 330ms; }
@keyframes menu-on {
    0% { opacity: 0; transform: translateY(-8px) scaleY(.2); filter: brightness(2.4) blur(2px); }
    30% { opacity: 1; transform: none; filter: brightness(1.9) blur(.5px); }
    42% { opacity: .3; }
    56% { opacity: 1; filter: brightness(1.4); }
    100% { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .booting .site-menu .btn { visibility: visible; animation: none; } }

/* The edge the koala peeks over, as the app icon's glass cuts it off. */
.edge {
    position: relative;
    z-index: 1;
    height: 2px;
    background: var(--phosphor);
    box-shadow: 0 0 8px rgba(236, 223, 197, 0.45);
}

.hero-art { position: relative; align-self: end; }

.hero-koala {
    width: min(420px, 100%);
    margin-left: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The POST screen's last line, under the edge: the way on past the hero, its key pressing itself
   now and then. Gone once the page moves (hero.js). */
.post { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; }

.continue {
    padding: 0;
    border: 0;
    background: none;
    color: var(--dim);
    font: 14px/1.6 var(--mono);
    cursor: pointer;
    transition: opacity 0.4s;
}

.continue:hover { color: var(--phosphor); }
.continue.gone { opacity: 0; pointer-events: none; }

.continue kbd {
    display: inline-block;
    margin: 0 0.3ch;
    padding: 0.1em 0.5em 0.05em;
    border: 1px solid var(--dim);
    border-bottom-width: 2px;
    border-radius: 3px;
    color: var(--phosphor);
    font: inherit;
    line-height: 1.3;
    animation: keypress 2.6s infinite;
}

@keyframes keypress {
    0%, 78%, 100% { transform: none; border-bottom-width: 2px; background: transparent; color: var(--phosphor); }
    82%, 90% { transform: translateY(1px); border-bottom-width: 1px; background: var(--phosphor); color: var(--ink); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .continue { transition: none; }
    .continue kbd { animation: none; }
}

/* Warp: the arcade run up a chart, the whole hero behind the text. */
.warp {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: none;
    image-rendering: pixelated;
}

[data-hero="warp"] .warp { display: block; }
[data-hero="warp"] .hero-koala { display: none; }
[data-hero="warp"] .edge { opacity: 0; }

@media (max-width: 860px) {
    .hero { padding-top: 32px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hero-text { padding-bottom: 20px; }
    .hero-koala { width: min(240px, 60vw); margin: 0 auto 0 0; }
    .boot { min-height: 6em; font-size: 12px; }
}

@media (max-width: 1100px) { .hero .ls { column-gap: 2ch; } }

/* ---------- Ticker: alerts going by, as on a stock board ---------- */

.ticker {
    overflow: hidden;
    border-bottom: 1px dashed var(--line);
    padding: 10px 0;
    color: var(--dim);
    font-size: 14px;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-track { display: inline-flex; gap: 48px; padding-left: 48px; animation: ticker 60s linear infinite; }
.ticker-track b { color: var(--phosphor); font-weight: 400; }
.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Sections ---------- */

.block { padding: 120px 0 0; }
.block > .wrap > .prose, .block > .wrap > .lede + .prose { margin-top: 18px; }

@media (max-width: 700px) { .block { padding-top: 88px; } }

/* ---------- The tour: a bento of little screens ---------- */

.bento {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(250px, auto);
    /* A tall tile's neighbours fill in beside it at every width. */
    grid-auto-flow: row dense;
    gap: 16px;
}

.tile {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 18px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    container-type: inline-size;
}

.tile:hover { border-color: var(--faint); }
.tile.w5 { grid-column: span 5; }
.tile.w6 { grid-column: span 6; }
.tile.w7 { grid-column: span 7; }
.tile.w8 { grid-column: span 8; }
.tile.tall { grid-row: span 2; }

.tile h3 { font: 400 15px/1.3 var(--mono); }
.tile > p { margin-top: 2px; color: var(--dim); font-size: 13px; line-height: 1.45; }
.tile .demo { flex: 1; margin-top: 14px; min-height: 0; }

@media (max-width: 1080px) {
    .tile, .tile.w5, .tile.w7 { grid-column: span 6; }
    .tile.w8 { grid-column: span 12; }
}

@media (max-width: 700px) {
    .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .tile, .tile.w5, .tile.w6, .tile.w7, .tile.w8 { grid-column: auto; grid-row: auto; }
    .tile .demo { min-height: 190px; }
}

/* ---------- Rows: a feature each, its words on one side and its screen on the other ---------- */

.row .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.row.flip .copy { order: 2; }

.row .visual { display: grid; gap: 16px; }
.row .visual .panel { padding: 18px; container-type: inline-size; }
.row .visual .demo { min-height: 300px; }
.row .visual.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row .visual.pair .demo { min-height: 260px; }

/* Half a page wide, a row's words flow onto as many lines as they need, as ls's do in a
   narrow terminal: in columns, the longest ran past the copy into the demo beside it. */
.row .ls { margin-top: 22px; display: flex; flex-wrap: wrap; column-gap: 3ch; color: var(--dim); }

/* Half a page wide, a row's line is a step smaller than a section's, so it holds two lines. */
.row .lede { font-size: 33px; max-width: 24ch; }

/* The tour's line is about after launch; its asterisk points to the footnote for before. */
.lede .ast { margin-left: 0.15ch; color: var(--dim); }
.prose .footnote { margin-top: 12px; color: var(--dim); font-size: 14px; }

@media (max-width: 960px) {
    .row .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .row.flip .copy { order: 0; }
}

@media (max-width: 560px) { .row .visual.pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The index: shelves of apps going by ---------- */

.shelves { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* A shelf's name lines up with the page's text; its apps run on to the glass's edge. */
.shelf {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: max(16px, calc((100% - var(--page)) / 2 + clamp(16px, 4vw, 48px)));
}

.shelf-label {
    flex: none;
    width: 15ch;
    color: var(--dim);
    font-size: 14px;
}

.shelf-window {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}

@media (max-width: 700px) {
    .shelf { flex-direction: column; align-items: stretch; gap: 6px; }
}

.shelf-track, .shelf-track .copies { display: flex; gap: 14px; }
.shelf-track { animation: shelf var(--speed, 50s) linear infinite; }
.shelf:nth-child(even) .shelf-track { animation-direction: reverse; }
.shelf:hover .shelf-track { animation-play-state: paused; }

@keyframes shelf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .shelf-track { animation: none; } }

.shelf-track a {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(12, 9, 7, 0.5);
    color: var(--phosphor);
    text-decoration: none;
    font-size: 14px;
}

.shelf-track a:hover { border-color: var(--dim); }
.shelf-track img { width: 40px; height: 40px; border-radius: 22.5%; }
.shelf-track .tf { color: var(--ok); font-size: 12px; }

.indie-cta { margin-top: 36px; }

/* ---------- TaoolKit ---------- */

.kit-grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: start; }

@media (max-width: 960px) { .kit-grid { grid-template-columns: minmax(0, 1fr); } }

.code { overflow: hidden; }

.code pre {
    padding: 18px 20px;
    overflow-x: auto;
    font: 14px/1.6 var(--mono);
    tab-size: 4;
}

.code .k { color: var(--amber); }
.code .s { color: var(--ok); }
.code .c { color: var(--dim); }
.code .f { color: #e9c9a8; }

.install { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.copyline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(12, 9, 7, 0.5);
    font-size: 14px;
}

/* The link scrolls in its own box rather than widening the page on a phone. */
.copyline code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }

/* As wide as "[ copied ]" from the start, so the line doesn't shift when it says so. */
.copyline .btn { flex: none; min-width: calc(9.2ch + 22px); justify-content: center; }
.copyline code::-webkit-scrollbar { display: none; }

.code .snippets { display: grid; }
.code .snippets pre { grid-area: 1 / 1; }
.code .snippets pre:not(.on) { visibility: hidden; }
.code pre:focus-visible { outline: 1px dashed var(--dim); outline-offset: -6px; }

/* A product picked prints its code from the top, a line at a time. */
.code .snippets pre.printing { animation: print 420ms steps(14, end); }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .code .snippets pre.printing { animation: none; } }

/* The products are tabs: the one picked is the code's. */
.products { display: grid; gap: 12px; }

.products button {
    display: block;
    width: 100%;
    padding: 14px 16px;
    color: inherit;
    font: inherit;
    text-align: left;
    text-shadow: inherit;
    cursor: pointer;
}

.products button:hover { border-color: var(--faint); }
.products button[aria-selected="true"] { border-color: var(--phosphor); }
.products button:focus-visible { outline: 1px dashed var(--phosphor); outline-offset: 3px; }
.products b { font-weight: 400; color: var(--dim); }
.products b::before { content: "  "; white-space: pre; }
.products button[aria-selected="true"] b { color: var(--phosphor); }
.products button[aria-selected="true"] b::before { content: "▸ "; }
.products button > span:last-child { display: block; margin-top: 4px; color: var(--dim); font-size: 14px; }

/* ---------- Pricing ---------- */

.plans { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan { padding: 22px 24px 24px; }
.plan h3 { display: flex; align-items: baseline; gap: 12px; font: 33px/1 var(--pixel); }
.plan .price { margin-top: 14px; font-size: 18px; }
.plan .price small { display: block; color: var(--dim); font-size: 14px; }
/* The launch offer in inverse video, as a terminal highlights: the one block on the card in it. */
.plan .offer {
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--phosphor);
    color: var(--ink);
    text-shadow: none;
    box-shadow: 0 0 18px rgba(236, 223, 197, 0.28);
    font-size: 14px;
}
.plan .offer b { font-weight: 700; }
.plan ul { margin-top: 18px; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.plan li { padding-left: 2ch; text-indent: -2ch; }
.plan li::before { content: "+ "; color: var(--dim); }
.plan .fair { margin-top: 16px; font-size: 13px; }
.plan .fair + .fair { margin-top: 4px; }
/* As the app's paywall puts it, a prompt line over what Pro adds. */
.plan .plus { margin-top: 18px; color: var(--dim); font-size: 14px; }
.plan .plus + ul { margin-top: 10px; }
/* What TaoolKit does in the developer's own app, apart from what taool does in its own. */
.plan .group { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); font: 400 22px/1 var(--pixel); color: var(--phosphor); }
.plan .group small { margin-left: 1.2ch; font: 13px var(--mono); color: var(--dim); }
.plan .group + ul { margin-top: 12px; }
.plan.pro-plan { border-color: var(--dim); }

/* ---------- Get it ---------- */

.get { text-align: left; }
.get .wordmark { font-size: 88px; }
@media (max-width: 520px) { .get .wordmark { font-size: 55px; } }

/* Asleep at the bottom of the page, on an edge of its own. */
.sleepy { width: 260px; margin-top: 72px; border-bottom: 2px solid var(--phosphor); box-shadow: 0 6px 8px -6px rgba(236, 223, 197, 0.45); }