/* style.css */
:root{
  --bg: #0b0f14;
  --bg-elev: #111823;
  --text: #e6eaf2;
  --muted: #9aa7b5;
  --accent: #ff2f6d; /* crimson‑ish */
  --accent-2: #7a7ff0;
  --ring: 0 0 0 3px rgb(255 47 109 / .35);
  --maxw: 1120px;
  --radius: 16px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --bg-elev:#f7f9fc; --text:#0b0f14; --muted:#566476; --accent:#d21f5b; --accent-2:#5966ff; }
}

/* Theme override via button */
:root[data-theme="dark"]{
  color-scheme: dark;
  /* force dark variables */
  --bg:#0b0f14;
  --bg-elev:#111823;
  --text:#e6eaf2;
  --muted:#9aa7b5;
  --accent:#ff2f6d;
  --accent-2:#7a7ff0;
}
:root[data-theme="light"]{
  color-scheme: light;
  /* force light variables */
  --bg:#ffffff;
  --bg-elev:#f7f9fc;
  --text:#0b0f14;
  --muted:#566476;
  --accent:#d21f5b;
  --accent-2:#5966ff;
}
/* When auto (no data-theme or data-theme=\"auto\"), system preference applies via the @media block above */

/* Scroll progress */
.progress{ height:3px; background: transparent; }
.progress__bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .1s linear; }

/* Hero */
.hero{ position:relative; padding: clamp(72px, 10vw, 128px) 0; overflow: clip; }
.hero__media{ position:absolute; inset:0; background: url('./img/vortex.gif') center/cover no-repeat; }
.hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(80% 60% at 50% 40%, color-mix(in oklab, var(--bg) 25%, transparent), var(--bg) 80%); opacity:.85; }
.hero__inner{ position:relative; z-index:1; }
.hero h1{ font-size: clamp(32px, 6vw, 64px); line-height:1.05; margin:0 0 12px; letter-spacing:.3px; }
.hero .accent{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color: var(--muted); font-size: clamp(16px, 1.5vw, 18px); max-width: 72ch; }
.actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }

/* Sections */
section{ padding: clamp(56px, 8vw, 96px) 0; }
.section-title{ font-size: clamp(22px, 2.6vw, 38px); margin: 0 0 24px; letter-spacing:.6px; }
.section-title span{ color: var(--accent); }

/* Grids / Cards */
.grid{ display:grid; grid-template-columns: 1fr; gap: 18px; align-items:start; }
.cards .card{ background: var(--bg-elev); border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: var(--radius); overflow:hidden; box-shadow: 0 12px 30px rgb(0 0 0 / .18); }
.card__media{ height:220px; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.06); transition: transform .5s ease; }
.card:hover .card__media img{ transform: scale(1.12); }
.card__body{ padding: 18px; }
.card h3{ margin:0; font-size: 20px; }
.card .meta{ color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
.card p{ margin:0; color: var(--text); font-size: 15px; line-height: 1.7; }

/* About */
.about{ grid-template-columns: 1fr; }
.about__img{ width:min(360px, 90%); aspect-ratio: 5/6; border-radius: 20px; overflow:hidden; border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.about__text p{ color: var(--text); font-size: 16px; line-height: 1.8; }
.about__text p + p{ margin-top: 10px; }

/* Education */
.edu .edu__item{ background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 85%, transparent), var(--bg-elev)); border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 24px rgb(0 0 0 / .12); }
.edu h4{ margin:0 0 6px; font-size: 18px; }
.edu ul{ margin: 8px 0 0 18px; color: var(--muted); }

/* Publications */
.pubs ol{ margin: 0; padding-left: 1.25rem; }
.pubs li{ margin: 12px 0; }
.pubs a{ color: var(--text); border-bottom: 1px dashed color-mix(in oklab, var(--text) 25%, transparent); }
.pubs a:hover{ color: var(--accent); border-bottom-color: transparent; }

/* Contact */
.contact-grid{ grid-template-columns: 1fr; }
.tile{ display:flex; flex-direction:column; gap:6px; background: var(--bg-elev); border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 14px; padding: 16px; box-shadow: 0 10px 24px rgb(0 0 0 / .12); }
.tile small{ color: var(--muted); }

/* Footer */
footer{ padding: 40px 0; border-top: 1px solid color-mix(in oklab, var(--text) 12%, transparent); color: var(--muted); }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.foot__brand{ display:flex; align-items:center; gap:10px; }
.foot__links{ display:flex; gap:10px; align-items:center; }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: none; }

/* Responsive */
@media (min-width: 760px){
  .menu-toggle{ display:none; }
  .hero{ padding: clamp(88px, 12vw, 160px) 0; }
  .about{ grid-template-columns: 340px 1fr; gap: 36px; }
  .grid.cards{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px){
  .grid.cards{ grid-template-columns: repeat(3, 1fr); }
}

/* Mobile menu (only on small screens) */
@media (max-width: 759px){
  .menu-toggle{ display:inline-block; }
  .nav__links ul{
    display:none; position:absolute; right:16px; top:68px; padding:12px; gap:12px; flex-direction:column; background: var(--bg-elev); border:1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  }
  .nav__links ul.open{ display:flex; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card__media img{ transition:none; }
  .reveal{ transition:none; }
}