/* =========================================
   1. GLOBAL HEADER STYLES
   ================================********* */
body.nav-is-open {
  /* JS handles the position: fixed part now */
  overflow: hidden; 
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Background stays full width */
  padding: 0;  /* Remove local padding, let .container handle it */
  
  /* Keep your existing styles (background, blend-mode, etc.) */
  background: transparent;
  mix-blend-mode: difference;
  color: #FFFFFF;
  z-index: 1000;
  
  /* OPTIMIZATION: Isolate stacking context */
  will-change: transform;
  
  transition: 
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    mix-blend-mode 0s 0.55s;
}

/* The "Smart Hide" State */
.site-header.is-scrolled-down {
  transform: translateY(calc(-100% - 40px));
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* --- LOGO --- */
.site-brand {
  color: #FFFFFF; 
  text-decoration: none;
  z-index: 1001;
  transition: opacity 0.4s ease;
}

/* --- LINKS (Global) --- */
.site-header a {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: -0.02rem;
  text-decoration: none;
  
  /* Force White so Parent Difference mode works */
  color: #FFFFFF;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- CRITICAL FIX: Force Links White for Blend Mode --- */
/* Overrides default browser colors (blue/purple) for visited/active links.
   If they turn dark, 'difference' mode makes them invisible on white backgrounds. */
.site-header a:visited,
.site-header a:active,
.site-header a:focus,
.site-header a:hover,
.site-brand:visited,
.site-brand:active,
.site-brand:focus,
.site-brand:hover {
  color: #FFFFFF !important;
  -webkit-tap-highlight-color: transparent; 
}


/* =========================================
   2. MOBILE MENU CONTAINER
   ========================================= */
.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  
  /* Standard Dark Overlay */
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(8px);
  
  opacity: 1;
  visibility: hidden;
  transform: translateY(-100%);
  
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  
  /* Slide Animation */
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1), 
              visibility 0s 0.55s;
}

.main-navigation ul {
  list-style: none;
  padding: 8rem 1rem 0; 
  margin: 0;
  width: 100%;
  text-align: left;
}

.main-navigation a {
  font-size: 4rem;
  text-decoration: none;
  
  /* Mobile Menu Links: Standard Token (No Blend Mode inside dark menu) */
  color: var(--color-overlay-text) !important; 
  display: inline-block;
  background-color: none !important;
}

.main-navigation hr {
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-top: 1.5rem;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}


/* =========================================
   3. MENU STATES (Open & Closing)
   ========================================= */
.main-navigation.is-open {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

body.nav-is-open {
  overflow: hidden;
}

/* --- BLEND MODE OVERRIDES --- */
/* When menu is Open OR Closing, force 'Normal' mode.
   This prevents the text from inverting against the black overlay. */
body.nav-is-open .site-header,
body.nav-is-closing .site-header {
  mix-blend-mode: normal;
}

body.nav-is-open .site-brand,
body.nav-is-closing .site-brand {
  color: var(--color-overlay-text);
}


/* =========================================
   4. MOBILE ANIMATIONS (Cinematic Reveal)
   ========================================= */
.nav-link-reveal {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  
  transition: 
    opacity 0.6s ease,
    filter 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.3s ease;
}

/* Open State */
body.nav-is-open .nav-link-reveal {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Divider Lines */
.main-navigation hr {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

body.nav-is-open .main-navigation hr {
  transform: scaleX(1); 
  opacity: 1;
}

/* Stagger (Waterfall) */
body.nav-is-open .main-navigation li:nth-child(1) .nav-link-reveal { transition-delay: 0.2s; }
body.nav-is-open .main-navigation li:nth-child(1) hr { transition-delay: 0.3s; }

body.nav-is-open .main-navigation li:nth-child(2) .nav-link-reveal { transition-delay: 0.45s; }
body.nav-is-open .main-navigation li:nth-child(2) hr { transition-delay: 0.55s; }

body.nav-is-closing .site-brand,
body.nav-is-closing .nav-toggle {
  opacity: 0;
  transition: opacity 0.2s ease; /* Quick fade out */
}

/* =========================================
   5. MOBILE NAV ICON (= to X)
   ========================================= */
.nav-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 1.1rem;
  height: 1.1rem;
  z-index: 1002;
  transition: opacity 0.4s ease;
}

.nav-toggle .icon {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

/* BURGER BARS (Default: White + Difference) */
.nav-toggle .icon::before,
.nav-toggle .icon::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%; 
  height: 2px;
  
  background-color: #FFFFFF; 
  mix-blend-mode: difference;
  
  border-radius: 0;
  transition: transform 0.3s ease-in-out, 
              background-color 0.3s ease-in-out;
  will-change: transform;
}

/* Closed State */
.nav-toggle .icon::before { transform: translateY(-4px) rotate(0deg); }
.nav-toggle .icon::after { transform: translateY(4px) rotate(0deg); }

/* OPEN STATE (X) - Reset to Normal + Overlay Color */
body.nav-is-open .nav-toggle .icon::before {
  transform: translateY(0) rotate(45deg);
  background: var(--color-overlay-text);
  mix-blend-mode: normal;
}
body.nav-is-open .nav-toggle .icon::after {
  transform: translateY(0) rotate(-45deg);
  background: var(--color-overlay-text);
  mix-blend-mode: normal;
}

/* CLOSING STATE - Keep Normal Color while sliding */
body.nav-is-closing .nav-toggle .icon::before,
body.nav-is-closing .nav-toggle .icon::after {
  background: var(--color-overlay-text);
  mix-blend-mode: normal;
}


/* --- 6. Desktop Styles --- */
@media (min-width: 768px) {
  
  .nav-toggle { display: none; }
  
  .main-navigation {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    display: block;
    transform: none;
  }
  
  .main-navigation ul {
    display: flex;
    gap: 1.5rem;
    padding: 0;
    width: auto;
  }
  
  .main-navigation li { margin: 0; }
  
  /* Desktop Links: Force White */
  .main-navigation a {
    font-size: 1.1rem;
    color: #FFFFFF;
    /* 'mix-blend-mode: difference' is handled by .site-header parent */
  }
  
  /* Reset Animations for Desktop */
  .nav-link-reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: color 0.3s ease; 
  }
  
  .main-navigation hr { display: none; }

  /* Hover Styles */
  @media (hover: hover) {
    .site-header a {
      display: inline-block;
      position: relative;
      text-align: center;
      text-decoration: none;
    }

    .site-header a::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #FFFFFF; /* White for difference mode */
      bottom: -0.4rem;
      left: 0;
      transform-origin: right;
      transform: scaleX(0);
      transition: transform .3s ease-in-out;
    }

    .site-header a:hover::before {
      transform-origin: left;
      transform: scaleX(1);
    }
  }
}

.is-resizing .main-navigation {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .animate-block, .reveal-phrase, .scroll-line-pulse {
    animation: none !important;
    transition: opacity 0.4s ease-out !important;
    transform: none !important;
    filter: none !important;
  }
}