/* extras: small additions on top of style.css. everything here respects reduced motion. */
::selection { background:#d8d8d8; color:#050505; }
html { scrollbar-color:#333 #050505; scrollbar-width:thin; }
:focus-visible { outline:1px solid #d0d0d0; outline-offset:3px; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:2000; padding:8px 12px; background:#e5e5e5; color:#050505; text-decoration:none; transition:top .15s; }
.skip-link:focus { top:12px; }

/* second star layer, drifting at a different speed than the one already in the page */
.dd-stars { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.dd-stars i { position:absolute; left:0; top:0; width:1px; height:1px; border-radius:50%; background:transparent; }
.dd-stars i::after { content:""; position:absolute; left:0; top:100vh; width:1px; height:1px; background:transparent; box-shadow:inherit; }
.dd-stars i:nth-child(1) { animation:dd-drift 160s linear infinite; opacity:.5; }
.dd-stars i:nth-child(2) { animation:dd-drift 260s linear infinite; opacity:.3; }
@keyframes dd-drift { to { transform:translateY(-100vh); } }

/* soft page fade when content is swapped in, and a quick first-load fade */
.site-shell > main { animation:dd-in .38s ease both; }
@keyframes dd-in { from { opacity:0; transform:translate(calc(var(--dd-dir, 0) * 16px), 6px); } to { opacity:1; transform:none; } }

/* nav underline that slides in, and arrows that nudge on hover */
.nav-link { background:linear-gradient(#cfcfcf,#cfcfcf) left bottom / 0 1px no-repeat; transition:background-size .25s ease, color .2s; }
.nav-link:hover, .nav-link.active { background-size:100% 1px; }
.primary-action span, .secondary-action span, .link-card span, .info-card span { transition:transform .2s ease; display:inline-block; }
.primary-action:hover span, .secondary-action:hover span, .link-card:hover span { transform:translate(2px,-2px); }

/* keep content reachable above the fixed player */
.site-shell { padding-bottom:120px; }

/* compact player so it stops covering the page */
.music-mini-toggle, .music-mute-toggle { flex:none; min-width:28px; padding:0 6px; white-space:nowrap; width:auto; height:28px; border:1px solid #3a3a3a; background:transparent; color:#bbb; font:inherit; font-size:12px; cursor:pointer; transition:border-color .2s,color .2s; }
.music-mini-toggle:hover, .music-mute-toggle:hover { border-color:#777; color:#fff; }
.music-player-global.is-mini { width:auto; max-width:min(300px,calc(100% - 20px)); padding:8px; }
.is-mini .music-eyebrow, .is-mini .music-status, .is-mini .music-timeline, .is-mini .music-volume-control { display:none; }
.is-mini .music-title { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-error { color:#9a9a9a; }

@media (prefers-reduced-motion: reduce), (hover: none) and (max-width: 640px) { .dd-stars i { animation:none; } }
@media (prefers-reduced-motion: reduce) { .site-shell > main { animation:none; } .nav-link, .primary-action span, .link-card span { transition:none; } }
html.user-reduced-motion .dd-stars i, html.user-reduced-motion .site-shell > main { animation:none; }

/* gallery: real artwork + image viewer controls */
.gallery-heading { margin:44px 0 16px; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:lowercase; color:#858585; }
.gallery-image { margin:0; gap:12px; }
.gallery-image img { display:block; width:100%; height:150px; object-fit:contain; cursor:zoom-in; }
.gallery-image figcaption { display:flex; flex-direction:column; gap:4px; }
.gallery-image figcaption span { color:#e5e5e5; font-size:12px; }
.gallery-image figcaption small { color:#858585; }
.gallery-image-line img { filter:invert(.85) brightness(1.4); }
.image-lightbox img { max-width:100%; max-height:70vh; object-fit:contain; }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:44px; border:1px solid #3a3a3a; background:rgba(8,8,8,.8); color:#ddd; font:inherit; font-size:22px; cursor:pointer; }
.lightbox-prev { left:8px; } .lightbox-next { right:8px; }
.lightbox-prev:hover, .lightbox-next:hover { border-color:#888; }

/* watermark drifts a few px as you scroll (set from js, off with reduced motion) */
body::before { background-position:calc(50% + var(--mx, 0px)) calc(50% + var(--wm, 0px) + var(--my, 0px)); transition:background-position .5s ease-out; }

/* page hero divider draws itself once */
.page-hero::after { content:""; display:block; height:1px; width:0; margin-top:26px; background:#3a3a3a; animation:dd-line .9s .15s ease forwards; }
@keyframes dd-line { to { width:min(100%,260px); } }
@media (prefers-reduced-motion: reduce) { .page-hero::after { animation:none; width:min(100%,260px); } }

.music-loop-toggle { flex:none; width:auto; padding:0 7px; white-space:nowrap; height:28px; border:1px solid #3a3a3a; background:transparent; color:#bbb; font:inherit; font-size:11px; cursor:pointer; }
.music-loop-toggle[aria-pressed="false"] { color:#666; }
.is-mini .music-loop-toggle { display:none; }
.reset-settings { background:none; border:0; padding:0; margin-left:8px; color:#858585; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.reset-settings:hover { color:#e5e5e5; }
.not-found-links { margin-top:18px; color:#858585; }

.back-to-top { bottom:124px; }

/* page transition: old page slides out a little, new one slides in from the same side */
.site-shell > main.is-leaving { opacity:0; transform:translateX(calc(var(--dd-dir, 1) * -16px)); transition:opacity .16s ease, transform .16s ease; pointer-events:none; }
main:focus { outline:none; }
.dd-nav-bar { position:fixed; z-index:1001; left:0; top:0; height:2px; width:0; background:#8a8a8a; opacity:0; pointer-events:none; }
.dd-nav-bar.is-on { opacity:1; width:70%; transition:width 2.5s cubic-bezier(.1,.7,.2,1); }
.repo-live { display:block; margin-top:12px; color:#858585; font-size:11px; letter-spacing:.02em; }
@media (prefers-reduced-motion: reduce) { .site-shell > main.is-leaving { transition:none; } .dd-nav-bar.is-on { transition:none; } }

/* ---- batch 5 ---- */
/* floating pill nav (desktop), like a small bar hovering at the top */
@media (min-width: 900px) {
    .site-header { position:sticky; top:10px; z-index:60; width:fit-content; max-width:calc(100% - 32px); margin-inline:auto; background:#060606; transition:border-color .25s, box-shadow .25s; }
    .site-header.is-scrolled { border-color:#3a3a3a; box-shadow:0 8px 28px rgba(0,0,0,.55); }
}

/* toasts (top right, under the header) */
.dd-toasts { position:fixed; top:84px; right:14px; z-index:1500; display:grid; gap:8px; pointer-events:none; }
.dd-toast { pointer-events:auto; width:min(320px, calc(100vw - 28px)); padding:12px 14px; border:1px solid #2a2a2a; background:#080808; color:#d8d8d8; font-size:12px; line-height:1.5; box-shadow:0 10px 30px rgba(0,0,0,.5); animation:dd-toast-in .25s ease both; }
.dd-toast strong { display:block; margin-bottom:2px; color:#f0f0f0; font-weight:600; }
.dd-toast.is-out { opacity:0; transform:translateX(12px); transition:opacity .25s, transform .25s; }
@keyframes dd-toast-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }

/* copy boxes */
.copy-stack { display:grid; gap:10px; max-width:560px; margin-top:8px; }
.copy-box { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #242424; background:#070707; }
.copy-label { flex:none; width:72px; color:#858585; font-size:11px; letter-spacing:.08em; }
.copy-box code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d8d8d8; font:inherit; font-size:13px; }
.copy-btn { flex:none; padding:5px 10px; border:1px solid #333; background:transparent; color:#bbb; font:inherit; font-size:11px; cursor:pointer; transition:border-color .2s, color .2s; }
.copy-btn:hover { border-color:#888; color:#fff; }

/* background: twinkle, glow, shooting star, avatar orbit */
.dd-stars i:nth-of-type(1) { animation:dd-drift 160s linear infinite, dd-twinkle 5s ease-in-out infinite alternate; will-change:transform; }
.dd-stars i:nth-of-type(2) { animation:dd-drift 260s linear infinite, dd-twinkle 8s 1.5s ease-in-out infinite alternate; will-change:transform; }
@keyframes dd-twinkle { from { opacity:.22; } to { opacity:.7; } }
.dd-glow { position:absolute; inset:-20%; background:radial-gradient(40% 35% at 30% 30%, rgba(255,255,255,.035), transparent 70%), radial-gradient(35% 30% at 75% 70%, rgba(255,255,255,.025), transparent 70%); animation:dd-glow 40s ease-in-out infinite alternate; }
@keyframes dd-glow { to { transform:translate(4%,3%) scale(1.08); } }
.dd-shoot { position:fixed; left:0; top:0; z-index:0; width:90px; height:1px; background:linear-gradient(90deg, transparent, #d0d0d0); opacity:0; pointer-events:none; }
.avatar { position:relative; }
.avatar::after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 3px, #d0d0d0 0 1.6px, transparent 2.6px); animation:dd-orbit 26s linear infinite; pointer-events:none; }
@keyframes dd-orbit { to { transform:rotate(360deg); } }
html.dd-paused .dd-stars i, html.dd-paused .dd-glow, html.dd-paused .avatar::after { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .dd-stars i, .dd-glow, .avatar::after { animation:none !important; } }
html.user-reduced-motion .dd-glow, html.user-reduced-motion .avatar::after { animation:none; }

.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:14px 0 0; font-size:12px; }
.footer-links a { color:#858585; text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:#e5e5e5; }
@media (max-width: 640px) { .music-mini-toggle, .music-mute-toggle, .music-loop-toggle { min-height:40px; } }
@media print {
    .dd-stars, .dd-toasts, .music-player-global, .site-header, .back-to-top, .skip-link, .dd-nav-bar { display:none !important; }
    body { background:#fff !important; color:#000 !important; } body::before { display:none !important; }
    * { color:#000 !important; border-color:#999 !important; box-shadow:none !important; }
}

/* projects: status line + sort. dashed border = no public repo to look at */
.project-status { display:block; margin-top:14px; padding-top:10px; border-top:1px solid #1e1e1e; color:#858585; font-size:11px; letter-spacing:.02em; }
.project-filter-card[data-state="public"] .project-status::before { content:"● "; color:#9a9a9a; }
.project-filter-card[data-state="none"], .project-filter-card[data-state="private"] { border-style:dashed; }
.project-filter-card[data-state="none"] .project-status::before, .project-filter-card[data-state="private"] .project-status::before { content:"○ "; }
.project-sort { margin-left:auto; padding:7px 12px; border:1px solid #2a2a2a; background:transparent; color:#858585; font:inherit; font-size:12px; cursor:pointer; transition:border-color .2s, color .2s; }
.project-sort:hover, .project-sort[aria-pressed="true"] { border-color:#777; color:#e5e5e5; }

/* ---- batch 7 ---- */
.dd-stars i:nth-of-type(1) { translate:0 calc(var(--sy, 0px) * -.03); }
.dd-stars i:nth-of-type(2) { translate:0 calc(var(--sy, 0px) * -.015); }
.music-eq { flex:none; align-self:center; width:44px; height:18px; margin:0 4px; opacity:.85; }
.is-mini .music-eq { display:none; }
.avatar-image.is-kick { animation:dd-kick .28s ease-out; }
@keyframes dd-kick { 0% { transform:none; } 30% { transform:translate(-3px,2px) rotate(-4deg); } 100% { transform:none; } }
.avatar { cursor:pointer; }
.image-lightbox { overflow:hidden; }
.image-lightbox img { cursor:zoom-in; transition:transform .2s ease; }
.image-lightbox.is-zoomed img { transform:scale(2); cursor:zoom-out; }
.lightbox-save { display:inline-block; margin-top:8px; color:#858585; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.lightbox-save:hover { color:#e5e5e5; }
.main-nav a.has-new::after { content:""; display:inline-block; width:5px; height:5px; margin-left:7px; border-radius:50%; background:#d0d0d0; vertical-align:middle; animation:dd-ping 2.2s ease-in-out infinite; }
@keyframes dd-ping { 50% { opacity:.25; } }
.dd-lite .dd-glow, .dd-lite .dd-stars i:nth-of-type(2), .dd-lite .avatar::after { display:none; }
.not-found-path { margin-top:14px; color:#858585; font-size:12px; word-break:break-all; }
@media (prefers-reduced-motion: reduce) { .avatar-image.is-kick, .main-nav a.has-new::after { animation:none; } body::before { transition:none; } }