/* Custom Styles for 琪達科技 Precision Coating Website */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* ── 背景層次色彩系統 ─────────────────────────────
   depth-0: 最深主體背景
   depth-1: 奇數 section（比 depth-0 亮約 15%）
   depth-2: 偶數 section 較淺
   ────────────────────────────────────────────── */
:root {
  --bg-depth-0:    #070b14;
  --bg-depth-1:    #0d1526;
  --bg-depth-2:    #111e36;

  --card-bg:       rgba(17, 30, 54, 0.85);
  --card-border:   rgba(56, 189, 248, 0.15);

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;

  /* 新增第二強調色：科技銀/鉑金 */
  --accent-primary:   #22d3ee;  /* cyan-400：保留 */
  --accent-secondary: #94a3b8;  /* slate-400：銀灰，呼應精密金屬 */
  --accent-warm:      #f59e0b;  /* amber-500：減少用量，僅用於 CTA 按鈕 */

  /* 更精緻的漸層 section 分隔 */
  --bg-gradient-divider: linear-gradient(180deg, #070b14 0%, #0a1020 50%, #070b14 100%);
}

/* Utility classes for depth system */
.bg-depth-0  { background-color: var(--bg-depth-0); }
.bg-depth-1  { background-color: var(--bg-depth-1); }
.bg-depth-2  { background-color: var(--bg-depth-2); }

.card-surface {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 更精緻的漸層 section 分隔背景 */
.section-breathe,
.bg-gradient-divider {
  background: linear-gradient(180deg, #070b14 0%, #0a1020 50%, #070b14 100%);
}

/* 強調色 Utility classes */
.text-accent-primary   { color: var(--accent-primary); }
.text-accent-secondary { color: var(--accent-secondary); }
.text-accent-warm      { color: var(--accent-warm); }
.border-accent-primary { border-color: var(--accent-primary); }
.border-accent-secondary { border-color: var(--accent-secondary); }


/* Custom styling for thickness range slider */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #38bdf8;
  border: 3px solid #082f49;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.9);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #38bdf8;
  border: 3px solid #082f49;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Color swatch preview button states */
.color-btn {
  transition: all 0.2s ease;
}

.color-btn:hover {
  border-color: #38bdf8;
  background-color: rgba(30, 41, 59, 0.9);
}

.color-btn.active {
  border-color: #38bdf8;
  background-color: rgba(14, 165, 233, 0.15);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}

/* Keycap 3D realistic lighting simulation */
.keycap-bevel-shadow {
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 12px 24px -4px rgba(0, 0, 0, 0.6),
    0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* Details summary transition */
details summary::-webkit-details-marker {
  display: none;
}

/* Metallic Bright Silver (亮銀) Text Gradient — legacy */
.text-bright-silver {
  background: linear-gradient(135deg, #8C9BA8 0%, #D5DDE6 20%, #FFFFFF 35%, #7D8C9C 50%, #C5D0DC 68%, #FFFFFF 82%, #607080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(197, 208, 220, 0.3));
}

/* ──────────────────────────────────────────────────
   REACT BITS — ShinyText Effect (vanilla CSS port)
   Precision in Every Layer hero headline
   Aesthetic: CNC titanium alloy with animated light sweep
   ────────────────────────────────────────────────── */

@keyframes shiny-text-sweep {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.text-bright-silver-eng {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 1.03;
  letter-spacing: -0.02em;

  /* React Bits ShinyText core:
     Base metallic silver + narrow bright-white shine band
     background-size: 250% lets the band travel fully across */
  background: linear-gradient(
    120deg,
    #7d8c9c  0%,
    #b0bec8 10%,
    #d5dde6 20%,
    #ffffff  30%,
    #e8eef4 35%,
    /* ← shine band: pure white with soft fade edges → */
    rgba(255, 255, 255, 0.0) 38%,
    rgba(255, 255, 255, 0.95) 45%,
    rgba(255, 255, 255, 1.0)  50%,
    rgba(255, 255, 255, 0.95) 55%,
    rgba(255, 255, 255, 0.0) 58%,
    /* ← back to base silver → */
    #e0e8f0 65%,
    #c8d6e2 75%,
    #d8e2eb 85%,
    #f0f4f8 92%,
    #8090a0 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  animation: shiny-text-sweep 20s linear 3;
  animation-fill-mode: forwards;

  filter:
    drop-shadow(0 0 40px rgba(6, 182, 212, 0.18))
    drop-shadow(0 2px 16px rgba(0, 0, 0, 0.7));
  display: block;
  padding-bottom: 0.06em;
}

/* Pause animation on reduced-motion preference (a11y) */
@media (prefers-reduced-motion: reduce) {
  .text-bright-silver-eng {
    animation: none;
    background-position: center;
  }
}

/* Chrome Metal Brand Text — navbar WAFERPAINTER logo */
.text-chrome-brand {
  background: linear-gradient(180deg,
    #4A5568 0%,
    #9EACBA 18%,
    #FFFFFF 36%,
    #C8D6E0 52%,
    #FFFFFF 64%,
    #8A9BAB 80%,
    #3D4F60 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
  letter-spacing: 0.12em;
}

/* Engineering Monospace Font Feature */
.metric-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Subtle Card Glow on Dark Canvas */
.card-tech-surface {
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hero Subtitle — bilingual, Space Grotesk + Noto Sans TC */
.text-hero-sub {
  font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
  font-size: clamp(0.95rem, 2.2vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #94a3b8;
  line-height: 1.5;
}