/* =============================================
   聖豐興業 - 自訂視覺動畫與特效 CSS
   custom.css — 純動畫效果，不影響原有排版
   ============================================= */

/* -----------------------------------------------
   1. CSS 動畫 Keyframes 定義
----------------------------------------------- */

/* 淡入上浮 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入左滑 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 淡入右滑 */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 純淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 縮放彈入 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 按鈕流光效果 */
@keyframes shineSlide {
  0%   { left: -120%; }
  100% { left: 120%; }
}

/* 呼吸燈光暈 (focus border) */
@keyframes breatheGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.10); }
  50%       { box-shadow: 0 0 0 5px rgba(51, 102, 255, 0.30); }
}

/* Hero 圖片載入一次性淡入（從下方浮起） */
@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Icon / Hero 輕微上下浮動（連續） */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* 頁面載入 Hero 標題文字依序顯示 */
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Footer 頂部漸層飄動 */
@keyframes footerBarShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 震動 (表單驗證錯誤) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-7px); }
  30%       { transform: translateX(7px); }
  45%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}

/* -----------------------------------------------
   2. 通用捲動顯示動畫（ScrollReveal 替代方案）
----------------------------------------------- */

/* 元素預設狀態：隱藏，等待 IntersectionObserver 觸發 */
.reveal-fadeup,
.reveal-fadein,
.reveal-fadeinleft,
.reveal-fadeinright,
.reveal-scalein {
  opacity: 0;
  will-change: opacity, transform;
}

/* 觸發後的動畫 */
.reveal-fadeup.is-visible {
  animation: fadeInUp 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.reveal-fadein.is-visible {
  animation: fadeIn 0.6s ease both;
}
.reveal-fadeinleft.is-visible {
  animation: fadeInLeft 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.reveal-fadeinright.is-visible {
  animation: fadeInRight 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.reveal-scalein.is-visible {
  animation: scaleIn 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* 延遲類別 */
.reveal-delay-1 { animation-delay: 0.10s !important; }
.reveal-delay-2 { animation-delay: 0.20s !important; }
.reveal-delay-3 { animation-delay: 0.30s !important; }
.reveal-delay-4 { animation-delay: 0.40s !important; }
.reveal-delay-5 { animation-delay: 0.55s !important; }

/* -----------------------------------------------
   3. Navbar — 毛玻璃滾動特效
----------------------------------------------- */

/* 滾動後 navbar 切換為毛玻璃效果 */
.navbar.sticky-glass {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

/* 導覽連結 — 底部指示線動畫 (僅限桌面版) */
@media (min-width: 992px) {
  .navbar .nav-link {
    position: relative;
    overflow: hidden;
  }
  .navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: currentColor;
    transition: left 0.28s ease, right 0.28s ease;
    opacity: 0.6;
  }
  .navbar .nav-link:hover::after,
  .navbar .nav-link.active::after {
    left: 8px;
    right: 8px;
  }
}

/* 手機版選單 - 精確修復 dropdown-toggle 的 ::after 偽元素樣式 */
@media (max-width: 991.98px) {
  /* 重置手機版 nav-link 的樣式，移除桌面版的 relative 定位和 overflow */
  .offcanvas .nav-link {
    position: static !important;
    overflow: visible !important;
  }

  /* 防止我們的自定義底部線條效果應用到手機版 nav-link 上 */
  .offcanvas .nav-link::after {
    display: none !important;
  }

  /* 確保 Bootstrap 原生的 dropdown-toggle 箭頭顯示正常 */
  .offcanvas .dropdown-toggle::after {
    display: inline-block !important;
    position: static !important;
    margin-left: 0.255em !important;
    vertical-align: middle !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    background: transparent !important;
    opacity: 1 !important;
    transition: none !important;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    width: auto !important;
    transform: none !important;
  }
}

/* -----------------------------------------------
   4. 卡片 (Card) — 懸停上浮與陰影加深
----------------------------------------------- */

.card {
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.32s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, box-shadow;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.13) !important;
}

/* -----------------------------------------------
   5. Icon 圖示 — 懸停縮放 / 旋轉
----------------------------------------------- */

/* 服務項目 icon — 懸停旋轉 + 縮放 */
.d-flex .icon-svg {
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.35s ease;
  display: inline-block;
}
.d-flex:hover .icon-svg {
  transform: scale(1.18) rotate(8deg);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18));
}

/* -----------------------------------------------
   Hero 圖片（devices.png）：載入動畫 + 持續浮動
   hover 效果：陰影 + 微縮放（無掃光）
----------------------------------------------- */

/* 掃光 keyframe — 共用於內頁圖片的掃光動畫 */
@keyframes contentShineSlide {
  0%   { left: -160%; opacity: 1; }
  100% { left: 180%;  opacity: 1; }
}

/* Hero Wrapper：clip 用，繼承 Bootstrap 定位 class */
.hero-shine-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: default;
  animation:
    heroImageIn 1.0s cubic-bezier(0.23, 1, 0.32, 1) both,
    floatY 5.5s ease-in-out 1.2s infinite;
  will-change: transform, opacity;
  opacity: 1 !important;
  visibility: visible !important;
}

/* hover 時 img 本體微縮放 + 藍色發光陰影（無掃光） */
.hero-shine-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.45s ease;
  will-change: transform, filter;
}
.hero-shine-wrap:hover img {
  transform: scale(1.03) translateY(-6px);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.22))
          brightness(1.04);
}

/* -----------------------------------------------
   內頁圖片掃光（device.png / devices2.png）
   用於 section 內的圖片 wrapper 或 figure 元素
----------------------------------------------- */

/* 掃光 wrapper — 可套用於 <figure> 或 JS 產生的 <span> */
.content-shine {
  position: relative;
  overflow: hidden;
  display: block;     /* 讓 <span> 也能當塊級元素 */
  cursor: default;
}

/* 掃光層 — 預設靜置在左方不可見 */
.content-shine::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -160%;
  width: 55%;
  height: 140%;
  background: linear-gradient(
    105deg,
    transparent 10%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 90%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* hover：觸發掃光動畫 */
.content-shine:hover::before {
  opacity: 1;
  animation: contentShineSlide 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* hover：img 輕微放大 + 藍光陰影 */
.content-shine img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.45s ease;
  will-change: transform, filter;
}
.content-shine:hover img {
  transform: scale(1.04) translateY(-5px);
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.22))
          brightness(1.03);
}

/* 舊的 .hero-float 保留作為 fallback */
.hero-float {
  animation:
    heroImageIn 1.0s cubic-bezier(0.23, 1, 0.32, 1) both,
    floatY 5.5s ease-in-out 1.2s infinite !important;
  will-change: transform, opacity;
  opacity: 1 !important;
  visibility: visible !important;
}

/* -----------------------------------------------
   6. 按鈕 — 流光效果
----------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              background-color 0.22s ease, color 0.22s ease;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::before {
  animation: shineSlide 0.6s ease forwards;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.btn:active {
  transform: translateY(0px);
}

/* -----------------------------------------------
   7. 表格列 — 懸停平滑變色 & 輕微左移
----------------------------------------------- */

.table tbody tr {
  transition: background-color 0.22s ease, transform 0.22s ease, color 0.22s ease;
  cursor: default;
}
.table tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb, 51, 102, 255), 0.07) !important;
  transform: translateX(4px);
}

/* -----------------------------------------------
   8. 合作夥伴專案卡片圖片 — 尺寸統一與加強 hover 動畫
----------------------------------------------- */

/* 合作夥伴專案卡片圖片 - 裁切顯示 */
.card figure.overlay img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  filter: grayscale(0.5);
  width: 100%;
}

/* 天線系列卡片圖片 - 完整顯示不裁切，固定高度 */
.card .card-img-top {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  overflow: hidden;
}
.card .card-img-top img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card:hover .card-img-top img {
  transform: scale(1.05);
}

/* 懸停時：解除灰階並稍微放大 */
.card:hover .card-img-top img,
.card:hover figure.overlay img {
  filter: grayscale(0);
  transform: scale(1.08);
}

/* 增加懸停掃光效果 */
.card figure.overlay {
  position: relative;
  overflow: hidden;
}
.card figure.overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  z-index: 3;
  pointer-events: none;
  transition: none;
}
.card:hover figure.overlay::before {
  animation: shineSweep 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes shineSweep {
  0%   { left: -150%; }
  100% { left: 200%; }
}

/* "查看大圖" 文字樣式加強 */
.card figure.overlay figcaption {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card figure.overlay figcaption h5 {
  color: #ffffff;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0;
  font-size: 1.1rem;
}
.card:hover figure.overlay figcaption h5 {
  transform: translateY(0);
  opacity: 1;
}

/* -----------------------------------------------
   通用 overlay 效果 (適用於非卡片內的圖片)
----------------------------------------------- */
/* 深色漸層覆蓋層，讓文字更清晰 - 通用版本 */
figure.overlay .bg {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%) !important;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}
figure.overlay:hover .bg {
  opacity: 1;
}

/* figure.overlay 基本定位 */
figure.overlay {
  position: relative;
  overflow: hidden;
}

/* figcaption 樣式 - 通用版本 */
figure.overlay figcaption {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
figure.overlay figcaption h5 {
  color: #ffffff;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0;
  font-size: 1.1rem;
}
figure.overlay:hover figcaption h5 {
  transform: translateY(0);
  opacity: 1;
}

/* -----------------------------------------------
   9. GLightbox 大圖檢視優化
   電腦版 (>= 992px) 將燈箱內圖片基礎寬高限制為螢幕的 70vw/85vh
   手機版維持預設全寬
----------------------------------------------- */
@media (min-width: 992px) {
  .gslide-image img {
    max-width: 70vw !important;
    max-height: 85vh !important;
  }
  /* GLightbox 的放大鏡功能是使用 CSS transform scale()，
     所以 max-width: 70vw 不會阻礙「點擊放大」後的操作與效果 */
}

/* -----------------------------------------------
   10. 手機版 Hero 圖片置中優化
   抵銷原模板 .ms-n5 等負邊距導致的手機版圖片靠左偏位
----------------------------------------------- */
@media (max-width: 991.98px) {
  .hero-shine-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important; /* 強制覆寫原本寫死在 html 的 left: -21% */
    position: relative !important;
    display: flex;
    justify-content: center;
  }
  .hero-shine-wrap img {
    margin: 0 auto !important;
  }
}

/* 深色漸層覆蓋層，讓文字更清晰 */
.card figure.overlay .bg {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%) !important;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}
.card:hover figure.overlay .bg {
  opacity: 1;
}

/* -----------------------------------------------
   9. Footer — 頂部彩色漸層飄動飾條
----------------------------------------------- */

footer.bg-dark::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    270deg,
    #3366ff,
    #4fc3f7,
    #43a047,
    #f9a825,
    #3366ff
  );
  background-size: 400% 400%;
  animation: footerBarShimmer 6s ease infinite;
}

/* Footer 快速連結 hover */
footer a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
footer a:hover {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
}

/* -----------------------------------------------
   10. 聯絡頁面 — icon 動畫
----------------------------------------------- */

.contact-icon-wrap {
  transition: transform 0.3s ease;
}
.contact-icon-wrap:hover {
  transform: translateY(-4px);
}

/* -----------------------------------------------
   11. 「關於我們」圖片 — 光芒劃過效果
----------------------------------------------- */

.about-img-shimmer {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.about-img-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 80%
  );
  transform: skewX(-15deg);
  animation: shineSlide 3.5s ease-in-out 0.8s infinite;
  pointer-events: none;
}

/* -----------------------------------------------
   12. Hero 區域標題文字動畫加強
----------------------------------------------- */

.post-header h1,
[data-cues="slideInDown"] h1,
.display-2 {
  animation: heroTitleIn 0.85s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: 0.15s;
}

/* -----------------------------------------------
   13. 頁面過渡 (Page Transition) — 入場淡入
----------------------------------------------- */

.content-wrapper {
  animation: fadeIn 0.5s ease both;
}

/* -----------------------------------------------
   14. 圖片平滑顯示（僅對 lazyload 圖片，不影響 hero）
----------------------------------------------- */

img.lazy-fade {
  opacity: 0;
  transition: opacity 0.45s ease;
}
img.lazy-fade.is-loaded {
  opacity: 1;
}

/* -----------------------------------------------
   15. Reduced Motion 可存取性
----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------
   16. devices2 圖片定位 - RWD 響應式處理
----------------------------------------------- */
/* 電腦版樣式 */
@media (min-width: 992px) {
  .devices2-image {
    top: 50%;
    left: -23%;
    transform: translateY(-50%);
  }
}

/* 手機版樣式 */
@media (max-width: 991.98px) {
  .devices2-image {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
}