/*scroller.css*/

/* 隱形墊高器：高度由 JS 動態設定（桌機用） */
#scrollerSpacer { width: 1px; height: 0; }

.work-mobile-tag{
  display: none;
  font-size: 1.5rem;
  font-weight: 400;
  color: #D6D6D6;
    opacity: 0;
    animation: fadeIn .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
}

/* 右側捲動容器（桌機固定鋪滿畫面） */
.zoom-scroller{
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;   /* 讓左側可互動 */
  z-index: 0;
  scrollbar-width: none;  /* Firefox */
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
}
.zoom-scroller a { 
  display: contents;
  pointer-events: auto; 
}
.zoom-scroller::-webkit-scrollbar{ display: none; }

/* 讓第一/最後一張也能捲到視窗中央 */
.zoom-list{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 30vh 0;
}

/* 單張容器 */
.zoom-item{ display: block; }

/* 桌機：右貼齊 + 位移 + 縮放 + 實線描邊 */
.zoom-item img{
  display: block;
  margin-left: auto;          /* 右貼齊 */
  height: auto;
  --baseW: 60vmin;
  width: var(--baseW);

  /* 同時支援位移與縮放（JS 會改變這兩個變數） */
  transform: translateX(var(--tx, 0%)) scale(var(--scale, 1));
  transform-origin: right center;

  outline: 6px solid #000;
  outline-offset: -3px;

  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .zoom-item img { transition: none; }
}

/* ============== 手機（≤768px） ============== */
@media (max-width: 768px){
  .work-mobile-tag{
    display: block;
  }

  .zoom-scroller{
    position: static;     /* 不固定，跟著文件正常捲動 */
    inset: auto;
    pointer-events: auto;
    overflow-y: visible;
  }
  .zoom-list{
    padding: 6rem 0;
    gap: 4vh;
    align-items: center;  /* 圖片置中 */
  }

  .zoom-item{
    opacity: 0;
    animation: fadeIn .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
  }

  .zoom-item img{
    margin: 0 auto;                   /* 置中 */
    --baseW: min(92vw, 720px);        /* 放大到接近滿版 */
    outline: none;         /* 虛線描邊（間隔） */
    outline-offset: 0;
    transform-origin: center center;  /* 手機用中心縮放更自然 */
    margin-bottom: 0rem;
    border-radius: 12px;
  }
  #scrollerSpacer{ display: none; }   /* 手機不需要 spacer */

  @keyframes fadeIn {
    from { transform: translateY(10%); opacity: 0; }
    to { transform: translateY(0%); opacity: 1; }
  }
}

/* ===========================
   Mobile Side Nav — 緊湊刻度 + 標籤滑出（覆蓋版）
   =========================== */

:root{
  /* 幾何尺寸（緊湊） */
  --mnav-size:         52px;    /* 導覽總寬 */
  --mnav-icon:         30px;    /* 按鈕外框（更矮） */
  --mnav-icon-h:        15px;    /* 按鈕外框高度（更矮） */
  --mnav-gap:           7px;    /* icon 間距（更緊） */
  --mnav-pad:           4px;    /* rail 上下內距（更緊） */
  --mnav-thumb-pad:     4px;    /* 方匡相對 icon 的邊距 */
  --mnav-thumb-radius: 12px;

  /* 視覺樣式 */
  --mnav-bg:           rgba(0,0,0,0.22);  /* 仍保留變數，但會被透明覆蓋 */
  --mnav-border:       rgba(255,255,255,0.16);
  --mnav-thumb-stroke: #fff;
  --mnav-thumb-shadow: 0 6px 18px rgba(0,0,0,0.25);

  /* 刻度 tick */
  --mnav-tick-w:        78%;
  --mnav-tick-h:         5px;
  --mnav-tick-radius:   99px;
  --mnav-tick-fill:     linear-gradient(180deg,#E8E8E8,#D6D6D6);
  --mnav-tick-stroke:   rgba(0,0,0,0.25);
  --mnav-tick-active:   #ffffff;

  /* 標籤（滑出） */
  --mlabel-width:      132px;   /* 標籤寬度 */
  --mlabel-offset:      10px;   /* 與 nav 的水平間距 */
  --mlabel-pad-x:       12px;   /* 文字左右內距 */
  --mlabel-bg:        rgba(0,0,0,0.82);
  --mlabel-fg:        #fff;
  --mlabel-radius:       0px;   /* 邊緣銳利 */
  --mlabel-fade-w:      14px;   /* 左側漸層透明寬度 */
}

/* 容器：固定在左側中央，只在手機顯示 */
.mobile-side-nav{
  position: fixed;
  left: calc(10px + env(safe-area-inset-left, 0px));
  top: 50%;
  transform: translateY(-50%);
  width: var(--mnav-size);
  z-index: 1900;
  pointer-events: none; /* 外層不吃事件，內層開 */
    opacity: 0;
    animation: fadeIn .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
}

@media (min-width: 769px){
  .mobile-side-nav{ display: none; pointer-events: none; }
}

/* 可滾動的導覽欄（nav-rail 透明處理） */
.mobile-side-nav .nav-rail{
  position: relative;
  width: 100%;
  height: min(50vh, 176px);
  min-height: calc(3 * var(--mnav-icon-h) + 2 * var(--mnav-gap) + 2 * var(--mnav-pad));
  padding: var(--mnav-pad) 0;
  border-radius: 16px;

  /* 透明：只留下方匡與刻度，rail 本身看不見 */
  background: transparent !important;
  border: 1px solid transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;

  pointer-events: auto;       /* 內層可互動 */
  touch-action: pan-y;
  user-select: none;

  /* 隱藏捲動條 */
  scrollbar-width: none;
}
.mobile-side-nav .nav-rail::-webkit-scrollbar{ width: 0; height: 0; display: none; }

/* icon 軌道（更緊） */
.mobile-side-nav .nav-track{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mnav-gap);
  padding: 0;  /* JS 會動態補上下 padding 墊片 */
  margin: 0;
  will-change: scroll-position;
}

/* 每顆 icon（button 更矮更小） */
.mobile-side-nav .nav-icon{
  width: var(--mnav-icon);
  height: var(--mnav-icon-h);
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  transform: none !important;
  outline: none;
  position: relative;
}

/* 刻度 tick：扁且緊湊 */
.mobile-side-nav .icon-dot{
  width: var(--mnav-tick-w);
  height: var(--mnav-tick-h);
  border-radius: var(--mnav-tick-radius);
  background: var(--mnav-tick-fill);
  opacity: .7;
  transition:
    transform 140ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}
.mobile-side-nav .nav-icon.is-active .icon-dot{
  width: calc(var(--mnav-icon) - var(--mnav-thumb-pad));
  height: calc(var(--mnav-icon-h) - var(--mnav-thumb-pad));
  background: var(--mnav-tick-active);
  opacity: 1;
    inset :0 0 0 1px rgba(0,0,0,0.18),
    0 0 14px 2px rgba(237, 237, 237, 0.3);
    transition: transform 180ms ease;
}
.mobile-side-nav .nav-icon:active .icon-dot{ transform: scaleY(1.35) scaleX(1.15); }

/* 固定在中央的方匡（縮小以貼刻度） */
.mobile-side-nav .nav-thumb.fixed{
  position: absolute;
  top: 50%;
  left: calc(50% - (var(--mnav-icon) + 2*var(--mnav-thumb-pad))/2);
  width: calc(var(--mnav-icon) + 2*var(--mnav-thumb-pad));
  height: calc(var(--mnav-icon-h) + 2*var(--mnav-thumb-pad));
  transform: translateY(-50%);
  border-radius: var(--mnav-thumb-radius);
  border: 2px solid var(--mnav-thumb-stroke);
  box-shadow: var(--mnav-thumb-shadow);
  pointer-events: none;
  background: var(--mnav-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);


}

/* ===========================
   類別標籤（滑出/收回）
   =========================== */
/* 標籤根容器：貼在 nav 右側、垂直置中；預設隱藏（向左微移） */
.mobile-side-nav .nav-label{
  position: absolute;
  top: 50%;
  left: calc(100% + var(--mlabel-offset));
  transform: translate(-6px, -50%); /* 初始稍向左，滑出時歸零 */
  width: var(--mlabel-width);
  pointer-events: none;
  opacity: 0;
  transition: transform 200ms ease, opacity 180ms ease;
}
/* 顯示狀態：滑出 + 淡入 */
.mobile-side-nav .nav-label.is-visible{
  transform: translate(0, -50%);
  opacity: 1;
}

/* 只顯示一行（其餘被裁切），左側緣為透明漸層，其餘邊緣銳利 */
.mobile-side-nav .nav-label-viewport{
  position: relative;
  height: var(--mnav-icon);                /* 只展示一行高度 */
  overflow: hidden;
}

/* 文字堆疊：以「單位高度」做位移；平滑上下移動 */
.nav-label-stack{
  position: absolute;
  left: 0; right: 0; top: 50%;
  translate: 0 calc(var(--mlabel-base, 0px)); /* base 由 JS 設定 */
  will-change: transform;
  transition: translate 180ms cubic-bezier(.2,.8,.2,1);
}

/* 單行樣式：與刻度高度一致，左右留白舒適 */
.nav-label-item{
  color: var(--mlabel-fg);
  height: calc(var(--mnav-icon-h) + 10px);        /* 單行視窗高 */
  line-height: var(--mnav-icon-h);
  padding: 0px var(--mlabel-pad-x);
  font-size: 15px;
  letter-spacing: .3px;
  white-space: nowrap;
  user-select: none;
  filter: drop-shadow(0 0 3px rgb(0, 0, 0, 1));
}

/* 深色模式微調 */
@media (prefers-color-scheme: dark){
  :root{
    --mnav-tick-fill: linear-gradient(180deg,#F2F2F2,#E4E4E4);
    --mnav-tick-stroke: rgba(0,0,0,0.35);
  }
}

/* 動畫減量 */
@media (prefers-reduced-motion: reduce){
  .icon-dot{ transition: none; }
  .nav-rail{ scroll-behavior: auto; }
  .nav-label{ transition: none; }
  .nav-label-stack{ transition: none; }
}

/* 超小高度螢幕時再降一點高度 */
@media (max-height: 560px){
  .nav-rail{ height: min(46vh, 160px); }
}