/* =====================================================
   page.css — 對齊設計稿，使用實際圖片素材
   ===================================================== */

:root {
  --orange:       #F5700A;
  --orange-card:  #ff9d3e;   /* 商品卡用橘 */
  --green-neon:   #39FF14;
  --green-badge:  #C4E632;
  --black:        #000;
  --white:        #fff;
  --bg-light:     #FFF9EB;   /* 店家名底色 */
  --font-mono:    "Courier New", Courier, monospace;
  --font-body:    "Noto Sans TC", "PingFangTC", "Microsoft JhengHei", sans-serif;
  --trail-time:   1.0s;      /* 滑鼠殘影漸隱時間 */
}

/* ── Global ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  position: relative;
  font-family: var(--font-body);
  background: url('../../images/bg.png') center top repeat;
  background-size: 100% auto;
  color: var(--black);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }


/* =============================================================
   1. HERO — 滿版圖片
   ============================================================= */
.hero {
  width: 100%;
  display: block;
  line-height: 0;
  background: var(--orange);
}

.hero__img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: cover;
  object-position: center top;
}


/* =============================================================
   2. CATEGORY SECTION
   ============================================================= */
.cat-section {
  padding: 40px 20px 36px;
  margin-top: -12vw;
  position: relative;
  z-index: 10;
}

/* 外層居中容器 */
.cat-section > * {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* 引言區 */
.cat-quote {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.cat-quote__bracket-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--orange-card);
  box-shadow: 7px 7px 0 var(--orange-card);
  background: var(--white);
  padding: 36px 40px 48px;
  width: 100%;
  max-width: 960px;
}

.cat-quote__bracket {
  font-size: 36px;
  font-weight: 300;
  color: var(--orange-card);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
}

/* 文字與左右符號的水平群組 */
.cat-quote__text-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

.cat-quote__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cat-quote__text p {
  font-size: clamp(12px, 1.5vw, 14px);
  color: #606060;
  line-height: 1.75;
  margin: 0;
}

.cat-quote__arrow {
  font-size: 26px;
  color: var(--black);
  margin-bottom: 16px;
  animation: arrow-bob 1.3s ease-in-out infinite;
}

@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* 5 分類 Grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: 100%;
}

/* 各分類項目 */
.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.cat-item:hover { transform: translateY(-5px); }

/* 圖片容器 */
.cat-item__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 3px solid transparent;
  transition: border-color 0.2s;
}

.cat-item:hover .cat-item__photo {
  border-color: var(--green-neon);
}

.cat-item__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 左上角標籤（綠底黑字） */
.cat-item__tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--green-neon);
  color: var(--black);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  line-height: 1.3;
  z-index: 2;
}

/* (取消第一分類特殊綠框樣式) */

/* 分類文字 */
.cat-item__label {
  font-size: clamp(11px, 1.6vw, 40px);
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.cat-item__label .arr {
  font-family: 'Tiny5', sans-serif;
  font-style: normal;
  color: var(--orange);
  font-size: 1.5em;
  line-height: 0.5;
}


/* =============================================================
   3. DESIGN PRODUCTS — 商品區
   ============================================================= */
.products {
  padding: 40px 0 50px;
}

.products__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 主標題圖片 */
.products__title-img {
  margin-bottom: 28px;
}

.products__title-img img {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* 獲獎 Logo 區塊 */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 18px);
  margin-top: clamp(20px, 6vw, 48px);
  margin-bottom: 30px;
  padding: 0 12px; /* 追平下方 products__carousel-wrap 的寬度 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.award-link {
  display: block;
  min-width: 0; /* 防止 grid child 被原圖尺寸撐開導致重疊或破版 */
  transition: transform 0.2s ease, filter 0.2s ease;
}

.award-link:hover {
  transform: translateY(-6px) scale(1.15);
  filter: drop-shadow(0 6px 12px rgba(255, 157, 62, 0.5));
}

.award-link img {
  width: 100%;
  height: auto;
  aspect-ratio: 276 / 218;
  object-fit: contain;
}

.award-text {
  display: block;
  text-align: center;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  color: var(--black);
  margin-top: 10px;
  line-height: 1.4;
}

/* Carousel 外框 */
.products__carousel-wrap {
  position: relative;
  padding: 0 12px;
}

/* 左右箭頭 */
.prod-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 60px;
  height: 60px;
  background: transparent;
  border: none;
  color: var(--black);
  font-family: 'Tiny5', sans-serif;
  font-size: 60px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  border-radius: 0;
}



.prod-arrow:hover {
  color: var(--orange);
  transform: translateY(-50%) scale(1.15);
}

.prod-arrow--prev { left: -52px; }
.prod-arrow--next { right: -52px; }

/* Page 控制 */
.prod-page         { display: none; }
.prod-page--active { display: block; }
.prod-page.is-clone { display: none !important; } /* 桌機版永遠隱藏 Clone，手機版由 JS 控制顯示 */

/* 手機底部分頁圓點 — 桌機版隱藏，手機版在 media query 內覆寫為 flex */
.mobile-dots { display: none; }


/* 商品 Grid：3 欄 × 2 列 */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 18px);
  align-items: stretch; /* 強制同排各卡片等高 */
}

.prod-grid--4col {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

.prod-grid--1L4R {
  grid-template-columns: repeat(4, 1fr);
}
.prod-grid--1L4R > .prod-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.prod-grid--1L4R > .prod-card:first-child .prod-card__name {
  font-size: clamp(16px, 2.5vw, 22px);
  margin-top: 16px;
}
.prod-grid--1L4R > .prod-card:first-child .prod-card__price {
  font-size: clamp(18px, 2.5vw, 24px);
}


/* ── 商品卡：依照指定 HTML 規格 ── */
.prod-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 2px solid var(--orange-card);
  box-shadow: clamp(3px, 1vw, 5px) clamp(3px, 1vw, 5px) 0 var(--orange-card);
  padding: clamp(6px, 1.2vw, 14px) clamp(6px, 1.2vw, 14px) clamp(10px, 1.4vw, 16px);
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  min-width: 0; /* Fix flex child blowout / overlapping in tight grids */
  height: 100%; /* Stretch to fill grid row */
}

.prod-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: clamp(5px, 1.5vw, 8px) clamp(5px, 1.5vw, 8px) 0 var(--orange-card);
  color: inherit;
}

/* 圖片容器：鎖定比例，不允許 flex 壓縮 */
.prod-card__img {
  width: 100%;
  aspect-ratio: 276 / 218; /* 容器比例鎖定 */
  overflow: hidden;
  flex-shrink: 0; /* 禁止 flex column 壓縮圖片高度 */
}

.prod-card__img img {
  display: block;
  width: 100%;
  height: 100%; /* 填滿容器 */
  object-fit: cover;
  object-position: center center;
}

/* 店家名：固定單行高度，超出以 ... 截斷 */
.prod-card__shop {
  color: #F36B07;
  font-weight: 700;
  font-size: clamp(10px, 1.5vw, 14px);
  background-color: var(--bg-light);
  border-radius: 3px;
  align-self: flex-start;
  padding: 2px 6px;
  max-width: 100%;
  height: 1.6em; /* 固定一行高度 */
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* 商品名：固定兩行高度，超出以 ... 截斷 */
.prod-card__name {
  color: #111;
  font-size: clamp(11px, 1.7vw, 15.5px);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 0px;
  height: calc(1.4em * 2); /* 固定兩行高度 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

/* 價格：推到最底部 */
.prod-card__price {
  color: var(--orange-card);
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1;
  margin-top: auto; /* 撐開剩餘空間，讓價格永遠貼底 */
}

/* READ MORE */
.products__readmore-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.readmore-btn {
  display: inline-flex;
  align-items: center;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 28px;
  letter-spacing: 0.1em;
  border: 2px solid var(--black);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.readmore-btn:hover {
  background: var(--green-neon);
  color: var(--black);
  border-color: var(--green-neon);
}


/* =============================================================
   4. BANK / SHIPPING BANNER (免運 / 銀行)
   ============================================================= */
.bank {
  clear: both;
  padding: 30px 0;
  max-width: 1100px;
  margin: 0 auto;
}

.grid-layout {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(1, 1fr);
  padding: 20px 10px;
  margin: 0;
  border-radius: 10px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}


/* =============================================================
   5. SIDE MENU — 沈仍依照原版 WEB/resource/css/style.css 視覺
   ============================================================= */

/* 共用 */
.side-menu {
  position: fixed;
  z-index: 9999;
  padding: 10px;
  background-color: rgba(255, 255, 255, 1);
  border: 3px solid #000;
  box-sizing: border-box;
  border-radius: 0;
  opacity: 1;
}

.side-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-menu ul li {
  border-bottom: 1px solid #000;
}

.side-menu ul li:last-child {
  border-bottom: none;
}

.side-menu a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  transition: .25s;
}

.section { scroll-margin-top: 50px; }

/* 桌機版：右側選單（寬度依內容自動決定） */
@media (min-width: 769px) {
  .side-menu {
    right: -100px; /* 初始隱藏在畫面外 */
    opacity: 0;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    transition: right 0.4s ease, opacity 0.4s ease;
  }

  .side-menu.is-visible {
    right: 0;
    opacity: 1;
    pointer-events: auto;
  }

  .side-menu ul {
    display: flex;
    flex-direction: column;
  }

  .side-menu a {
    padding: 8px 12px;
    font-size: 16px;
    color: #000;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
  }

  .side-menu a:hover {
    transform: scale(1.05);
  }

  .side-menu a.active {
    background: #ffa449;
    color: #fff;
  }
}

/* RWD：整個 sidemenu 隨螢幕縮放（只影響桌機版） */
@media (min-width: 769px) and (max-width: 1199px) {
  .side-menu { zoom: 0.75; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .side-menu { zoom: 0.9; }
}

@media (min-width: 1400px) {
  .side-menu { zoom: 1; }
}


/* 手機版：上方橫向滑動選單 */
@media (max-width: 768px) {
  .side-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    padding: 0 10px;
    border-radius: 0;
    border: none;
    background: #000;
    overflow: visible;
  }

  .side-menu ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 5px 12px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .side-menu ul::-webkit-scrollbar { display: none; }

  .side-menu ul li {
    flex: 0 0 auto;
    border-bottom: 1px dotted #000;
  }

  .side-menu ul li:last-child { display: none; }

  .side-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s;
    color: #fff;
  }

  .side-menu a.active {
    background: #ffa449;
    color: #fff;
  }

  /* 手機版：選單第一項文字切換 */
  .side-menu .text-pc { display: none !important; }
  .side-menu .text-mb { display: inline !important; }
}

/* Back to top 按鈕（對齊原版） */
.forPhone { display: none; }

@media screen and (max-width: 1200px) {
  .forPhone { display: block; }
}

.toTopbtn {
  display: block;
  position: fixed;
  z-index: 999;
  width: 45px;
  height: 45px;
  padding: 3px;
  font: 13px/30px Arial, Helvetica, sans-serif;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background-color: rgba(164, 164, 164, 0.7);
  cursor: pointer;
  opacity: 1;
  border-radius: 100%;
}

.toTopbtn::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 17px;
  border: 5px solid #000;
  border-color: transparent transparent #fff;
}

@media screen and (max-width: 768px) {
  .toTopbtn {
    position: fixed;
    bottom: 14%;
    right: 3%;
  }
}

/* Footer */
#footer {
  padding: 20px;
  color: var(--black);
  background: var(--white);
  text-align: center;
  font-size: 13px;
  border-top: 2px solid #eee;
  margin-top: 20px;
}


/* =============================================================
   RWD — 960px
   ============================================================= */
@media (max-width: 960px) {
  .cat-section { padding: 32px 16px 28px; }
  .cat-quote__bracket-wrap { padding: 14px 16px 20px; }
  .products__carousel-wrap { padding: 0 8px; }
  .awards-grid { padding: 0 8px; }
  .prod-arrow--prev { left: -30px; }
  .prod-arrow--next { right: -30px; }
}


/* =============================================================
   RWD — 768px（手機版 side-menu 已在上方 @media max-width:768px 處理）
   ============================================================= */
@media (max-width: 768px) {
  /* Hero 圖片放大置中 (980px) */
  .hero { overflow: hidden; }
  .hero__img {
    width: 980px;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Bank Banners grid */
  .grid-layout { margin: 0 1vw; padding: 10px 5px; }
  .mb-col-3 { grid-template-columns: repeat(3, 1fr); }
  .mb-gap-sm { gap: 5px; }

  /* Category Section: hide grid */
  .cat-grid { display: none; }
  .cat-quote__arrow { display: none; }

  /* Awards Grid: match product card width on mobile (3 columns) */
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 4px;
    margin-bottom: -12px;
  }
  .award-link img {
    width: 100%;
  }


  /* Products */
  .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; height: 100%; align-items: stretch; }
  .prod-grid--4col { grid-template-columns: repeat(2, 1fr); }
  /* 1L4R 手機版：3個一行 + 2個一行 */
  /* carousel-wrap 在手機變 flex，需強制 grid 填滿並還原為 block */
  .products__carousel-wrap:has(.prod-grid--1L4R) { display: block !important; overflow-x: visible; }
  .products__carousel-wrap .prod-grid--1L4R {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
  }
  .products__carousel-wrap .prod-grid--1L4R > .prod-card { grid-column: span 2 !important; } /* 3個一行，各佔 2/6 */
  .products__carousel-wrap .prod-grid--1L4R > .prod-card:nth-child(4),
  .products__carousel-wrap .prod-grid--1L4R > .prod-card:nth-child(5) { grid-column: span 3 !important; } /* 2個一行，各佔 3/6 */

  .prod-arrow { display: none; }


  /* --- Mobile Peeking & Swipe Carousel (排除 grid-only 版本) --- */
  .products__carousel-wrap:not(.carousel-grid-only) {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0 12px;
    scroll-padding-left: 0;
  }
  .products__carousel-wrap:not(.carousel-grid-only)::-webkit-scrollbar {
    display: none;
  }
  .products__carousel-wrap:not(.carousel-grid-only) {
    align-items: stretch;
  }
  /* carousel-grid-only: 純 grid 版本，不走 flex 輪播 */
  .carousel-grid-only {
    display: block !important;
    overflow-x: visible !important;
  }
  .carousel-grid-only .prod-grid--1L4R {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
  }
  .carousel-grid-only .prod-grid--1L4R > .prod-card { grid-column: span 2 !important; }
  /* 確保第一張卡片在手機版不要佔兩行，文字也恢復正常大小 */
  .carousel-grid-only .prod-grid--1L4R > .prod-card:first-child { grid-row: auto !important; }
  .carousel-grid-only .prod-grid--1L4R > .prod-card:first-child .prod-card__name { font-size: clamp(11px, 1.7vw, 15.5px) !important; margin-top: 0px !important; }
  .carousel-grid-only .prod-grid--1L4R > .prod-card:first-child .prod-card__price { font-size: clamp(16px, 2.2vw, 24px) !important; }

  .carousel-grid-only .prod-grid--1L4R > .prod-card:nth-child(4),
  .carousel-grid-only .prod-grid--1L4R > .prod-card:nth-child(5) { grid-column: span 3 !important; }
  .products__carousel-wrap .prod-page {
    flex: 0 0 100%; /* Full width, no peeking */
    min-width: 100%;
    scroll-snap-align: start;
    margin-right: 0;
    display: block !important;
    opacity: 1 !important;
    /* Key fix: clip shadow bleed from spilling into adjacent page */
    overflow: hidden;
    padding: 6px 8px 10px; /* Internal room for box-shadow to render */
  }

  /* --- Mobile Pagination Dots --- */
  .mobile-dots {
    display: flex !important; /* Override global hidden */
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 24px;
  }
  .mobile-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
    transition: all 0.3s ease;
  }
  .mobile-dots .dot.active {
    width: 20px;
    border-radius: 3px;
    background: #00b050;
  }

  /* 頁面內容需避開頂部選單高度 */
  body { padding-top: 48px; }
}


/* =============================================================
   RWD — 767px (extra mobile tweaks)
   ============================================================= */
@media (max-width: 767px) {

  /* Move cat-quote up by 20% on mobile */
  .cat-quote {
    transform: translateY(-20%);
  }
  /* Category */
  .cat-quote__bracket-wrap { padding: 20px 24px 32px; }

  /* Products */
  .products { padding: 28px 0 36px; }
  .products__inner { padding: 0 14px; }
  .products__title-img { margin-bottom: 18px; }
  .products__carousel-wrap { padding: 0 4px; }

  .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; height: 100%; align-items: stretch; }
  .prod-grid--4col { grid-template-columns: repeat(2, 1fr); }
  .carousel-grid-only {
    display: block !important;
    overflow-x: visible !important;
  }
  .carousel-grid-only .prod-grid--1L4R {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
  }
  .carousel-grid-only .prod-grid--1L4R > .prod-card { grid-column: span 2 !important; }
  .carousel-grid-only .prod-grid--1L4R > .prod-card:first-child { grid-row: auto !important; }
  .carousel-grid-only .prod-grid--1L4R > .prod-card:first-child .prod-card__name { font-size: clamp(11px, 1.7vw, 15.5px) !important; margin-top: 0px !important; }
  .carousel-grid-only .prod-grid--1L4R > .prod-card:first-child .prod-card__price { font-size: clamp(16px, 2.2vw, 24px) !important; }

  .carousel-grid-only .prod-grid--1L4R > .prod-card:nth-child(4),
  .carousel-grid-only .prod-grid--1L4R > .prod-card:nth-child(5) { grid-column: span 3 !important; }

}


/* =============================================================
   PROXIMITY GRID EFFECT (無縫像素滑鼠追蹤網格)
   ============================================================= */
#proximity-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  display: grid;
  gap: 0; /* 強制設定零間距 */
  overflow: hidden;
}

.proximity-cell {
  width: 100%;
  height: 100%;
  background-color: var(--green-neon);
  opacity: 0;
  transition: opacity var(--trail-time) ease-out;
  will-change: opacity;
}

.proximity-cell.active {
  /* 滑入時快速漸變，保持柔和但不會因為 3 秒而被拖慢亮度 */
  transition: opacity 0.05s ease-out;
}

/* =============================================================
   PARALLAX BANNER (Section 05)
   ============================================================= */
.parallax-banner {
  display: block;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  background-image: url('../../images/banner.png');
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.parallax-banner:hover {
  filter: brightness(1.1);
}

@media (max-width: 767px) {

  /* Move cat-quote up by 20% on mobile */
  .cat-quote {
    transform: translateY(-20%);
  }
  .parallax-banner {
    height: 250px;
    /* 手機版為了效能與相容性，必須取消 fixed 避免圖片被過度放大/裁切 */
    background-attachment: scroll;
  }
}

/* =============================================================
   ARTICLE SECTION
   ============================================================= */
.article-section {
  margin-top: 60px;
}

.article-section__title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  text-align: center;
  color: var(--black);
  margin-bottom: 30px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 767px) {

  /* Move cat-quote up by 20% on mobile */
  .cat-quote {
    transform: translateY(-20%);
  }
  .article-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.article-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  overflow: hidden;
}

.article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-card:hover .article-card__img img {
  transform: scale(1.05);
}

.article-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #00ff00;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
}

.article-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__btn {
  margin-top: auto;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 500;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 6px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.article-card:hover .article-card__btn {
  background: var(--orange);
  color: var(--white);
}

/* Mobile specific spacing for article section */
@media (max-width: 767px) {

  /* Move cat-quote up by 20% on mobile */
  .cat-quote {
    transform: translateY(-20%);
  }
  .article-section {
    margin-top: 40px;
  }
  .article-section__title {
    margin-bottom: 24px;
    font-size: 24px; /* Ensure title isn't too huge on small screens */
  }
}

/* =============================================================
   HERO RECTANGLES (Depth of Field)
   ============================================================= */
.hero {
  position: relative;
  overflow: hidden;
}

/* SVG 網格貪吃蛇軌跡 (Pixel Snake Motion) */
.hero-snake-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hero-snake-svg .snake {
  fill: none;
  stroke: #00ff00;
  stroke-width: 20px;
  /* 確保轉彎與端點是銳利的方塊，維持像素感 */
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/*
  所有動畫均設定嚴格的數學比例：(總路徑長度 + 蛇長) / 20 = 步數
  保證每一格都精準跳躍 20px。
*/


/* All snakes originate from center and fire outwards */

/* All snakes originate from a central area and fire outwards */

/* All snakes originate from a central area, longer length, slower mechanical fps */

/* All snakes originate from a central area, long lengths, FAST mechanical fps (0.05s per step = 20fps) */

/* All snakes originate from a central area.
   Optimized lengths (4-6 blocks) to avoid looking like worms but not too long.
   Optimized framerate (10 FPS = 0.1s per step) to strictly enforce the pixel snapping feel.
*/

/* All snakes originate from a central area.
   Offset logic: from DashLength to -PathLength. This cleanly moves the snake from perfectly offscreen to perfectly offscreen.
*/

/* =========================================
   SNAKES & TEXT RIDERS (Full Span RWD)
   ========================================= */

/* Text Rider SVG Styling */
.svg-terminal-text {
  fill: #FFFFFF;
  font-family: 'Calling Code', monospace;
  font-weight: 400; /* Regular weight */
  font-size: 14px;
  pointer-events: none;
}

/* Hint Text specifically colored orange */
.hero-snake-svg .text-rider-5 {
  fill: #ffa449;
  font-weight: bold;
}

/* --- Text Snake 1 (Top, Moves Right) --- */
.hero-snake-svg .snake-text-1 { stroke-dasharray: 300 1920; animation: animSnake1 11.1s steps(111, end) infinite 0s; }
@keyframes animSnake1 { 0% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: -1920; } }
.hero-snake-svg .text-rider-1 { animation: animText1 11.1s steps(111, end) infinite 0s; }
@keyframes animText1 { 0% { transform: translateX(-290px); } 100% { transform: translateX(1930px); } }

/* --- Text Snake 2 (Upper-Mid, Moves Left) --- */
.hero-snake-svg .snake-text-2 { stroke-dasharray: 300 1920; animation: animSnake2 11.1s steps(111, end) infinite 4s; }
@keyframes animSnake2 { 0% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: -1920; } }
.hero-snake-svg .text-rider-2 { animation: animText2 11.1s steps(111, end) infinite 4s; }
@keyframes animText2 { 0% { transform: translateX(1930px); } 100% { transform: translateX(-290px); } }

/* --- Text Snake 3 (Lower-Mid, Moves Right) --- */
.hero-snake-svg .snake-text-3 { stroke-dasharray: 300 1920; animation: animSnake3 11.1s steps(111, end) infinite 2s; }
@keyframes animSnake3 { 0% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: -1920; } }
.hero-snake-svg .text-rider-3 { animation: animText3 11.1s steps(111, end) infinite 2s; }
@keyframes animText3 { 0% { transform: translateX(-290px); } 100% { transform: translateX(1930px); } }

/* --- Text Snake 4 (Bottom, Moves Left) --- */
.hero-snake-svg .snake-text-4 { stroke-dasharray: 300 1920; animation: animSnake4 11.1s steps(111, end) infinite 6s; }
@keyframes animSnake4 { 0% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: -1920; } }
.hero-snake-svg .text-rider-4 { animation: animText4 11.1s steps(111, end) infinite 6s; }
@keyframes animText4 { 0% { transform: translateX(1930px); } 100% { transform: translateX(-290px); } }

/* --- Decorative Snakes --- */
.hero-snake-svg .snake-dec-1 { stroke-dasharray: 80 600; animation: animDec1 3.4s steps(34, end) infinite 1.5s; }
@keyframes animDec1 { 0% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: -600; } }

.hero-snake-svg .snake-dec-2 { stroke-dasharray: 80 600; animation: animDec2 3.4s steps(34, end) infinite 3.5s; }
@keyframes animDec2 { 0% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: -600; } }

/* New Vertical Snakes */
.hero-snake-svg .snake-dec-3 { stroke-dasharray: 80 600; animation: animDec3 3.4s steps(34, end) infinite 0.2s; }
@keyframes animDec3 { 0% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: -600; } }

.hero-snake-svg .snake-dec-4 { stroke-dasharray: 80 600; animation: animDec4 3.4s steps(34, end) infinite 2.1s; }
@keyframes animDec4 { 0% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: -600; } }

.hero-snake-svg .snake-dec-5 { stroke-dasharray: 80 600; animation: animDec5 3.4s steps(34, end) infinite 0.8s; }
@keyframes animDec5 { 0% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: -600; } }

.hero-snake-svg .snake-dec-6 { stroke-dasharray: 80 600; animation: animDec6 3.4s steps(34, end) infinite 2.8s; }
@keyframes animDec6 { 0% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: -600; } }

/* New Horizontal Snakes */
.hero-snake-svg .snake-dec-7 { stroke-dasharray: 120 1920; animation: animDec7 7.2s steps(72, end) infinite 1.2s; }
@keyframes animDec7 { 0% { stroke-dashoffset: 120; } 100% { stroke-dashoffset: -1920; } }

.hero-snake-svg .snake-dec-8 { stroke-dasharray: 120 1920; animation: animDec8 7.2s steps(72, end) infinite 4.5s; }
@keyframes animDec8 { 0% { stroke-dashoffset: 120; } 100% { stroke-dashoffset: -1920; } }

/* Text Snake 5 (Replaces dec-9, carries long hint text) */
.hero-snake-svg .snake-text-5 { stroke-dasharray: 600 1920; animation: animSnake5 18s infinite 0.5s; }
@keyframes animSnake5 {
  0% { stroke-dashoffset: 600; animation-timing-function: steps(75, end); }
  41.66% { stroke-dashoffset: -720; animation-timing-function: linear; }
  58.33% { stroke-dashoffset: -720; animation-timing-function: steps(75, end); }
  100% { stroke-dashoffset: -1920; }
}
.hero-snake-svg .text-rider-5 { animation: animText5 18s infinite 0.5s; font-weight: 300; }
@keyframes animText5 {
  0% { transform: translateX(-600px); fill: #ffa449; animation-timing-function: steps(75, end); }
  41.66% { transform: translateX(730px); fill: #ffa449; animation-timing-function: step-end; }
  42.77% { transform: translateX(730px); fill: #000000; animation-timing-function: step-end; }
  46.11% { transform: translateX(730px); fill: #ffa449; animation-timing-function: step-end; }
  47.22% { transform: translateX(730px); fill: #000000; animation-timing-function: step-end; }
  50.55% { transform: translateX(730px); fill: #ffa449; animation-timing-function: step-end; }
  51.66% { transform: translateX(730px); fill: #000000; animation-timing-function: step-end; }
  55.00% { transform: translateX(730px); fill: #ffa449; animation-timing-function: step-end; }
  56.11% { transform: translateX(730px); fill: #000000; animation-timing-function: step-end; }
  58.33% { transform: translateX(730px); fill: #000000; animation-timing-function: steps(75, end); }
  100% { transform: translateX(1930px); fill: #000000; }
}

.hero-snake-svg .snake-dec-10 { stroke-dasharray: 120 1920; animation: animDec10 7.2s steps(72, end) infinite 3.1s; }
@keyframes animDec10 { 0% { stroke-dashoffset: 120; } 100% { stroke-dashoffset: -1920; } }

.hero-snake-svg .snake-dec-11 { stroke-dasharray: 120 1920; animation: animDec11 7.2s steps(72, end) infinite 5.8s; }
@keyframes animDec11 { 0% { stroke-dashoffset: 120; } 100% { stroke-dashoffset: -1920; } }

/* =============================================================
   HERO LAYERS
   ============================================================= */
.hero-layers-wrap {
  position: relative;
  /* Ensure the div itself respects the image ratios */
  line-height: 0;
}
.hero-layer {
  width: 100%;
  display: block;
}
.hero-layer--2,
.hero-layer--1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover; /* in case of slight size variations */
}

/* =========================================
   Exhibition Info (Concept Colors Grid)
   ========================================= */
.concept-colors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .concept-colors-grid {
    grid-template-columns: 1fr;
  }
}

.concept-color-block {
  padding: 35px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 280px;
  border-radius: 0px;
}

.concept-color-block--blue {
  background-color: #0037ff; /* 電腦藍 BSoD Blue */
}

.concept-color-block--green {
  background-color: #00ff00; /* 綠幕綠 Keying Green */
}

.concept-color-block--gray {
  background-color: #e8e8e8; /* 介面灰白 UI Gray-White */
}

.concept-color-head {
  line-height: 1.8;
}

.concept-tag.bg-white {
  background-color: #ffffff;
  color: #000;
  padding: 8px 18px;
  display: inline-block;
  font-weight: 400;
  font-size: 20px;
  text-decoration: none;
}

/* 連結 hover 效果 */
a.concept-tag.bg-white.link-tag {
  transition: all 0.2s ease;
}
a.concept-tag.bg-white.link-tag:hover {
  background-color: #000;
  color: #00ff00;
}

.concept-icon {
  margin-bottom: 16px;
  color: #000;
}
/* Ensure the blue block icon has good contrast if it's black on blue, maybe make it white?
   Actually, #0037ff is very dark, black icon is hard to see. White icon is better.
   #00ff00 green is bright, black icon is good.
   #e8e8e8 gray is bright, black icon is good.
*/
.concept-color-block--blue .concept-icon {
  color: #fff;
}
.concept-color-block--green .concept-icon,
.concept-color-block--gray .concept-icon {
  color: #000;
}

.inline-icon {
  height: 100%;
  width: auto;
  max-height: 100px; /* safety limit */
}
.concept-tag.bg-white .inline-icon {
  color: #000;
}

/* Full-width background layer for concept grid */
.concept-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 0;
}
.concept-bg-layer > div {
  flex: 1;
}
.concept-bg-layer .bg-blue { background-color: #0037ff; }
.concept-bg-layer .bg-green { background-color: #00ff00; }
.concept-bg-layer .bg-gray { background-color: #e8e8e8; }

@media (max-width: 768px) {
  .concept-bg-layer {
    flex-direction: column;
  }
}

/* Promo Blocks RWD */
.promo-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .promo-blocks {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.readmore-btn--outline-orange {
  background: transparent;
  color: #ff6600;
  border-color: #ff6600;
}
.readmore-btn--outline-orange:hover {
  background: #ff6600;
  color: #fff;
}

/* Terminal Parallax Text */
.about-terminal-container {
  margin: 40px auto;
  padding: 0 20px;
}
.about-terminal {
  font-family: 'Tiny5', monospace;
  font-size: clamp(16px, 2vw, 24px);
  color: #00ff00; /* Neon Green to match VIST */
  line-height: 1.6;
  opacity: 1;
  letter-spacing: 0.05em;
  will-change: transform;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .about-terminal {
    font-size: 12px;
  }
}

/* =============================================================
   TERMINAL MODAL (Easter Egg)
   ============================================================= */
.terminal-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.terminal-modal__content {
  background: #000;
  border: 2px solid #00ff00;
  width: 90%;
  max-width: 500px;
  min-height: 260px;
  font-family: 'Calling Code', monospace;
  color: #ff9d3e;
}

.terminal-modal__header {
  background: #00ff00;
  color: #000;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.terminal-close {
  background: none;
  border: none;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}

.terminal-modal__body {
  padding: 20px;
}

.terminal-modal__body p {
  margin: 0 0 10px 0;
  line-height: 1.5;
  text-shadow: 0 0 5px rgba(255, 157, 62, 0.5);
}

.terminal-cta {
  display: block;
  width: max-content;
  margin-top: 20px;
  margin-left: auto;
  padding: 10px 15px;
  border: 1px solid #00ff00;
  color: #000;
  background: #00ff00;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s;
  cursor: pointer;
}

.terminal-cta:hover {
  background: #000;
  color: #00ff00;
  box-shadow: 0 0 10px #00ff00;
}