@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    padding: 0 var(--gap) var(--gap-xl);
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 78ch; margin: 0 auto; }

/* ---- prompt motif, shared with abject.app ------------------------------- */

.prompt::before {
    content: "$ ";
    color: var(--accent);
    font-weight: 600;
}

.comment { color: var(--fg-faint); }
.comment::before { content: "# "; }

/* ---- header / wordmark --------------------------------------------------- */

header { padding: var(--gap-xl) 0 var(--gap-lg); }

.wordmark {
    position: relative;
    display: inline-block;
    margin: 0 0 .5rem;
    font-size: clamp(2rem, 7vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg-bright);
}

/* Two offset copies of the wordmark, one per glitch channel. They sit still
 * most of the time and tear for a fraction of a second every few seconds. */
.wordmark::before,
.wordmark::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}
.wordmark::before { color: var(--glitch-a); animation: tear-a 6s steps(1) infinite; }
.wordmark::after  { color: var(--glitch-b); animation: tear-b 6s steps(1) infinite; }

@keyframes tear-a {
    0%, 91%, 100% { opacity: 0; transform: none; clip-path: none; }
    92% { opacity: .85; transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); }
    94% { opacity: .85; transform: translate(4px, 0);  clip-path: inset(60% 0 8% 0); }
    96% { opacity: .85; transform: translate(-2px, 0); clip-path: inset(35% 0 40% 0); }
}
@keyframes tear-b {
    0%, 92%, 100% { opacity: 0; transform: none; clip-path: none; }
    93% { opacity: .85; transform: translate(3px, 0);  clip-path: inset(50% 0 20% 0); }
    95% { opacity: .85; transform: translate(-4px, 0); clip-path: inset(5% 0 70% 0); }
}

header .tagline { margin: 0; color: var(--fg-dim); max-width: var(--measure); }

/* ---- the two doors ------------------------------------------------------- */

.doors { display: grid; gap: var(--gap); margin: var(--gap-lg) 0; }
@media (min-width: 46rem) { .doors { grid-template-columns: 1fr 1fr; } }

.door {
    --lane: var(--lane-dev);
    --lane-text: var(--lane-dev-text);
    --lane-glow: var(--accent-glow);
    display: block;
    padding: var(--gap-lg) var(--gap);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-top: 3px solid var(--lane);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.door.art { --lane: var(--lane-art); --lane-text: var(--lane-art); --lane-glow: var(--lane-art-glow); }

.door:hover, .door:focus-visible {
    border-color: var(--lane);
    box-shadow: 0 0 0 3px var(--lane-glow);
    transform: translateY(-1px);
    outline: none;
}

.door .domain { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--lane-text); }
.door .kind { margin: 0 0 var(--gap); color: var(--fg-bright); }
.door p { margin: 0; color: var(--fg-dim); font-size: .92rem; }
.door ul { margin: var(--gap) 0 0; padding: 0; list-style: none; color: var(--fg-dim); font-size: .9rem; }
.door li::before { content: "- "; color: var(--fg-faint); }
.door .go { display: inline-block; margin-top: var(--gap); color: var(--lane-text); }

/* ---- footer -------------------------------------------------------------- */

footer {
    margin-top: var(--gap-xl);
    padding-top: var(--gap);
    border-top: 1px solid var(--border);
    color: var(--fg-faint);
    font-size: .85rem;
}
footer a { color: var(--fg-dim); }
footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .wordmark::before, .wordmark::after { animation: none; }
}