/* Layout */
.texture-explainer {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
  margin-left: 20px;
}

/* Left side */
.texture-visual {
  flex: 0 0 250px;
  display: flex;
  justify-content: center;
}

/* Right side */
.texture-text {
  align-items: flex-start;
  flex: 1;
  max-width: 500px;
}

/* --- Your 3D stack (cleaned) --- */
.texture-stack {
  position: relative;
  width: 200px;
  height: 200px;
  transform-origin: center center;
  transform: translateY(20px) rotateX(60deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}

.layer {
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
  box-shadow: -5px 5px 15px rgba(0,0,0,0.3);
  border-radius: 8px;
}

.layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Default state (centered around middle) */
.layer-ao     { transform: translateZ(40px); }
.layer-normal { transform: translateZ(20px); }
.layer-smudge { transform: translateZ(0px);}
.layer-albedo { 
  transform: translateZ(-20px);
  image-rendering: pixelated;
}

/* Hover (expand evenly from center) */
.texture-stack:hover .layer-ao     { transform: translateZ(80px); }
.texture-stack:hover .layer-normal { transform: translateZ(40px); }
.texture-stack:hover .layer-smudge { transform: translateZ(0px);}
.texture-stack:hover .layer-albedo { transform: translateZ(-40px); }

.layer::after {
  content: attr(data-label); /* Grabs the t.texture-stack:hoverext from the data-label attribute */
  position: absolute;
  bottom: 8px;               /* Distance from the bottom edge */
  left: 8px;                 /* Distance from the left edge */
  z-index: 10;               /* Ensures it sits on top of the image */
  
  /* Styling to make it readable over images */
  background-color: rgba(0, 0, 0, 0.75); 
  color: #ffffff;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  pointer-events: none;      /* Prevents the text from interfering with mouse interactions */
}


/* Responsive: stack on small screens */
@media (max-width: 700px) {
  .texture-explainer {
    flex-direction: column;
    align-items: normal;
    margin-left: 0px;
  }

  .texture-visual {
    flex: unset;
  }
}