/* ============================================================
   Diya Kumthekar — portfolio  ·  "terminal" theme
   Reskin the whole site by changing --acc below.
   ============================================================ */
:root {
  --bg:        #070a08;
  --bg-soft:   #0b0f0c;
  --panel:     #0c120e;
  --edge:      #1b2a20;
  --edge-hi:   #274736;
  --text:      #d4e6d8;
  --muted:     #6f877a;
  --dim:       #3f5147;
  --acc:       #3ff59a;   /* phosphor green — the signature. swap to reskin */
  --acc-dim:   #1c7d54;
  --amber:     #f5c451;   /* prompt symbol / accents */
  --red:       #e05561;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ambient glow + CRT scanlines ---------------------------------- */
.glow-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(63,245,154,0.10), transparent 70%),
    radial-gradient(50% 40% at 90% 10%, rgba(63,245,154,0.05), transparent 70%);
}
.scanlines {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
}
.scanlines::after { /* vignette */
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 180px rgba(0,0,0,0.7);
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: flicker 6s infinite steps(60); }
  @keyframes flicker { 0%,97%,100%{opacity:1} 98%{opacity:.97} 99%{opacity:.99} }
}

.wrap { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }

/* top status bar ------------------------------------------------ */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 26px;
  border-bottom: 1px solid var(--edge);
  font-size: 12px; letter-spacing: .5px;
}
.brand { display: flex; gap: 11px; align-items: center; color: var(--muted); }
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--edge-hi); border-radius: 5px;
  color: var(--acc); font-weight: 700; font-size: 13px; letter-spacing: 1px;
  background: var(--bg-soft);
}
.brand .path { color: var(--muted); }
.brand .path b { color: var(--acc); font-weight: 500; }
.namemark { color: var(--text); letter-spacing: 2px; font-weight: 700; font-size: 13px; }

/* hero terminal ------------------------------------------------- */
.hero { padding: 60px 26px 40px; max-width: 900px; margin: 0 auto; }
.terminal {
  border: 1px solid var(--edge); border-radius: 9px; overflow: hidden;
  background: linear-gradient(var(--panel), var(--bg-soft));
  box-shadow: 0 40px 90px -50px #000, inset 0 0 70px rgba(63,245,154,0.02);
}
.term-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--edge); background: var(--bg-soft);
}
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; display: block; background: #2a3a30; }
.dots i:nth-child(1){ background: var(--red); }
.dots i:nth-child(2){ background: var(--amber); }
.dots i:nth-child(3){ background: #3fbf6e; }
.term-title { color: var(--muted); font-size: 12px; letter-spacing: .5px; }
.term-meta { margin-left: auto; color: var(--dim); font-size: 11px; }

.term-body { padding: 28px 26px 32px; font-size: 15px; }
.ln { white-space: pre-wrap; }
.pr { color: var(--amber); margin-right: 8px; }
.out { color: var(--text); }
.out.accent { color: var(--acc); letter-spacing: 3px; font-weight: 500; }
.headline {
  font-size: clamp(30px, 5.4vw, 60px); font-weight: 800; letter-spacing: -.5px;
  color: #eafff2; margin-top: 10px; line-height: 1.04; text-wrap: balance;
  text-shadow: 0 0 24px rgba(63,245,154,0.18);
}
.cursor {
  display: inline-block; width: .55em; height: 1.05em; background: var(--acc);
  margin-left: 6px; transform: translateY(4px);
  box-shadow: 0 0 12px var(--acc); animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal .ln { opacity: 0; animation: linein .3s ease forwards; }
  .reveal .ln:nth-child(1){ animation-delay:.15s } .reveal .ln:nth-child(2){ animation-delay:.4s }
  .reveal .ln:nth-child(3){ animation-delay:.65s } .reveal .ln:nth-child(4){ animation-delay:.9s }
  .reveal .ln:nth-child(5){ animation-delay:1.15s } .reveal .ln:nth-child(6){ animation-delay:1.4s }
  @keyframes linein { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
}

/* socials ------------------------------------------------------- */
.socials { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 4px 0; }
.social {
  color: var(--muted); border: 1px solid var(--edge); border-radius: 6px;
  padding: 9px 15px; font-size: 13px; background: var(--bg-soft); transition: .15s ease;
}
.social::before { content: "["; color: var(--dim); margin-right: 7px; }
.social::after  { content: "]"; color: var(--dim); margin-left: 7px; }
.social:hover { color: var(--acc); border-color: var(--acc-dim); box-shadow: 0 0 18px -6px var(--acc); }
.social:hover::before, .social:hover::after { color: var(--acc-dim); }

/* project index ------------------------------------------------- */
.index-wrap { max-width: 1200px; margin: 34px auto 0; padding: 0 26px; }
.index-head { display: flex; align-items: baseline; justify-content: space-between; }
.index-head h2 { font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: .5px; }
.index-head h2::before { content: "$ "; color: var(--amber); }
.index-hint { color: var(--dim); font-size: 12px; }
.index-hint::before { content: "// "; }

.deck {
  display: flex; gap: 22px; padding: 26px 0 60px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--edge-hi) transparent;
}
.deck::-webkit-scrollbar { height: 8px; }
.deck::-webkit-scrollbar-thumb { background: var(--edge-hi); border-radius: 8px; }

.card {
  flex: 0 0 340px; display: block; border: 1px solid var(--edge); border-radius: 8px;
  overflow: hidden; background: linear-gradient(var(--panel), var(--bg-soft));
  transition: transform .2s ease, border-color .2s, box-shadow .2s; color: var(--text);
}
.card:hover { transform: translateY(-5px); border-color: var(--acc-dim); box-shadow: 0 24px 50px -30px var(--acc); }
.card-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--edge); background: var(--bg-soft); }
.card-bar .dots i { width: 9px; height: 9px; }
.card-file { color: var(--muted); font-size: 11px; margin-left: 4px; }
.card-media { height: 150px; position: relative; border-bottom: 1px solid var(--edge); overflow: hidden; background: var(--bg); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media.placeholder::after {
  content: "> " attr(data-label); position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--acc-dim); font-size: 12px; letter-spacing: 3px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(63,245,154,0.03) 3px 4px);
}
.card-body { padding: 18px 18px 20px; }
.card-num { color: var(--amber); font-weight: 700; font-size: 12px; }
.card-tag { float: right; color: var(--acc); font-size: 11px; letter-spacing: 1px; }
.card-title { font-size: 19px; font-weight: 700; margin: 12px 0 10px; color: #eafff2; }
.card-desc { color: var(--muted); font-size: 13px; min-height: 74px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.card-date { color: var(--dim); font-size: 12px; }
.card-open { color: var(--muted); font-size: 12px; font-weight: 700; transition: color .2s; }
.card:hover .card-open { color: var(--acc); }

/* about --------------------------------------------------------- */
.about { max-width: 900px; margin: 40px auto 0; padding: 0 26px; }
.about .terminal { }
.about .term-body { line-height: 1.75; }
.about h2 { color: var(--acc); font-size: 13px; font-weight: 500; letter-spacing: 1px; margin-bottom: 14px; }
.about h2::before { content: "$ cat "; color: var(--amber); }
#about-text { color: var(--text); font-size: 15px; max-width: 68ch; }
.contact-line { margin-top: 22px; color: var(--muted); font-size: 14px; }
.contact-line a { color: var(--acc); border-bottom: 1px dashed var(--acc-dim); }

/* footer status bar --------------------------------------------- */
.foot {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 16px 26px; margin-top: 56px;
  border-top: 1px solid var(--edge); color: var(--dim); font-size: 12px;
}
.foot .on { color: var(--acc); }
.foot .on::before { content: "● "; }
.foot .sep { color: var(--edge-hi); }

@media (max-width: 640px) {
  .card { flex-basis: 80vw; }
  .term-body { font-size: 13.5px; }
  .foot { gap: 10px; }
}