/* ============================================================
   SEBASTIAN ZAJĄC — NEW DESIGN v4 (clean rewrite)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');

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

:root {
  --bg:      #050a12;
  --bg2:     #090f1c;
  --bg3:     #0d1528;
  --line:    rgba(80,160,255,0.12);
  --accent:  #3de8c8;
  --accent2: #5b8fff;
  --text:    #c8d8f0;
  --muted:   #7090b0;
  --white:   #e8f0ff;
  --serif:   'DM Serif Display', Georgia, serif;
  --sans:    'Syne', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.8;
  overflow-x: hidden;
}

a { color: var(--accent2); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); }
strong { color: var(--white); font-weight: 600; }

/* ── WILSON CHAMBER BACKGROUND ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: url('../images/header-background.jpg');
  background-size: cover; background-position: center; background-attachment: fixed;
  filter: brightness(0.18) saturate(0.4) sepia(0.3) hue-rotate(180deg);
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 120% 80% at 20% 20%, rgba(5,10,18,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 80% 80%, rgba(9,15,40,0.6) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(5,10,18,0.3) 0%, rgba(5,10,18,0.7) 100%);
  pointer-events: none;
}

/* ── QUANTUM CANVAS ── */
#quantum-canvas {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
}

/* All content above backgrounds */
nav, header, section, footer { position: relative; z-index: 2; }

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
#nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 3rem;
  background: rgba(5,10,18,0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
#nav-wrap.scrolled {
  background: rgba(5,10,18,0.97);
  border-bottom: 1px solid var(--line);
}
#nav-wrap::before {
  content: 'S.Zając / PhD';
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase;
}
ul#nav, ul.nav {
  display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0;
}
ul#nav li a, ul.nav li a {
  font-family: var(--mono); font-size: 0.82rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.25s;
  position: relative;
}
ul#nav li a::after, ul.nav li a::after {
  content: '';
  position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width 0.3s;
}
ul#nav li a:hover, ul.nav li a:hover,
ul#nav li.current a { color: var(--accent); }
ul#nav li a:hover::after, ul.nav li a:hover::after { width: 100%; }

/* ── HAMBURGER (hidden on desktop) ── */
.hamburger {
  display: none;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
  gap: 5px;
  width: 2.6rem; height: 2.6rem;
  background: rgba(61,232,200,0.05);
  border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer; padding: 7px 8px;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--accent); border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}
.hamburger:hover { border-color: var(--accent); background: rgba(61,232,200,0.1); }
#nav-wrap.mobile-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-wrap.mobile-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#nav-wrap.mobile-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
header#home {
  min-height: 100vh; display: flex; align-items: center;
  padding: 0 4rem;
}
.banner { position: relative; max-width: 820px; padding-top: 4rem; }

.hero-eyebrow {
  font-family: var(--mono); font-size: 0.88rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 2.5rem; height: 1px; background: var(--accent);
}

.banner-text h1.responsive-headline {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 1.05; color: var(--white); letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 40px rgba(5,10,18,0.8);
  overflow: visible;
}
.banner-text h1.responsive-headline em { font-style: italic; color: var(--accent); }

.banner-text h3 {
  font-family: var(--sans); font-size: 1.08rem; font-weight: 400;
  color: var(--text); line-height: 1.9; margin-bottom: 2.5rem; opacity: 0.9;
  overflow: visible;
}
.banner-text hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; width: 6rem; }

ul.social { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; }
ul.social li a {
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem;
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--muted); font-size: 1rem;
  transition: all 0.25s; background: rgba(5,10,18,0.4);
}
ul.social li a svg { width: 1.1rem; height: 1.1rem; fill: currentColor; flex-shrink: 0; }
ul.social li a:hover { border-color: var(--accent); color: var(--accent); background: rgba(61,232,200,0.1); transform: translateY(-2px); }

.scrolldown { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.scrolldown a { color: var(--muted); font-size: 1.5rem; transition: color 0.25s; animation: bounce 2.2s infinite; }
.scrolldown a:hover { color: var(--accent); }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
section {
  padding: 6rem 4rem;
  background: rgba(5,10,18,0.78);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
section#about { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(9,15,28,0.82); }
section#resume { background: rgba(5,10,18,0.80); }

/* Left sidebar label */
.header-col h1 {
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  border-top: 2px solid var(--accent); padding-top: 0.5rem;
  display: inline-block;
  overflow: visible;
}
.header-col h1 span { display: block; }

/* ══════════════════════════════════════════
   ABOUT
══════════════════════════════════════════ */
section#about .row { align-items: start; }

.profile-pic {
  width: 100%; max-width: 200px; border-radius: 3px;
  filter: grayscale(10%) contrast(1.05);
  border: 1px solid var(--line); display: block; margin-bottom: 1.25rem;
}

.download { display: flex; flex-direction: column; gap: 0.5rem; }
.download .button, .download a.button { width: 100%; max-width: 200px; text-align: center; justify-content: center; }

.main-col h2 {
  font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.8rem);
  color: var(--white); margin-bottom: 1.5rem; letter-spacing: -0.01em;
  overflow: visible;
}
.main-col h2 em { font-style: italic; color: var(--accent); }

.main-col p {
  font-size: 1.12rem; line-height: 1.9; color: var(--text); margin-bottom: 1.3rem;
  overflow: visible;
}

/* ── BUTTONS ── */
.button, a.button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.70rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.8rem 1.6rem; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); background: rgba(5,10,18,0.5); text-decoration: none;
  transition: all 0.25s; margin-right: 0.5rem; margin-bottom: 0.5rem;
}
.button:hover, a.button:hover {
  border-color: var(--accent); color: var(--accent); background: rgba(61,232,200,0.08); transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   PUBLICATIONS & EDUCATION
══════════════════════════════════════════ */
.work h3, .education h3 {
  font-family: var(--serif); font-size: 1.38rem; color: var(--white);
  font-weight: 400; margin-bottom: 0.4rem; margin-top: 1.8rem;
  line-height: 1.4; letter-spacing: -0.01em;
  overflow: visible;
}
.work h3:first-child, .education h3:first-child { margin-top: 0; }

p.info {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--text);
  letter-spacing: 0.04em; margin-bottom: 0.4rem;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  overflow: visible; line-height: 1.8;
}
p.info span { color: var(--accent); }
p.info em.date { font-style: italic; color: var(--accent2); font-family: var(--mono); }
p.info em.date a { color: var(--accent2); }
p.info em.date a:hover { color: var(--accent); }

.work .twelve.columns > h3 { padding: 1.25rem 0 0.35rem; border-bottom: 1px solid var(--line); }
.work .twelve.columns p.info { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer#footer {
  background: rgba(9,15,28,0.95); border-top: 1px solid var(--line); padding: 5rem 4rem 3rem;
}
footer#footer > .row { align-items: start; }

/* Right column — fully right-aligned */
.footer-links { text-align: right; }
.footer-links ul li a {
  justify-content: flex-end;
}
.footer-links ul li a::before { display: none; }
.footer-links ul li a::after {
  content: ' ↗'; font-size: 0.65rem; color: var(--line); transition: color 0.2s;
}
.footer-links ul li a:hover::after { color: var(--accent); }

footer h4 {
  font-family: var(--mono); font-size: 0.70rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); border-top: 2px solid var(--accent); padding-top: 0.4rem;
  display: inline-block; margin-bottom: 1.25rem;
}
footer p { font-size: 0.92rem; color: var(--text); line-height: 1.9; }

footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li a {
  font-size: 0.92rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0; transition: color 0.2s; text-decoration: none;
}
footer ul li a::before { content: '↗'; font-size: 0.65rem; color: var(--line); transition: color 0.2s; }
footer ul li a:hover { color: var(--text); }
footer ul li a:hover::before { color: var(--accent); }

ul.social-links { display: flex; gap: 0.75rem; margin: 2rem 0 1rem; }
ul.social-links li a {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--muted); font-size: 0.95rem; transition: all 0.25s;
}
ul.social-links li a:hover { border-color: var(--accent); color: var(--accent); }

ul.copyright {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--mono); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.12em;
}

#go-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 200; }
#go-top a {
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; background: rgba(9,15,28,0.9);
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--muted); font-size: 1rem; transition: all 0.25s;
}
#go-top a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

/* ══════════════════════════════════════════
   GRID SYSTEM
══════════════════════════════════════════ */
.row {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem; max-width: 1200px; margin: 0 auto;
}
.row + .row { margin-top: 3rem; }
.three.columns  { grid-column: span 3; }
.nine.columns   { grid-column: span 9; }
.six.columns    { grid-column: span 6; }
.twelve.columns { grid-column: span 12; }
.header-col     { grid-column: span 3; }
.main-col       { grid-column: span 9; }

section#about .three.columns { display: flex; flex-direction: column; align-items: flex-start; }

.contact-details { display: none !important; }

.download { grid-column: span 12; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0; }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (≤900px)
══════════════════════════════════════════ */
@media (max-width: 900px) {
  #nav-wrap { padding: 1rem 1.5rem; }
  #nav-wrap::before { display: none; }
  ul#nav, ul.nav { gap: 1.2rem; }
  ul#nav li a, ul.nav li a { font-size: 0.75rem; }

  header#home { padding: 0 1.5rem; text-align: center; }
  .banner { padding-top: 6rem; }
  .hero-eyebrow { justify-content: center; }
  ul.social { justify-content: center; }

  section { padding: 4rem 1.5rem; }
  footer#footer { padding: 3rem 1.5rem; }

  .row { grid-template-columns: 1fr; gap: 1.5rem; }
  .three.columns, .nine.columns, .six.columns,
  .header-col, .main-col { grid-column: span 1; }

  section#about .three.columns { align-items: center; }
  .profile-pic { max-width: 160px; }
  .download { flex-direction: row; flex-wrap: wrap; }
  .banner-text h1.responsive-headline { font-size: clamp(2.8rem, 10vw, 4rem); }

  /* Footer: stack columns, links left on mobile */
  .footer-links { text-align: left; }
  .footer-links ul li a { justify-content: flex-start; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤640px)
══════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Nav bar becomes row: [logo] [hamburger], menu drops below */
  #nav-wrap {
    flex-wrap: wrap; align-items: center;
    padding: 0.9rem 1.2rem; gap: 0;
  }
  #nav-wrap::before {
    display: block; flex: 1; font-size: 0.65rem;
  }

  /* Show hamburger */
  .hamburger { display: flex; }

  /* Nav list hidden by default */
  ul#nav, ul.nav {
    display: none; flex-direction: column;
    width: 100%; order: 3;
    gap: 0; padding: 0.4rem 0 1rem;
    border-top: 1px solid var(--line);
    margin-top: 0.7rem;
    background: rgba(5,10,18,0.98);
  }
  ul#nav li, ul.nav li { border-bottom: 1px solid rgba(80,160,255,0.07); }
  ul#nav li:last-child, ul.nav li:last-child { border-bottom: none; }
  ul#nav li a, ul.nav li a {
    display: block; padding: 0.9rem 0.5rem;
    font-size: 0.82rem; letter-spacing: 0.1em; color: var(--text);
  }
  ul#nav li a::after, ul.nav li a::after { display: none; }
  ul#nav li a:hover, ul.nav li a:hover { color: var(--accent); padding-left: 1rem; }

  /* Show when open — class toggled by JS */
  #nav-wrap.mobile-open ul#nav,
  #nav-wrap.mobile-open ul.nav { display: flex; }
}

/* ══════════════════════════════════════════
   RESEARCH SECTION
══════════════════════════════════════════ */
section#research {
  background: rgba(9,15,28,0.85);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ── QIFT Card ── */
.qift-card {
  border: 1px solid rgba(61,232,200,0.25);
  border-radius: 4px;
  padding: 2.2rem 2.4rem;
  background: rgba(61,232,200,0.04);
  position: relative;
  margin-bottom: 0.5rem;
}
.qift-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--accent), var(--accent2));
  border-radius: 4px 0 0 4px;
}
.qift-tag {
  font-family: var(--mono); font-size: 0.60rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.qift-tag::before {
  content: ''; display: block; width: 1.5rem; height: 1px; background: var(--accent);
}
.qift-title {
  font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--white); line-height: 1.1; margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}
.qift-title em { font-style: italic; color: var(--accent); }
.qift-desc { font-size: 1.02rem; line-height: 1.85; color: var(--text); margin-bottom: 1rem; }
.qift-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ── Research Trajectory ── */
.research-line { display: flex; flex-direction: column; gap: 0; }

.rl-item {
  display: grid; grid-template-columns: 6rem 1fr;
  gap: 1.5rem; padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.rl-item.will-animate { opacity: 0; transform: translateX(-10px); }
.rl-item.visible { opacity: 1 !important; transform: translateX(0) !important; }
.rl-item:last-child { border-bottom: none; }

.rl-year {
  font-family: var(--mono); font-size: 0.65rem;
  color: var(--muted); letter-spacing: 0.1em;
  padding-top: 0.2rem; line-height: 1.6;
}
.rl-current .rl-year { color: var(--accent); }

.rl-title {
  font-family: var(--sans); font-size: 1.0rem;
  color: var(--white); font-weight: 600; margin-bottom: 0.4rem;
}
.rl-current .rl-title { color: var(--accent); }

.rl-body { font-size: 0.92rem; color: var(--text); line-height: 1.8; }

/* ── Collaborators Grid ── */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.collab-card {
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(5,10,18,0.5);
  transition: border-color 0.2s, background 0.2s, opacity 0.4s ease, transform 0.4s ease;
}
.collab-card.will-animate { opacity: 0; transform: translateY(8px); }
.collab-card.visible { opacity: 1 !important; transform: translateY(0) !important; }
.collab-card:hover {
  border-color: rgba(61,232,200,0.3);
  background: rgba(61,232,200,0.04);
}
.collab-name { font-size: 0.95rem; color: var(--white); font-weight: 600; margin-bottom: 0.25rem; }
.collab-name a { color: var(--white); }
.collab-name a:hover { color: var(--accent); }
.collab-inst { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 0.4rem; line-height: 1.5; }
.collab-topic { font-family: var(--mono); font-size: 0.62rem; color: var(--accent2); letter-spacing: 0.08em; text-transform: uppercase; }

/* ══════════════════════════════════════════
   TALKS & LECTURES SECTION
══════════════════════════════════════════ */
section#talks {
  background: rgba(5,10,18,0.80);
}

.talks-list { display: flex; flex-direction: column; gap: 0; }

.talk-item {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.talk-item.will-animate { opacity: 0; transform: translateY(12px); }
.talk-item.visible { opacity: 1 !important; transform: translateY(0) !important; }
.talk-item:last-child { border-bottom: none; }

.talk-meta {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.talk-year {
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--muted); letter-spacing: 0.1em;
}
.talk-type {
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.22rem 0.65rem; border-radius: 2px;
}
.talk-type.invited  { background: rgba(61,232,200,0.1);  color: var(--accent);  border: 1px solid rgba(61,232,200,0.2); }
.talk-type.conference { background: rgba(91,143,255,0.1); color: var(--accent2); border: 1px solid rgba(91,143,255,0.2); }
.talk-type.teaching { background: rgba(180,120,255,0.1); color: #b478ff;        border: 1px solid rgba(180,120,255,0.2); }

.talk-title { font-size: 1.12rem; color: var(--white); font-weight: 600; margin-bottom: 0.3rem; line-height: 1.4; }
.talk-venue { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 0.6rem; line-height: 1.6; }
.talk-venue a { color: var(--muted); border-bottom: 1px solid var(--line); }
.talk-venue a:hover { color: var(--accent); border-color: var(--accent); }
.talk-abstract { font-size: 0.92rem; color: var(--text); line-height: 1.8; max-width: 680px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .qift-card { padding: 1.5rem 1.2rem; }
  .rl-item { grid-template-columns: 1fr; gap: 0.4rem; }
  .rl-year { font-size: 0.60rem; }
  .collab-grid { grid-template-columns: 1fr; }
}