/* Portfolio PAge -------------------------------------------------------------- */
body {
  background-color: #000000 !important;
}


.work-tile {
  text-decoration: none;
  color: inherit;
}

.tile-image {
position: relative;
width: 100%;
height: 45vh;
border-radius: 0px;
overflow: hidden;
box-shadow: 0 0 16px  rgb(0, 0, 0, 0.0);
}

.tile-image-inner,
.tile-video,
.tile-gradient-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .6s ease, transform 1s ease;
z-index: 1;
}

.tile-image-inner {
background-image: url('img/project1.jpg');
background-size: cover;
background-position: center;
}

.tile-gradient-canvas {
z-index: 2;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0;
}

.tile-video {
z-index: 3;
opacity: 0;
}

.tile-image:hover .tile-gradient-canvas,
.tile-image:hover .tile-video {
opacity: 1;
}

.tile-image:hover .tile-image-inner {
opacity: 0;
transform: scale(1.05);
}

/* Tablet breakpoint (max 768px) */
@media (max-width: 768px) {
  .tile-image {
    height: 35vh; /* ✅ fixed height */
  }
}

/* ✅ Only the image scales, container stays the same */
.work-tile:hover .tile-image-inner {
  transform: scale(1.05);
}

.tile-caption {
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 100;
  color: #898989;
  text-align: center;
  transition: color 0.3s ease-in-out;  /* ✅ Add transition */


}


.work-tile:hover .tile-caption {
  color: #ffffff;
  transition: color 0.3s ease-in-out;  /* ✅ Add transition */

}