/* =========================================
   IMPORT POPPINS
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================================
   1. BASE STYLES & EASING
========================================= */
:root {
  --font-main: 'Poppins', sans-serif;
  --bg-color: #ffffff;
  --text-main: #000000;
  --text-muted: #999999;
  --border-color: #e5e5e5;
  --header-height: 80px;
  --page-padding: 50px;
  --left-col-width: 280px;
  --grid-gap: 60px;
  --ease-butter: cubic-bezier(0.19, 1, 0.22, 1); 
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none; 
}

/* =========================================
   2. HEADER & FOOTER PLACEHOLDERS
   NOTE: If using header-snippet.html, the
   .custom-header block below is unused.
   Keep it only as fallback.
========================================= */
.custom-header {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--page-padding); z-index: 1000;
}
.custom-header .logo {
  font-family: var(--font-main);
  font-size: 24px; font-weight: 700; letter-spacing: 2px;
}
.custom-header nav {
  display: flex; gap: 30px;
  font-family: var(--font-main);
  font-size: 11px; font-weight: 500; letter-spacing: 1px;
}
.custom-header a { text-decoration: none; color: var(--text-main); }

.custom-footer {
  padding: 100px var(--page-padding) 40px;
  text-align: center;
  font-family: var(--font-main);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
}

#loader {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-main);
  font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  z-index: 500; transition: opacity 0.5s ease;
}

/* =========================================
   3. VIRTUAL SCROLL WRAPPER
========================================= */
#smooth-wrapper { position: fixed; top: var(--header-height); left: 0; width: 100%; will-change: transform; }
.project-list { display: flex; flex-direction: column; will-change: transform; }

/* =========================================
   4. PROJECT CONTAINERS (CLOSED STATE)
========================================= */
.project {
  padding: 25px 0; cursor: pointer;
  background-color: transparent; transition: padding 1.5s var(--ease-butter), border-color 0.4s ease;
}
.project:hover .img-wrapper img { opacity: 0.85; transform: scale(1.02); }

.scroll-window { width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden; cursor: pointer; transition: max-width 1.5s var(--ease-butter); }
.project-content { display: flex; gap: var(--grid-gap); width: max-content; padding: 0 var(--page-padding); will-change: transform; }

.meta { width: var(--left-col-width); flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.icon { width: 40px; height: 40px; background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-family: var(--font-main); font-weight: 700; font-size: 16px; }

.title {
  font-family: var(--font-main);
  font-size: 15px; font-weight: 600; margin-bottom: 6px; letter-spacing: 0.3px;
}
.location {
  font-family: var(--font-main);
  font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
}

.meta-extended { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.5s var(--ease-butter); width: 100%; }
.meta-extended-inner {
  overflow: hidden; opacity: 0;
  font-family: var(--font-main);
  font-size: 10px; line-height: 2;
  transform: translateY(-10px); transition: opacity 0.6s ease, transform 1.5s var(--ease-butter);
}
.meta-row { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-end; }
.meta-label {
  font-family: var(--font-main);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
}
.meta-value {
  font-family: var(--font-main);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}

.gallery { display: flex; gap: var(--grid-gap); padding-right: var(--page-padding); pointer-events: none; }
.img-wrapper { height: 250px; width: 350px; overflow: hidden; transition: height 1.5s var(--ease-butter); pointer-events: auto; }
.img-wrapper img { height: 100%; width: 100%; object-fit: cover; transition: opacity 0.4s ease, transform 0.6s var(--ease-butter); -webkit-user-drag: none; }
.gallery-extra { opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity 0.6s ease, transform 1.5s var(--ease-butter), visibility 0s 1.5s; }
.gallery-text {
  width: 360px;
  font-family: var(--font-main);
  font-size: 13px; line-height: 1.7; white-space: normal; color: #333;
  pointer-events: auto; user-select: none; -webkit-user-drag: none;
}
.gallery-text p { margin-bottom: 20px; }

/* =========================================
   5. PROJECT CONTAINER (EXPANDED STATE) 
========================================= */
.project.is-expanded { padding: 20px 0; cursor: default; border-color: transparent; }
.project.is-expanded .scroll-window { max-width: 100%; }
.project.is-expanded .meta-extended { grid-template-rows: 1fr; }
.project.is-expanded .meta-extended-inner { opacity: 1; transform: translateY(0); padding-top: 40px; transition-delay: 0.1s; }
.project.is-expanded .img-wrapper { height: calc(100vh - var(--header-height) - 140px); min-height: 500px; width: max-content; max-height: 900px; }
.project.is-expanded .gallery-extra { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 1.0s ease 0.2s, transform 1.5s var(--ease-butter) 0.1s, visibility 0s 0s; }
.project.is-expanded .img-wrapper img { opacity: 1; transform: scale(1); }