/* ============================================================
   enhancements.css — Nir Livshin site  •  eye candy layer
   ============================================================ */

/* ── Reading progress bar ─────────────────────────────────── */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  z-index: 9999;
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
  pointer-events: none;
}

/* ── Back-to-top button ───────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, box-shadow .25s ease;
  box-shadow: 0 4px 20px rgba(99,102,241,.45);
  z-index: 1000;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(99,102,241,.7);
}

/* ── Typewriter cursor ────────────────────────────────────── */
.typewriter-cursor {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: #a855f7;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: blink-cur .75s step-end infinite;
}
@keyframes blink-cur { 50% { opacity: 0; } }

/* ── Home title gradient glow ─────────────────────────────── */
main > div > h1 {
  background: linear-gradient(135deg, #e2e8f0 0%, #c4b5fd 45%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(168, 85, 247, .35));
  transition: filter .3s ease;
}
main > div > h1:hover {
  filter: drop-shadow(0 0 40px rgba(168, 85, 247, .6));
}
[data-theme="light"] main > div > h1 {
  background: linear-gradient(135deg, #1e1b4b 0%, #6366f1 50%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(99, 102, 241, .25));
}

/* ── Header bottom accent line ────────────────────────────── */
.header {
  border-bottom: 1px solid transparent !important;
  background-image:
    linear-gradient(var(--hdr-bg, #1b1c1d), var(--hdr-bg, #1b1c1d)),
    linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
[data-theme="light"] .header {
  --hdr-bg: #fafafa;
}
[data-theme="dark"] .header {
  --hdr-bg: #1b1c1d;
}

/* ── Scroll fade-in-up ────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.reveal {
  opacity: 0;
}
.reveal.visible {
  animation: fadeInUp .5s ease forwards;
}

/* ── Project / content H3 accent bar ─────────────────────── */
.posts .content h3,
.post-content h3 {
  position: relative;
  padding-left: 1rem;
}
.posts .content h3::before,
.post-content h3::before {
  content: '';
  position: absolute;
  left: 0; top: .25em; bottom: .25em;
  width: 3px;
  background: linear-gradient(180deg, #6366f1, #a855f7, #ec4899);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(168, 85, 247, .45);
}

/* ── H2 hover glow ────────────────────────────────────────── */
.posts .content h2,
.post-content h2 {
  transition: text-shadow .3s ease;
}
.posts .content h2:hover,
.post-content h2:hover {
  text-shadow: 0 0 24px rgba(99, 102, 241, .45);
}

/* ── Images – rounded + hover zoom ───────────────────────── */
.posts .content img,
.post-content img {
  border-radius: 10px;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 6px 28px rgba(0,0,0,.3);
}
.posts .content img:hover,
.post-content img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 44px rgba(99, 102, 241, .35);
}

/* ── Online status dot ────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  animation: pulse-dot 2s ease-in-out infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 6px #22c55e; }
  50%     { box-shadow: 0 0 14px #22c55e, 0 0 24px rgba(34,197,94,.4); }
}

/* ── Info cards (about page) ──────────────────────────────── */
.info-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 1.1rem;
  margin: .65rem 0;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.18);
  background: rgba(255,255,255,.03);
  transition: border-color .2s ease, transform .2s ease;
}
.info-card:hover {
  border-color: rgba(168,85,247,.45);
  transform: translateX(4px);
}
[data-theme="light"] .info-card {
  background: rgba(99,102,241,.04);
}
.info-card__icon { font-size: 1.3rem; flex-shrink: 0; }
.info-card__body { min-width: 0; }
.info-card__title { font-weight: 700; margin: 0 0 .2rem; }
.info-card__desc  { margin: 0; opacity: .75; font-size: .92rem; }



/* ── Visit counter badge ──────────────────────────────────── */
.visit-counter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  opacity: .55;
}
.visit-counter__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 5px #22c55e;
}

/* ── Resume page ──────────────────────────────────────────── */
.resume-header {
  text-align: center;
  padding: 1.5rem 0 1rem;
}
.resume-header__name {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e2e8f0, #c4b5fd, #f0abfc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.resume-header__title {
  margin: .4rem 0 .6rem;
  opacity: .7;
  font-size: 1rem;
  letter-spacing: .06em;
}
.resume-header__links { font-size: .9rem; opacity: .65; }
.resume-header__links a { color: #a5b4fc; text-decoration: none; }
[data-theme="light"] .resume-header__name {
  background: linear-gradient(135deg, #1e1b4b, #6366f1, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Timeline */
.timeline { position: relative; padding-left: 1.8rem; margin: 1rem 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #6366f1, #a855f7, #ec4899);
  border-radius: 2px;
}
.tl-item { position: relative; margin-bottom: 2rem; }
.tl-dot {
  position: absolute;
  left: -1.55rem; top: .4rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 0 10px rgba(99,102,241,.5);
  border: 2px solid #232425;
}
[data-theme="light"] .tl-dot { border-color: #fff; }
.tl-body {
  padding: .9rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.18);
  background: rgba(255,255,255,.03);
  transition: border-color .2s, transform .2s;
}
.tl-body:hover {
  border-color: rgba(168,85,247,.4);
  transform: translateX(4px);
}
[data-theme="light"] .tl-body { background: rgba(99,102,241,.04); }
.tl-role    { font-weight: 700; font-size: 1.05rem; }
.tl-company { font-size: .92rem; opacity: .75; margin: .15rem 0; }
.tl-period  {
  font-size: .78rem; opacity: .5;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem;
}
.tl-desc { font-size: .92rem; opacity: .8; }

/* Skills grid */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .5rem 0; }
@media (max-width: 684px) { .skills-grid { grid-template-columns: 1fr; } }
.skill-block {
  padding: .85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.15);
  background: rgba(255,255,255,.02);
}
[data-theme="light"] .skill-block { background: rgba(99,102,241,.04); }
.skill-block__label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: .5; margin-bottom: .6rem;
}

/* Certs */
.cert-list { margin: .5rem 0; }
.cert-item {
  padding: .6rem .9rem;
  margin: .4rem 0;
  border-radius: 8px;
  border-left: 3px solid #6366f1;
  background: rgba(99,102,241,.06);
  font-size: .92rem;
}
.cert-where { opacity: .6; margin-left: .3rem; }
.cert-year  { opacity: .45; font-size: .82rem; margin-left: .4rem; }

/* ── Uses page ────────────────────────────────────────────── */
.uses-item {
  padding: .9rem 1.1rem;
  margin: .65rem 0;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.16);
  background: rgba(255,255,255,.03);
  transition: border-color .2s, transform .2s;
}
.uses-item:hover {
  border-color: rgba(168,85,247,.45);
  transform: translateX(4px);
}
[data-theme="light"] .uses-item { background: rgba(99,102,241,.04); }
.uses-item__name {
  font-weight: 700; font-size: 1rem; margin-bottom: .3rem;
}
.uses-item__desc { font-size: .92rem; opacity: .78; }

/* ── Tag chips on posts ───────────────────────────────────── */
.post-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .8rem 0 1.2rem;
}
.post-tag {
  display: inline-flex; align-items: center;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: #c4b5fd;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.post-tag:hover {
  background: rgba(99,102,241,.28);
  border-color: rgba(168,85,247,.55);
}
.post-tag::before { content: '#'; opacity: .55; margin-right: 2px; }

/* ── Beszel status badge in footer ───────────────────────── */
.homelab-status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; opacity: .5;
  text-decoration: none;
  transition: opacity .2s;
}
.homelab-status:hover { opacity: .85; }
.homelab-status__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 5px #22c55e;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Cert cards grid ─────────────────────────────────────── */
.cert-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1rem 0;
}
.cert-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.22);
  background: rgba(255,255,255,.03);
  min-width: 130px;
  flex: 1 1 130px;
  max-width: 180px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  gap: .35rem;
}
.cert-card:hover {
  border-color: rgba(168,85,247,.55);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(99,102,241,.2);
}
[data-theme="light"] .cert-card {
  background: rgba(99,102,241,.04);
}
.cert-card__icon { font-size: 1.5rem; }
.cert-card__name {
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.3;
}
.cert-card__issuer {
  font-size: .72rem;
  opacity: .5;
}

/* ── Experience cards grid ───────────────────────────────── */
.exp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1rem 0;
}
.exp-card {
  display: flex;
  flex-direction: column;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.22);
  background: rgba(255,255,255,.03);
  flex: 1 1 200px;
  max-width: 280px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  gap: .2rem;
}
.exp-card:hover {
  border-color: rgba(168,85,247,.55);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(99,102,241,.2);
}
[data-theme="light"] .exp-card {
  background: rgba(99,102,241,.04);
}
.exp-card__role {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
}
.exp-card__company {
  font-size: .88rem;
  color: #a5b4fc;
}
[data-theme="light"] .exp-card__company { color: #4f46e5; }
.exp-card__period {
  font-size: .74rem;
  opacity: .5;
  margin-top: .25rem;
}
.exp-card__location {
  font-size: .74rem;
  opacity: .45;
}