/* Modern Industrial Design System for Same Yuan Capacitor */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary-navy: #0F172A;
  --secondary-navy: #1E293B;
  --accent-amber: #F59E0B;
  --accent-blue: #2563EB;
  --surface-light: #F8FAFC;
  --border-color: #E2E8F0;
}

body {
  font-family: 'Plus Jakarta Sans', 'Noto Sans TC', sans-serif;
  color: #334155;
  background-color: #F8FAFC;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Circuit grid subtle pattern */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}

.hero-glow {
  background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.12), transparent 70%);
}

/* Glassmorphism Navigation */
.nav-glass {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Card hover animation */
.product-card {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.12);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Modal animation */
.modal-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none;
}
.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  transform: scale(0.96) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-backdrop.active .modal-content {
  transform: scale(1) translateY(0);
}

/* Language fade transition */
[data-i18n] {
  transition: opacity 0.15s ease;
}

/* Original-site navigation tiles (178x126 artwork) */
.tile-card {
  display: block;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.tile-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 14px 28px -10px rgba(15, 23, 42, 0.25); }

/* Type classification chips */
.type-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 6px;
  border: 0;
  font-family: inherit;
  background: #EFF6FF;
  color: #1D4ED8;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.type-chip:hover { background: #2563EB; color: #fff; }

.main-prod { position: relative; padding-left: 14px; }
.main-prod::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 2px; background: #B8321F;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* three.js hero canvas */
.hero-3d canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; touch-action: pan-y; }
.hero-3d canvas:active { cursor: grabbing; }

/* 3D phase caption */
.hero-phase {
  position: absolute; left: 50%; bottom: 6%;
  transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px;
  font: 600 11px/1.6 'JetBrains Mono', monospace;
  color: #1e3a8a; background: rgba(255, 255, 255, 0.85);
  border: 1px solid #dbeafe; box-shadow: 0 4px 14px -6px rgba(37, 99, 235, 0.35);
  white-space: nowrap; pointer-events: none;
  transition: color 0.3s, border-color 0.3s;
}
.hero-phase:empty { display: none; }
.hero-phase::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: currentColor; }
.hero-phase[data-phase="charge"], .hero-phase[data-phase="full"] { color: #b8321f; border-color: #fecaca; }
.hero-phase[data-phase="inside"] { color: #b45309; border-color: #fde68a; }
.hero-phase[data-phase="discharge"] { color: #0369a1; border-color: #bae6fd; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tile-card, .tile-card:hover { transition: none; transform: none; }
}

/* Taping spec table styling */
.spec-table th {
  background-color: #F1F5F9;
  font-weight: 600;
  text-align: left;
}