/* Fonts */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/work-sans.woff2') format('woff2');
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/material-symbols.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Fix: Prevent horizontal overflow on mobile */
html {
    overflow-x: hidden;
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, #e2e2e2 1px, transparent 1px),
                      linear-gradient(to bottom, #e2e2e2 1px, transparent 1px);
    background-size: 100px 100px;
}

/* Navigation Theme Transitions */
nav {
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

nav .nav-link, 
nav .font-logo,
nav button {
    transition: color 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Light Theme (White Background, Black Text) */
nav.nav-light {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

nav.nav-light .font-logo,
nav.nav-light button,
nav.nav-light .nav-link {
    color: black;
}

/* Dark Theme (Black Background, White Text) */
nav.nav-dark {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav.nav-dark .font-logo,
nav.nav-dark button,
nav.nav-dark .nav-link {
    color: white;
}

/* Transparent Theme (Clear Background, White Text - for Hero) */
nav.nav-transparent {
    background-color: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
}

nav.nav-transparent .font-logo,
nav.nav-transparent button {
    color: white;
}
/* Logo Adaptation */
.logo-img {
    transition: filter 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.logo-white {
    filter: invert(1) brightness(1.2) drop-shadow(0 0 1px rgba(255, 255, 255, 0.2));
}

nav.nav-dark .logo-img {
    filter: invert(1) brightness(1.2) drop-shadow(0 0 1px rgba(255, 255, 255, 0.2));
}


nav.nav-transparent .logo-img,


nav.nav-light .logo-img {
    filter: none;
}

/* References: curtain reveal cards */
.project-card {
    will-change: clip-path, transform, opacity;
    transform-origin: top center;
}