/* StackYak — winter theme. One page; <page-view>s switched by the router. */
:root {
    --bg: #01030a;
    --ice: #e8f2ff;           /* also the particle color: fx reads it (see site.js) */
    --text: #b9c9dc;
    --muted: #6f829b;
    --blue: #2f9bff;
    --blue-glow: rgba(60, 150, 255, 0.6);
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    /* dark halo so snow and glow never cut through text */
    --text-halo: 0 0 10px rgba(1, 3, 10, 0.95), 0 0 2px rgba(1, 3, 10, 0.9);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
}

body {
    color: var(--text);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.1rem;
    line-height: 1.7;
}

#stage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Menu ---------- */
.menu-toggle {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 20;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.menu-toggle span {
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    height: 2px;
    border-radius: 1px;
    background: var(--ice);
    box-shadow: 0 0 8px var(--blue-glow);
    opacity: 0.8;
    transition: transform 0.5s var(--ease), opacity 0.3s ease, top 0.5s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 1.05rem; }
.menu-toggle span:nth-child(2) { top: 1.45rem; }
.menu-toggle span:nth-child(3) { top: 1.85rem; }
.menu-toggle:hover span,
.menu-toggle:focus-visible span {
    opacity: 1;
    box-shadow: 0 0 12px var(--blue);
}
.menu-toggle:focus-visible {
    outline: 1px solid var(--blue);
}
site-menu[open] .menu-toggle span:nth-child(1) { top: 1.45rem; transform: rotate(45deg); }
site-menu[open] .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
site-menu[open] .menu-toggle span:nth-child(3) { top: 1.45rem; transform: rotate(-45deg); }

.menu {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 3, 10, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
site-menu[open] .menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.menu li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
site-menu[open] .menu li { opacity: 1; transform: none; }
site-menu[open] .menu li:nth-child(2) { transition-delay: 0.06s; }
site-menu[open] .menu li:nth-child(3) { transition-delay: 0.12s; }
.menu a {
    display: inline-block;
    padding: 0.6rem 0 0.6rem 0.5em; /* left pad balances trailing letter-spacing */
    color: var(--ice);
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: bold;
    letter-spacing: 0.5em;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s ease, text-shadow 0.3s ease, color 0.3s ease;
}
.menu a:hover,
.menu a:focus-visible {
    opacity: 1;
    text-shadow: 0 0 18px var(--blue-glow), 0.05em 0 0 rgba(255, 0, 60, 0.45), -0.05em 0 0 rgba(0, 170, 255, 0.6);
    outline: none;
}
.menu a[aria-current="page"] {
    color: var(--blue);
    opacity: 1;
    text-shadow: 0 0 18px var(--blue-glow);
}

/* ---------- Views ---------- */
/* The logo's box, shared so other views can line up with it. Set --logo-aspect
   (height / width of the logo artwork) per site; everything else follows. The logo is
   49.3vh tall (capped at 78% of the viewport width) and centered 6.04vh above the middle. */
:root {
    --logo-aspect: 1.062;                                   /* yak: 1175 / 1106 */
    --logo-w: min(calc(49.3vh / var(--logo-aspect)), 78vw);
    --logo-h: calc(var(--logo-w) * var(--logo-aspect));
    --logo-cy: 43.96vh;
    --logo-top: calc(var(--logo-cy) - var(--logo-h) / 2);
    --title-h: clamp(3.5rem, 13vh, 7.5rem);
    --title-gap: clamp(3rem, 8vh, 5rem);
    --footer-h: 6rem;
    /* caption text size, independent of the logo so it reads the same on every site */
    --caption-size: calc(min(62.8vh, 78vw) * 0.8 / 24);
    --caption-spacing: 1.6em;   /* gap after each caption letter (~one monospace char = 0.6em) */
}

.views {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
page-view {
    position: absolute;
    left: 50%;
    top: var(--logo-top);
    width: min(46rem, 100% - 2rem);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--title-gap);
    visibility: hidden;
}
page-view[active] {
    visibility: visible;
}
/* avoid a flash of raw markup before the components upgrade */
page-view:not(:defined),
site-menu:not(:defined) {
    display: none;
}

/* The title slot: particles form the view's shape here (text is pinned to the slot's top
   edge, level with the top of the logo). The HTML inside stays for screen readers and is
   only shown when the particles can't run (body.fx-static). */
.title-slot {
    width: min(30rem, 86vw);
    height: var(--title-h);
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: transparent;
    font-size: clamp(2rem, 7vw, 4rem);
    line-height: 1;
    letter-spacing: 0.2em;
}
.title-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 0 24px rgba(60, 150, 255, 0.35));
}
body.fx-static .title-slot {
    color: var(--ice);
    text-shadow: 0 0 20px var(--blue-glow);
}
body.fx-static .title-slot img {
    opacity: 0.85;
}
/* Home: the slot is exactly the logo's box */
page-view[name="home"] {
    top: var(--logo-top);
}
page-view[name="home"] {
    gap: 0;
}
page-view[name="home"] .title-slot {
    width: var(--logo-w);
    height: var(--logo-h);
}

/* ---------- Caption (spaced monospace name under the logo) ---------- */
.caption {
    --size: var(--caption-size);
    margin: 1.5rem 0 0;
    padding-left: var(--caption-spacing); /* balance the trailing letter-spacing so it stays centered */
    font-family: var(--mono);
    font-size: var(--size);
    letter-spacing: var(--caption-spacing);
    white-space: nowrap;
    color: var(--ice);        /* same white as the logo's particles */
    opacity: 0;
    text-shadow: 0 0 8px rgba(232, 242, 255, 0.55), 0 0 22px rgba(60, 150, 255, 0.3); /* ~the particles' bloom */
    pointer-events: none;
}
page-view[active] .caption {
    animation: caption-in 1.6s ease 0.6s forwards;
}
@keyframes caption-in {
    0%   { opacity: 0; filter: blur(4px); letter-spacing: calc(var(--caption-spacing) + 0.4em); }
    100% { opacity: 1; filter: blur(0); letter-spacing: var(--caption-spacing); }
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* View body: bare text on the night sky, in the caption's monospace. */
.view-content {
    width: min(46rem, 100%);
    max-height: calc(100vh - var(--logo-top) - var(--title-h) - var(--title-gap) - var(--footer-h));
    overflow: auto;
    font-family: var(--mono);
    font-size: clamp(1rem, 0.8rem + 0.6vw, 1.25rem);
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: var(--ice);
    text-shadow: var(--text-halo);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s var(--ease);
}
/* text arrives once the particles have mostly formed the title */
page-view[active] .view-content {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease 0.45s, transform 0.8s var(--ease) 0.45s;
}
.view-content p {
    margin: 0;
}

.link {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid rgba(47, 155, 255, 0.5);
    transition: color 0.3s ease, border-color 0.3s ease, text-shadow 0.3s ease;
}
.link:hover,
.link:focus-visible {
    color: var(--blue);
    border-color: var(--blue);
    text-shadow: 0 0 12px var(--blue-glow);
    outline: none;
}

/* ---------- Footer (contact, on every view) ---------- */
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 1.25rem;
    font-family: var(--mono);
    text-shadow: var(--text-halo);
    pointer-events: none;
}
.site-footer a {
    pointer-events: auto;
}
.contact-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.contact-links a {
    display: inline-flex;
    padding: 0.5rem;
    border-radius: 50%;
}
.contact-links img {
    width: 1.5rem;
    height: 1.5rem;
    filter: brightness(0) invert(0.9);
    opacity: 0.75;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.contact-links a:hover img,
.contact-links a:focus-visible img {
    opacity: 1;
    transform: translateY(-2px);
    filter: brightness(0) invert(1) drop-shadow(0 0 8px var(--blue)) drop-shadow(0 0 16px var(--blue-glow));
}
.contact-links a:focus-visible {
    outline: 1px solid var(--blue);
}

.copyright {
    margin: 0.5rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}