/* tokens */
:root { --bg: #fff; --fg: #111; --muted: #6c757d; --accent: #0d6efd; }

/* splash overlay */
#splash{
    position: fixed; inset: 0; z-index: 9999;
    background: #0b0b0d;           /* pure black if you want: #000 */
    display: grid; place-items: center;
    opacity: 1; transition: opacity .8s ease;     /* fade-out */
  }
  .splash-name{
    color: #e7e7ea; font-weight: 300; letter-spacing: .04em;
    font-size: clamp(26px, 5vw, 44px);
    opacity: 0; transform: translateY(6px);       /* fade-in text */
    animation: splashIn 900ms ease forwards .2s;  /* start slightly after mount */
  }
  
  /* when we mark splash as 'hidden' */
  #splash.is-hidden{ opacity: 0; pointer-events: none; }
  
  /* prevent scroll & soften page under splash */
  body.preload{ overflow: hidden; }
  body.preload .hero{ opacity: .0; transform: translateY(8px) scale(1.01); filter: blur(1px); }
  .hero{ transition: opacity .6s ease, transform .6s ease, filter .6s ease; }
  
  /* keyframes */
  @keyframes splashIn{
    to{ opacity: 1; transform: translateY(0); }
  }
  
  /* respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    #splash, .hero{ transition: none !important; animation: none !important; }
    .splash-name{ opacity:1; transform:none; }
  }
  
/* base */
html { scroll-behavior: smooth; }
body { color: var(--fg); background: var(--bg); }
.container-narrow { max-width: 1300px; }

/* navbar */
.navbar { transition: box-shadow .2s ease, background-color .2s ease; }
.navbar.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.06); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); }

/* sections */
section { padding: 88px 0; }
.section-header { margin-bottom: 28px; }

/* hero */
.hero { min-height: 80vh; display: grid; place-items: center; text-align: center; padding-top: 120px; padding-bottom: 120px; }
.hero h1 { letter-spacing: .3px; font-weight: 700; }
.hero p.lead { color: var(--muted); }

/* project cards */
.project-card { transition: transform .25s ease, box-shadow .25s ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }

/* link underline */
.link-underline { position: relative; text-decoration: none; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: currentColor; transition: width .25s ease; }
.link-underline:hover::after { width: 100%; }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.show { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.show { opacity: 1 !important; transform: none !important; transition: none !important; }
  .project-card, .navbar { transition: none; }
}

/* about — single column layout */
.about-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #111827;
  }
  
  /* skills line under intro */
  .about-skills {
    margin: 0 0 18px 0;
    text-align: center;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-size: .98rem;
    border-bottom: 1px solid rgba(0,0,0,.08); /* subtle divider */
    padding-bottom: 14px;
  }
  
  /* info lines (no box) */
  .about-info li {
    display: grid;
    grid-template-columns: 120px 1fr; /* label | value */
    gap: 12px;
    padding: 10px 0;
  }
  
  .about-info li:last-child {
    border-bottom: none;
  }
  
  .about-info li span {
    color: #6b7280;          /* muted label */
    font-size: .9rem;
    letter-spacing: .01em;
  }
  
  .about-info li b {
    font-weight: 500;
    color: #111827;          /* value text */
  }
  
  .about-info a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.15);
  }
  
  .about-info a:hover {
    border-bottom-color: rgba(0,0,0,.35);
  }
  
  /* mobile: stack label/value nicely */
  @media (max-width: 576px) {
    .about-info li { grid-template-columns: 1fr; }
  }
  
  
/* footer */
footer { color: var(--muted); }