/* ============================================================
   LUNA
   Night, kept silky: indigo satin, black glass, phosphor green,
   one red stamp. A crescent moon and a few stars; a slow glow
   on the moon and the silver shimmer on the wordmark. Nothing
   else moves. Serif display, no scanlines.

   Structure comes from the Registry theme (default-style.css);
   this file only restyles it. Native CSS only.
   ============================================================ */
@import url('default-style.css');
@import url('_card-bands.css');
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* ── Palette: named once, everything else derives ───────────── */
:root {
    --drawer: #120B32;          /* indigo satin, the ground */
    --card-stock: rgba(34, 19, 97, 0.52);      /* violet-blue glass */
    --ink: #ECEBFF;             /* moon-white */
    --ink-muted: #A7A4D4;
    --stamp: #3DE8A0;           /* phosphor green: links, active */
    --stamp-hover: #9AF8CF;
    --brass: #7C79B8;           /* dusk violet (was amber) */
    --rule: rgba(160, 150, 235, 0.22);
    --aqua: #22D68A;            /* glossy green fills only */
    --aqua-light: #86F6C4;
    --hanko: #E5334B;           /* the red stamp */
    --silver: #B4B0E0;          /* lavender silver (moongladeai.net shimmer, tinted) */
    --silver-light: #F4F2FF;
    --paper: #F4F2FF;               /* light text over photos (quote cards), distinct from the translucent --card-stock */
    --smoke: rgba(6, 4, 16, 0.9);   /* black glass */

    --font-sans: 'Zen Kaku Gothic New', 'Public Sans', system-ui, sans-serif;
    --font-header: 'Fraunces', Georgia, serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    --glass-bg: var(--card-stock);
    --glass-border: rgba(170, 160, 255, 0.22);
    --glass-blur: blur(18px) saturate(1.15);
    --header-bg-overlay: var(--smoke);
    --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 0 1px rgba(150, 140, 235, 0.22), 0 30px 54px -26px rgba(3, 1, 12, 0.85);
    --accent-color: var(--stamp);
    --accent-secondary: var(--brass);
}

@property --sweep {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -60%;
}

@keyframes lu-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes lu-glow {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.9; }
}
@keyframes lu-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ── Ground: aluminium wash and a single open ensō ──────────── */
body {
    background-color: var(--drawer);
    background-image:
        linear-gradient(180deg, rgba(9, 4, 32, 0.66) 0%, rgba(9, 4, 32, 0.40) 55%, rgba(9, 4, 32, 0.55) 100%),
        var(--luna-bg, none),
        radial-gradient(ellipse 80% 55% at 78% 0%, rgba(89, 54, 220, 0.38) 0%, transparent 70%),
        linear-gradient(170deg, #180D49 0%, #0F082E 52%, #060410 100%);
    color: var(--ink);
    background-size: auto, cover, auto, auto;
    background-position: 0 0, center bottom, 0 0, 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-weight: 400;
}
/* Halo (breathes slowly) and the crescent itself */
body::before {
    content: '';
    position: fixed;
    right: -8vmin;
    top: -10vmin;
    width: 62vmin;
    height: 62vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 160, 255, 0.5) 0%, rgba(120, 100, 230, 0.16) 42%, transparent 68%);
    pointer-events: none;
    z-index: 0;
    animation: lu-glow 9s ease-in-out infinite;
}
body::after {
    content: '';
    position: fixed;
    right: 7vmin;
    top: 11vmin;
    width: 22vmin;
    height: 22vmin;
    border-radius: 50%;
    /* The Moonglade circuit moon sits under the face of the moon: a veil of moon-white over the
       texture fades from solid to half-clear and back, so the circuitry surfaces and sinks. */
    background:
        radial-gradient(circle at 36% 34%, rgb(255 255 255 / var(--veil)) 0%, rgb(228 225 250 / var(--veil)) 38%, rgb(169 165 218 / var(--veil)) 100%),
        url('../img/luna/moonglade-moon-texture.webp') center / 124% no-repeat,
        #E4E1FA;
    -webkit-mask: radial-gradient(circle at 68% 40%, transparent 56%, #000 57%);
            mask: radial-gradient(circle at 68% 40%, transparent 56%, #000 57%);
    filter: drop-shadow(0 0 14px rgba(200, 195, 255, 0.55));
    pointer-events: none;
    z-index: 0;
    animation: lu-etch 18s ease-in-out infinite;
}
@property --veil { syntax: '<number>'; inherits: false; initial-value: 0.97; }
@keyframes lu-etch { 0%, 100% { --veil: 0.97; } 50% { --veil: 0.5; } }
.content-container, .main-footer { position: relative; z-index: 1; }

/* ── Header: smoked glass, silver wordmark ──────────────────── */
.main-header {
    background: var(--smoke);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
    border-top: 0;
    border-bottom: 1px solid rgba(150, 140, 235, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 34px -18px rgba(0, 0, 0, 0.8);
}
/* The logo is the generated hi-res artwork (static/img/logo_luna.png); effects are layered over its own shape. */
.logo a { position: relative; padding: 9px 0; box-sizing: border-box; }
#logo-image { height: 100% !important; width: auto !important; }
.logo a::before, .logo a::after {
    content: '';
    position: absolute;
    inset: 9px 0;
    pointer-events: none;
    -webkit-mask: url('../img/logo_luna.png') center / 100% 100% no-repeat;
            mask: url('../img/logo_luna.png') center / 100% 100% no-repeat;
}
/* Luna: moonlight. The glow breathes with the moon, a pale sweep drifts across, and a few stars glint on the lettering */
#logo-image { filter: drop-shadow(0 0 8px rgba(170, 160, 255, 0.35)); animation: lu-logo-glow 18s ease-in-out infinite; }
@keyframes lu-logo-glow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(170, 160, 255, 0.22)); }
    50%      { filter: drop-shadow(0 0 14px rgba(190, 180, 255, 0.6)); }
}
.logo a::after {
    background: linear-gradient(105deg, transparent 40%, rgba(236, 233, 255, 0.85) 50%, transparent 60%) no-repeat;
    background-size: 260% 100%;
    background-position: 130% 0;
    mix-blend-mode: soft-light;
    animation: lu-glint 13s ease-in-out infinite;
}
@keyframes lu-glint { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.logo a::before {
    background:
        radial-gradient(circle at 9% 34%, #fff 0, rgba(255,255,255,0) 4.2%),
        radial-gradient(circle at 41% 16%, #fff 0, rgba(255,255,255,0) 3.6%),
        radial-gradient(circle at 63% 46%, #E8FFF3 0, rgba(232,255,243,0) 3.8%),
        radial-gradient(circle at 91% 70%, #fff 0, rgba(255,255,255,0) 4%);
    opacity: 0;
    animation: lu-logo-twinkle 7s ease-in-out infinite;
}
@keyframes lu-logo-twinkle { 0%, 100% { opacity: 0; } 18% { opacity: 0.95; } 34% { opacity: 0; } 62% { opacity: 0; } 76% { opacity: 0.8; } 90% { opacity: 0; } }
.logo a:hover::after { animation-duration: 3s; }
@media (prefers-reduced-motion: reduce) { #logo-image, .logo a::before, .logo a::after { animation: none; } .logo a::before { display: none; } }
.version { color: var(--silver); background: rgba(255, 255, 255, 0.07); }

.main-nav a {
    color: var(--silver);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.main-nav a:hover {
    color: transparent;
    background: linear-gradient(to right, var(--silver) 20%, #fff 45%, #fff 55%, var(--silver) 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    animation: lu-shimmer 3s linear infinite;
    border-bottom-color: rgba(180, 176, 224, 0.4);
}
.main-nav li.active a { color: var(--aqua-light); border-bottom-color: var(--aqua-light); }
.theme-select {
    background: rgba(255, 255, 255, 0.07);
    color: #ECEBFF;
    border: 1px solid rgba(160, 150, 235, 0.3);
    border-radius: 999px;
    padding: 6px 14px;
}
.theme-select option { color: #ECEBFF; background: #180D49; }
.theme-select:focus-visible { outline-color: var(--aqua-light); }

/* ── Type: wide and light for display, quiet for reading ────── */
.hero-section { border-bottom-color: var(--rule); }
.hero-section h1 {
    font-weight: 400;
    font-style: normal;
    font-size: 2.1rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.site-stamp {
    font-weight: 300;
    font-size: 2.7rem;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.site-stamp .dot { color: var(--hanko); }
.mission-line { font-size: 1.05rem; line-height: 1.8; }
.accession-no {
    color: var(--ink-muted);
    border-color: var(--rule);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    letter-spacing: 0.1em;
}

/* ── Surfaces: polycarbonate with a chrome rim ──────────────── */
.index-card, .pulled-card, .registry-tile {
    background: var(--card-stock);
    border: 1px solid rgba(170, 160, 255, 0.2);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
}
.index-card { padding: 3rem 3.25rem; }
.pulled-card { background: color-mix(in srgb, var(--card-stock) 70%, #060410); }
.pulled-card-tab {
    background: var(--hanko);
    color: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
}
.pulled-card blockquote p { font-family: var(--font-sans); font-style: normal; font-weight: 500; }
.registry-tile {
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.registry-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 0 0 1px rgba(61, 232, 160, 0.5), 0 30px 50px -24px rgba(34, 214, 138, 0.28);
}

/* ── Buttons: glossy aqua, one calm light sweep on hover ────── */
.btn, button[type="submit"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, var(--aqua-light) 0%, var(--aqua) 48%, #12A86A 100%);
    color: #02170E;
    border: 1px solid #0E8A55;
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 6px rgba(0, 70, 40, 0.3), 0 10px 22px -10px rgba(34, 214, 138, 0.55);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn::after, button[type="submit"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%);
    transform: translateX(var(--sweep));
    transition: --sweep 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}
.btn:hover, button[type="submit"]:hover {
    background: linear-gradient(180deg, var(--aqua-light) 0%, var(--aqua) 48%, #12A86A 100%);
    transform: translateY(-1px);
    --sweep: 60%;
}
.btn:active, button[type="submit"]:active { transform: translateY(0); }
.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(160, 150, 235, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--aqua); color: var(--stamp-hover); }
.btn-outline:last-child { background: transparent; }

/* ── Luna details: serif quotes, green glow on interaction ──── */
.pulled-card blockquote p { font-family: var(--font-header); font-style: italic; font-weight: 300; }
.main-nav li.active a { text-shadow: 0 0 14px rgba(61, 232, 160, 0.55); }
a:hover { text-shadow: 0 0 12px rgba(61, 232, 160, 0.35); }

/* ── Focus, links, small parts ──────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.badge { border-radius: 999px; color: #04140D; }
.main-footer { border-top-color: var(--rule); }

/* ── Drawer tiles: shared band layout (_card-bands.css), Luna tokens ── */
:root {
    --band-tint-a: rgba(41, 11, 129, 0.30);
    --band-tint-b: rgba(10, 2, 39, 0.62);
    --rim-a: #F4F2FF; --rim-b: #A9A5DA; --rim-c: #5B54B4; --rim-d: #D9D4FF;
    --panel: rgba(19, 10, 59, 0.80);
}
.cabinet-grid .registry-tile[data-bg] h3 { font-family: var(--font-header); font-weight: 400; font-size: 1.25rem; }
.tile-pull, .cabinet-grid .registry-tile[data-bg] .tile-pull {
    background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #8F8AD0 100%);
    box-shadow: 0 0 0 4px rgba(61, 232, 160, 0.20);
}
.registry-tile:hover { border-color: rgba(61, 232, 160, 0.55); }

/* ── Scroll-driven reveal where supported (no JS) ───────────── */
@supports (animation-timeline: view()) {
    .registry-tile {
        animation: lu-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }
}

/* -- Night sky: stars live in the sky only (above each scene's --horizon) and are mostly still; only a
   couple bloom at a time. One firefly lives on the ground and roams it: rests, takes off, flits, twinkles, settles. -- */
@keyframes lu-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1.2vw, -1.6vh, 0); } }
@keyframes lu-spark {
    0%, 76%  { opacity: 0.5; transform: translate(-50%, -50%) scale(0.3)  rotate(0deg); }
    88%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05) rotate(45deg); }
    100%     { opacity: 0.5; transform: translate(-50%, -50%) scale(0.3)  rotate(90deg); }
}
html .stars {
    display: block; position: fixed; left: 0; right: 0; top: 0;
    height: var(--horizon, 62%);
    pointer-events: none; z-index: -1; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
}
.stars s { position: absolute; left: 0; top: 0; border-radius: 50%; background: transparent; text-decoration: none; }
.stars .f1 { width: 3px; height: 3px; box-shadow: 11.9vw 29.1vh 0px 0.2px rgba(250,248,255,0.75),64.7vw 55.3vh 0px 0.2px rgba(250,248,255,0.9),89.5vw 36.0vh 0px 0.2px rgba(200,194,255,0.85),78.3vw 31.8vh 0px 0.2px rgba(250,248,255,0.75),77.7vw 28.5vh 0px 0.2px rgba(250,248,255,0.75),44.1vw 0.1vh 0px 0.2px rgba(250,248,255,0.9),11.1vw 47.4vh 0px 0.2px rgba(200,194,255,0.85),1.1vw 51.7vh 0px 0.2px rgba(200,194,255,0.85),67.9vw 12.2vh 0px 0.2px rgba(200,194,255,0.85),34.8vw 57.9vh 0px 0.2px rgba(200,194,255,0.85),80.5vw 58.0vh 0px 0.2px rgba(250,248,255,0.75),63.8vw 41.9vh 0px 0.2px rgba(250,248,255,0.9),55.7vw 16.9vh 0px 0.2px rgba(200,194,255,0.85),14.1vw 37.4vh 0px 0.2px rgba(250,248,255,0.75),57.7vw 1.4vh 0px 0.2px rgba(250,248,255,0.75),36.9vw 26.7vh 0px 0.2px rgba(250,248,255,0.9),39.9vw 34.0vh 0px 0.2px rgba(200,194,255,0.85),86.7vw 24.7vh 0px 0.2px rgba(250,248,255,0.75),87.5vw 23.1vh 0px 0.2px rgba(250,248,255,0.75),25.9vw 24.4vh 0px 0.2px rgba(200,194,255,0.85),51.3vw 46.7vh 0px 0.2px rgba(250,248,255,0.75),22.5vw 7.5vh 0px 0.2px rgba(250,248,255,0.9),96.3vw 30.3vh 0px 0.2px rgba(250,248,255,0.75),10.3vw 36.1vh 0px 0.2px rgba(200,194,255,0.85),14.2vw 51.3vh 0px 0.2px rgba(250,248,255,0.9),62.7vw 26.5vh 0px 0.2px rgba(200,194,255,0.85),71.5vw 55.7vh 0px 0.2px rgba(250,248,255,0.75),25.1vw 23.3vh 0px 0.2px rgba(200,194,255,0.85),54.8vw 37.5vh 0px 0.2px rgba(250,248,255,0.75),47.9vw 51.3vh 0px 0.2px rgba(200,194,255,0.85),20.3vw 48.2vh 0px 0.2px rgba(250,248,255,0.9),3.3vw 38.0vh 0px 0.2px rgba(250,248,255,0.75),96.1vw 46.6vh 0px 0.2px rgba(200,194,255,0.85),36.0vw 11.6vh 0px 0.2px rgba(250,248,255,0.75),48.6vw 29.7vh 0px 0.2px rgba(200,194,255,0.85),80.8vw 32.4vh 0px 0.2px rgba(250,248,255,0.9),83.1vw 18.4vh 0px 0.2px rgba(250,248,255,0.9),43.8vw 41.6vh 0px 0.2px rgba(250,248,255,0.75),25.9vw 53.5vh 0px 0.2px rgba(250,248,255,0.9),96.7vw 48.9vh 0px 0.2px rgba(200,194,255,0.85),94.0vw 37.6vh 0px 0.2px rgba(200,194,255,0.85),37.0vw 11.3vh 0px 0.2px rgba(200,194,255,0.85),14.6vw 53.2vh 0px 0.2px rgba(250,248,255,0.9),0.0vw 33.7vh 0px 0.2px rgba(250,248,255,0.9),61.0vw 11.5vh 0px 0.2px rgba(250,248,255,0.9),62.1vw 43.6vh 0px 0.2px rgba(200,194,255,0.85),66.8vw 36.9vh 0px 0.2px rgba(250,248,255,0.9),0.5vw 38.5vh 0px 0.2px rgba(250,248,255,0.75),77.0vw 55.1vh 0px 0.2px rgba(200,194,255,0.85),69.0vw 54.4vh 0px 0.2px rgba(250,248,255,0.75),22.3vw 34.1vh 0px 0.2px rgba(250,248,255,0.75),87.6vw 29.3vh 0px 0.2px rgba(250,248,255,0.9),41.8vw 9.3vh 0px 0.2px rgba(250,248,255,0.9),78.3vw 53.1vh 0px 0.2px rgba(200,194,255,0.85),50.8vw 22.6vh 0px 0.2px rgba(250,248,255,0.9),52.0vw 11.4vh 0px 0.2px rgba(250,248,255,0.9),95.9vw 22.6vh 0px 0.2px rgba(250,248,255,0.9),5.1vw 20.1vh 0px 0.2px rgba(200,194,255,0.85),93.5vw 54.8vh 0px 0.2px rgba(250,248,255,0.9),51.0vw 19.0vh 0px 0.2px rgba(200,194,255,0.85),45.0vw 53.0vh 0px 0.2px rgba(200,194,255,0.85),94.9vw 33.2vh 0px 0.2px rgba(250,248,255,0.9),15.4vw 30.1vh 0px 0.2px rgba(200,194,255,0.85),62.3vw 26.6vh 0px 0.2px rgba(250,248,255,0.9),67.8vw 4.0vh 0px 0.2px rgba(200,194,255,0.85),3.4vw 37.5vh 0px 0.2px rgba(250,248,255,0.9),4.5vw 31.6vh 0px 0.2px rgba(250,248,255,0.9),45.2vw 43.8vh 0px 0.2px rgba(250,248,255,0.9),48.4vw 39.4vh 0px 0.2px rgba(250,248,255,0.9),12.9vw 30.7vh 0px 0.2px rgba(250,248,255,0.75); animation: lu-drift 170s ease-in-out infinite alternate; }
.stars .f2 { width: 4px; height: 4px; box-shadow: 89.5vw 8.0vh 1px 0.5px rgba(250,248,255,1),39.0vw 24.7vh 1px 0.5px rgba(200,194,255,0.95),86.8vw 22.2vh 1px 0.5px rgba(250,248,255,1),34.4vw 15.3vh 1px 0.5px rgba(200,194,255,0.95),99.9vw 47.3vh 1px 0.5px rgba(200,194,255,0.95),46.8vw 18.9vh 1px 0.5px rgba(200,194,255,0.95),44.5vw 30.6vh 1px 0.5px rgba(200,194,255,0.95),81.6vw 49.2vh 1px 0.5px rgba(250,248,255,1),0.5vw 5.4vh 1px 0.5px rgba(200,194,255,0.95),64.6vw 23.7vh 1px 0.5px rgba(250,248,255,1),96.1vw 20.4vh 1px 0.5px rgba(250,248,255,1),35.2vw 39.9vh 1px 0.5px rgba(250,248,255,1),11.0vw 41.5vh 1px 0.5px rgba(250,248,255,1),57.0vw 32.6vh 1px 0.5px rgba(250,248,255,1),10.1vw 15.3vh 1px 0.5px rgba(200,194,255,0.95),17.1vw 39.7vh 1px 0.5px rgba(200,194,255,0.95),72.2vw 10.8vh 1px 0.5px rgba(250,248,255,1),50.7vw 16.1vh 1px 0.5px rgba(250,248,255,1),29.1vw 18.2vh 1px 0.5px rgba(200,194,255,0.95),25.6vw 0.8vh 1px 0.5px rgba(200,194,255,0.95),41.5vw 0.9vh 1px 0.5px rgba(250,248,255,1),23.5vw 18.0vh 1px 0.5px rgba(250,248,255,1),68.6vw 33.4vh 1px 0.5px rgba(200,194,255,0.95),31.5vw 26.5vh 1px 0.5px rgba(250,248,255,1),92.5vw 18.3vh 1px 0.5px rgba(250,248,255,1),59.4vw 24.7vh 1px 0.5px rgba(250,248,255,1),68.6vw 50.0vh 1px 0.5px rgba(200,194,255,0.95),38.9vw 54.9vh 1px 0.5px rgba(200,194,255,0.95),5.8vw 41.5vh 1px 0.5px rgba(250,248,255,1),28.1vw 19.2vh 1px 0.5px rgba(250,248,255,1),29.7vw 24.2vh 1px 0.5px rgba(250,248,255,1),54.2vw 19.9vh 1px 0.5px rgba(250,248,255,1),72.2vw 6.5vh 1px 0.5px rgba(250,248,255,1),11.8vw 7.3vh 1px 0.5px rgba(200,194,255,0.95); animation: lu-drift 120s ease-in-out infinite alternate; }
.stars .f3 { width: 5px; height: 5px; box-shadow: 59.7vw 56.5vh 3px 1.0px rgba(200,194,255,1),2.9vw 33.5vh 3px 1.0px rgba(200,194,255,1),41.5vw 21.9vh 3px 1.0px rgba(200,194,255,1),66.3vw 44.9vh 3px 1.0px rgba(250,248,255,1),54.3vw 38.4vh 3px 1.0px rgba(200,194,255,1),88.9vw 45.6vh 3px 1.0px rgba(250,248,255,1),2.3vw 16.1vh 3px 1.0px rgba(200,194,255,1),41.8vw 55.6vh 3px 1.0px rgba(250,248,255,1),94.4vw 34.4vh 3px 1.0px rgba(250,248,255,1),55.3vw 37.7vh 3px 1.0px rgba(200,194,255,1),34.1vw 30.2vh 3px 1.0px rgba(200,194,255,1),5.6vw 48.8vh 3px 1.0px rgba(250,248,255,1),47.1vw 56.3vh 3px 1.0px rgba(250,248,255,1),92.7vw 52.6vh 3px 1.0px rgba(200,194,255,1),70.7vw 20.9vh 3px 1.0px rgba(250,248,255,1); }
.stars .f4 { width: 6px; height: 6px; box-shadow: 56.2vw 16.0vh 4px 1.4px rgba(250,248,255,1),37.5vw 26.6vh 4px 1.4px rgba(200,194,255,1),54.9vw 27.5vh 4px 1.4px rgba(200,194,255,1),18.8vw 36.4vh 4px 1.4px rgba(250,248,255,1),48.5vw 0.3vh 4px 1.4px rgba(200,194,255,1),81.4vw 48.4vh 4px 1.4px rgba(200,194,255,1),79.5vw 37.1vh 4px 1.4px rgba(250,248,255,1); }
.stars u {
    position: absolute;
    left: var(--x); top: var(--y);
    width: var(--s); height: var(--s);
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.3);
    background:
        radial-gradient(circle, #fff 0, var(--c) 12%, transparent 30%),
        linear-gradient(90deg, transparent 0, var(--c) 50%, transparent 100%) center / 100% 2px no-repeat,
        linear-gradient(0deg,  transparent 0, var(--c) 50%, transparent 100%) center / 2px 100% no-repeat;
    filter: drop-shadow(0 0 5px var(--c));
    animation: lu-spark var(--t) ease-in-out var(--d) infinite;
}
/* The firefly: one largish glow on a 72 s loop. Settled it breathes slowly and dim; on the wing it is
   bright and flickers; each leg eases out of a take-off and into a landing. */
html .fireflies { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--horizon, 62%); pointer-events: none; z-index: -1; overflow: hidden; }
.fireflies .firefly {
    position: absolute; left: 0; top: 0;
    width: 11px; height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0, #E9FFF4 38%, #9CFFCB 100%);
    animation: lu-roam 72s linear infinite, lu-flicker 72s linear infinite, lu-twinkle-ff 3.1s ease-in-out infinite;
}
@keyframes lu-roam {
    0%   { transform: translate(18vw, 24vh);  animation-timing-function: ease-in-out; }
    8%   { transform: translate(18vw, 24vh);  animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1); }     /* rested; take-off */
    12%  { transform: translate(21vw, 17vh);  animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1); }
    20%  { transform: translate(37vw, 9vh);   animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1); }
    27%  { transform: translate(52vw, 19vh);  animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1); }
    33%  { transform: translate(62vw, 8vh);   animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1); }
    40%  { transform: translate(76vw, 24vh);  animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); }
    44%  { transform: translate(78vw, 29vh);  animation-timing-function: ease-in-out; }                       /* lands */
    58%  { transform: translate(78vw, 29vh);  animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1); }     /* rests, then lifts off */
    62%  { transform: translate(73vw, 22vh);  animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1); }
    70%  { transform: translate(56vw, 31vh);  animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1); }
    77%  { transform: translate(43vw, 21vh);  animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1); }
    84%  { transform: translate(31vw, 33vh);  animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); }
    90%  { transform: translate(22vw, 27vh);  animation-timing-function: ease-in-out; }
    100% { transform: translate(18vw, 24vh); }
}
@keyframes lu-flicker {                       /* brightness over the loop: dim when settled, bright and busy in flight */
    0%, 8%   { opacity: 0.45; }
    12%      { opacity: 1; }
    24%      { opacity: 0.7; }
    28%      { opacity: 1; }
    36%      { opacity: 0.8; }
    42%      { opacity: 1; }
    45%, 58% { opacity: 0.42; }
    62%      { opacity: 1; }
    72%      { opacity: 0.75; }
    78%      { opacity: 1; }
    88%      { opacity: 0.85; }
    93%, 100%{ opacity: 0.45; }
}
@keyframes lu-twinkle-ff {                    /* the glow itself swells and shrinks all the time */
    0%, 100% { box-shadow: 0 0 6px 2px rgba(120, 255, 190, 0.75), 0 0 16px 6px rgba(80, 230, 160, 0.30); }
    50%      { box-shadow: 0 0 11px 4px rgba(150, 255, 205, 0.95), 0 0 30px 12px rgba(80, 230, 160, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .stars s, .stars u { animation: none; }
    .stars u { opacity: 0.8; transform: translate(-50%, -50%); }
    .fireflies .firefly { animation: none; transform: translate(18vw, 24vh); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; --veil: 0.8; }
}

/* ── Shooting stars and comets: each has its own cycle length, so they rarely line up ── */
html .sky { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.sky i { position: absolute; left: var(--x); top: var(--y); transform-origin: 0 50%; opacity: 0; will-change: transform, opacity; }
.sky .shoot {
    width: 130px; height: 1.5px;
    background: linear-gradient(90deg, rgba(244, 242, 255, 0), rgba(244, 242, 255, 0.95));
    border-radius: 2px;
    animation: lu-shoot var(--t) linear var(--o) infinite;
}
.sky .comet {
    width: 240px; height: 3px;
    background: linear-gradient(90deg, rgba(120, 100, 230, 0), rgba(170, 160, 255, 0.55) 70%, rgba(190, 255, 225, 0.95));
    border-radius: 3px;
    filter: drop-shadow(0 0 5px rgba(154, 248, 207, 0.7));
    animation: lu-comet var(--t) linear var(--o) infinite;
}
@keyframes lu-shoot {
    0%   { opacity: 0; transform: rotate(var(--a)) translateX(0); }
    1%   { opacity: 1; }
    4%   { opacity: 0; transform: rotate(var(--a)) translateX(55vmax); }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(55vmax); }
}
@keyframes lu-comet {
    0%   { opacity: 0; transform: rotate(var(--a)) translateX(0); }
    1.5% { opacity: 1; }
    9%   { opacity: 1; }
    11%  { opacity: 0; transform: rotate(var(--a)) translateX(95vmax); }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(95vmax); }
}
@media (prefers-reduced-motion: reduce) { html .sky { display: none; } }

/* ── The moon's reflection: water lines that shimmer in colour and sway, like the Moonglade mark ── */
html .moon-water {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    right: 7vmin;
    width: 22vmin;
    top: calc(11vmin + 22vmin + 30vmin);
    pointer-events: none;
    z-index: -1;
    animation: lu-water-breathe 18s ease-in-out infinite;
}
.moon-water b {
    display: block;
    width: var(--w, 80%);
    height: 2px;
    margin-top: var(--gap, 1.3vmin);
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0, #A9A5DA 14%, #F4F2FF 36%, #9AF8CF 56%, #B8B2F0 76%, transparent 100%);
    background-size: 320% 100%;
    opacity: var(--o, 0.8);
    animation: lu-water-hue var(--hue, 11s) linear var(--d, 0s) infinite, lu-water-sway var(--sway, 6s) ease-in-out var(--d, 0s) infinite;
}
.moon-water b:nth-child(1) { --w: 86%; --gap: 0;      --o: 0.85; --d: -1s;  --hue: 11s; --sway: 5.2s; }
.moon-water b:nth-child(2) { --w: 70%; --gap: 1.2vmin; --o: 0.75; --d: -4s;  --hue: 13s; --sway: 6.1s; }
.moon-water b:nth-child(3) { --w: 92%; --gap: 1.5vmin; --o: 0.65; --d: -2s;  --hue: 10s; --sway: 4.7s; }
.moon-water b:nth-child(4) { --w: 54%; --gap: 1.8vmin; --o: 0.55; --d: -7s;  --hue: 14s; --sway: 6.8s; }
.moon-water b:nth-child(5) { --w: 74%; --gap: 2.2vmin; --o: 0.45; --d: -3s;  --hue: 12s; --sway: 5.5s; }
.moon-water b:nth-child(6) { --w: 38%; --gap: 2.7vmin; --o: 0.35; --d: -9s;  --hue: 15s; --sway: 7.2s; }
.moon-water b:nth-child(7) { --w: 56%; --gap: 3.3vmin; --o: 0.26; --d: -5s;  --hue: 13s; --sway: 6.4s; }
.moon-water b:nth-child(8) { --w: 24%; --gap: 4vmin;   --o: 0.18; --d: -6s;  --hue: 16s; --sway: 7.8s; }
@keyframes lu-water-hue   { from { background-position: 0 0; } to { background-position: -320% 0; } }
@keyframes lu-water-sway  { 0%, 100% { transform: translateX(-0.9vmin) scaleX(0.96); } 50% { transform: translateX(0.9vmin) scaleX(1.04); } }
@keyframes lu-water-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }   /* in step with the moon's circuit fade */
@media (prefers-reduced-motion: reduce) {
    .moon-water, .moon-water b { animation: none; }
}

/* ── Hero swirl: the whole site in one slow spiral, filling the right third of the front-page card ── */
html .hero-swirl {
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 33.333%;
    overflow: hidden;
    container-type: size;
    border-radius: 0 18px 18px 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
            mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.hero-swirl::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(120, 100, 230, 0.28) 0%, rgba(120, 100, 230, 0.08) 45%, transparent 70%);
}
.swirl-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    animation: lu-swirl 70s linear infinite;
}
.swirl-ring i {
    position: absolute;
    left: 0; top: 0;
    font-style: normal;
    line-height: 1;
    font-size: calc(var(--s) * 1.2rem);
    opacity: var(--o);
    transform: rotate(calc(var(--a) * 1deg)) translateX(calc(var(--r) * 1cqmin));
}
.swirl-ring .g {
    display: block;
    transform: translate(-50%, -50%) rotate(calc(var(--a) * -1deg));
    animation: lu-upright 70s linear infinite;
}
.swirl-ring .c1 { color: #B8B2F0; }
.swirl-ring .c2 { color: #3DE8A0; }
.swirl-ring .c3 { color: #F4F2FF; }
.swirl-ring .c4 { color: #E5334B; }
.swirl-ring .emoji { filter: saturate(0.85); }
.swirl-ring .tool, .swirl-ring .trivia { font-family: var(--font-mono); font-size: calc(var(--s) * 0.95rem); }
.swirl-ring .quote, .swirl-ring .note { font-family: var(--font-header); }
/* Tetrominoes drawn with box-shadow: one 7px block plus three copies */
.tet { display: block; width: 8px; height: 8px; background: currentColor; border-radius: 1.5px; }
.tet.t-i { box-shadow: 10px 0 0 currentColor, 20px 0 0 currentColor, 30px 0 0 currentColor; }
.tet.t-t { box-shadow: 10px 0 0 currentColor, 20px 0 0 currentColor, 10px -10px 0 currentColor; }
.tet.t-l { box-shadow: 10px 0 0 currentColor, 20px 0 0 currentColor, 20px -10px 0 currentColor; }
.tet.t-s { box-shadow: 10px 0 0 currentColor, 10px -10px 0 currentColor, 20px -10px 0 currentColor; }
.tet.t-o { box-shadow: 10px 0 0 currentColor, 0 -10px 0 currentColor, 10px -10px 0 currentColor; }
@keyframes lu-swirl   { to { transform: rotate(360deg); } }
@keyframes lu-upright { from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1deg)); } to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1deg - 360deg)); } }
/* When swirl.js takes over (mouse repulsion, collisions, per-glyph speeds) the CSS rotation steps aside */
html.swirl-js .swirl-ring { animation: none; }
html.swirl-js .swirl-ring .g { animation: none; transform: translate(-50%, -50%); }
html.swirl-js .swirl-ring i { will-change: transform; }
@media (max-width: 1099px) { html .hero-swirl { display: none; } }
@media (prefers-reduced-motion: reduce) { .swirl-ring, .swirl-ring .g { animation: none; } }

/* ── Coconut palm: a silhouette down the whole left side, fronds and trunk swaying in the night breeze ── */
html .palm {
    display: block;
    position: fixed;
    left: 0; bottom: 0;
    height: 100vh;
    width: calc(100vh * 0.52);
    max-width: 42vw;
    pointer-events: none;
    z-index: -1;
}
.palm svg { display: block; width: 100%; height: 100%; overflow: visible; fill: #050310; transform-origin: 34% 100%; animation: lu-tree 12s ease-in-out infinite; filter: drop-shadow(2px 0 0 rgba(165, 155, 240, 0.26)); }
.palm .rings { fill: none; stroke: rgba(170, 160, 255, 0.10); stroke-width: 1.4; }
.palm .nuts { fill: #090519; }
.palm .fr { transform-origin: 262px 268px; animation: lu-frond var(--t) ease-in-out var(--d) infinite; }
@keyframes lu-frond { 0%, 100% { transform: rotate(calc(var(--r) * -1)); } 50% { transform: rotate(var(--r)); } }
@keyframes lu-tree  { 0%, 100% { transform: rotate(-0.45deg); } 50% { transform: rotate(0.55deg); } }
@media (max-width: 800px) { html .palm { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .palm svg, .palm .fr { animation: none; } }

/* ── Code rain: slow characters fall from beneath the moon, then drop quickly into the water and ripple ── */
html .moon-rain {
    display: block;
    position: fixed;
    right: 7vmin;
    width: 22vmin;
    top: calc(11vmin + 22vmin + 0.5vmin);
    height: 29.5vmin;                       /* ends at the water line */
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}
.moon-rain s {
    position: absolute;
    left: var(--x);
    top: 0;
    text-decoration: none;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-mono), 'MS Gothic', 'Noto Sans Mono CJK JP', monospace;
    font-size: var(--z);
    line-height: 1.05;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: transparent;
    background: linear-gradient(180deg, rgba(154, 248, 207, 0) 0%, rgba(184, 178, 240, 0.5) 55%, #DFFFEF 100%);
    -webkit-background-clip: text;
            background-clip: text;
    opacity: 0;
    transform: translateY(-105%);
    animation: lu-rain var(--t) cubic-bezier(0.62, 0, 0.92, 0.55) var(--d) infinite;
}
@keyframes lu-rain {
    0%   { opacity: 0;    transform: translateY(-105%); }
    8%   { opacity: 0.9; }
    92%  { opacity: 0.95; }
    100% { opacity: 0.95; transform: translateY(29.5vmin); }
}
/* A ripple ring on the water where each column lands (same period, same delay) */
.moon-water .splashes { position: absolute; top: 0; left: 0; right: 0; height: 0; }
.moon-water .splashes em {
    position: absolute;
    left: var(--x);
    top: 0;
    width: 3.6vmin; height: 0.9vmin;
    margin: -0.45vmin 0 0 -1.8vmin;
    border: 1px solid rgba(190, 255, 225, 0.8);
    border-radius: 50%;
    opacity: 0;
    animation: lu-splash var(--t) linear var(--d) infinite;
}
@keyframes lu-splash {
    0%   { opacity: 0.85; transform: scale(0.15); }
    7%   { opacity: 0;    transform: scale(1.5); }
    100% { opacity: 0;    transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) { html .moon-rain, .moon-water .splashes { display: none; } }

/* ── Warp arrival: the page eases in while the stars slow (static/js/warp.js) ── */
@keyframes lu-warp-reveal { from { opacity: 0; } to { opacity: 1; } }
html.warp-in body { opacity: 0; animation: lu-warp-reveal 0.55s ease-out 0.2s forwards; }   /* CSS-only fallback if the script never runs */
@media (prefers-reduced-motion: reduce) { html.warp-in body { opacity: 1; animation: none; } }

/* ── Small screens ──────────────────────────────────────────── */
@media (max-width: 720px) {
    body::before { width: 80vmin; height: 80vmin; right: -26vmin; top: -18vmin; }
    body::after { width: 26vmin; height: 26vmin; right: 4vmin; top: 6vmin; }
    .index-card { padding: 2rem 1.5rem; }
    .site-stamp { font-size: 2rem; }
    .hero-section h1 { font-size: 1.6rem; }
}

/* ── Respect reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .main-nav a:hover, body::before { animation: none; background-position: 0 center; }
    .btn::after, button[type="submit"]::after { transition: none; }
    .registry-tile, .btn, button[type="submit"] { transition: none; animation: none; }
}

/* Luna has its own hero (the swirl); the shared hero art stays off. */
:root { --hero-display: none; }