/**
 * RICweb Visual Enhancements
 * 研創資本網站視覺優化 - 輕量級動態效果
 * 
 * 設計原則：
 * - 使用 transform + opacity 動畫（GPU 加速，效能最佳）
 * - 尊重 prefers-reduced-motion 設定
 * - 保持原有配色方案
 */

/* ========================================
   Design Tokens (No Color Scheme Changes)
   ======================================== */
:root {
  /* Use existing theme primary color for accents (no palette changes) */
  --ric-accent-rgb: var(--bs-primary-rgb);
  --ric-accent: rgb(var(--ric-accent-rgb));

  --ric-radius: 12px;
  --ric-shadow-sm: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
  --ric-shadow-md: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);

  /* CJK-friendly font fallbacks (avoid tofu squares) */
  --ric-font-sans: "Merriweather Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Microsoft JhengHei", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --ric-font-serif: Merriweather, "Noto Sans TC", Georgia, serif;

  /* Hook into Bootstrap variables without touching vendor CSS */
  --bs-font-sans-serif: var(--ric-font-sans);
  --bs-body-font-family: var(--ric-font-serif);
  --bs-btn-font-family: var(--ric-font-sans);
}

/* ========================================
   Typography + Helpers
   ======================================== */
.text-white-90 {
  color: rgba(255, 255, 255, 0.9) !important;
}

#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-item .nav-link {
  font-family: var(--ric-font-sans);
}

.btn {
  --bs-btn-font-family: var(--ric-font-sans);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--ric-font-sans);
}

#mainNav .navbar-brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  white-space: normal;
  line-height: 1.1;
}

.ric-brand-title {
  display: inline-block;
}

.ric-brand-subtitle {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8rem;
  opacity: 0.9;
  letter-spacing: 0.01em;
}

/* ========================================
   導覽列品牌名稱懸停顏色（維持既有視覺）
   ======================================== */
#mainNav.navbar-shrink .navbar-brand:hover {
  color: var(--ric-accent) !important;
}

#mainNav.navbar-shrink .navbar-brand:focus-visible {
  color: var(--ric-accent) !important;
}

/* ========================================
   1. 按鈕懸停效果（保持原色）
   ======================================== */
.btn-primary {
  transition: all 0.2s ease-out;
}

.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--ric-accent-rgb), 0.35);
}

.btn-primary:active {
  transform: translateY(0);
}

/* ========================================
   2. 淡入動畫效果
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* 依序淡入延遲 */
.fade-delay-1 {
  animation-delay: 0.1s;
  opacity: 0;
}

.fade-delay-2 {
  animation-delay: 0.2s;
  opacity: 0;
}

.fade-delay-3 {
  animation-delay: 0.3s;
  opacity: 0;
}

.fade-delay-4 {
  animation-delay: 0.4s;
  opacity: 0;
}

/* ========================================
   3. About - 企業夥伴 Logo 對齊與一致性
   ======================================== */
.team-cop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  align-items: center;
  justify-items: center;
  margin-top: 1.75rem;
}

.team-cop li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (min-width: 576px) {
  .team-cop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.team-cop img {
  width: 100%;
  max-width: 170px;
  max-height: 52px;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.team-cop img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ========================================
   4. Services - 卡片一致性與互動
   ======================================== */
.ric-service-card {
  padding: 1.5rem;
  border-radius: var(--ric-radius);
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
  height: 100%;
}

.ric-service-card:hover {
  background-color: rgba(var(--ric-accent-rgb), 0.05);
  transform: translateY(-4px);
}

.ric-service-card .bi {
  transition: transform 0.2s ease-out;
}

.ric-service-card:hover .bi {
  transform: scale(1.1);
}

/* ========================================
   5. Team - 頭像與文字一致性
   ======================================== */
.ric-scope-icon {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  margin-inline: auto;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.team-member__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

.team-member__name {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .team-member__avatar {
    width: 140px;
    height: 140px;
  }
}

/* ========================================
   6. Contact - 文字與連結視覺一致
   ======================================== */
.ric-contact-logo {
  max-width: 220px;
  height: auto;
}

.ric-contact-details a {
  color: inherit;
  text-decoration: none;
}

.ric-contact-details a:hover {
  text-decoration: underline;
}

/* ========================================
   7. Portfolio / Podcast - 卡片與媒體一致
   ======================================== */
.portfolio-item {
  height: 100%;
}

.portfolio-link {
  position: relative;
  display: block;
  border-radius: var(--ric-radius);
  overflow: hidden;
  box-shadow: var(--ric-shadow-sm);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  background-color: var(--bs-body-bg);
}

a.portfolio-link:hover,
a.portfolio-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ric-shadow-md);
}

.portfolio-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--bs-dark-rgb), 0.55);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

a.portfolio-link:hover .portfolio-hover,
a.portfolio-link:focus-visible .portfolio-hover {
  opacity: 1;
}

.portfolio-hover-content {
  color: var(--bs-white);
}

.ric-portfolio-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ric-portfolio-img.ric-fit-contain {
  object-fit: contain;
  background-color: rgb(var(--bs-light-rgb));
  padding: 2.5rem 1.75rem;
}

.portfolio-caption {
  padding: 1rem 1rem 1.25rem;
}

.portfolio-caption-heading {
  font-weight: 700;
}

.portfolio-caption-subheading {
  margin-top: 0.25rem;
  line-height: 1.55;
}

.ric-podcast-embed {
  display: block;
  width: 100%;
  max-width: 660px;
  border: 0;
  border-radius: var(--ric-radius);
  overflow: hidden;
  background-color: rgb(var(--bs-light-rgb));
  transform: translateZ(0);
  box-shadow: var(--ric-shadow-sm);
  margin-inline: auto;
}

/* ========================================
   8. 導覽列連結效果（底線強調）
   ======================================== */
#mainNav .navbar-nav .nav-item .nav-link {
  position: relative;
  transition: color 0.2s ease-out;
}

#mainNav .navbar-nav .nav-item .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--ric-accent);
  transition: all 0.2s ease-out;
  transform: translateX(-50%);
}

#mainNav .navbar-nav .nav-item .nav-link:hover::after {
  width: 100%;
}

#mainNav .navbar-nav .nav-item .nav-link:focus-visible::after,
#mainNav .navbar-nav .nav-item .nav-link.active::after,
#mainNav .navbar-nav .nav-item .nav-link[aria-current="page"]::after {
  width: 100%;
}

/* ========================================
   9. 尊重使用者動態偏好
   ======================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .team-cop img:hover,
  .ric-service-card:hover,
  .ric-service-card:hover .bi,
  .btn-primary:hover,
  .btn-primary:focus,
  a.portfolio-link:hover,
  a.portfolio-link:focus-visible {
    transform: none;
  }
}