/* Night sea theme: content floats over a live WebGL sea (night.js). */
:root {
  --bg: #050a12;
  --paper: rgba(13, 21, 32, .62);
  --dark: rgba(4, 8, 14, .38);
  --dark-2: rgba(13, 21, 32, .66);
  --line: rgba(190, 220, 255, .08);
  --line-2: rgba(190, 220, 255, .15);
  --dark-line: rgba(190, 220, 255, .09);
  --bio: #5fd8ff;
}
body { background: var(--bg); }
#sea { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }
.hero::before { display: none; }
.topbar.scrolled { background: rgba(5, 10, 18, .66); }
.work, .bots-wrap { background: var(--dark); }
.service, .bot-col, .case, .browser { backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); }

/* spotlight borders (Slipcast "bento"): light follows the pointer along card edges */
.spot { --x: -999px; --y: -999px; position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(340px circle at var(--x) var(--y), rgba(216, 185, 127, .65), rgba(95, 216, 255, .18) 30%, transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.spot { background-image: radial-gradient(480px circle at var(--x) var(--y), rgba(255, 255, 255, .045), transparent 45%); }

/* rotating word in the hero (Slipcast "text effects") */
.rot { display: inline-grid; vertical-align: bottom; height: 1.12em; overflow: hidden; padding-right: .04em; }
.rot b { grid-area: 1/1; font-weight: inherit; line-height: 1.12; white-space: nowrap; transform: translateY(110%); transition: transform .7s cubic-bezier(.7, 0, .2, 1); }
.rot b.in { transform: none; }
.rot b.out { transform: translateY(-110%); }
.kicker .x { color: var(--bio); }

@media (prefers-reduced-motion: reduce) { .rot b { transition: none; } }

/* "More projects" catalog (projects.js) */
.catalog { margin-top: 88px; }
.cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.cat-head h3 { font-family: var(--display); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.cat-head p { color: var(--muted); margin-top: 10px; max-width: 520px; line-height: 1.55; }
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.cat-tabs button { font: inherit; font-size: 14px; color: var(--ink-2); background: rgba(13, 21, 32, .55); border: 1px solid var(--line-2); border-radius: 99px; padding: 10px 16px; min-height: 44px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.cat-tabs button span { color: var(--muted); margin-left: 4px; font-size: 12px; }
.cat-tabs button:hover { border-color: rgba(216, 185, 127, .5); }
.cat-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cat-tabs button[aria-selected="true"] span { color: var(--on-accent); opacity: .7; }
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } }
.cat-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r); background-color: var(--dark-2); border: 1px solid var(--dark-line); color: var(--ink); text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, transform .3s var(--ease); animation: cat-in .5s var(--ease) both; }
a.cat-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); }
.cat-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(95, 216, 255, .08); color: var(--bio); font-size: 16px; }
.cat-card h4 { font-size: 17px; font-weight: 600; }
.cat-card h4 i { font-size: 11px; color: var(--muted); margin-left: 4px; }
.cat-card p { color: var(--muted); font-size: 14px; line-height: 1.55; flex: 1; }
.cat-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-tags span { font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 9px; }
.cat-tags .mute { color: var(--muted); border-style: dashed; }
@keyframes cat-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .cat-card { animation: none; } }

/* hero without mockups: one column, the sea and moon carry the right side */
.hero .wrap { grid-template-columns: minmax(0, 1fr); }
.hero h1 { font-size: clamp(34px, 5.6vw, 76px); max-width: 15ch; }
.hero { min-height: 92vh; display: flex; align-items: center; }
.hero > .wrap { width: 100%; }
.hero h1 { max-width: none; }
.hero h1 .rot { display: grid; justify-items: start; }

/* marquee floats over the sea instead of a solid band */
.marquee { background: transparent; border-block: 0; padding: 8px 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.marquee-track span { color: rgba(232, 227, 217, .38); font-weight: 400; font-size: clamp(16px, 1.8vw, 22px); }
.marquee-track span::after { color: rgba(216, 185, 127, .5); font-size: .55em; }