/* =====================================================
   GLOBAL
===================================================== */

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: black;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: white;
}

/* =====================================================
   VIEWPORT & CAMERA
===================================================== */

#viewport {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  cursor: default;
  touch-action: none;

}

#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  pointer-events: auto;
}

/* =====================================================
   IMAGES — FIXED
===================================================== */

.image {
  position: absolute;
  top: 0;
  left: 0;

  width: 100px;

  user-select: none;
  touch-action: none;
  pointer-events: auto;
  cursor: pointer;

  /* 🔥 IMPORTANT */
  /* JS controls ALL transforms */
  transform-origin: center center;

  /* 🚫 NO translate here */
  /* 🚫 NO transform here */

  transition:
    opacity 0.4s ease,
    width 0.5s ease;
}

/* =====================================================
   LOGO
===================================================== */

#logo-container {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 7000;
}

#logo-container img {
  width: 80px;
}

/* =====================================================
   LOGO TEXT LINKS
===================================================== */

#logo-links {
  margin-top: 18px;
  display: flex;
  line-height: 1.35;
  flex-direction: column;
  gap: 8px;
}

#logo-links a,
#logo-links div {
  font-family: "Roboto", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;

  color: white;
  text-decoration: none;
  cursor: pointer;

  opacity: 0.9;
  transition: opacity 0.25s ease;
}

#logo-links a:hover,
#logo-links div:hover {
  opacity: 1;
}

/* subtle zig-zag offset */

#logo-links > *:nth-child(1) {
  margin-left: 0px;
}

#logo-links > *:nth-child(2) {
  margin-left: 24px;
}

#logo-links > *:nth-child(3) {
  margin-left: 12px;
}

/* Hide only the logo links in group mode */
#logo-links.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* =====================================================
   ABOUT DESCRIPTION PANEL
===================================================== */

#about-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42vw;
  max-width: 560px;
  max-height: 70vh;
  padding: 2.4rem 2.6rem;
  background: rgba(14,14,14,0.75);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  color: white;
  overflow-y: auto;
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#about-panel.visible {
  opacity: 1;
  pointer-events: auto;
  }
  
  /* Mobile-specific layout (making the About Panel wider) */
@media screen and (max-width: 768px) {
  #about-panel {
    width: 70vw; /* Make the About Panel match the Project Panel width on mobile */
  }
}

/* Minimal close button for About panel (mobile only) */
#about-close {
  position: absolute;
  top: 14px;
  right: 16px;

  background: none;
  border: none;
  padding: 0;

  color: white;
  font-size: 1.2rem;
  font-weight: 400;

  cursor: pointer;
  opacity: 0.6;

  line-height: 1;

  display: none; /* Hidden by default (desktop) */
}

#about-close:hover {
  opacity: 1;
}

/* Show close button on mobile only */
@media (max-width: 768px) {
  #about-close {
    display: block;
  }
}


/* =====================================================
   CONTACT PANEL (CLONE OF ABOUT)
===================================================== */

#contact-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 42vw;
  max-width: 560px;
  max-height: 70vh;

  padding: 2.4rem 2.6rem;

  background: rgba(14,14,14,0.75);
  backdrop-filter: blur(18px);

  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 40px 120px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.04);

  color: white;
  overflow-y: auto;

  z-index: 8000;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.4s ease;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#contact-panel.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile width */
@media (max-width: 768px) {
  #contact-panel {
    width: 70vw;
  }
}

/* Close button */
#contact-close {
  position: absolute;
  top: 14px;
  right: 16px;

  background: none;
  border: none;

  color: white;
  font-size: 1.2rem;

  cursor: pointer;
  opacity: 0.6;

  display: none;
}

@media (max-width: 768px) {
  #contact-close {
    display: block;
  }
}

/* Links */

.contact-inline {
  color: inherit;
  text-decoration: underline;
}

.contact-links {
  margin-top: 20px;
  display: flex;
  gap: 16px;
}

.contact-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
  
  
  
/* =====================================================
   PROJECT DIRECTORY PANEL
===================================================== */

#projects-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;  /* Adjust container width */
  max-width: 2500px;  /* Max width */
  max-height: 70vh;
  padding: 2.4rem 2.6rem;
  background: rgba(14,14,14,0.75);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  color: white;
  overflow-y: auto;
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  text-align: left; /* Align all text to the left */
  
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#projects-panel.visible {
  opacity: 1;
  pointer-events: auto;
}

.projects-container {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  flex: 1;  /* Ensure the container takes all available space */
  align-items: stretch; /* Ensures equal column height */
}

/* Default layout for larger screens */
.projects-column:nth-child(1), /* First column */
.projects-column:nth-child(2), /* Second column */
.projects-column:nth-child(3) { /* Third column */
  flex: 6;  /* First three columns will take up 6x the space of the 4th column */
}

.projects-column:nth-child(4){ /* Fourth column */
  flex: 2.5; 
}

.projects-column:nth-child(5){ /* Fifth column */
  flex: .7; /* Fifth column remains with normal width */
}

.projects-column h4 {
  text-align: left; /* Align column headings to the left */
  margin-bottom: 1rem;
}

.projects-column p {
  margin: 0.5rem 0;
  text-align: left; /* Align project details to the left */
  line-height: 1.35;
}

.projects-column button.project-btn {
  background: none;
  border: none;
  color: white;
  font-family: "Inter", sans-serif; /* Use the standard body font */
  font-size: 1rem;  /* Match the font size to the text in the columns */
  margin: 0;  /* No margin for the buttons */
  padding: 0;  /* No padding to match normal text spacing */
  width: auto;  /* Let the button width adjust to the text */
  text-align: left; /* Align text to the left */
  cursor: pointer; /* Pointer cursor to indicate clickability */
  text-decoration: none; /* No underline, to match regular text */
  font-weight: normal; /* Use normal font weight */
  letter-spacing: normal; /* Ensure no extra spacing between letters */
  line-height: 1.35;
  
  
}

.projects-column button.project-btn:hover {
  /* No hover effects, just pointer cursor */
}

/* Mobile-specific layout (only show first and last columns) */


/* Minimal close button for Projects panel (mobile only) */
#projects-close {
  position: absolute;
  top: 14px;
  right: 16px;

  background: none;
  border: none;
  padding: 0;

  color: white;
  font-size: 1.2rem;
  font-weight: 400;

  cursor: pointer;
  opacity: 0.6;

  line-height: 1;

  display: none; /* Hidden on desktop */
}

#projects-close:hover {
  opacity: 1;
}

/* Show on mobile only */
@media (max-width: 768px) {
  #projects-close {
    display: block;
  }
}




/* =====================================================
   PROJECT DESCRIPTION PANEL
===================================================== */

#project-descriptions {
  position: fixed;
  left: 65vw; /* Position the description box to the right */
  top: 50%;   /* Position the top of the box at the center of the screen */
  transform: translateY(-50%); /* Center the box vertically */
  width: 30vw;
  max-width: 440px;
  max-height: 65vh;
  padding: 1.9rem 2.2rem;
  background: rgba(14,14,14,0.72);
  backdrop-filter: blur(18px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 30px 90px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow-y: auto;
  color: white;
  z-index: 6000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  cursor: grab;


  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}



#project-descriptions.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* =====================================================
   LOADER
===================================================== */

#loader {
  position: fixed;
  inset: 0;
  background: black;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  z-index: 10000;

  opacity: 1;
  transition: opacity 0.8s ease;
}

#loader.hidden {
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}

/* logo size = same as top logo */

#loader img {
  width: 80px;
  margin-bottom: 26px;
}

/* loading bar */

.loader-bar {
  width: 160px;
  height: 2px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}

.loader-progress {
  height: 100%;
  width: 0%;
  background: white;
  transition: width 0.3s ease;
}


/* =====================================================
   MOBILE ADDITIONS ONLY
===================================================== */

@media (max-width: 768px) {
  .image {
    width: 60px;
  }
}

#mobile-project {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 9000;
  overflow-y: auto;
  padding: 90px 18px 60px;
}

#mobile-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#mobile-stack img {
  width: 100%;
  height: auto;
}

/* Mobile group close button (match panel X) */
#mobile-exit {
  position: fixed;
  top: 14px;
  right: 16px;

  background: none;
  border: none;
  padding: 0;

  color: white;
  font-size: 2.5rem;
  font-weight: 400;
  padding: 6px;

  cursor: pointer;
  opacity: 0.6;

  line-height: 1;

  z-index: 9100;
}

#mobile-exit:hover {
  opacity: 1;
}


/* =====================================================
   MOBILE COLUMN — FORCE NORMAL FLOW
===================================================== */

#mobile-project .image,
#mobile-project img {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;

  display: block;
  width: 100%;
  height: auto;

  margin: 0;
}

/* =====================================================
   MOBILE SCROLL FIX
===================================================== */

#mobile-project {
  touch-action: pan-y;
}

#mobile-project .image,
#mobile-project img {
  touch-action: pan-y !important;
}

/* ===============================
   PROJECT PANEL GRID (TABLE)
   =============================== */

.projects-container {
  display: grid;
  gap: 8px;
  width: 100%;
}

.projects-row {
  display: grid;
  grid-template-columns: 1.7fr 1.6fr 0.5fr .8fr 1.4fr;
  gap: 16px;
  align-items: start;
}

.projects-row > div {
  line-height: 1.4;
}

/* Header style */
.projects-row.header {
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}


/* =====================================
   PROJECT PANEL MOBILE
   Show Project + Year only
===================================== */

@media (max-width: 768px) {

  .projects-row {
    grid-template-columns: 1fr auto;
    column-gap: 36px;  /* ← more space between Project & Year */
    row-gap: 6px;      /* ← keeps vertical spacing tight */
    align-items: baseline;
    padding: 6px 0;
  }

  /* Hide:
     2 = Client
     4 = Location
     5 = Category
  */
  .projects-row > div:nth-child(2),
  .projects-row > div:nth-child(4),
  .projects-row > div:nth-child(5) {
    display: none;
  }

  /* Hide header row */
  .projects-row.header {
    display: none;
  }

  /* Smaller mobile text */
  .projects-row > div,
  .project-btn {
    font-size: 0.9rem;
  }

}

/* ===============================
   PROJECT PANEL BUTTONS
   =============================== */

.project-btn {
  background: none;
  border: none;
  padding: 0;

  color: inherit;
  font: inherit;
  text-align: left;

  cursor: pointer;
}

.project-btn:hover {
  text-decoration: underline;
}