/* lukasjorgensen.com — 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 wolf's box, shared so other views can line up with it. It matches the original
   splash: 2.6 world units wide (62.8vh), capped at 78% of the viewport width, centered
   0.25 units (6.04vh) above the middle, 0.785 as tall as it is wide. */
:root {
    --wolf-w: min(62.8vh, 78vw);
    --wolf-cy: 43.96vh;
    --wolf-top: calc(var(--wolf-cy) - var(--wolf-w) * 0.785 / 2);
    --title-h: clamp(3.5rem, 13vh, 7.5rem);
    --title-gap: clamp(3rem, 8vh, 5rem);
    --footer-h: 6rem;
}

.views {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
page-view {
    position: absolute;
    left: 50%;
    top: var(--wolf-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 wolf). 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 wolf's box */
page-view[name="home"] {
    top: calc(var(--wolf-cy) - var(--wolf-w) / 2);
}
page-view[name="home"] {
    gap: 0;
}
page-view[name="home"] .title-slot {
    width: var(--wolf-w);
    height: var(--wolf-w);
}

/* ---------- Caption (spaced monospace name under the wolf) ---------- */
.caption {
    /* "lukas jorgensen" is 15 chars at ~0.6em + 1em spacing each = ~24em; span ~80% of the wolf */
    --size: calc(var(--wolf-w) * 0.8 / 24);
    /* the wolf's slot is square but the wolf is only 0.785 as tall: pull up to its bottom */
    margin: calc(var(--wolf-w) * -0.1075 + 1.5rem) 0 0;
    padding-left: 1em; /* balance the trailing letter-spacing so it stays centered */
    font-family: var(--mono);
    font-size: var(--size);
    letter-spacing: 1em;
    white-space: nowrap;
    color: var(--ice);        /* same white as the wolf'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 wolf's 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: 1.4em; }
    100% { opacity: 1; filter: blur(0); letter-spacing: 1em; }
}
.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(--wolf-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;
    }
}