/* JETSKI shared site chrome: colours, background, header, section tabs, footer
   and the CRT page transitions. Page-specific styles stay with their page. */

/* The pixel font, served from here (Latin subset; SIL Open Font License, see fonts/PressStart2P-OFL.txt) */
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/press-start-2p-latin.woff2') format('woff2');
}

:root {
    --main-bg: #000000;
    --text-color: #d8a6ff;
    --border-color: #b04bff;
    --hover-color: #7b2cbf;
    --accent-color: #e08cff;
    --pink: #ff5ec4;
    --pink-glow: rgba(255, 94, 196, 0.45);
    --tab-inactive: #3d1a5c;
    --glow-color: #b04bff80;
    --font-read: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", "DejaVu Sans Mono", monospace;
}

/* The circuit lines slide past the right edge: clip them so phones can't pan sideways.
   (clip, unlike hidden, doesn't make body a scroll container, so sticky headers keep working;
   browsers without clip fall back to hidden) */
html {
    overflow-x: clip;
}

body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family: 'Press Start 2P', monospace;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Neural network background */
#neural-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: hue-rotate(10deg) saturate(1.15);
    opacity: 0;
    transition: opacity 1.6s ease 0.15s;
}

body.revealed #neural-bg {
    opacity: 1;
}

/* Header */
.header {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 1.5rem 2rem 0.5rem;
    position: relative;
}

.title-logo {
    height: 240px;
    filter: drop-shadow(0 0 15px var(--glow-color))
            drop-shadow(0 0 30px var(--pink-glow));
    animation: logoIgnite 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards, logoGlow 3s ease-in-out 1.4s infinite alternate;
    opacity: 0;
}

@keyframes logoIgnite {
    0% { opacity: 0; transform: scale(0.94) translateY(6px); }
    16% { opacity: 1; transform: scale(1.01) translateY(0); }
    24% { opacity: 0.35; }
    32% { opacity: 1; }
    41% { opacity: 0.55; }
    50%, 100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes logoFade {
    0% {
        opacity: 0;
        filter: blur(15px) drop-shadow(0 0 0 transparent);
    }
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 15px var(--glow-color))
                drop-shadow(0 0 30px var(--glow-color));
    }
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 15px var(--glow-color))
                drop-shadow(0 0 30px var(--glow-color));
    }
    100% {
        filter: drop-shadow(0 0 25px var(--glow-color))
                drop-shadow(0 0 50px var(--glow-color));
    }
}

/* The logo is the home page's H1: the heading keeps the header's own text metrics */
.site-title {
    margin: 0;
    font: inherit;
}

.subtitle {
    font-size: 0.7em;
    font-weight: normal;
    color: var(--text-color);
    margin: 4.75rem auto 0;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: left;
    letter-spacing: 0.4em;
    opacity: 0;
    animation: subtitleFade 0.8s ease-out 1.15s forwards;
}

.subtitle::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--pink);
    box-shadow: 0 0 8px var(--pink-glow);
    flex-shrink: 0;
    transform: scaleX(0);
    transform-origin: left;
    animation: ruleDraw 0.35s ease-out 1.2s forwards;
}

.subtitle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-color), rgba(255, 106, 213, 0.35) 45%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    animation: ruleDraw 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.35s forwards;
}

@keyframes ruleDraw {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

@keyframes subtitleFade {
    0% {
        opacity: 0;
        letter-spacing: 0.5em;
    }
    100% {
        opacity: 1;
        letter-spacing: 0.3em;
    }
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    opacity: 0;
    animation: socialsIn 0.6s ease-out 1.0s forwards;
}

@keyframes socialsIn {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(153, 69, 255, 0.4);
    background: rgba(153, 69, 255, 0.1);
    transition: all 0.3s ease;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.social-link:hover {
    background: rgba(153, 69, 255, 0.3);
    border-color: var(--pink);
    box-shadow: 0 0 15px var(--pink-glow);
    transform: translateY(-2px);
}

.social-link svg {
    width: 20px;
    height: 20px;
    fill: var(--accent-color);
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px;
    box-sizing: border-box;
    flex: 1;
}

/* Section tabs: plain labels top-left on every page, level with the social links on the right */
.site-tabs {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 30px;
    opacity: 0;
    animation: socialsIn 0.6s ease-out 1.0s forwards;
}

.site-tab {
    position: relative;
    padding: 8px 0;
    font-size: 0.5em;
    letter-spacing: 0.2em;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.7; /* ~5.5:1 on black, readable at this small size */
    transition: opacity 0.25s ease, color 0.25s ease;
}

/* A bigger touch target than the small label, without moving it */
.site-tab::before {
    content: '';
    position: absolute;
    inset: -8px -10px;
}

.site-tab:hover {
    opacity: 1;
}

.site-tab[aria-current="page"] {
    color: #fff;
    opacity: 1;
}

/* Active tab: a short pink rule under the label */
.site-tab[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 14px;
    height: 2px;
    background: var(--pink);
    box-shadow: 0 0 8px var(--pink-glow);
}

/* Animated circuit lines */
.circuit-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    opacity: 0.35;
    animation: circuitFlow 3s linear infinite;
}

.circuit-line:nth-child(1) {
    top: 10%;
    width: 100px;
    left: -100px;
}

.circuit-line:nth-child(2) {
    bottom: 20%;
    width: 150px;
    right: -150px;
    animation-delay: 1s;
}

@keyframes circuitFlow {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 100px)); }
}

/* Footer */
.retro-footer {
    text-align: center;
    padding: 20px;
    margin-top: auto;
    border-top: 2px solid var(--border-color);
    background: linear-gradient(0deg, #06030d 0%, #1a0633 100%);
    font-size: 0.7em;
}

.retro-footer {
    opacity: 0;
    animation: footerIn 0.7s ease-out 2.4s forwards;
}

@keyframes footerIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.retro-footer a {
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.retro-footer a:hover {
    text-shadow: 0 0 10px var(--glow-color);
    color: var(--text-color);
}

/* Page Transition */
.page-load-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--pink), #fff, var(--pink), var(--accent-color));
    background-size: 200% 100%;
    box-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--glow-color);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
}

.page-load-bar.active {
    opacity: 1;
    animation: loadBarProgress 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               loadBarGlow 0.8s ease-in-out infinite,
               loadBarShimmer 1.5s linear infinite;
}

.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main-bg);
    z-index: 99998;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.page-overlay.hidden {
    opacity: 0;
}

/* CRT power-on intro (every fresh page load) */
.page-overlay.crt-on {
    animation: crtPowerOn 0.55s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.page-overlay.crt-on::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #f3e6ff;
    box-shadow: 0 0 24px 6px var(--pink), 0 0 90px 24px rgba(153, 69, 255, 0.5);
    animation: crtLine 0.55s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crtPowerOn {
    0%, 60% { opacity: 1; }
    80% { opacity: 0.35; }
    100% { opacity: 0; }
}

@keyframes crtLine {
    0% { transform: translateY(-50%) scaleX(0); opacity: 0; }
    30% { transform: translateY(-50%) scaleX(0.03); opacity: 1; }
    55% { transform: translateY(-50%) scaleX(1); opacity: 1; }
    100% { transform: translateY(-50%) scaleX(1) scaleY(70); opacity: 0; }
}

/* CRT power-off outro (leaving to a pool site) — mirrors the power-on
   intro: the screen collapses into the bright centre line, which then
   shrinks to a dot and goes dark before the hop. */
.page-overlay.crt-off {
    animation: crtPowerOff 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}

.page-overlay.crt-off::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #f3e6ff;
    box-shadow: 0 0 24px 6px var(--pink), 0 0 90px 24px rgba(153, 69, 255, 0.5);
    animation: crtLineOff 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}

@keyframes crtPowerOff {
    0% { opacity: 0; }
    40%, 100% { opacity: 1; }
}

@keyframes crtLineOff {
    0% { transform: translateY(-50%) scaleX(1) scaleY(70); opacity: 0; }
    40% { transform: translateY(-50%) scaleX(1) scaleY(1); opacity: 1; }
    75% { transform: translateY(-50%) scaleX(0.03) scaleY(1); opacity: 1; }
    100% { transform: translateY(-50%) scaleX(0) scaleY(1); opacity: 0; }
}

@keyframes loadBarProgress {
    0% { width: 0; }
    100% { width: 90%; }
}

@keyframes loadBarGlow {
    0%, 100% { box-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--glow-color); }
    50% { box-shadow: 0 0 20px var(--accent-color), 0 0 40px var(--glow-color); }
}

@keyframes loadBarShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hold entrance animations until background is ready */
.title-logo,
.subtitle,
.subtitle::before,
.subtitle::after,
.site-tabs,
.social-links,
.retro-footer {
    animation-play-state: paused;
}

body.revealed .title-logo,
body.revealed .subtitle,
body.revealed .subtitle::before,
body.revealed .subtitle::after,
body.revealed .site-tabs,
body.revealed .social-links,
body.revealed .retro-footer {
    animation-play-state: running;
}

/* Keyboard focus */
.social-link:focus-visible,
.retro-footer a:focus-visible,
.site-tab:focus-visible,
.logo-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.logo-link {
    display: inline-block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Inner pages (blog, ...): slim sticky bar with tabs left, small logo centre, socials right */
.page-inner .header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px 2rem;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(176, 75, 255, 0.14);
}

.page-inner .site-tabs,
.page-inner .social-links {
    position: static;
    animation-delay: 0.25s;
}

.page-inner .site-tabs {
    justify-self: start;
}

.page-inner .social-links {
    justify-self: end;
}

/* The GIF is mostly transparent padding around the wordmark; negative margins keep the bar slim */
.page-inner .title-logo {
    width: auto;
    height: 120px;
    margin: -39px 0;
    vertical-align: middle;
}

.page-inner .retro-footer {
    animation-delay: 0.7s;
}

/* The network lights up the top of inner pages, then fades to plain black for reading */
.page-inner #neural-bg {
    position: absolute;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}

body.revealed.page-inner #neural-bg {
    opacity: 0.55;
}

/* Soft pages (body data-intro="fade", the blog) skip the CRT. Leaving for one blurs the
   current page back into black; arriving, the header fades in instead of the neon ignite. */
body.page-leaving .header,
body.page-leaving .container,
body.page-leaving .blog-main,
body.page-leaving .retro-footer {
    filter: blur(6px);
    transform: scale(0.985);
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* No neon halo or pulsing glow on the logo here: just the plain logo fading in */
body[data-intro="fade"] .title-logo {
    filter: none;
    animation-name: softIn;
    animation-duration: 0.5s;
    animation-delay: 0.05s;
    animation-timing-function: ease-out;
}

body[data-intro="fade"] .site-tabs,
body[data-intro="fade"] .social-links {
    animation-name: softIn;
    animation-duration: 0.5s;
    animation-delay: 0.05s;
}

body[data-intro="fade"] .retro-footer {
    animation-name: softIn;
    animation-duration: 0.5s;
    animation-delay: 0.3s;
}

@keyframes softIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Inner pages on phones: logo and socials on one row, tabs below (the pools page has its own rules) */
@media (max-width: 720px) {
    .page-inner .header {
        position: relative;
        grid-template-columns: 1fr auto;
        grid-template-areas: "logo socials" "tabs tabs";
        row-gap: 10px;
        padding: 10px 14px 12px;
    }
    .page-inner .logo-link { grid-area: logo; justify-self: start; }
    .page-inner .social-links { grid-area: socials; gap: 8px; }
    .page-inner .site-tabs { grid-area: tabs; height: 30px; gap: 26px; }
    .page-inner .title-logo { height: 96px; margin: -31px 0 -31px -10px; }
    .page-inner .social-link { width: 34px; height: 34px; }
    .page-inner .social-link svg { width: 17px; height: 17px; }
    .page-inner .retro-footer { font-size: 0.6em; }
}

/* Reduced motion: skip decorative animation, show content immediately */
@media (prefers-reduced-motion: reduce) {
    .circuit-line {
        display: none;
    }

    .title-logo,
    .subtitle,
    .subtitle::before,
    .subtitle::after,
    .site-tabs,
    .social-links,
    .retro-footer {
        animation: none;
        opacity: 1;
        transform: none;
    }

    #neural-bg {
        opacity: 1;
        transition: none;
    }

    .page-inner #neural-bg {
        opacity: 0.55;
    }

    body[data-intro="fade"] .title-logo,
    body[data-intro="fade"] .site-tabs,
    body[data-intro="fade"] .social-links,
    body[data-intro="fade"] .retro-footer {
        animation: none;
    }

    .title-logo {
        filter: drop-shadow(0 0 15px var(--glow-color));
    }
}