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

:root{
  --bg: #000;
  --text: #fff;
  --muted: #bdbdbd;
  --container: 1200px; /* tuned for standard computer screens */
  --max-content-width: 1000px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px; /* base for desktop */
}

.container{
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding:3rem 2rem; /* comfortable desktop padding */
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:flex-start;
}

/* Simple layout elements */
.site-header{margin-bottom:1rem}
.site-title{font-size:2rem;font-weight:700}

/* Content width for reading on larger screens */
.content{
  max-width:var(--max-content-width);
  width:100%;
}

.lead{
  color:var(--muted);
  font-size:1.125rem;
  margin-top:0.5rem;
}

/* Footer */
.site-footer{
  margin-top:3rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.04);
  color:var(--muted);
  text-align:center;
  font-size:0.95rem;
  width:100%;
}

/* Tweak for larger screens */
@media (min-width:1200px){
  .container{ padding-left:4rem; padding-right:4rem; }
  .site-title{font-size:2.25rem}
  .lead{font-size:1.125rem}
}

/* Small screens fallback */
@media (max-width:799px){
  body{font-size:15px}
  .container{padding:1.5rem}
  .site-title{font-size:1.5rem}
}
/* === FOREST SCENE SECTION === */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh; /* full screen hero */
  overflow: hidden;
  background-color: var(--bg);
  perspective: 1000px;
}

/* Base image styling for forest assets */
.scene img {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  image-rendering: auto;
}

/* Forest floor placement */
.forestFloor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

/* Left wall */
.wallLeft {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh; /* Use viewport height for width */
  height: auto;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%); /* Rotate and position */
  z-index: 0;
}

/* Right wall */
.wallRight {
  position: absolute;
  top: 0;
  right: 0;
  width: 100vh; /* Use viewport height for width */
  height: auto;
  transform-origin: top right;
  transform: rotate(-90deg) translateY(-100%); /* Rotate and position */
  z-index: 0;
}

/* Logo styles */
.logo-link {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 10;
  transition: opacity 0.2s ease;
}

.logo-link:hover {
  opacity: 0.8;
}

.logo {
  width: 120px; /* Adjust size as needed */
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .logo-link {
    top: 1rem;
    left: 1rem;
  }
  .logo {
    width: 90px; /* Smaller on mobile */
  }
}

/* === PROJECT GALLERY SECTION === */
.project-gallery {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    display: flex;
    gap: 6rem; /* Increased gap between items */
    overflow-x: auto;
    padding: 0 calc(50% - 800px); /* Adjusted padding to account for larger gaps */
    -webkit-overflow-scrolling: touch;
    z-index: 10;
}

/* Project Items */
.project-item {
    flex: 0 0 500px; /* Increased base size */
    height: auto;
    position: relative;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Special size for Project Two */
.project-item:nth-child(2) {
    flex: 0 0 400px; /* Original size */
    transform-origin: center;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.3));
}

/* Update mask for new sizes */
.project-gallery {
    -ms-overflow-style: none;
    scrollbar-width: none;
    mask-image: linear-gradient(
        to right,
        black 0%,
        black calc(100% - 500px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        black 0%,
        black calc(100% - 500px),
        transparent 100%
    );
}

.project-gallery::-webkit-scrollbar {
    display: none;
}

/* Hover effect */
.project-item:hover {
    transform: translateY(-10px);
}

.project-title {
    font-family: Menlo, monospace;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-align: center;
    margin-top: 1rem;
}