/* ============================================================
   Scroll Reveal 基礎
   ============================================================ */
/* 初始隱藏狀態 — JS 加入 .animated 後觸發過渡 */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 方向變體 */
.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-left.animated {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* 純淡入（無位移） */
.scroll-fade {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.scroll-fade.animated {
  opacity: 1;
}

/* 延遲 — 用於子元素交錯動畫 */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ============================================================
   Hero 入場動畫（頁面載入即觸發）
   ============================================================ */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(25px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-animate {
  opacity: 0;
  animation: heroFadeUp 0.7s ease-out forwards;
}
.hero-animate-right {
  opacity: 0;
  animation: heroFadeRight 0.8s ease-out forwards;
}

.hero-delay-1 { animation-delay: 0.1s; }
.hero-delay-2 { animation-delay: 0.25s; }
.hero-delay-3 { animation-delay: 0.4s; }
.hero-delay-4 { animation-delay: 0.55s; }
.hero-delay-5 { animation-delay: 0.7s; }

/* ============================================================
   Gradient accent bar 寬度動畫
   ============================================================ */
.accent-bar-animate {
  width: 0 !important;
  transition: width 0.8s ease-out;
}
.accent-bar-animate.animated {
  width: 4rem !important; /* w-16 = 4rem */
}

/* ============================================================
   手機導覽選單
   ============================================================ */
/* 隱藏 React hydration 產生的手機選單（由 #arculus-mobile-menu 取代） */
header > div ~ div {
  display: none !important;
}

/* 半透明黑色 backdrop */
#arculus-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 48;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#arculus-mobile-backdrop.arculus-nav-open {
  opacity: 1;
  pointer-events: auto;
}

/* 選單面板 — 從 header 底部滑下 */
#arculus-mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 49;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
}
#arculus-mobile-menu.arculus-nav-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 選單連結 */
.arculus-mob-link {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #212121;
  text-decoration: none;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.arculus-mob-link:hover {
  background-color: #f5f5f5;
  color: #1b5e20;
}

/* 子選單標題（Products & Solutions） */
.arculus-mob-section {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #212121;
  border-bottom: 1px solid #f3f4f6;
}

/* Products & Solutions 摺疊 toggle */
.arculus-mob-accordion {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arculus-mob-chevron {
  display: inline-block;
  font-style: normal;
  transition: transform 0.2s ease;
  color: #9ca3af;
  font-size: 0.75rem;
}
.arculus-mob-accordion[aria-expanded="true"] .arculus-mob-chevron {
  transform: rotate(90deg);
}
.arculus-mob-sub-group {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.arculus-mob-sub-group.arculus-open {
  max-height: 400px;
}

/* 子選單連結 */
.arculus-mob-sub {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem 0.75rem 2.25rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #374151;
  text-decoration: none;
  border-bottom: 1px solid #f9fafb;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.arculus-mob-sub:hover {
  background-color: #f5f5f5;
  color: #1b5e20;
}
.arculus-mob-sub::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f9a825;
  margin-right: 0.625rem;
  flex-shrink: 0;
}

/* Contact Us CTA 按鈕 */
.arculus-mob-cta {
  display: block;
  margin: 1.25rem 1.5rem 1.5rem;
  padding: 0.875rem 1rem;
  background: #1b5e20;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.arculus-mob-cta:hover {
  background-color: #2e7d32;
}

/* 漢堡 SVG path 過渡 */
#arculus-hamburger-svg path {
  transition: d 0.2s ease;
}

/* ============================================================
   prefers-reduced-motion — 停用所有動畫
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-fade,
  .hero-animate,
  .hero-animate-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .accent-bar-animate {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    width: 4rem !important;
  }
  #arculus-mobile-menu,
  #arculus-mobile-backdrop,
  .arculus-mob-sub-group,
  .arculus-mob-chevron {
    transition: none !important;
  }
}