/* moliam.com — clean minimal · dark + orange/purple accents */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0c;
  --bg-1: #0f0f12;
  --bg-2: #141418;
  --bg-3: #1a1a20;
  --line: #22222a;
  --line-2: #2a2a34;
  --fg: #f5f5f5;
  --fg-2: #a8a8b3;
  --fg-3: #6a6a78;
  --fg-4: #3a3a44;
  --accent: #a78bfa;
  --accent-2: #ff6b35;
  --purple: #a78bfa;
  --purple-deep: #7c5cf5;
  --purple-light: #c4b5fd;
  --purple-glow: rgba(167, 139, 250, 0.32);
  --accent-glow: rgba(167, 139, 250, 0.28);
  --orange: #ff6b35;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.5; min-height: 100%; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { position: relative; }
::selection { background: var(--purple); color: #0a0a0c; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 85%);
}
.bg-vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 50% 30%, rgba(167,139,250,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,107,53,0.06) 0%, transparent 70%);
}
.bg-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: blur(60px); opacity: .55;
}
.aurora-blob {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  will-change: transform;
}
.aurora-blob.a1 {
  width: 520px; height: 520px; top: -10%; left: 18%;
  background: radial-gradient(circle, rgba(167,139,250,0.5) 0%, transparent 65%);
  animation: aFloat1 22s ease-in-out infinite;
}
.aurora-blob.a2 {
  width: 460px; height: 460px; top: 30%; right: 8%;
  background: radial-gradient(circle, rgba(255,107,53,0.4) 0%, transparent 65%);
  animation: aFloat2 26s ease-in-out infinite;
}
.aurora-blob.a3 {
  width: 600px; height: 600px; bottom: -10%; left: 35%;
  background: radial-gradient(circle, rgba(110,80,200,0.35) 0%, transparent 65%);
  animation: aFloat3 30s ease-in-out infinite;
}
@keyframes aFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(80px,40px) scale(1.1); }
}
@keyframes aFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-60px,80px) scale(1.05); }
}
@keyframes aFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(50px,-60px) scale(1.08); }
}
.bg-scan {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0px, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 3px);
}

/* ── Navbar ───────────────────────────── */
.navbar, .topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 36px;
  background: rgba(10,10,12,0.7); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
}
.nb-brand { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--fg); }
.nb-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.nb-nav { display: flex; gap: 26px; }
.nb-nav a { color: var(--fg-2); transition: color .2s; }
.nb-nav a:hover { color: var(--purple); }

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; color: var(--fg-3); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 500; }
.brand-mark { width: 22px; height: 22px; border: 1px solid var(--purple); color: var(--purple); display: grid; place-items: center; font-size: 11px; font-weight: 600; border-radius: 50%; }
.tb-link { color: var(--fg-2); transition: color .2s; }
.tb-link:hover { color: var(--purple); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6cd28f; box-shadow: 0 0 8px #6cd28faa; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Landing ─────────────────────────── */
.landing {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: 130px 36px 80px;
  display: flex; flex-direction: column; gap: 78px;
}
.hero-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }

/* Entire logo group floats together so the mark stays centered in its rings */
.logo-wrap {
  position: relative; width: 220px; height: 220px;
  display: grid; place-items: center;
  margin-bottom: 12px;
  animation: logoFloat 7s ease-in-out infinite;
  will-change: transform;
}
.logo-mark {
  position: relative; z-index: 3;
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  /* crisp separation from dark bg + subtle specular lift */
  background: #0a0a0c;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 1.5px rgba(255,255,255,0.14),
    0 0 0 10px rgba(10,10,12,0.9),
    0 0 0 11px rgba(167,139,250,0.22),
    0 0 0 12px rgba(167,139,250,0.08),
    0 40px 90px -20px rgba(167,139,250,0.55),
    0 0 120px -10px rgba(167,139,250,0.45);
}
/* highlight sheen across the top of the mark */
.logo-mark-sheen {
  position: absolute; z-index: 4; pointer-events: none;
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.22) 0%, transparent 55%);
  mix-blend-mode: screen;
}
.logo-glow {
  position: absolute; inset: -30px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.45) 0%, rgba(255,107,53,0.12) 42%, transparent 72%);
  filter: blur(24px);
  animation: glowBreathe 5s ease-in-out infinite;
}
.logo-ring {
  position: absolute; border-radius: 50%; z-index: 2; pointer-events: none;
  inset: 22px;
  border: 1px solid rgba(167,139,250,0.26);
  animation: spinSlow 28s linear infinite;
}
.logo-ring.r2 {
  inset: 4px;
  border: 1px dashed rgba(167,139,250,0.14);
  animation: spinSlow 44s linear infinite reverse;
}
.logo-ring.r3 {
  inset: -18px;
  border: 1px solid rgba(255,255,255,0.04);
  animation: spinSlow 60s linear infinite;
}
/* tiny orbiting tick marks that read as "live/working" */
.logo-tick {
  position: absolute; z-index: 2; pointer-events: none;
  width: 220px; height: 220px; inset: 0;
  animation: spinSlow 18s linear infinite;
}
.logo-tick::before, .logo-tick::after {
  content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--purple, #a78bfa);
  box-shadow: 0 0 12px rgba(167,139,250,0.9);
  top: 50%; left: 50%;
}
.logo-tick::before { transform: translate(-50%, -50%) rotate(0deg) translateX(110px); }
.logo-tick::after  { transform: translate(-50%, -50%) rotate(180deg) translateX(110px); opacity: .5; }

@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glowBreathe { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--fg-2); padding: 7px 14px; border: 1px solid var(--line-2);
  border-radius: 999px; background: rgba(255,255,255,0.015);
  text-transform: uppercase;
}
.headline {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 8.5vw, 108px); line-height: 0.98; letter-spacing: -.025em;
  max-width: 16ch;
}
.accent-italic { font-style: italic; color: var(--fg-2); }
.accent-purple { color: var(--purple); font-style: italic; text-shadow: 0 0 40px rgba(167,139,250,0.4); }
.lede { color: var(--fg-2); font-size: 16px; max-width: 50ch; line-height: 1.65; }

/* nav grid */
.nav-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 720px; width: 100%; margin: 0 auto;
}
.nav-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 22px 24px;
  background: rgba(255,255,255,0.015); border: 1px solid var(--line);
  border-radius: 14px;
  transition: border .2s, transform .25s, background .2s;
}
.nav-card:hover { border-color: var(--purple); transform: translateY(-3px); background: rgba(167,139,250,0.04); }
.nav-card:hover .nc-arrow { color: var(--purple); transform: translateX(4px); }
.nc-num { font-family: var(--mono); font-size: 10px; color: var(--fg-3); letter-spacing: .15em; }
.nc-body h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.01em; margin-bottom: 3px; }
.nc-body p { color: var(--fg-2); font-size: 12.5px; }
.nc-arrow { font-family: var(--serif); font-size: 22px; color: var(--fg-3); transition: color .2s, transform .25s; }

.fade { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.fade.in { opacity: 1; transform: translateY(0); }

/* ── Landing footer ───────────────────── */
.landing-foot {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 40px auto 0; padding: 22px 36px;
  border-top: 1px solid var(--line);
  display: flex; gap: 18px; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--fg-3);
}
.landing-foot .dim { color: var(--fg-3); }

/* ════════════════════════════════════════════════════════════════════
   PROJECTS HUB  (projects.html)
   ════════════════════════════════════════════════════════════════════ */
.proj-page { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 120px 36px 80px; }
.proj-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.proj-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 6vw, 64px); line-height: 1; letter-spacing: -.02em; margin-top: 10px; }
.crumb { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--fg-3); text-transform: uppercase; display: flex; gap: 8px; }
.crumb a { color: var(--fg-2); }
.crumb a:hover { color: var(--purple); }
.meta { font-family: var(--mono); font-size: 10px; color: var(--fg-3); letter-spacing: .08em; text-align: right; }
.meta b { color: var(--fg); font-weight: 500; }

.proj-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.fchip {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--fg-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  transition: border .15s, background .15s, color .15s;
}
.fchip:hover { border-color: var(--purple); color: var(--fg); }
.fchip.on { background: var(--purple); color: #0a0a0c; border-color: var(--purple); }

.proj-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }

.proj-card {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: rgba(255,255,255,0.015);
  display: flex; flex-direction: column; min-height: 280px;
  transition: border .2s, transform .25s, background .2s;
}
.proj-card:hover { border-color: var(--purple); transform: translateY(-3px); background: rgba(167,139,250,0.04); }
.proj-card.wide { min-height: 320px; }
.preview { flex: 1; background: #050505; border-bottom: 1px solid var(--line); overflow: hidden; position: relative; min-height: 160px; }
.body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ttl { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.num { font-family: var(--mono); font-size: 10px; color: var(--fg-3); letter-spacing: .15em; }
.desc { color: var(--fg-2); font-size: 12.5px; line-height: 1.5; }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg-2); text-transform: lowercase; }

.status {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(10,10,12,0.8); backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 9px; letter-spacing: .15em; color: var(--fg-2);
  border: 1px solid var(--line-2);
}
.status i { width: 5px; height: 5px; border-radius: 50%; background: #6a6a78; }
.status.live i { background: #6cd28f; box-shadow: 0 0 8px #6cd28faa; }

.play-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(10,10,12,0.75); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); color: var(--fg-2);
  display: grid; place-items: center;
  transition: background .2s, color .2s, border .2s;
}
.proj-card:hover .play-btn { background: var(--purple); color: #0a0a0c; border-color: var(--purple); }

/* ── Responsive ──────────────────────── */
@media (max-width: 820px) {
  .nav-grid { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .span-4, .span-6, .span-8 { grid-column: span 1; }
  .proj-head { flex-direction: column; align-items: flex-start; }
  .meta { text-align: left; }
  .nb-nav { gap: 14px; }
  .nb-nav a { font-size: 10px; }
}