@import url('https://fonts.googleapis.com/css2?family=Momo+Signature&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root{
  /* Theme tokens */
  --bg: #fafcff;
  --text: #0a0c10;
  --brand: #1e6fe9;
  --accent: #b794f6;
  --muted: #4b5563;
  --surface: #ffffff;
  --border: #cbd5e1;
  --link: #0b63e6;
  --focus: #1a73e8;

  --gap: 1rem;
  --radius: .75rem;
  --maxw: 70rem;
  --fs-lg: clamp(1.25rem, 2.4vw, 2rem);
  --header-h: 4rem;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #0b0d10;
  --text: #e8eef2;
  --brand: #6ccff6;
  --accent: #c7a6ff;
  --muted: #9aa4b2;
  --surface: #0f1318;
  --border: #334155;
  --link: #8ab4ff;
  --focus: #61a0ff;
  color-scheme: dark;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body.container{
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: 'Roboto Mono', Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;      
}

/* Header */
.site-header{
  padding: 1em;
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header .header-inner{ padding: .5rem 1rem; }
.site-header h1{ margin: 0; font-size: var(--fs-lg); }
.site-header p{ margin: .25rem 0 0; opacity: .8; }

.site-nav{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); padding: .5rem 1rem 1rem;
  margin-top: 1em
}
.nav-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .5rem .75rem; flex-wrap: wrap;
}
.nav-list a{
  text-decoration: none; color: var(--text);
  padding: .7em 1em;          
  border-radius: .7rem;
  transition: background-color 150ms ease, transform 120ms ease;
}
.nav-list a:hover{ background: color-mix(in oklab, var(--brand), transparent 88%); }
@media (hover: none){
  .nav-list a{ background: color-mix(in oklab, var(--brand, blue), transparent 94%); }
  .nav-list a:active{ transform: scale(.98); }
}

/* Main */
#main-content{
  width: min(100dvw, var(--maxw));
  margin-inline: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: var(--gap);
  flex: 1;
}
.section{ padding-block: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.section > h2{ margin: 0; color: var(--brand); }

/* Projects */
.cards{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.cards > li{ flex: 1 1 100%; min-width: 16rem; }

.card{
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--brand), transparent 75%);
  border-radius: var(--radius);
  padding: 1rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover{ transform: translateY(-.15em); box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.25); }
.card strong{ font-size: 1.1rem; }
.card span{
  display: inline-block; margin-top: .5em; margin-right: .5em;
  padding: .25em .65em; border-radius: 999px; font-size: .875rem;
  background: color-mix(in oklab, var(--accent), transparent 85%);
}

img, svg, video{ max-width: 100%; height: auto; display: block; }
.projects-section picture, .projects-section img{
  width: 100%; border-radius: var(--radius);
  max-height: 40dvh; object-fit: cover; object-position: center;
  overflow: clip;
}

/* Experience */
.experience-images{
  display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem;
}
.experience-images figure{
  flex: 1 1 100%; margin: 0;
  display: flex; flex-direction: column; align-items: center;
}
.experience-images img{
  width: 100%; max-height: 30dvh; border-radius: var(--radius);
  object-fit: cover; object-position: center;
}
.experience-images figcaption{ font-size: .875rem; opacity: .8; margin-top: .25rem; text-align: center; }

.experience-section article{
  border-left: 3px solid var(--brand);
  padding: .75rem 1rem; border-radius: .5rem;
  background: color-mix(in oklab, var(--brand), transparent 92%);
}

.viz-section svg{
  display: block;
  overflow: visible;          /* ensures transforms aren't clipped */
  transform-origin: 50% 50%;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.15); opacity: 0.7; }
}

.viz-section iframe{
  width: 100%; max-width: 100%;
  height: auto; aspect-ratio: 3 / 2;  
  border: 0;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: 1rem;

  label {
    font-size: .95rem;
    margin-block: .3rem;
  }

  input, textarea, button {
    width: 100%;
    font-size: 1rem;
    padding: .9em 1em;
    border-radius: .7rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: color-mix(in oklab, var(--bg), black 3%);
  }

  button {
    font-weight: 600;
    background: color-mix(in oklab, var(--brand), transparent 70%);

    &:hover {
      filter: brightness(1.05);
    }

    &:active {
      transform: scale(.98);
    }
  }
}

/* Theme toggle button */
.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover{ background: color-mix(in oklab, var(--brand), transparent 88%); }

/* View Transition API: simple cross-fade */
@supports (view-transition-name: root) {
  html { view-transition-name: root; }
  ::view-transition-old(root) { animation: fade-out .25s ease both; }
  ::view-transition-new(root) { animation: fade-in  .25s ease both; }
  @keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
  @keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
}

/* Different device sizes */
@media (max-width: 480px){
  .nav-list{ justify-content: flex-start; gap: .5rem; }
  .nav-list a {display: block;margin-block: 0.1rem; font-size: 0.9rem; line-height: 1.2;}
  .cards > li{ flex-basis: 100%; }
  .experience-images figure{ flex-basis: 100%; }
}

@media (min-width: 481px) and (max-width: 1024px){
  .nav-list{ gap: .6rem .9rem; }
  .cards > li{ flex-basis: calc(50% - .5rem); }
  .experience-images figure{ flex-basis: 48%; }
}

@media (min-width: 1025px){
  .nav-list{ gap: .75rem; }
  .cards > li{ flex-basis: calc(33.333% - .67rem); }
  .experience-images figure{ flex-basis: 32%; }
}

/* Inline project controls */
.project-controls button {
  padding: .55rem .9rem;
  border-radius: .7rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--brand), transparent 88%);
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms ease, background-color 160ms ease;
}

.project-controls button:hover {
  background: color-mix(in oklab, var(--brand), transparent 82%);
}

.project-controls button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  transform: translateY(-1px);
}