/* ---------------------------------------
   Font Imports (Fontshare)
----------------------------------------- */
@import url("https://api.fontshare.com/v2/css?f[]=chillax@600&f[]=synonym@400&display=swap");

/* ---------------------------------------
   Theme Tokens (site-wide)
----------------------------------------- */
:root {
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* explicit font tokens while keeping your fallback stack available */
  --font-heading: "Chillax", var(--font-stack);
  --font-body: "Synonym", var(--font-stack);

  --transition-speed: 0.6s;

  /* Base palette */
  --black: #000000;
  --white: #ffffff;
  --teal: #154854;
  --orange: #ffa500;

  /* Light theme (default) */
  --bg: #fefefe;
  --text: #111111;
  --muted-text: #555555;
  --link: #0044cc;

  --header-bg: #ffffff;
  --header-border: #dddddd;

  --menu-bg: #ffffff;
  --menu-border: #dddddd;

  --footer-bg: #f8f8f8;
  --footer-border: #dddddd;

  --card-bg: #ffffff;
  --card-text: #000000;
  --card-border: #dddddd;
  --card-shadow: 0 8px 20px rgba(0,0,0,0.1);
  --card-shadow-hover: 0 12px 30px rgba(0,0,0,0.2);

  /* Inverse sections (hero/stripes that are dark in both themes) */
  --inverse-bg: var(--black);
  --inverse-text: var(--white);

  /* Project H mid sections (warm light block) */
  --ph-section-bg: #fff9f5;
  --ph-section-text: var(--black);

  /* Lightbox */
  --lightbox-backdrop: rgba(0,0,0,0.9);
  --lightbox-close: #000000;
  --lightbox-close-hover: #ffa500;
}

/* Dark theme overrides */
html[data-theme="dark"] {
  --bg: #141414;
  --text: #fefefe;
  --muted-text: #e0e0e0;
  --link: #79c99e;

  --header-bg: #111111;
  --header-border: #444444;

  --menu-bg: #111111;
  --menu-border: #444444;

  --footer-bg: #111111;
  --footer-border: #444444;

  --card-bg: #222222;
  --card-text: #fefefe;
  --card-border: #444444;
  --card-shadow: 0 8px 20px rgba(255,255,255,0.05);
  --card-shadow-hover: 0 12px 30px rgba(255,255,255,0.08);

  /* Inverse section for dark theme keeps near-black, readable text */
  --inverse-bg: #111111;
  --inverse-text: #fefefe;

  /* Project H mid sections in dark */
  --ph-section-bg: #1a1a1a;
  --ph-section-text: #f2f2f2;

  --lightbox-close: #ffffff;
}

/* ---------------------------------------
   Base / Reset
----------------------------------------- */
/* Use Synonym everywhere by default */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-body); }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings + key titles to Chillax (Semibold) */
h1, h2, h3, h4, h5, h6,
.site-title, .name {
  font-family: var(--font-heading);
  font-weight: 600; /* Chillax Semibold */
}

/* Header controls / dark toggle */
.header-controls { display: flex; align-items: center; gap: 1rem; }
#dark-mode-toggle {
  background: none; border: none; font-size: 1.25rem; cursor: pointer;
  color: var(--text); transition: color 0.3s ease;
}
#dark-mode-toggle:hover { color: #046582; }
html[data-theme="dark"] #dark-mode-toggle:hover { color: #FFF085; }

/* ---------------------------------------
   Header & Navigation  (modern dropdown)
----------------------------------------- */
.site-header {
  width: 100%;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  position: sticky; top: 0; z-index: 1000;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.header-container {
  max-width: 1200px; margin: 0 auto; padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
}
.site-title { font-size: 1.75rem; font-weight: bold; }
.site-title a { color: var(--text); text-decoration: none; transition: color 0.3s ease; }

.main-nav { position: relative; }

/* Toggle button (FA icon) */
.nav-toggle {
  margin-left: auto; font-size: 1.6rem; background: none; border: none; cursor: pointer;
  color: var(--text); transition: color 0.2s ease, transform 0.2s ease;
}
.nav-toggle:hover { color: var(--muted-text); }
.nav-toggle i { display: inline-block; transition: transform 0.25s ease; pointer-events: none; }
.nav-toggle[aria-expanded="true"] i { transform: rotate(90deg); }

/* Backdrop (click to close) */
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.06);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  backdrop-filter: blur(0px);
  z-index: 999;
}
.nav-backdrop.visible {
  opacity: 1; pointer-events: auto; backdrop-filter: blur(2px);
}

/* Dropdown panel */
.nav-menu {
  list-style: none; margin: 0; padding: 0.5rem; display: flex;
  flex-direction: column; gap: 0.25rem;

  position: absolute; top: calc(100% + 10px); right: 0.5rem;
  min-width: 220px;

  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);

  transform-origin: top right;
  transform: translateY(-8px) scale(0.98);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms step-end;
  z-index: 1001; will-change: opacity, transform;
}
.nav-menu.open {
  opacity: 1; transform: translateY(0) scale(1); visibility: visible;
  transition: opacity 220ms cubic-bezier(.21,.61,.35,1), transform 220ms cubic-bezier(.21,.61,.35,1), visibility 0ms;
}

/* Links */
.nav-menu a {
  display: block; text-decoration: none; color: var(--text);
  padding: 0.65rem 0.85rem; border-radius: 8px;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.05s ease;
  font-size: 1.1rem;
}
.nav-menu a:hover {
  background: color-mix(in oklab, var(--menu-bg) 80%, var(--text) 10%);
}
html[data-theme="dark"] .nav-menu a:hover {
  background: color-mix(in oklab, var(--menu-bg) 84%, var(--text) 12%);
}

/* Desktop */
@media (min-width: 768px) {
  .nav-backdrop { display: none; }
  .nav-menu {
    position: static; flex-direction: row; align-items: center;
    gap: 1.5rem; border: none; box-shadow: none; background: transparent; padding: 0;
    transform: none; opacity: 1; visibility: visible;
  }
  .nav-menu a { padding: 0; border-radius: 6px; }
  .nav-menu a:hover { background: transparent; color: var(--muted-text); }
  .nav-toggle { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-backdrop, .nav-toggle i { transition: none !important; }
}

/* ---------------------------------------
   Footer
----------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  padding: 1rem 0; text-align: center; color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-container { max-width: 1200px; margin: 0 auto; }

/* ---------------------------------------
   Sections / Animations (UPDATED: Blur-Up Effect + Fade-Up Elements)
----------------------------------------- */
/* 1. Whole Section Entry (Large Blur) */
.section {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem;
  
  /* Start lower down and blurred */
  transform: translateY(40px);
  opacity: 0;
  filter: blur(10px);
  
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 1s ease;
  
  font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem); line-height: 1.6; width: 100%;
  will-change: opacity, transform, filter;
}

.section.active { 
  opacity: 1; 
  transform: translateY(0); 
  filter: blur(0);
}

/* 2. Specific Element Fades (.fade-up) */
.fade-section, .fade-up, .fade-right {
  opacity: 0; 
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-section { transform: translateY(30px); }
.fade-up      { transform: translateY(50px); }
.fade-right   { transform: translateX(50px); }

.fade-section.visible, .fade-up.visible, .fade-right.visible {
  opacity: 1; transform: translate(0,0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .scroll-indicator { animation: none; }
  .section { transform: none !important; opacity: 1 !important; filter: none !important; }
}

/* ---------------------------------------
   Homepage (index.html)
----------------------------------------- */
.intro {
  background: var(--header-bg);
  color: var(--text);
  text-align: center; display: flex; flex-direction: column; justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.intro .content-wrapper { max-width: 700px; margin: auto; }
.name {
  font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem; line-height: 1.2; color: var(--text);
  transition: color 0.3s ease;
}
.intro-text {
  font-size: 1.25rem; font-weight: 300; margin-bottom: 1.5rem; opacity: 0.9; line-height: 1.8; color: var(--text);
  transition: color 0.3s ease;
}
.intro-text a { text-decoration: none; color: var(--teal); transition: color 0.3s ease; }
.intro-text a:hover { color: var(--orange); }

.scroll-indicator {
  font-size: 1.25rem; opacity: 0.7; margin-top: 2rem; animation: bounce 2s infinite;
  cursor: pointer; display: inline-block; color: var(--text); text-decoration: none;
  transition: color 0.3s ease;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(5px); }
  60% { transform: translateY(3px); }
}

/* Home: Project H preview (keep intentionally inverse) */
.home-page .home-project-h {
  background-color: var(--inverse-bg);
  color: var(--inverse-text);
  width: 100%; padding: 3rem 1rem;
}
.home-page .home-project-h .content-wrapper {
  display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;
}
.home-page .home-project-h .project-text {
  flex: 1 1 50%; padding: 2rem; color: var(--inverse-text);
}
.home-page .home-project-h .project-text h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.home-page .home-project-h .project-text p { font-size: 1.25rem; margin-bottom: 1.5rem; line-height: 1.8; }
.home-page .home-project-h .project-link {
  color: var(--inverse-text); text-decoration: underline; font-size: 1.1rem; transition: color 0.3s ease;
}
.home-page .home-project-h .project-link:hover { color: #ccc; }
.home-page .home-project-h .project-image {
  flex: 1 1 50%; display: flex; justify-content: center; align-items: center; padding: 1rem;
}
.home-page .home-project-h .project-image img {
  max-width: 80%; height: auto; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

/* Home: PAPT section (UPDATED: Removed Fixed Parallax) */
.project-papt {
  background: url('images/papt_bg.jpg') center/cover no-repeat;
  
  /* Scroll normally now */
  /* background-attachment: fixed; <-- REMOVED */
  overflow: hidden;

  color: var(--inverse-text);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  padding: 3rem 1rem; position: relative;
}
.project-papt .overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.8); z-index: 0;
}
.project-papt .content-wrapper {
  display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1; padding: 2rem;
}
.project-papt .project-image,
.project-papt .project-text {
  flex: 1 1 50%; padding: 2rem;
}
.project-papt .project-image { display: flex; justify-content: center; align-items: center; order: 1; }
.project-papt .project-image img {
  max-width: 80%; height: auto; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.project-papt .project-text { text-align: left; order: 2; font-size: 1.25rem; line-height: 1.8; color: var(--inverse-text); }
.project-papt .project-text h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.project-papt .project-text p { font-size: 1.25rem; margin-bottom: 1.5rem; line-height: 1.8; }
.project-papt .project-link {
  color: var(--inverse-text); text-decoration: underline; font-size: 1.1rem; margin-top: 1rem; display: inline-block; transition: color 0.3s ease;
}
.project-papt .project-link:hover { color: #ccc; }

/* ---------------------------------------
   About (about.html)
----------------------------------------- */
.about-page { background: var(--header-bg); color: var(--text); }
.about .content-wrapper {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem;
  max-width: 1200px; margin: auto; padding: 3rem 1rem;
}
.about-text { flex: 1 1 55%; font-size: 1.15rem; line-height: 1.8; }
.about-text p { margin-bottom: 1.5rem; color: var(--text); }
.about-text a { text-decoration: none; color: var(--teal); transition: color 0.3s ease; }
.about-text a:hover { color: var(--orange); }
.about-image { flex: 1 1 40%; display: flex; justify-content: center; align-items: center; }
.about-image img { max-width: 100%; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }

/* ---------------------------------------
   Projects (projects.html)
----------------------------------------- */
.what-i-do {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  position: relative; opacity: var(--fade-opacity, 0);
  transition: opacity var(--transition-speed) ease, background-color 0.3s ease, color 0.3s ease;
}
.what-i-do .content-wrapper { max-width: 1200px; margin: auto; padding: 3rem 1rem; }
.what-i-do p { margin-bottom: 2rem; font-size: 1.15rem; line-height: 1.8; }

.projects { display: flex; flex-wrap: wrap; gap: 2rem; }
.project {
  flex: 1 1 calc(33.333% - 2rem);
  background: var(--card-bg); color: var(--card-text);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--card-shadow);
  text-align: center; padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.project:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); }
.project img { max-width: 100%; border-bottom: 1px solid var(--card-border); margin-bottom: 1rem; }
.project p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }

/* ---------------------------------------
   Project H (project-h.html)
----------------------------------------- */
.project-h-page .intro-content {
  background-color: var(--inverse-bg);
  color: var(--inverse-text);
  min-height: 100vh; padding: 4rem 2rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.project-h-page .intro-content h2 { font-size: 4rem; font-weight: 700; }
.project-h-page .intro-content p { font-size: 1.5rem; margin-top: 1rem; color: #e0e0e0; }

.year-highlight { color: var(--white); }
.highlight-blue { color: #1538fe; }
.highlight-red  { color: #f30433; }

.project-h-page .project-section {
  background-color: var(--ph-section-bg);
  color: var(--ph-section-text);
  display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; gap: 2rem; flex-wrap: wrap;
  transition: background-color 1s ease, color 1s ease;
}
.project-h-page .project-content {
  display: flex; align-items: center; max-width: 1200px; width: 100%;
}
.project-h-page .project-content.left-text .text { order: 2; padding-left: 3rem; text-align: right; }
.project-h-page .project-content.left-text .image { order: 1; }
.project-h-page .project-content.right-text .text { order: 1; padding-right: 3rem; text-align: left; }
.project-h-page .project-content.right-text .image { order: 2; }

.project-h-page .text { flex: 1; padding: 1rem 2rem; }
.project-h-page .text h3 { font-size: 2rem; margin-bottom: 1rem; }
.project-h-page .text p { font-size: 1.2rem; line-height: 1.8; }

.project-h-page .image { flex: 1; text-align: center; }
.project-h-page .image img {
  width: 100%; max-width: 600px; height: auto; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}
.project-h-page .image img:hover { transform: scale(1.02); }

.full-width-image img {
  width: 100vw; max-width: 100%;
  margin-left: calc(-50vw + 50%); border-radius: 0; box-shadow: none;
}

.highlight-papt { color: var(--orange); font-weight: bold; text-decoration: none; transition: color 0.3s ease; }
.highlight-papt:hover { color: #e69500; text-decoration: underline; }

.project-h-page .image-background {
  position: relative;
  background: url('images/haiti_2035_port.png') center/cover no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  background-color: var(--black);
}

@media (min-width: 768px) {
  .project-h-page .project-section .image img.gateway-stars {
    width: auto; max-width: 65%; margin: 0 auto; display: block;
  }
}

/* ---------------------------------------
   Lightbox (shared)
----------------------------------------- */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999; padding-top: 60px;
  overflow: auto; background-color: var(--lightbox-backdrop);
}
.lightbox img {
  margin: auto; display: block; max-width: 80%; max-height: 80%; border-radius: 10px;
}
.lightbox-close {
  position: absolute; top: 30px; left: 30px;
  color: var(--lightbox-close); font-size: 20px; font-weight: bold; cursor: pointer;
}
.lightbox-close:hover { color: var(--lightbox-close-hover); }

/* ---------------------------------------
   Fade-ins (Referenced by JS)
----------------------------------------- */
.fade-section, .fade-up, .fade-right {
  opacity: 0; transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.fade-section       { transform: translateY(30px); }
.fade-up            { transform: translateY(40px); }
.fade-right         { transform: translateX(40px); }
.fade-section.visible, .fade-up.visible, .fade-right.visible {
  opacity: 1; transform: translate(0,0);
}

/* ---------------------------------------
   Mobile
----------------------------------------- */
@media (max-width: 768px) {
  /* Home Project H block */
  .home-page .home-project-h .content-wrapper { flex-direction: column; align-items: center; text-align: center; }
  .home-page .home-project-h .project-text,
  .home-page .home-project-h .project-image { flex: 1 1 100%; padding: 1rem 0; }
  .home-page .home-project-h .project-image img { max-width: 250px; width: 100%; margin: 0 auto; }

  /* PAPT */
  .project-papt .content-wrapper { flex-direction: column; align-items: center; text-align: center; }
  .project-papt .project-text { text-align: center; }
  .project-papt .project-image,
  .project-papt .project-text { flex: 1 1 100%; padding: 1rem; }
  .project-papt .project-image img { max-width: 250px; margin: 1rem auto 0; }

  /* Project H */
  .project-h-page .project-section .project-content {
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .project-h-page .project-section .project-content .text { order: 1; flex: 1 1 100%; padding: 1rem 0; }
  .project-h-page .project-section .project-content .image { order: 2; flex: 1 1 100%; padding: 1rem 0; }
  .project-h-page .project-section .project-content .image img { max-width: 90%; height: auto; margin: 0 auto; }

  /* About */
  .about .content-wrapper { flex-direction: column; text-align: center; }
  .about-image { margin-bottom: 1.5rem; }

  /* Projects grid */
  .projects { flex-direction: column; gap: 1.5rem; }
  .project { flex: 1 1 100%; }

  /* Misc text */
  .name { font-size: 2rem; }
  .scroll-indicator { font-size: 1rem; }
}