/*------------------------------------------
首頁作品列表的css代碼
------------------------------------------*/

/*--------------------- 結構區 ----------------------*/
.workslist-img {
    opacity: 0;
    transition: opacity 0.5s ease;
    transform: translate(-50%, -50%); /* 讓圖片置中 */
    clip-path: inset(0 0 100% 0); /* ✅ 初始遮罩 */
    transition: clip-path 0.5s ease, opacity 0.5s ease; /* ✅ 加入 clip-path 的 transition */
  }
  
  .workslist-title {
    color: #c2bfbc;
    transition: color 0.5s ease-in-out;
  }
  
  
  /*--------------------- 狀態區 ----------------------*/
     .workslist-title:hover {
      color: #131415;
      transition: color 0.3s ease-in-out;
    }
    .workslist-title.active {
      color: #ff4f00;  
      font-weight: bold;
      transition: color 0.3s ease-in-out;
    }
  
  
  /*--------------------- 動畫區 ----------------------*/
  
  /* 圖片遮罩效果 */
  .workslist-img .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), transparent);
    transform: translateY(-100%);
  }
  
  .workslist-item:hover .workslist-img {
      opacity: 1 !important;
      clip-path: inset(0 0 0 0); /* ✅ 移除遮罩 */
  }
  
  /* 滾動吸附效果 */
  /*.home-sidebar-works {
    scroll-snap-type: y mandatory;
  }
  
  .workslist-item {
    scroll-snap-align: center;
  }*/

/* ------------------ RWD -------------------- */
@media (max-width: 991px) {
  .workslist-name,
  .workslist-year {
    color: #fff;
  }

  .workslist-title {
    background-color: #cdbca2;
  }

  .workslist-img {
    opacity: 1 !important; /* 讓圖片在小螢幕上直接顯示 */
    clip-path: inset(0 0 0 0); /* ✅ 取消遮罩 */
    transition: none; /* 移除 hover 過渡效果 */
  }

  .workslist-item:hover .workslist-img {
    opacity: 1 !important; /* 取消 hover 影響 */
    clip-path: inset(0 0 0 0);
  }


}