/* page + navbar */
body { background:#212121; color:#FBFCFF; }


#hamburger div{
    background-color: #FBFCFF;
}

.logo {
    color: #FBFCFF
}

.navbar {
  background-color: #212121;
}

.logo:hover {
    color: #9BC13B;
}

/* --- STACK section --- */
.stack{
  position: relative;
  /* Height is set by JS to: (tiles + 1) * 100vh so we get one step per viewport */
}

.stack-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Centered hero title */
.stack-title{
  position: absolute;
  inset: 0;
  display:grid;
  place-items:center;
  margin:0;
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  letter-spacing:.02em;
  text-transform: uppercase;
  color:#FBFCFF;
  font-size: clamp(3rem, 16vw, 18rem);
  line-height:.9;
  transition: opacity .4s ease, transform .4s ease;
  pointer-events:none;
  z-index: 1;  /* above the tiles */
}

/* Stage holds the stack of images, centered */
.stack-stage{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none; /* images are decorative in this step */
  z-index: 2;
}

/* Tiles: start below view, overlap in the center */
.stack-tile{
  position: absolute;
  width: min(70vmin, 760px);
  height: auto;
  aspect-ratio: 1 / 1;        /* squares feel like posters; change if needed */
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  background-color: #FBFCFF;
  transform-origin: 50% 50%;
  /* start position: centered but BELOW the view a bit, with per-tile rotation */
  transform: translate(-50%, calc(50vh + 42vmin)) rotate(var(--rot, 0deg)) scale(.98);
  left: 50%;
  top: 50%;
  opacity: 0;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}

.tile-3 {
  object-fit: contain;
  padding-right: 10px;
  padding-bottom: 10px;
}

/* When revealed */
.stack-tile.is-visible{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
}

/* While tiles are revealing, fade/scale title slightly */
.stack-title.is-progress{
  opacity:.18;
  transform: scale(.96);
}

/* Mobile: make tiles a bit smaller and speeds snappier */
@media (max-width: 768px){
  /* Disable sticky/pinned behaviour on small screens and allow normal flow */
  .stack-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding-top: 80%;
  }

  /* Make title flow with the page and scale down slightly */
  .stack-title {
    position: relative;
    font-size: clamp(2rem, 12vw, 6rem);
    padding: 1.25rem;
    opacity: 1;
    transform: none;
  }

  /* Stack tiles vertically, center them, and ensure they're visible */
  .stack-stage {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 2rem;
    padding-top: 80% !important;
    pointer-events: auto;
    z-index: auto;
  }

  .stack-tile {
    position: relative;
    left: auto;
    top: auto;
    width: min(86vmin, 520px);
    margin: 0.5rem 0;
    transform: none !important;          /* ignore the desktop "start below" transform */
    opacity: 1 !important;               /* ensure visible even before JS toggles */
    transition: transform .45s ease, opacity .3s ease;
    transform-origin: 50% 50%;
  }

  .stack-tile.is-visible {
    /* visible state is same — but keep it stable on mobile */
    transform: none !important;
    opacity: 1 !important;
  }
}

/* MOBILE: center title, stack tiles vertically */
@media (max-width: 768px){

  /* 1) turn OFF sticky for mobile so content can flow */
  .stack-sticky{
    position: static;
    height: auto;
    overflow: visible;
  }

  /* 2) centered hero heading as a normal block */
  .stack-title{
    position: relative;
    inset: auto;
    display: grid;
    place-items: center;
    text-align: center;
    margin: 12svh 0 4svh;                /* centers nicely on first screen */
    font-size: clamp(2.6rem, 18vw, 6.5rem);
    line-height: .92;
    opacity: 1;
    transform: none;
  }
  .stack-title.is-progress{ opacity: 1; transform: none; } /* no fade on mobile */

  /* 3) tiles follow *after* the title, stacked */
  .stack-stage{
    position: static;                     /* was absolute */
    padding-top: 0;                       /* remove the big top padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    pointer-events: auto;
    z-index: auto;
  }

  /* 4) tiles size + visibility */
  .stack-tile{
    position: relative;
    left: auto;
    top: auto;
    width: min(92vw, 520px);
    height: auto;
    margin: 0.5rem 0;
    transform: none !important;           /* kill desktop translate/rotate */
    opacity: 1 !important;
    transition: transform .3s ease, opacity .2s ease;
  }
  .stack-tile.is-visible{
    transform: none !important;
    opacity: 1 !important;
  }


  .browse-projects .mobile-only {
        display: block;
        font-size: 2rem;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
        width: 100%;
        color: #212121;
        padding-left: 0 !important;
        padding-right: 0;
        border-radius: 0;
    }

    .browse-projects .mobile-only:hover {
        color: #9BC13B;
        text-decoration: none;
        cursor: pointer;
    }

    .browse-projects {
        justify-content: center;
        text-align: center;
        margin-top: 10rem;
        margin-bottom: 8rem;
        width: 100vw;
        background: #FBFCFF;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 1.5rem 1rem;
        z-index: 1;
    }

    /* .promo-card {
      padding-top: 5rem;
      padding-bottom: 5rem;
    } */
}