/* =========================================================
   Saola Dashboard Core CSS
   Version: 1.1 Core Only

   用途：
   這份 CSS 只放「saola-dashboard-core-v1.1-menu-pager.js」會用到的核心樣式。
   適合從 Saola 原本的大 CSS 區塊獨立出來管理。

   包含：
   1. Tab / Target / Gallery 顯隱與切換動畫
   2. Active 狀態輔助顯示
   3. Equipment Flow 設備卡片與詳情 Gallery
   4. Reveal Layer 局部浮層
   5. Hover Layer 滑過切換顯示
   6. Menu Pager 長選單分頁

   不包含：
   - body 背景
   - 一般 PNG 發光
   - nav arrow
   - cloud / lens flare / city loop
   - glass panel / sun glow
   - 專案客製視覺特效
========================================================= */

/* =========================================================
   01. Dashboard 共用變數
========================================================= */
:root {
  --equipment-layer-in-time: 0.8s;
  --equipment-layer-out-time: 0.6s;
  --equipment-gallery-in-time: 1.2s;
  --equipment-gallery-out-time: 0.9s;
  --equipment-hover-time: 0.36s;
  --equipment-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   02. Tab System：ctrl-btn / target-div / gallery-div
   對應 JS：setupTabs()
========================================================= */
.ctrl-btn,
.ctrl-btn * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.ctrl-btn {
  transition: all 0.3s ease !important;
}

.ctrl-btn.active {
  z-index: 10 !important;
}

/* 隱藏非 active 的頁面 */
.target-div:not(.active):not(.is-exiting),
.gallery-div:not(.active):not(.is-exiting) {
  display: none !important;
}

/* 退場期間仍保持顯示，動畫才看得到 */
.target-div.is-exiting,
.gallery-div.is-exiting {
  display: block !important;
  pointer-events: none !important;
}

/* 預設進退場動畫 */
.target-div.active,
.gallery-div.active {
  display: block !important;
  animation: saolaDashboardFadeSlideIn 0.8s ease-out forwards;
}

.target-div.is-exiting,
.gallery-div.is-exiting {
  animation: saolaDashboardFadeSlideOut 0.5s ease-in forwards !important;
}

@keyframes saolaDashboardFadeSlideIn {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes saolaDashboardFadeSlideOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-15px); }
}

/* =========================================================
   03. Tab / Gallery 動畫庫
   使用方法：在 target-div 或 gallery-div 追加 anim-xxx
========================================================= */

/* 純淡入淡出：anim-fade */
.target-div.anim-fade.active,
.gallery-div.anim-fade.active {
  animation: saolaDashboardPureFadeIn 0.6s ease forwards;
}

.target-div.anim-fade.is-exiting,
.gallery-div.anim-fade.is-exiting {
  animation: saolaDashboardPureFadeOut 0.4s ease forwards !important;
}

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

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

/* 彈性縮放：anim-zoom */
.target-div.anim-zoom.active,
.gallery-div.anim-zoom.active {
  animation: saolaDashboardZoomIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.target-div.anim-zoom.is-exiting,
.gallery-div.anim-zoom.is-exiting {
  animation: saolaDashboardZoomOut 0.3s ease-in forwards !important;
}

@keyframes saolaDashboardZoomIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes saolaDashboardZoomOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* 從右進、往左出：anim-slide-left */
.target-div.anim-slide-left.active,
.gallery-div.anim-slide-left.active {
  animation: saolaDashboardSlideLeftIn 0.6s ease-out forwards;
}

.target-div.anim-slide-left.is-exiting,
.gallery-div.anim-slide-left.is-exiting {
  animation: saolaDashboardSlideLeftOut 0.4s ease-in forwards !important;
}

@keyframes saolaDashboardSlideLeftIn {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes saolaDashboardSlideLeftOut {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-40px); }
}

/* 從左進、往右出：anim-slide-right */
.target-div.anim-slide-right.active,
.gallery-div.anim-slide-right.active {
  animation: saolaDashboardSlideRightIn 0.6s ease-out forwards;
}

.target-div.anim-slide-right.is-exiting,
.gallery-div.anim-slide-right.is-exiting {
  animation: saolaDashboardSlideRightOut 0.4s ease-in forwards !important;
}

@keyframes saolaDashboardSlideRightIn {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes saolaDashboardSlideRightOut {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(40px); }
}

/* 從下往上：anim-slide-up */
.target-div.anim-slide-up.active,
.gallery-div.anim-slide-up.active {
  animation: saolaDashboardSlideUpIn 0.6s ease-out forwards;
}

.target-div.anim-slide-up.is-exiting,
.gallery-div.anim-slide-up.is-exiting {
  animation: saolaDashboardSlideUpOut 0.4s ease-in forwards !important;
}

@keyframes saolaDashboardSlideUpIn {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes saolaDashboardSlideUpOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* 區塊擦除：anim-wipe-block */
.target-div.anim-wipe-block.active,
.gallery-div.anim-wipe-block.active {
  animation: saolaDashboardWipeBlockIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.target-div.anim-wipe-block.is-exiting,
.gallery-div.anim-wipe-block.is-exiting {
  animation: saolaDashboardWipeBlockOut 0.4s ease forwards !important;
}

@keyframes saolaDashboardWipeBlockIn {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  10% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes saolaDashboardWipeBlockOut {
  0% { opacity: 1; clip-path: inset(0 0 0 0); }
  90% { opacity: 1; }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

/* 圓形光圈：anim-circle */
.target-div.anim-circle.active,
.gallery-div.anim-circle.active {
  animation: saolaDashboardCircleIn 0.8s ease-out forwards;
}

.target-div.anim-circle.is-exiting,
.gallery-div.anim-circle.is-exiting {
  animation: saolaDashboardCircleOut 0.5s ease-in forwards !important;
}

@keyframes saolaDashboardCircleIn {
  0% { opacity: 0; clip-path: circle(0% at 50% 50%); transform: scale(0.95); }
  10% { opacity: 1; }
  100% { opacity: 1; clip-path: circle(150% at 50% 50%); transform: scale(1); }
}

@keyframes saolaDashboardCircleOut {
  0% { opacity: 1; clip-path: circle(150% at 50% 50%); }
  90% { opacity: 1; }
  100% { opacity: 0; clip-path: circle(0% at 50% 50%); }
}

/* 模糊消散：anim-dissolve */
.target-div.anim-dissolve.active,
.gallery-div.anim-dissolve.active {
  animation: saolaDashboardDissolveIn 0.8s ease-out forwards;
}

.target-div.anim-dissolve.is-exiting,
.gallery-div.anim-dissolve.is-exiting {
  animation: saolaDashboardDissolveOut 0.6s ease-in forwards !important;
}

@keyframes saolaDashboardDissolveIn {
  0% { opacity: 0; filter: blur(15px); transform: scale(1.1); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes saolaDashboardDissolveOut {
  0% { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(15px); transform: scale(0.9); }
}

/* 無動畫：no-fade */
.target-div.no-fade.active,
.gallery-div.no-fade.active,
.target-div.active.no-fade,
.gallery-div.active.no-fade {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.target-div.no-fade.is-exiting,
.gallery-div.no-fade.is-exiting {
  animation: none !important;
  display: none !important;
}

/* =========================================================
   04. Active 狀態輔助顯示
   常用於 ctrl-btn 或 equipment-card 內部的亮起圖層
========================================================= */
.active-only-show {
  display: none !important;
}

.ctrl-btn.active .active-only-show,
.equipment-card.active .active-only-show {
  display: block !important;
  animation: saolaDashboardStateFadeIn 0.3s ease-out forwards;
}

.ctrl-always-show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.active-hidden {
  display: block !important;
}

.ctrl-btn.active .active-hidden {
  display: none !important;
}

@keyframes saolaDashboardStateFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* =========================================================
   05. Equipment Flow：設備總覽 / 詳情 Gallery
   對應 JS：setupEquipmentFlows()
========================================================= */
.equipment-list-layer {
  display: none !important;
  opacity: 0;
  pointer-events: none !important;
}

.equipment-list-layer.active {
  display: block !important;
  pointer-events: auto !important;
  animation: saolaEquipmentListIn var(--equipment-layer-in-time) ease-out forwards;
}

.equipment-list-layer.is-exiting {
  display: block !important;
  pointer-events: none !important;
  animation: saolaEquipmentListOut var(--equipment-layer-out-time) ease-in forwards;
}

.equipment-detail-layer {
  display: none !important;
  opacity: 0;
  pointer-events: none !important;
}

.equipment-detail-layer.active {
  display: block !important;
  pointer-events: auto !important;
  animation: saolaEquipmentDetailLayerIn var(--equipment-layer-in-time) ease-out forwards;
}

.equipment-detail-layer.is-exiting {
  display: block !important;
  pointer-events: none !important;
  animation: saolaEquipmentDetailLayerOut var(--equipment-layer-out-time) ease-in forwards;
}

.equipment-detail.gallery-div {
  display: none !important;
  opacity: 0;
  pointer-events: none !important;
}

.equipment-detail.gallery-div.active {
  display: block !important;
  pointer-events: auto !important;
  animation: saolaEquipmentGalleryIn var(--equipment-gallery-in-time) ease-out forwards;
}

.equipment-detail.gallery-div.is-exiting {
  display: block !important;
  pointer-events: none !important;
  animation: saolaEquipmentGalleryOut var(--equipment-gallery-out-time) ease-in forwards;
}

.equipment-card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;

  /*
    不動 Saola 原本的 transform。
    Hover 位移改用獨立屬性。
  */
  translate: 0 0;
  scale: 1;

  transition:
    translate var(--equipment-hover-time) var(--equipment-hover-ease),
    scale var(--equipment-hover-time) var(--equipment-hover-ease),
    filter var(--equipment-hover-time) ease,
    opacity var(--equipment-hover-time) ease;

  will-change: translate, scale, filter;
}

.equipment-card:hover {
  translate: 0 -10px;
  scale: 1.012;

  filter:
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.18))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
}

/* 常見 Saola 卡片結構：第 2 個直接子層是 + 按鈕 */
.equipment-card > div:nth-child(2) {
  transform-origin: center center;
  transform: scale(1) rotate(0deg);
  transition:
    transform 0.34s var(--equipment-hover-ease),
    filter 0.34s ease;
  will-change: transform, filter;
}

.equipment-card:hover > div:nth-child(2) {
  animation: saolaEquipmentPlusSpinZoom 0.52s var(--equipment-hover-ease) forwards;
  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.22))
    drop-shadow(0 2px 3px rgba(255, 255, 255, 0.28));
}

/* 常見 Saola 卡片結構：第 3 個直接子層是產品圖 */
.equipment-card > div:nth-child(3) {
  transform-origin: center center;
  transition:
    transform 0.38s var(--equipment-hover-ease),
    filter 0.38s ease;
  will-change: transform, filter;
}

.equipment-card:hover > div:nth-child(3) {
  transform: scale(1.035);
  filter: brightness(1.04) contrast(1.03);
}

/* 常見 Saola 卡片結構：第 4 個直接子層是文字 */
.equipment-card > div:nth-child(4) {
  transition:
    transform 0.34s var(--equipment-hover-ease),
    opacity 0.34s ease;
  will-change: transform, opacity;
}

.equipment-card:hover > div:nth-child(4) {
  transform: translateY(-2px);
}

.ctrl-left,
.ctrl-left *,
.ctrl-right,
.ctrl-right * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.equipment-gallery-back,
.equipment-gallery-back *,
.equipment-back-area,
.equipment-back-area *,
.back-to-equipment-list,
.back-to-equipment-list * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.tab-counter-text {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes saolaEquipmentListIn {
  0% { opacity: 0; transform: translateY(24px) scale(0.98); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes saolaEquipmentListOut {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-18px) scale(0.98); filter: blur(6px); }
}

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

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

@keyframes saolaEquipmentGalleryIn {
  0% { opacity: 0; transform: translateX(45px); filter: blur(4px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes saolaEquipmentGalleryOut {
  0% { opacity: 1; transform: translateX(0); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-45px); filter: blur(4px); }
}

@keyframes saolaEquipmentPlusSpinZoom {
  0% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.36) rotate(0deg); }
  72% { transform: scale(1.14) rotate(0deg); }
  100% { transform: scale(1.18) rotate(0deg); }
}

/* Fix：Equipment Detail 不要整片蓋住外層選單 */
.equipment-detail-layer.active {
  pointer-events: none !important;
}

.equipment-detail.gallery-div,
.equipment-detail.gallery-div * {
  pointer-events: none !important;
}

.equipment-detail-layer .ctrl-left,
.equipment-detail-layer .ctrl-left *,
.equipment-detail-layer .ctrl-right,
.equipment-detail-layer .ctrl-right *,
.equipment-detail-layer .equipment-gallery-back,
.equipment-detail-layer .equipment-gallery-back *,
.equipment-detail-layer .equipment-back-area,
.equipment-detail-layer .equipment-back-area *,
.equipment-detail-layer .back-to-equipment-list,
.equipment-detail-layer .back-to-equipment-list * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* =========================================================
   06. Reveal Layer：局部浮層
   對應 JS：setupRevealLayers()
========================================================= */
.reveal-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(16px) scale(0.985);
}

.reveal-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  animation: saolaRevealPanelIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-panel.is-exiting {
  opacity: 0;
  visibility: visible;
  pointer-events: none !important;
  animation: saolaRevealPanelOut 280ms ease both;
}

.reveal-btn,
.reveal-btn *,
.reveal-close,
.reveal-close *,
.reveal-bg-close,
.reveal-bg-close *,
.reveal-click-back,
.reveal-click-back * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Reveal 在 equipment-detail 裡面時仍可操作 */
.equipment-detail.gallery-div .reveal-panel.active,
.equipment-detail.gallery-div .reveal-panel.active *,
.equipment-detail-layer .reveal-panel.active,
.equipment-detail-layer .reveal-panel.active *,
.equipment-detail.gallery-div .reveal-btn,
.equipment-detail.gallery-div .reveal-btn *,
.equipment-detail-layer .reveal-btn,
.equipment-detail-layer .reveal-btn *,
.equipment-detail.gallery-div .reveal-click-back,
.equipment-detail.gallery-div .reveal-click-back *,
.equipment-detail-layer .reveal-click-back,
.equipment-detail-layer .reveal-click-back * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.reveal-panel.reveal-pop.active {
  animation: saolaRevealPopIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-panel.reveal-pop.is-exiting {
  animation: saolaRevealPopOut 260ms ease both;
}

@keyframes saolaRevealPanelIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes saolaRevealPanelOut {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(12px) scale(0.985); filter: blur(3px); }
}

@keyframes saolaRevealPopIn {
  0% { opacity: 0; transform: scale(0.92); filter: blur(5px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes saolaRevealPopOut {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.94); filter: blur(4px); }
}

/* =========================================================
   07. Hover Layer：滑過切換顯示
   對應 JS：setupHoverLayers()
========================================================= */
.hover-btn,
.hover-btn * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.hover-panel {
  opacity: 0;
  pointer-events: none !important;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.hover-panel.active {
  opacity: 1;
  pointer-events: auto !important;
  visibility: visible;
  transform: translateY(0);
}

/* Hover Button 雙狀態顯示：hover-off / hover-on */
.hover-btn .hover-off,
.hover-btn .hover-on {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.hover-btn .hover-off {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hover-btn .hover-on {
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}

.hover-btn:hover .hover-on,
.hover-btn.active .hover-on {
  opacity: 1;
  visibility: visible;
}

.hover-btn:hover .hover-off,
.hover-btn.active .hover-off {
  opacity: 0;
  visibility: hidden;
}

/* =========================================================
   08. Menu Pager：長選單分頁
   對應 JS：setupMenuPagers()
========================================================= */
.menu-pager .menu-page {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(10px);
  will-change: opacity, transform, filter;
}

.menu-pager .menu-page.active,
.menu-pager .menu-page.is-exiting {
  visibility: visible;
}

.menu-pager .menu-page.active {
  opacity: 1;
  pointer-events: auto !important;
  animation: saolaMenuPageInFromBottom 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.menu-pager .menu-page.is-exiting {
  pointer-events: none !important;
  animation: saolaMenuPageOutToTop 0.32s cubic-bezier(0.55, 0, 1, 0.45) both;
}

.menu-pager.menu-dir-prev .menu-page.active {
  animation-name: saolaMenuPageInFromTop;
}

.menu-pager.menu-dir-prev .menu-page.is-exiting {
  animation-name: saolaMenuPageOutToBottom;
}

.menu-page-next,
.menu-page-prev,
.menu-page-toggle,
.menu-next,
.menu-prev,
.menu-toggle,
.menu-page-dot,
.menu-dot {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.menu-page-next.disabled,
.menu-page-prev.disabled,
.menu-next.disabled,
.menu-prev.disabled {
  opacity: 0.25;
  pointer-events: none !important;
}

.menu-page-dot,
.menu-dot {
  opacity: 0.35;
}

.menu-page-dot.active,
.menu-dot.active {
  opacity: 1;
}

@keyframes saolaMenuPageInFromBottom {
  from { opacity: 0; transform: translateY(22px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes saolaMenuPageOutToTop {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-18px); filter: blur(2px); }
}

@keyframes saolaMenuPageInFromTop {
  from { opacity: 0; transform: translateY(-22px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes saolaMenuPageOutToBottom {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(18px); filter: blur(2px); }
}

/* =========================================================
   09. Method Flow Final Animation Pack
   工法內頁安全動畫組：避免雙層 transform 造成怪異加速

   使用方式：
   外層 target-div 加上：
   target-div family-main bind-m01 equipment-flow method-flow method-anim-up

   可選：
   - method-anim-up      穩重上浮
   - method-anim-fade    乾淨淡入
   - method-anim-wipe    科技切換
   - method-anim-zoom    展示縮放

   重點：
   1. 保留 equipment-flow 的 NEXT / PREV / counter。
   2. 關閉 equipment-detail-layer 自己的動畫。
   3. 內層動畫全部使用 target-div 節奏：0.8s / 0.5s。
   4. 內層位移非常小，避免和外層 target-div 疊加產生加速感。
========================================================= */

/* 關掉 equipment-detail-layer 自己的動畫干擾 */
.method-flow[class*="method-anim-"] .equipment-detail-layer.active,
.method-flow.method-inner-fade .equipment-detail-layer.active {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ---------------------------------------------------------
   A. 穩重上浮
   很小的 Y 位移，避免雙層 transform 加速
--------------------------------------------------------- */
.method-flow.method-anim-up .equipment-detail.gallery-div.active,
.method-flow.method-inner-fade .equipment-detail.gallery-div.active {
  animation: methodSafeUpIn 0.8s ease-out forwards !important;
}

.method-flow.method-anim-up .equipment-detail.gallery-div.is-exiting,
.method-flow.method-inner-fade .equipment-detail.gallery-div.is-exiting {
  animation: methodSafeUpOut 0.5s ease-in forwards !important;
}

@keyframes methodSafeUpIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(1.5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes methodSafeUpOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(1px);
  }
}

/* ---------------------------------------------------------
   B. 乾淨淡入
   完全不位移，最穩、最不容易出錯
--------------------------------------------------------- */
.method-flow.method-anim-fade .equipment-detail.gallery-div.active {
  animation: methodSafeFadeIn 0.8s ease-out forwards !important;
}

.method-flow.method-anim-fade .equipment-detail.gallery-div.is-exiting {
  animation: methodSafeFadeOut 0.5s ease-in forwards !important;
}

@keyframes methodSafeFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes methodSafeFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   C. 科技切換
   用 clip-path 做擦除，不使用 transform，避免加速感
--------------------------------------------------------- */
.method-flow.method-anim-wipe .equipment-detail.gallery-div.active {
  animation: methodSafeWipeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.method-flow.method-anim-wipe .equipment-detail.gallery-div.is-exiting {
  animation: methodSafeWipeOut 0.5s ease-in forwards !important;
}

@keyframes methodSafeWipeIn {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes methodSafeWipeOut {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
}

/* ---------------------------------------------------------
   D. 展示縮放
   只做極小縮放，不做位移
--------------------------------------------------------- */
.method-flow.method-anim-zoom .equipment-detail.gallery-div.active {
  animation: methodSafeZoomIn 0.8s ease-out forwards !important;
}

.method-flow.method-anim-zoom .equipment-detail.gallery-div.is-exiting {
  animation: methodSafeZoomOut 0.5s ease-in forwards !important;
}

@keyframes methodSafeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.988);
    filter: blur(1.5px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes methodSafeZoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.994);
    filter: blur(1px);
  }
}

/* =========================================================
   Menu Pager Arrow Loop
   menu 分頁提示箭頭：自動依 disabled 顯示 / 隱藏
========================================================= */

.menu-pager-arrow {
  pointer-events: auto !important;
  cursor: pointer !important;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease;

  will-change: opacity, transform;
}

/* 可用的箭頭才顯示 */
.menu-pager-arrow:not(.disabled) {
  opacity: 0.72 !important;
  visibility: visible !important;
}

/* disabled 的箭頭完全隱藏 */
.menu-pager-arrow.disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 下箭頭：微微往下 loop */
.menu-pager-arrow.menu-arrow-down:not(.disabled) {
  animation: menuArrowDownLoop 1.8s ease-in-out infinite;
}

/* 上箭頭：微微往上 loop */
.menu-pager-arrow.menu-arrow-up:not(.disabled) {
  animation: menuArrowUpLoop 1.8s ease-in-out infinite;
}

@keyframes menuArrowDownLoop {
  0% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(6px);
    opacity: 0.95;
  }

  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
}

@keyframes menuArrowUpLoop {
  0% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(-6px);
    opacity: 0.95;
  }

  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
}

.gallery-up .equipment-detail.gallery-div.active {
  animation: saolaEquipmentGalleryUpIn 1.2s ease-in-out forwards !important;
}

.gallery-up .equipment-detail.gallery-div.is-exiting {
  animation: saolaEquipmentGalleryUpOut 0.8s ease-in-out forwards !important;
}

@keyframes saolaEquipmentGalleryUpIn {
  0% {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes saolaEquipmentGalleryUpOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-25px);
    filter: blur(4px);
  }
}