/* ==========================================================================
   Matrix fun page (matrix.DOMAIN.dev) — <body class="matrix-page">.
   Background rain: js/matrix-rain.js · Pills: js/matrix-fun.js
   ========================================================================== */

.matrix-page {
    --matrix-bg-rgb: 5, 16, 20;           /* canvas background (read by matrix-rain.js) */
    --glass-bg: rgba(5, 16, 20, 0.9);     /* more opaque panels keep text readable over the rain */
    --pill-red-rgb: 255, 70, 85;
    --pill-blue-rgb: 70, 140, 255;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;                   /* phones: the visible height, without the address bar */
    background: rgb(var(--matrix-bg-rgb));
}

#matrix-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
}

/* Content takes the free space between top and footer and sits centred in it */
.matrix-main {
    flex: 1;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.matrix-heading {
    text-align: center;
    font-size: clamp(2rem, 7vw, 3.2rem);
    margin-bottom: var(--space-xl);
    text-shadow: 0 0 18px rgb(var(--matrix-bg-rgb)), 0 0 6px rgb(var(--matrix-bg-rgb));
}

/* ── Terminal ── */
.terminal { padding: 0; }

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--accent-dim-text);
}
.terminal-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.25);
}
.terminal-title {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--font-xsmall);
    color: var(--text-dim);
    letter-spacing: 0.08em;
}

.terminal-body {
    min-height: 17rem;
    padding: var(--space-lg) 1.5rem var(--space-xl);
}

/* Each line "types" itself: revealed left to right in steps */
.terminal-line {
    margin: 0 0 0.35rem;
    font-family: var(--font-mono);
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
    clip-path: inset(0 100% 0 0);
    animation: type-in 0.7s steps(28, end) forwards;
}
.terminal-line::before {
    content: "> ";
    color: var(--text-dim);
    text-shadow: none;
}
.terminal-body > .terminal-line:nth-child(1) { animation-delay: 0.3s; }
.terminal-body > .terminal-line:nth-child(2) { animation-delay: 1.1s; }
.terminal-body > .terminal-line:nth-child(3) { animation-delay: 1.9s; }
.terminal-body > .terminal-line:nth-child(4) { animation-delay: 3.0s; }
.terminal-body > .terminal-line:nth-child(5) { animation-delay: 3.9s; }

/* Blinking cursor after the last line */
.terminal-last::after {
    content: "█";
    margin-left: 0.25em;
    animation: blink 1s steps(1) infinite;
}

@keyframes type-in { to { clip-path: inset(0 0 0 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes appear {
    from { opacity: 0; visibility: hidden; }
    to   { opacity: 1; visibility: visible; }
}

/* ── Pills ── */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-lg) 0 var(--space-md);
    animation: appear 0.6s ease 4.8s both;
}
.pills[hidden] { display: none; }

.pill {
    --pill: var(--pill-red-rgb);
    padding: 0.55rem 1.4rem;
    border: 1px solid rgba(var(--pill), 0.5);
    border-radius: var(--radius-pill);
    background: transparent;
    color: rgb(var(--pill));
    font-family: var(--font-mono);
    font-size: var(--font-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(var(--pill), 0.25);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}
.pill-blue { --pill: var(--pill-blue-rgb); }
.pill:hover,
.pill[aria-pressed="true"] {
    background: rgba(var(--pill), 0.15);
    border-color: rgb(var(--pill));
    box-shadow: 0 0 22px rgba(var(--pill), 0.55);
}
.pill:focus-visible {
    outline: 2px solid rgb(var(--pill));
    outline-offset: 3px;
}

/* Result lines type themselves as soon as they are shown */
.pill-result { animation-delay: 0s; }
.pill-result[data-result="red"]  { color: rgb(var(--pill-red-rgb)); text-shadow: 0 0 8px rgba(var(--pill-red-rgb), 0.5); }
.pill-result[data-result="blue"] { color: rgb(var(--pill-blue-rgb)); text-shadow: 0 0 8px rgba(var(--pill-blue-rgb), 0.5); }

/* Red pill: the terminal glitches for a moment */
.terminal.is-glitching { animation: glitch 0.7s steps(2, end); }
@keyframes glitch {
    0%   { transform: translate(0); }
    15%  { transform: translate(-4px, 2px) skewX(-4deg);
           box-shadow: -6px 0 0 rgba(var(--pill-red-rgb), 0.5), 6px 0 0 rgba(var(--accent-rgb), 0.4); }
    30%  { transform: translate(5px, -2px) skewX(3deg); }
    45%  { transform: translate(-3px, 0); }
    60%  { transform: translate(2px, 1px) skewX(-2deg); }
    100% { transform: translate(0); }
}

/* ── Below the terminal ── */
.powered-by {
    margin-top: var(--space-md);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--font-small);
    color: var(--text-dim);
}
.powered-by a { font-size: inherit; }

/* ── Easter egg quote ── */
.spoon-quote {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto var(--space-xl);
    padding: 0 var(--page-gutter);
    text-align: center;
}
.spoon-quote p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-small);
    color: var(--accent-dim);
    letter-spacing: 0.12em;
    cursor: default;
    transition: color var(--duration-slow), text-shadow var(--duration-slow);
}
.spoon-quote p:hover {
    color: var(--accent);
    text-shadow: 0 0 14px var(--accent-glow);
}

/* ── Reduced motion: everything visible at once, no glitch ── */
@media (prefers-reduced-motion: reduce) {
    .terminal-line,
    .pills { animation: none; clip-path: none; opacity: 1; visibility: visible; }
    .terminal-last::after { animation: none; }
    .terminal.is-glitching { animation: none; }
}

@media (max-width: 730px) {
    .terminal-body { min-height: 15rem; padding: var(--space-md) 1rem var(--space-lg); }
    .terminal-line { font-size: var(--font-small); }
    .terminal-title { display: none; }
}