/**
 * button-hover.css — 按鈕互動效果集
 * 逆向自 www.marching.mo
 *
 * 包含：
 *   1. .btn-slide-fill   — 從左滑入紅底（Tag 標籤、CTA 按鈕）
 *   2. .btn-nav-tab      — 底部紅線指示器（分頁導航）
 *   3. .btn-outline-fill — 邊框版 slide fill（次要按鈕）
 *   4. .card-hover       — 圖片卡片縮放 + 文字浮現
 *
 * 使用時引入並搭配 CSS 變數：
 *   <link rel="stylesheet" href="效果/button-hover.css">
 */

:root {
  --mc-accent:      #C41230;
  --mc-accent-deep: #8B0F22;
  --mc-bg:          #080808;
  --mc-surface:     #1C1C1C;
  --mc-text:        #FFFFFF;
  --mc-text-dim:    #AAAAAA;
  --mc-border:      #2A2A2A;
  --mc-ease:        cubic-bezier(0.77, 0, 0.175, 1);
  --mc-duration:    0.35s;
}

/* ── 1. Slide Fill Button（Tag / CTA）──────────────────────── */
/*
 * HTML：
 *   <a class="btn-slide-fill" href="#">
 *     <span>影視攝影</span>
 *   </a>
 *
 * active 狀態：加上 .active class
 */
.btn-slide-fill {
  position: relative;
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid var(--mc-border);
  color: var(--mc-text-dim);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-decoration: none;
  overflow: hidden;
  transition: color var(--mc-duration), border-color var(--mc-duration);
  background: transparent;
  vertical-align: middle;
}

.btn-slide-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mc-duration) var(--mc-ease);
  z-index: 0;
}

.btn-slide-fill > * {
  position: relative;
  z-index: 1;
}

.btn-slide-fill:hover,
.btn-slide-fill.active {
  color: var(--mc-text);
  border-color: var(--mc-accent);
}

.btn-slide-fill:hover::before,
.btn-slide-fill.active::before {
  transform: scaleX(1);
}

/* ── 2. Nav Tab（分頁底線指示器）───────────────────────────── */
/*
 * HTML：
 *   <a class="btn-nav-tab" href="#">影視製作</a>
 *   <a class="btn-nav-tab active" href="#">所有作品</a>
 */
.btn-nav-tab {
  position: relative;
  display: inline-block;
  padding: 10px 24px;
  color: var(--mc-text-dim);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-decoration: none;
  background: transparent;
  border: none;
  transition: color 0.25s, background 0.25s;
}

.btn-nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mc-duration) var(--mc-ease);
}

.btn-nav-tab:hover {
  color: var(--mc-text);
}

.btn-nav-tab.active {
  color: var(--mc-text);
  background: var(--mc-accent);
}

.btn-nav-tab.active::after,
.btn-nav-tab:hover::after {
  transform: scaleX(1);
}

/* ── 3. Outline Fill（次要按鈕，滑入更深紅）────────────────── */
/*
 * HTML：
 *   <button class="btn-outline-fill">
 *     <span>Read More →</span>
 *   </button>
 */
.btn-outline-fill {
  position: relative;
  display: inline-block;
  padding: 10px 28px;
  border: 1px solid var(--mc-accent);
  color: var(--mc-accent);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  background: transparent;
  transition: color var(--mc-duration);
}

.btn-outline-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mc-duration) var(--mc-ease);
  z-index: 0;
}

.btn-outline-fill > * {
  position: relative;
  z-index: 1;
}

.btn-outline-fill:hover {
  color: var(--mc-text);
}

.btn-outline-fill:hover::before {
  transform: scaleX(1);
}

/* ── 4. Card Hover（圖片卡片）──────────────────────────────── */
/*
 * HTML：
 *   <div class="mc-card">
 *     <img src="..." alt="">
 *     <div class="mc-card-overlay">
 *       <h3>標題</h3>
 *       <p>副標</p>
 *     </div>
 *   </div>
 */
.mc-card {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--mc-surface);
}

.mc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--mc-ease), filter 0.6s var(--mc-ease);
  filter: brightness(0.7);
}

.mc-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.9);
}

.mc-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.35s var(--mc-ease), transform 0.35s var(--mc-ease);
}

.mc-card:hover .mc-card-overlay {
  opacity: 1;
  transform: translateY(0);
}