/* 自定義特效 START */
@keyframes playAnimate {
    from { background-position: 0 0; }
    to { background-position: 0 100%; } /* 假设有 4 帧，每帧 100px */
}


@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* 自定義特效 END */




/* 首頁動畫Section START */
.首頁動畫-無限 {
    animation: playAnimate var(--animation-duration, 6s) steps(var(--num-of-frames,20)) infinite;
}

.首頁動畫-單次 {
    animation: playAnimate var(--animation-duration, 6s) steps(var(--num-of-frames,20)) ;
}
/* 首頁動畫Section END */





/* 橫向滑動Section START */
.水平滑動區塊{
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    justify-content: start;
    white-space: nowrap;   /* 避免子元件換行 */
}
.滑塊消失::-webkit-scrollbar {
    display: none;
}
.水平滑動區塊>div{
  flex-shrink: 0; /* 避免子元件寬度壓縮 */
}
.滑塊消失 {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.固定佔滿{
  position:fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99 !important;
}
.橫向滑動顯示{
  opacity:var(--start-opacity,0);
  transition: opacity var(--duration, 1s) ease;
}
.啟用顯示{
  opacity:1
}
.啟用隱藏{
  opacity:0
}
/* 橫向滑動Section END */





/* 平分容器Section START */
.平分容器 {
    display: flex;
    gap:var(--gap,2px);
    flex-direction: row;
}
@media only screen and (max-width: 1023px){
    .平分容器 {
        flex-direction: column;
    }
}
.垂直平分容器 {
    display: flex;
    gap:var(--gap,2px);
    flex-direction: column;
}
.平分物件 {
    flex: var(--unhover-flex-index, 1);;                /* 子元件預設平分寬度 */
    display: flex;
    transition: flex var(--flex-transit-duration, 1s) ease;
}
.平分物件 {
    flex: var(--unhover-flex-index, 1);;                /* 子元件預設平分寬度 */
    display: flex;
    transition: flex var(--flex-transit-duration, 1s) ease;
}

.平分物件:hover {                     /* 當子元件 hover 時，寬度變為 60% */
    flex: var(--flex-index, 6);     /* 代表60%的寬度 */
}

.平分物件 .平分物件:not(:hover) {                     /* 其他非 hover 的元件自動平分剩下的 40% */
    flex: var(--unhover-flex-index, 1);
}
@media only screen and (min-width: 1536px){
  .平分物件 {flex: var(--unhover-flex-index-xxl, var(--unhover-flex-index,1)); }
  .平分物件:hover {flex: var(--flex-index-xxl,var(--flex-index,6)); }
}
@media only screen and (min-width: 1280px) and (max-width: 1535px){
  .平分物件 {flex: var(--unhover-flex-index-xl, var(--unhover-flex-index,1)); }
  .平分物件:hover {flex: var(--flex-index-xl,var(--flex-index,6)); }
}
@media only screen and (min-width: 1024px) and (max-width: 1279px){
  .平分物件 {flex: var(--unhover-flex-index-lg, var(--unhover-flex-index,1)); }
  .平分物件:hover {flex: var(--flex-index-lg,var(--flex-index,6)); }
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
  .平分物件 {flex: var(--unhover-flex-index-md, var(--unhover-flex-index,1)); }
  .平分物件:hover {flex: var(--flex-index-md,var(--flex-index,6)); }
}
@media only screen and (min-width: 640px) and (max-width: 767px){
  .平分物件 {flex: var(--unhover-flex-index-sm, var(--unhover-flex-index,1)); }
  .平分物件:hover {flex: var(--flex-index-sm,var(--flex-index,6)); }
}
@media only screen and (min-width: 390px) and (max-width: 636px){
  .平分物件 {flex: var(--unhover-flex-index-xs, var(--unhover-flex-index,1)); }
  .平分物件:hover {flex: var(--flex-index-xs,var(--flex-index,6)); }
}
@media only screen and (max-width: 389px){
  .平分物件 {flex: var(--unhover-flex-index-xxs, var(--unhover-flex-index,1)); }
  .平分物件:hover {flex: var(--flex-index-xxs,var(--flex-index,6)); }
}
/* 平分容器Section END */










.箭頭 {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--background-color-1, lightgrey ) ;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    z-index: 2;
    margin: 5px;
    transition: all 0.65s ease-in-out;
    position: relative;

}

.箭頭:hover{
    background-color: var(--background-color-2, var(--background-color-1, grey));
}


.箭頭:before {
    content: "";
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    display: block;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
    width: 8px;
    height: 8px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.右箭頭:before {
    transform: translateX(-1px) rotate(-45deg);
}

.左箭頭:before {
    transform: translateX(1px) rotate(135deg);
}


.圓形外誆{
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}




/* 初始狀態：隱藏並偏移 */
.初始狀態 {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  /* 滑動到可視範圍時偏移逐漸復原 */
  .啟用顯示偏移復原 {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  


  
/* 目標類別 */
.跳動物件 {
display: inline-block; /* 避免因為動畫效果影響其他元素布局 */
transition: transform 0.3s ease-in-out; /* 平滑過渡 */
}

.跳動物件:hover {
animation: bounce 0.5s ease-in-out;
}

/* 預設樣式 */
.文字unhover顏色 {
    color: black;
    background-color: transparent;
    transition: all 0.5s ease; 
}

/* 當元素被點擊時改變文字和背景顏色 */
.文字hover顏色 {
    color: white;
    background-color: blue;
    transition: all 0.5s ease;
}

/* 圖片默認平滑處理 */
.圖片抗鋸齒 {
    image-rendering: auto; 
    image-rendering: crisp-edges;
    image-rendering: pixelated;         
    image-rendering: smooth;      
  }

  .確保圖片比例顯示 {
    width: 100%;  /* 確保比例顯示 */
    height: auto;
    }
   

    .exe{

    }
    
    /*1131108雅 測試玩自由調整可變動*/
    .asdfasdf{
        color: red;
    }
    .asdf2{
        color: var(--測試定義雅,red);/*當行內樣式沒有寫 --測試定義雅:XXX; 的時候，可以吃到後面的數值*/
    }
    
    
    
    /*雅1131108 物件漂浮 */
    /*想要固定速率及幅度，就把var()拿掉，只留逗點float 3s和translateY(-10px)*/
    .廚房物件漂浮 {
        position: relative; /* 保證元素可以浮動 */
        animation: var(--漂浮速率,float 3s) ease-in-out infinite; /* 設定漂浮動畫 */
      }
      
      @keyframes float {
        0% {
          transform: translateX(0) translateY(0);
        }
        50% {
          transform: var(--漂浮幅度,translateX(0px) translateY(-10px)); /* 漂浮的高度 */
        }
        100% {
          transform: translateX(0) translateY(0);
        }
      }
    
    
      
      /*1131108雅 背景無限循環平移動畫*/
    .廚房背景無限循環平移 {
         background-repeat: repeat-x; /* 圖片沿 X 軸無縫平鋪 */
         background-position: right center; /* 初始背景位置為右側 */
         animation: moveBackground var(--平移來回時間,180s) linear infinite; /* 動畫設定，180秒內平滑從右至左移動 */
         rotate:var(--旋轉角度,0);
       }
       
       @keyframes moveBackground {
         0% {
           background-position: right center; /* 開始時圖片位置在右側 */
         }
         50% {
           background-position: left center; /* 結束時圖片位置在左側 */
         }
         100% {
          background-position: right center; /* 開始時圖片位置在右側 */
        }
    
       }
    
    
    
       /*1131108雅 圖片旋轉效果*/
    .圖片旋轉 {
          animation: rotateAnimation 90s linear infinite; /* 每 5 秒旋轉一次，並無限循環 */
      }
      
        @keyframes rotateAnimation {
        0% {
          transform: rotate(0deg); /* 開始時圖片角度為 0 */
        }
        100% {
          transform: rotate(360deg); /* 結束時圖片角度為 360 度 */
        }
      }
      
    
      /*1131108雅 葉子煽動效果*/
      /* 旋轉圖片的容器 */
    .葉子煽動效果 {
        animation: rotateRight 5s linear infinite; /* 設置旋轉動畫，每 5 秒無限循環 */
        transform-origin :var(--錨點設置位置, 100% 50%); /* 設置旋轉中心為圖片的右側 */
      }
      
      /* 旋轉動畫 */
      @keyframes rotateRight {
        0% {
          transform: rotate(0deg); 
        }
        25% {
            transform: rotate(5deg); 
          }
        50% {
            transform: rotate(0deg); 
          }  
        75% {
          transform: rotate(-5deg); 
        }
        100% {
            transform: rotate(0deg); 
          }
      }
    
    /*1131113雅 文字按鈕下的線條改變*//* 設定背景圖片的初始狀態 */
    .廚房文字變換 {
      background-position: 50% 23%; /* 初始背景位置 */
      transition: background-position 0s; /* 讓背景位置變化時無過渡效果 */
    }
    
    
    .廚房文字變換:hover {
      background-position: 50% 100%;/* 滑鼠懸停時，背景位置改為 50% 100% */
      transition: background-position 0s;
    }
    
    
    /*1131114雅 圖片忽大忽小  *//* 類別樣式：應用放大縮小動畫 */
    .放大縮小 {
      animation: scale 2s ease-in-out infinite;  /* 動畫持續2秒，平滑過渡，無限循環 */
    }
    /* 定義放大縮小的動畫 */
    @keyframes scale {
      0% {
        transform: scale(1);  /* 開始時原始大小 */
      }
      50% {
        transform: scale(2);  /* 放大到兩倍 */
      }
      100% {
        transform: scale(1);  /* 恢復原始大小 */
      }
    }
    
    /*1131126雅 copy 瑛*/
    .啟用隱藏{
      opacity:0
      /*visibility hidden;*/
    }
    .按鈕啟用隱藏{
      opacity:0
    } 
.頁面{
  /* overflow: hidden; */
  overflow-x: hidden;
}


/*1131224雅II*/
.單行文字{
  white-space: nowrap;
} 

/*1131225雅II*/
.文字左右對齊{
  text-align: justify;
}

/*1131226雅II*/
.懸浮圖片放大:hover {
  transform: 
  opacity 0.8; 
  transform: scale(1.1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/*物件消失並且不佔空間、不能點擊*/
.啟用消失{
  visibility: hidden;
  }
.按鈕啟用消失{
  visibility: hidden;
  }

.轉場漸入{
  transition: var(--漸入速度, visibility 0.5s ease-in-out);
} 

.淡入效果 {
  opacity: 0;
  animation: opacity 3s ease-in-out;
}

@keyframes opacity {
  0% {
    transform: opacity 0 ;
  }
  100% {
    transform: opacity 1 ;
  }
}

/* 當進入可視範圍時：透明度變成 1 */
.滑動出現 {
  opacity: 1;
  transition: opacity 1s ease;
}