/* ============================================================
   hackenshaw.com — shared house style (dark CRT terminal)

   ONE copy, used by every chrome page on the site:
       /index.html            hackenshaw.com
       /projects/index.html   projects.hackenshaw.com
       /presentations/…       presentations.hackenshaw.com

   Link it root-relative so it stays same-origin on every vhost:
       <link rel="stylesheet" href="/assets/site.css?v=1">

   The subdomain vhosts are rooted at subdirectories, so each one
   needs a `location /assets/` alias block in
   /etc/nginx/sites-available/hackenshaw.com — same shared-copy
   trick as the favicons. Bump the ?v=N when you edit this file,
   or the 4h Cloudflare edge cache serves the old one.

   NOT used by reveal.js decks — those have their own house theme
   in /presentations/theme/hackenshaw.css.
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #272727;
    --panel: #181818;
    --fg: chartreuse;
    --dim: #5a8f2a;
}

html,
body {
    background-color: var(--bg);
    color: var(--fg);
    min-height: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 3vh 5vw;
    gap: 2.5rem;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---- CRT overlay: scanlines + flicker ---- */
.crt-overlay::before,
.crt-overlay::after {
    content: " ";
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.crt-overlay::before {
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 3px, 3px 100%;
}

.crt-overlay::after {
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% { opacity: 0.28; }
    15% { opacity: 0.91; }
    25% { opacity: 0.84; }
    40% { opacity: 0.27; }
    50% { opacity: 0.96; }
    60% { opacity: 0.20; }
    75% { opacity: 0.37; }
    90% { opacity: 0.70; }
    100% { opacity: 0.24; }
}

@keyframes textShadow {
    0% { text-shadow: 0.44px 0 1px rgba(0, 30, 255, 0.5), -0.44px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
    25% { text-shadow: 1.61px 0 1px rgba(0, 30, 255, 0.5), -1.61px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
    50% { text-shadow: 0.08px 0 1px rgba(0, 30, 255, 0.5), -0.08px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
    75% { text-shadow: 1.89px 0 1px rgba(0, 30, 255, 0.5), -1.89px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
    100% { text-shadow: 2.62px 0 1px rgba(0, 30, 255, 0.5), -2.62px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
}

/* ---- Header ---- */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding-top: 2vh;
}

.avatar {
    width: clamp(90px, 14vmin, 130px);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    border: 2px solid var(--fg);
    box-shadow: 0 0 18px rgba(127, 255, 0, 0.25);
}

/* the avatar as a link home — used on every page except the landing page */
a.home {
    display: inline-flex;
    border-radius: 50%;
    transition: transform 0.18s ease, filter 0.18s ease;
}

a.home:hover,
a.home:focus-visible {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px rgba(127, 255, 0, 0.6));
    outline: none;
}

h1 {
    font-size: clamp(2rem, 7vmin, 3.4rem);
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    animation: textShadow 1.6s infinite;
}

.tagline {
    color: var(--dim);
    font-size: clamp(0.8rem, 2.2vmin, 1rem);
    letter-spacing: 0.05em;
}

/* ---- Terminal panel ---- */
main {
    flex: 1;
    display: flex;
    justify-content: center;
}

.panel {
    background: var(--panel);
    border-radius: 25px;
    padding: clamp(1.2rem, 3.5vmin, 2.2rem);
    width: 100%;
    max-width: 780px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

.prompt {
    color: var(--dim);
    font-size: clamp(0.78rem, 2vmin, 0.95rem);
    margin-bottom: 1.4rem;
    letter-spacing: 0.03em;
}

.prompt span {
    color: var(--fg);
}

.cursor {
    display: inline-block;
    width: 0.55em;
    height: 1em;
    background: var(--fg);
    vertical-align: text-bottom;
    animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ---- The list of things ----
   One shape for every listing page. The <li> is the bordered row;
   a.entry is the main link inside it; a.dl is an optional trailing
   icon button (used by the decks list):

       <ul class="list">
         <li>
           <a class="entry" href="…">
             <span class="title">name</span>
             <span class="desc">what it is</span>
           </a>
           <a class="dl" href="…">…optional icon…</a>
         </li>
       </ul>
*/
ul.list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

ul.list li {
    display: flex;
    align-items: center;
    border: 1px solid rgba(127, 255, 0, 0.25);
    border-radius: 12px;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

ul.list li:hover,
ul.list li:focus-within {
    border-color: var(--fg);
    background: rgba(127, 255, 0, 0.07);
    transform: translateX(4px);
    outline: none;
}

/* the row's padding lives on the link, not the <li>, so the whole
   box is clickable and not just the text inside it */
ul.list a.entry {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1rem;
    outline: none;
}

.title {
    font-size: clamp(0.95rem, 2.6vmin, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.title::before {
    content: "→ ";
    color: var(--dim);
}

.desc {
    color: var(--dim);
    font-size: clamp(0.75rem, 2vmin, 0.9rem);
    flex: 1;
    min-width: 12ch;
}

/* trailing icon button in a row, right-aligned */
ul.list a.dl {
    display: flex;
    flex: none;
    padding: 0.45rem;
    /* matches the 1rem right padding the <li> used to carry */
    margin-right: 1rem;
    border-radius: 8px;
    color: var(--dim);
    transition: color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

ul.list a.dl:hover,
ul.list a.dl:focus-visible {
    color: var(--fg);
    filter: drop-shadow(0 0 8px rgba(127, 255, 0, 0.7));
    transform: translateY(2px);
    outline: none;
}

ul.list a.dl svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ---- Empty state ---- */
.empty {
    border: 1px dashed rgba(127, 255, 0, 0.3);
    border-radius: 12px;
    padding: clamp(1.4rem, 4vmin, 2.2rem) 1rem;
    text-align: center;
    color: var(--dim);
    font-size: clamp(0.8rem, 2.2vmin, 0.95rem);
    line-height: 1.9;
}

.empty strong {
    color: var(--fg);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ---- Back link ---- */
.back {
    display: block;
    max-width: 780px;
    width: 100%;
    margin: 1.2rem auto 0;
    color: var(--dim);
    font-size: clamp(0.75rem, 2vmin, 0.9rem);
    letter-spacing: 0.03em;
    transition: color 0.18s ease;
}

.back:hover,
.back:focus-visible {
    color: var(--fg);
    outline: none;
}

/* ---- Footer ----
   The footer markup stays inline in each page on purpose (static
   HTML has no include). These styles are shared; if you change the
   social links, edit every page's <footer>.
*/
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding-bottom: 1vh;
}

footer a {
    display: flex;
    padding: 0.4rem;
    border-radius: 8px;
    transition: transform 0.18s ease, filter 0.18s ease;
}

footer a:hover,
footer a:focus-visible {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 8px rgba(127, 255, 0, 0.7));
    outline: none;
}

footer svg {
    width: 30px;
    height: 30px;
    fill: var(--fg);
}

@media (prefers-reduced-motion: reduce) {

    .crt-overlay::after,
    h1,
    .cursor {
        animation: none;
    }
}