.models-panel{
  position: relative;
  overflow: visible;
}

#models{
  display: block;
  width: 100%;
}

.models-head{
  margin-bottom: 5rem;
}

.model-project{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;

  margin-bottom: 7rem;
  padding: 2.5rem;

  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(20,25,40,0.88),
      rgba(10,12,20,0.92)
    );

  backdrop-filter: blur(12px);
}

.model-project.reverse{
  grid-template-columns: 1.2fr 1fr;
}

.model-project.reverse .project-info{
  order: 2;
}

.model-project.reverse .project-gallery{
  order: 1;
}

.project-label{
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.45rem 0.9rem;

  border-radius: 999px;

  background: rgba(255,140,0,0.12);
  border: 1px solid rgba(255,140,0,0.25);

  color: #ffb14a;

  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-info h3{
  font-size: clamp(2rem,4vw,3rem);
  line-height: 1.1;

  margin-bottom: 1.5rem;

  color: white;
}

.project-info p{
  color: rgba(255,255,255,0.72);
  line-height: 1.8;

  margin-bottom: 1.3rem;
}

.project-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  margin-top: 2rem;
}

.project-tags span{
  padding: 0.7rem 1rem;

  border-radius: 999px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
}

.project-gallery{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1rem;
}

.project-gallery img{
  width: 100%;
  height: 230px;

  object-fit: cover;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);

  cursor: zoom-in;

  transition:
    transform 0.35s ease,
    filter 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.project-gallery img:hover{
  transform: scale(1.03);

  filter: brightness(1.08);

  border-color: rgba(80,130,255,0.3);

  box-shadow:
    0 0 30px rgba(50,100,255,0.18);
}

/* ========================= */
/* ROTATED SABER IMAGES */
/* ========================= */

.saber-gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.saber-thumb{
  position: relative;

  width: 100%;
  height: 170px;

  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.08),
      rgba(0,0,0,0.28)
    );

  cursor: zoom-in;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.saber-thumb:hover{
  border-color: rgba(80,130,255,0.3);

  box-shadow:
    0 0 30px rgba(50,100,255,0.16);
}

.saber-thumb img{
  position: absolute;

  left: 50%;
  top: 50%;

  width: 180px;
  height: 560px;

  object-fit: contain;

  transform:
    translate(-50%, -50%)
    rotate(90deg) !important;

  transition: none !important;
  animation: none !important;
  filter: none !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;
}

/* ========================= */
/* LIGHTBOX */
/* ========================= */

.model-lightbox{
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 2rem;

  background: rgba(2,6,16,0.92);

  backdrop-filter: blur(18px);
}

.model-lightbox.active{
  display: flex;
}

.model-lightbox img{
  max-width: 92vw;
  max-height: 86vh;

  object-fit: contain;

  transform: none !important;

  border-radius: 22px;

  border: 1px solid rgba(255,255,255,0.16);

  box-shadow:
    0 0 90px rgba(50,100,255,0.28);

  background: rgba(0,0,0,0.35);
}

.model-lightbox-close{
  position: fixed;

  top: 1.5rem;
  right: 1.5rem;

  width: 48px;
  height: 48px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.2);

  background: rgba(255,255,255,0.08);

  color: white;
  font-size: 2rem;

  cursor: pointer;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 1100px){

  .model-project,
  .model-project.reverse{
    grid-template-columns: 1fr;
  }

  .model-project.reverse .project-info,
  .model-project.reverse .project-gallery{
    order: unset;
  }

}

@media (max-width: 768px){

  #models,
  .models-panel,
  .model-project{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .models-panel{
    overflow: visible !important;
  }

  .model-project{
    padding: 1.5rem;
    gap: 2rem;

    margin-bottom: 4rem;
  }

  .project-gallery{
    grid-template-columns: 1fr;
  }

  .project-gallery img{
    height: 220px;
  }

  .saber-thumb{
    height: 140px;
  }

  .saber-thumb img{
    width: 150px;
    height: 440px;
  }

}

/* FORCE 3D SECTION TO SHOW ON MOBILE */
@media (max-width: 768px){

  #models-section,
  #models,
  .models-panel,
  .model-project,
  .reveal{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
  }

}