/* =========================================================
   me.atomicspoonsgames.com  ·  Yiftach Fabian portfolio
   Motion-forward, technical, dark-first. Zero runtime deps.
   ========================================================= */

:root {
  --bg:        #0a0c10;
  --bg-2:      #10141b;
  --panel:     #141922;
  --line:      #232b38;
  --ink:       #eef2f7;
  --muted:     #9aa6b6;
  --faint:     #5c6675;
  --accent:    #4fd6c9;   /* system teal */
  --accent-2:  #7c9cff;   /* signal blue */
  --accent-hot:#ffbf69;   /* warm highlight */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --r: 14px;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fc; --bg-2:#eef2f7; --panel:#ffffff; --line:#dbe2ec;
    --ink:#11151c; --muted:#4a5563; --faint:#8996a6;
    --accent:#0f9d90; --accent-2:#3a5bd6; --accent-hot:#c67d17;
  }
}
:root[data-theme="dark"] {
  --bg:#0a0c10; --bg-2:#10141b; --panel:#141922; --line:#232b38;
  --ink:#eef2f7; --muted:#9aa6b6; --faint:#5c6675;
  --accent:#4fd6c9; --accent-2:#7c9cff; --accent-hot:#ffbf69;
}
:root[data-theme="light"] {
  --bg:#f7f9fc; --bg-2:#eef2f7; --panel:#ffffff; --line:#dbe2ec;
  --ink:#11151c; --muted:#4a5563; --faint:#8996a6;
  --accent:#0f9d90; --accent-2:#3a5bd6; --accent-hot:#c67d17;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  font-size:clamp(15px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }
::selection { background:var(--accent); color:#04110f; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--accent); color:#04110f; padding:10px 16px; border-radius:8px; font-family:var(--font-mono); font-size:.85rem; }
.skip:focus { left:12px; }
.mono { font-family:var(--font-mono); }
.eyebrow {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); display:inline-flex; gap:.6em; align-items:center;
}
.eyebrow::before { content:""; width:22px; height:1px; background:var(--accent); display:inline-block; }

/* ---------- NAV ---------- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gutter);
  backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color:var(--line); }
.nav__brand { font-family:var(--font-mono); font-weight:500; letter-spacing:.02em; font-size:.9rem; }
.nav__brand b { color:var(--accent); }
.nav__links { display:flex; gap:26px; align-items:center; font-size:.9rem; }
.nav__links a { color:var(--muted); transition:color .2s; }
.nav__links a:hover { color:var(--ink); }
.nav__cta {
  font-family:var(--font-mono); font-size:.82rem; padding:8px 15px; border-radius:8px;
  border:1px solid var(--line); color:var(--ink); transition:.2s;
}
.nav__cta:hover { border-color:var(--accent); color:var(--accent); }
.nav__toggle { display:none; flex-direction:column; gap:4px; background:none; border:1px solid var(--line); border-radius:8px; padding:9px 10px; cursor:pointer; }
.nav__toggle span { width:18px; height:2px; background:var(--ink); display:block; transition:transform .25s, opacity .2s; }
.nav--open .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2){ opacity:0; }
.nav--open .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:720px){
  .nav__toggle { display:inline-flex; }
  .nav__links {
    display:flex; position:fixed; left:0; right:0; top:57px; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line); padding:6px 0 16px; z-index:45;
    transform:translateY(-135%); transition:transform .32s cubic-bezier(.2,.7,.2,1); box-shadow:0 18px 44px rgba(0,0,0,.45);
  }
  .nav--open .nav__links { transform:none; }
  .nav__links a { padding:14px var(--gutter); }
  .nav__cta { margin:10px var(--gutter) 0; text-align:center; justify-content:center; }
  .theme-btn { margin:8px var(--gutter) 0; width:42px; }
}

/* ---------- HERO ---------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__veil {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 72% 40%, transparent 0%, var(--bg) 78%),
    linear-gradient(to bottom, transparent 40%, var(--bg) 96%);
}
.hero__inner { position:relative; z-index:2; padding-block:120px 80px; }
.hero h1 {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.15rem,7.4vw,5.6rem); line-height:1.0; letter-spacing:-.02em;
  margin:.35em 0 .28em; max-width:16ch;
}
@media (max-width:480px){
  .hero h1 { font-size:clamp(2rem,8.6vw,2.9rem); }
  .hero__roles { font-size:.82rem; }
  .eyebrow { font-size:.6rem; letter-spacing:.16em; }
  .hero__sub { font-size:.98rem; }
}
.hero h1 .accent { color:var(--accent); }
.hero__roles { font-family:var(--font-mono); color:var(--muted); font-size:clamp(.9rem,1.6vw,1.15rem); min-height:1.6em; }
.hero__roles .cursor { color:var(--accent); animation:blink 1.05s step-end infinite; }
@keyframes blink { 50%{ opacity:0; } }
.hero__sub { margin-top:22px; max-width:52ch; color:var(--muted); font-size:1.05rem; }
.hero__cta { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.9rem;
  padding:13px 22px; border-radius:10px; transition:transform .18s, background .2s, border-color .2s;
}
.btn--primary { background:var(--accent); color:#04110f; font-weight:600; }
.btn--primary:hover { transform:translateY(-2px); }
.btn--ghost { border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.scrollcue {
  position:absolute; bottom:26px; left:var(--gutter); z-index:2;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--faint);
  text-transform:uppercase; display:flex; align-items:center; gap:10px;
}
.scrollcue span { width:1px; height:34px; background:linear-gradient(var(--accent),transparent); display:block; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform:scaleY(.4); opacity:.5;} 50%{ transform:scaleY(1); opacity:1;} }
@media (prefers-reduced-motion: reduce){ .scrollcue span, .hero__roles .cursor { animation:none; } }

/* ---------- SECTION SHELL ---------- */
.section { padding-block:clamp(70px,10vw,130px); position:relative; }
.section__head { max-width:640px; margin-bottom:52px; }
.section__head h2 {
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4vw,3rem);
  letter-spacing:-.02em; line-height:1.05; margin-top:14px;
}
.section__head p { color:var(--muted); margin-top:16px; font-size:1.05rem; }

/* ---------- MARQUEE STRIP ---------- */
.strip { border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; }
.strip__track { display:flex; gap:48px; padding:16px 0; white-space:nowrap; width:max-content; animation:marquee 32s linear infinite; }
.strip__track span { font-family:var(--font-mono); color:var(--faint); font-size:.85rem; letter-spacing:.05em; }
.strip__track b { color:var(--accent); font-weight:500; }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .strip__track { animation:none; flex-wrap:wrap; white-space:normal; width:auto; } .strip__track .dup { display:none; } }

/* ---------- WORK GRID ---------- */
.work { display:grid; grid-template-columns:repeat(12,1fr); gap:22px; }
.card {
  position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:30px; overflow:hidden; transition:border-color .3s, transform .3s;
  display:flex; flex-direction:column; min-height:230px;
}
.card::after {
  content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--accent) 16%, transparent), transparent 70%);
  opacity:0; transition:opacity .35s;
}
.card:hover { border-color:color-mix(in srgb,var(--accent) 55%, var(--line)); transform:translateY(-4px); }
.card:hover::after { opacity:1; }
.card__idx { font-family:var(--font-mono); font-size:.75rem; color:var(--faint); }
.card__title { font-family:var(--font-display); font-weight:700; font-size:1.5rem; margin:12px 0 6px; letter-spacing:-.01em; }
.card__tag { font-family:var(--font-mono); font-size:.78rem; color:var(--accent); margin-bottom:12px; }
.card__desc { color:var(--muted); font-size:.95rem; }
.card__meta { margin-top:auto; padding-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.pill { font-family:var(--font-mono); font-size:.72rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-family:var(--font-mono); font-size:.72rem; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); border:1px solid color-mix(in srgb,var(--accent) 26%, transparent); border-radius:6px; padding:3px 9px; }
.card__live { position:absolute; top:22px; right:22px; font-family:var(--font-mono); font-size:.68rem; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.card__live i { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:ping 1.8s ease-out infinite; }
@keyframes ping { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%, transparent);} 100%{ box-shadow:0 0 0 9px transparent;} }
@media (prefers-reduced-motion: reduce){ .card__live i{ animation:none; } }

.card__media { position:relative; margin:-30px -30px 20px; aspect-ratio:16/10; overflow:hidden; background:#0d1117; border-bottom:1px solid var(--line); }
.card__media img { width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.9; transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.card:hover .card__media img { transform:scale(1.06); opacity:1; }
.card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,14,.5), rgba(8,10,14,.16) 42%, var(--panel)); pointer-events:none; }
.card.feature .card__media { margin-bottom:24px; }
.card.col-6 { grid-column:span 6; }
.card.col-4 { grid-column:span 4; }
.card.col-12 { grid-column:span 12; }
.card.feature { min-height:300px; background:linear-gradient(160deg,var(--panel),var(--bg-2)); }
.card.feature .card__title { font-size:2rem; }
@media (max-width:900px){ .card.col-6,.card.col-4{ grid-column:span 12; } }

/* ---------- ABOUT ---------- */
.about { display:grid; grid-template-columns:1.3fr .9fr; gap:56px; align-items:start; }
.about__lead { font-family:var(--font-display); font-weight:500; font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.4; letter-spacing:-.01em; }
.about__lead b { color:var(--accent); font-weight:700; }
.about p { color:var(--muted); margin-top:20px; }
.about__side { border:1px solid var(--line); border-radius:var(--r); padding:26px; background:var(--panel); }
.about__side h3 { font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); margin-bottom:16px; }
.speclist { list-style:none; display:grid; gap:12px; }
.speclist li { display:flex; justify-content:space-between; gap:14px; font-size:.92rem; border-bottom:1px dashed var(--line); padding-bottom:11px; }
.speclist li span:first-child { color:var(--muted); font-family:var(--font-mono); font-size:.82rem; }
.speclist li span:last-child { text-align:right; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } }

/* ---------- CONTACT ---------- */
.contact { text-align:center; }
.contact h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,6vw,4.4rem); letter-spacing:-.03em; line-height:1; }
.contact h2 a { color:var(--accent); border-bottom:2px solid transparent; transition:border-color .25s; }
.contact h2 a:hover { border-bottom-color:var(--accent); }
.contact__row { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:34px; font-family:var(--font-mono); font-size:.9rem; }
.contact__row a { color:var(--muted); transition:color .2s; }
.contact__row a:hover { color:var(--accent); }

/* ---------- FOOTER ---------- */
.foot { border-top:1px solid var(--line); padding-block:30px; color:var(--faint); font-family:var(--font-mono); font-size:.8rem; }
.foot .wrap { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ---------- REVEAL ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* lightbox (click to enlarge) */
[data-zoom] { cursor:zoom-in; }
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(6,8,11,.94); display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); cursor:zoom-out; opacity:0; transition:opacity .2s; }
.lightbox.open { display:flex; opacity:1; }
.lightbox img { max-width:96vw; max-height:90vh; border-radius:10px; border:1px solid var(--line); box-shadow:0 30px 90px rgba(0,0,0,.65); }
.lightbox__close { position:fixed; top:18px; right:22px; width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:1.2rem; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.lightbox__close:hover { background:rgba(255,255,255,.14); }
.lightbox__hint { position:fixed; bottom:20px; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:.74rem; color:rgba(255,255,255,.45); pointer-events:none; }

/* theme toggle */
.theme-btn { background:none; border:1px solid var(--line); color:var(--muted); border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:.9rem; display:grid; place-items:center; transition:.2s; }
.theme-btn:hover { color:var(--accent); border-color:var(--accent); }