/* =========================================================
   Academic Homepage — Enhanced Elegant Stylesheet
   (Visual polish: depth, motion, typography)
   ========================================================= */

/* =========================================================
   Academic Homepage — Unified Stylesheet
   (Merged styles.css + styles2.css)
   ========================================================= */

/* ---------- Root Variables ---------- */
:root{
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #475569;
  --muted2:#64748b;
  --card: #f8fafc;
  --card2:#ffffff;
  --line: #e2e8f0;

  --accent: #2563eb;
  --accent2: #0ea5e9;

  --navy: #0b2a4a;
  --gold: #c9a227;

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --radius: 18px;

  --max: 1120px;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --heading: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --fg:#e5e7eb;
    --muted:#a1a1aa;
    --muted2:#9ca3af;
    --card:#0f172a;
    --card2:#0b1220;
    --line:#1f2937;
    --accent:#60a5fa;
    --accent2:#38bdf8;
    --navy:#1e3a5f;
    --gold:#d8b23a;
    --shadow:0 14px 40px rgba(0,0,0,0.35);
  }
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 60%),
    var(--bg);
  color:var(--fg);
  line-height:1.6;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Layout ---------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 20px 64px;
}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}


.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mark{
  width:36px;
  height:36px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--gold));
  box-shadow:var(--shadow);
}
.brand h1{
  margin:0;
  font-family:var(--heading);
  font-size:1.08rem;
}
.brand p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}

/* ---------- Navigation ---------- */
nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
nav a{
  padding:8px 10px;
  border-radius:12px;
  color:var(--fg);
  border:1px solid transparent;
}
nav a:hover{
  background:color-mix(in oklab, var(--card) 85%, var(--bg));
  border-color:var(--line);
  text-decoration:none;
}
.nav-cta{
  padding:9px 12px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--gold));
  color:#fff !important;
}
nav .nav-cta:hover{
  background: #1f2937; /* dark slate */
  color: #f9fafb;
  border-color: #1f2937;
}


/* ---------- Cards ---------- */
.card{
  background:color-mix(in oklab, var(--card) 92%, var(--card2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-inner{ padding:20px; }

/* ---------- Sections ---------- */
section{ margin-top:18px; }
.section-title{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  border-bottom:1px solid color-mix(in oklab, var(--line) 70%, transparent);
  padding-bottom:10px;
}
.section-title h2{
  margin:0;
  font-family:var(--heading);
  font-size:1.25rem;
}
.section-title .hint{
  margin:0;
  font-size:.95rem;
  color:var(--muted);
}

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:26px;
  margin-top:14px;
}
.about-image img{
  width:100%;
  border-radius:16px;
  border:1px solid var(--line);
  filter:grayscale(1);
  transition:all .25s ease;
  box-shadow:var(--shadow);
}
.about-image img:hover{
  filter:grayscale(0);
  transform:translateY(-2px);
}
.about-text p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:1rem;
}
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ---------- Announcements (PLAIN SCROLL) ---------- */
.announce-box-plain{
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in oklab, var(--card) 80%, var(--bg));
  overflow:hidden;
  height:140px;
  padding:10px 14px;
  position:relative;
}
.announce-box-plain .announce-track{
  position:absolute;
  left:14px;
  right:14px;
  top:-100%;
  display:grid;
  gap:6px;
  animation:announceScrollDown 16s linear infinite;
}
.announce-box-plain .announce-item{
  font-size:.95rem;
  line-height:1.35;
}
.announce-box-plain:hover .announce-track{
  animation-play-state:paused;
}
@keyframes announceScrollDown{
  0%{ transform:translateY(-10%); }
  100%{ transform:translateY(210%); }
}
@media (prefers-reduced-motion:reduce){
  .announce-box-plain .announce-track{
    animation:none;
    position:static;
  }
  .announce-box-plain{ height:auto; }
}

/* ---------- Publications ---------- */
.pub-actions{ display:flex; gap:10px; margin-top:8px; }
.pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--card) 85%, var(--bg));
}
.pill:hover{
  background:linear-gradient(135deg,var(--navy),var(--gold));
  color:#fff;
}
.pub-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.pub-block{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:color-mix(in oklab, var(--card) 82%, var(--bg));
}
.pub-list li{
  font-size:.93rem;
  line-height:1.45;
  margin-bottom:12px;
}
@media (max-width:860px){
  .pub-split{ grid-template-columns:1fr; }
}

/* ---------- Social Sidebar ---------- */
.social-sidebar{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:60;
}
.social-sidebar a{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in oklab, var(--card) 80%, var(--bg));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:all .16s ease;
}
.social-sidebar a:hover{
  transform:translateX(-4px);
  background:linear-gradient(135deg,var(--navy),var(--gold));
  color:#fff;
}
.social-sidebar svg{
  width:22px;
  height:22px;
  fill:currentColor;
}
@media (max-width:720px){
  .social-sidebar{ display:none; }
}

.author-highlight{
  font-weight: 700;
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  margin-top:34px;
  padding-top:16px;
  color:var(--muted);
  font-size:.95rem;
}

/* ---------- Print ---------- */
@media print{
  header{ position:static; }
  body{ background:#fff; }
  .card{ box-shadow:none; }
  .nav-cta,.social-sidebar{ display:none; }
}


/* ================== Enhancements ================== */

/* Subtle card lift on hover */
.card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(15,23,42,.16);
}

/* Section headers: refined underline accent */
.section-title h2{
  position: relative;
}
.section-title h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:42px;
  height:3px;
  border-radius:2px;
  background: linear-gradient(90deg,var(--navy),var(--gold));
}

/* Navigation: smoother interaction */
nav a{
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
nav a:hover{
  transform: translateY(-1px);
}

/* Pills: glossy accent hover */
.pill{
  transition: all .16s ease;
}
.pill:hover{
  box-shadow: 0 6px 18px rgba(11,42,74,.35);
}

/* Publication items: subtle divider */
.pub-list li{
  padding-left:10px;
  border-left:3px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.pub-list li:hover{
  border-left-color: var(--gold);
}

/* Course accordions: highlight open state */
.course[open]{
  box-shadow: 0 10px 28px rgba(11,42,74,.18);
}

/* Contact form focus */
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Footer refinement */
footer{
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--card) 92%, var(--bg)),
    transparent
  );
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }
}



/* ---------- Active navigation button ---------- */
nav a.active{
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
}


/* ================= HERO BACKGROUND (NEXUSLab) ================= */
section.card.hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-image: url("hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent !important;
}

/* Ensure inner card does not mask the background */
section.card.hero .card-inner{
  position: relative;
  background: transparent !important;
  z-index: 2;
}

/* Readability overlay */
section.card.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.00);
  z-index: 1;
  pointer-events: none;
}

/* Dark mode overlay tuning */
@media (prefers-color-scheme: dark){
  section.card.hero::before{
    background: rgba(19,18,32,0.65);
  }
}