/* CSS Variables */
:root{
  /* cyberpunk 配色 */
  --bg-1: #05050a;
  --bg-2: #081026;
  --accent-1: #00fff6;
  --accent-2: #8a2be2;
  --accent-3: #ff00d6;
  --glass: rgba(255,255,255,0.04);
  --card-shadow: 0 14px 50px rgba(4,8,18,0.65);
  --max-width: 1100px;
  --ease: cubic-bezier(.2,.9,.3,1);
}

/* 基本排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 半透明科技背景圖（請放 src/assets/images/tech-bg.jpg） */
.bg-tech{
  position:fixed;
  inset:0;
  z-index:-5;
  background-image: url('../assets/images/tech-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  filter: saturate(120%) blur(2px) contrast(1.02);
  pointer-events: none;
}

/* 漸層底與 blobs */
.bg-gradient{
  position:fixed; inset:0; z-index:-4;
  background: linear-gradient(120deg, var(--bg-1) 0%, #0b1530 35%, var(--bg-2) 100%);
  background-size: 200% 200%;
  animation: gradientShift 14s linear infinite;
  filter: brightness(1.02);
}

/* 流線 SVG */
.flow-lines{
  position:fixed;
  inset:0;
  width:120vw;
  height:120vh;
  z-index:-3;
  pointer-events:none;
  overflow:visible;
  transform: translate3d(0,0,0) scale(1.12);
  will-change: transform, opacity;
  opacity:0.98;
}
.flow-group{ transform-origin:50% 50%; }
.flow-path{
  fill:none;
  stroke:url(#gradFlow);
  stroke-width:5.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-opacity:1;
  stroke-dasharray: 420 1400;
  stroke-dashoffset: 0;
  mix-blend-mode: screen;
  animation: flowDash linear infinite, slowFloat ease-in-out infinite;
  animation-duration: 10s, 22s;
  filter: drop-shadow(0 6px 18px rgba(173,0,255,0.12));
}

/* 動畫 keyframes */
@keyframes flowDash{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -1560; }
}
@keyframes slowFloat{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-8vh) }
  100%{ transform: translateY(0) }
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* 版面容器 */
.container{
  width:calc(100% - 32px);
  max-width:var(--max-width);
  margin:0 auto;
  padding:24px;
}

/* 英文語系下 brand-text 字體縮小 */
body.lang-en .brand-text h1 {
  font-size: 16px;
}
body.lang-en .brand-text .tagline {
  font-size: 11px;
}

/* 美化語言切換鏈接 */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}
.lang-link {
  color: rgba(230,238,248,0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 200ms var(--ease);
}
.lang-link:hover {
  color: var(--accent-1);
  background: rgba(0,255,246,0.1);
}
.lang-link.active {
  color: var(--accent-1);
  background: rgba(0,255,246,0.15);
  box-shadow: 0 2px 8px rgba(0,255,246,0.2);
}
.lang-sep {
  color: rgba(255,255,255,0.3);
  font-size: 14px;
}

/* 舊版下拉選單樣式（備用） */
.lang-select {
  background: linear-gradient(90deg, rgba(0,255,246,0.10), rgba(138,43,226,0.10));
  color: #e6eef8;
  border: 1.6px solid var(--accent-2);
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(138,43,226,0.12);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
  outline: none;
}
.lang-select:hover, .lang-select:focus {
  border-color: var(--accent-1);
  box-shadow: 0 12px 32px rgba(0,255,246,0.18);
  background: linear-gradient(90deg, rgba(0,255,246,0.18), rgba(138,43,226,0.18));
}
.lang-select option {
  background: #081026;
  color: #e6eef8;
}