/*
 * 登入入口（access-gate.js／gate-view.js 產生的 #gfi-gate）。
 * 視覺語言取自 GFI 公司簡介網站：墨黑底、米白字、雷射橘點綴、Archivo＋JetBrains Mono。
 * 所有選擇器都掛在 #gfi-gate 底下，不影響站內畫面。字型宣告（Archivo、JetBrains Mono）在 css/tokens.css，
 * 與站內共用。
 */
#gfi-gate {
  --ink: #06070a; --ink2: #0d0f14; --ink3: #151820; --line: #272b35; --line2: #3a3f4b;
  --mute: #9ba1ab; --paper: #f2efe9; --laser: #ff4a1c; --amber: #ffb23f; --alert: #ff8a73;
  --sans: "Archivo", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans CJK TC", "Noto Sans TC", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed; inset: 0; z-index: 9999;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ink); color: var(--paper);
  font: 400 16px/1.65 var(--sans); font-variation-settings: "wdth" 100;
  color-scheme: dark; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#gfi-gate *, #gfi-gate *::before, #gfi-gate *::after { box-sizing: border-box; }
#gfi-gate :focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; }
/* 站內 styles.css 的 h1–h3 是藏青色襯線字，這裡要蓋掉 */
#gfi-gate h1, #gfi-gate h2 { color: inherit; font-family: var(--sans); }
#gfi-gate .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 背景：光纖畫布＋暗角＋顆粒（全部不接收點按） ───────────────────── */
#gfi-gate .gate-canvas, #gfi-gate .gate-atmos, #gfi-gate .gate-grain { position: fixed; inset: 0; pointer-events: none; }
#gfi-gate .gate-canvas { width: 100%; height: 100%; display: block; z-index: 0; }
#gfi-gate .gate-atmos {
  z-index: 1;
  background:
    radial-gradient(ellipse 46% 52% at 74% 52%, rgba(255, 74, 28, 0.075), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}
#gfi-gate .gate-grain {
  z-index: 1; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 版面 ─────────────────────────────────────────────────────────── */
#gfi-gate .gate-frame { position: relative; z-index: 2; min-height: 100%; display: flex; flex-direction: column; padding: 0 var(--gut); }
#gfi-gate .gate-top, #gfi-gate .gate-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#gfi-gate .gate-top { height: 72px; border-bottom: 1px solid rgba(39, 43, 53, 0.7); }
#gfi-gate .gate-brand { display: flex; align-items: center; gap: 16px; }
#gfi-gate .gate-brand img { display: block; height: 28px; width: auto; }
#gfi-gate .gate-brand .dicon { height: 30px; opacity: 0.9; }
#gfi-gate .gate-brand i { width: 1px; height: 24px; background: rgba(242, 239, 233, 0.22); }
#gfi-gate .mono { font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; }
#gfi-gate .gate-top .mono, #gfi-gate .gate-foot { color: var(--mute); }
#gfi-gate .gate-main {
  flex: 1; width: 100%; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center; gap: clamp(32px, 6vw, 120px); padding: clamp(40px, 8vh, 96px) 0;
}
#gfi-gate .gate-foot { min-height: 60px; flex-wrap: wrap; border-top: 1px solid rgba(39, 43, 53, 0.7); padding: 12px 0; font-size: 13px; }
#gfi-gate .gate-foot .mono { font-size: 11px; }

/* ── 主標 ─────────────────────────────────────────────────────────── */
#gfi-gate .gate-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--mute); }
#gfi-gate .gate-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--laser); box-shadow: 0 0 14px rgba(255, 74, 28, 0.8); }
#gfi-gate .gate-title { margin: 0; font-weight: inherit; }
#gfi-gate .gate-title > span { display: block; }
#gfi-gate .gate-sys { font-size: 18px; font-weight: 700; letter-spacing: 0.34em; color: rgba(242, 239, 233, 0.86); margin-bottom: 18px; }
#gfi-gate .gate-year {
  font-size: clamp(84px, 13vw, 196px); line-height: 0.8; letter-spacing: -0.045em; margin-left: -0.05em;
  font-variation-settings: "wdth" 112, "wght" 780; font-variant-numeric: tabular-nums;
}
#gfi-gate .gate-main-title { margin-top: 0.22em; font-size: clamp(40px, 6.2vw, 92px); line-height: 1.08; font-weight: 700; letter-spacing: 0.06em; }
#gfi-gate .gate-main-title .ch { display: inline-block; }
#gfi-gate .gate-tagline { margin: 30px 0 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.5; color: rgba(242, 239, 233, 0.8); }
#gfi-gate .gate-word-slot { display: inline-grid; vertical-align: bottom; overflow: hidden; margin-left: 0.08em; }
#gfi-gate .gate-word-slot > span { grid-area: 1 / 1; color: var(--amber); font-weight: 700; }
#gfi-gate .gate-word-slot .sizer { visibility: hidden; }

/* ── 登入面板 ─────────────────────────────────────────────────────── */
#gfi-gate .gate-panel {
  position: relative; background: rgba(13, 15, 20, 0.8); border: 1px solid var(--line); border-top: 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}
#gfi-gate .gate-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 178, 63, 0.06), transparent 60%); }
/* 面板頂端是一段光纖：光從左端進入，在纖芯內全反射前進，從右端出來 */
#gfi-gate .gate-fiber { position: relative; height: 34px; margin: 0 -1px; }
#gfi-gate .gate-fiber svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: left center; }
#gfi-gate .fb-clad { stroke: var(--line2); stroke-width: 1; }
#gfi-gate .fb-core { fill: url(#gfi-gate-core); }
#gfi-gate .fb-edge { stroke: rgba(255, 178, 63, 0.22); stroke-width: 0.6; stroke-dasharray: 2 3; }
#gfi-gate .fb-ray { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 12 88; animation: gate-ray 2.8s linear infinite; }
#gfi-gate .fb-ray-faint { fill: none; stroke: rgba(255, 178, 63, 0.16); stroke-width: 1; }
#gfi-gate .gate-fiber-in, #gfi-gate .gate-fiber-out { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
#gfi-gate .gate-fiber-in { left: 0; background: var(--laser); box-shadow: 0 0 10px 2px rgba(255, 74, 28, 0.9), 0 0 36px 8px rgba(255, 74, 28, 0.35); }
#gfi-gate .gate-fiber-in.arrive { animation: gate-arrive 0.9s var(--ease); }
#gfi-gate .gate-fiber-out { left: 100%; background: #ffe2b0; animation: gate-out 2.8s ease-out infinite; }
#gfi-gate .gate-body { position: relative; padding: 30px 40px 34px; }
#gfi-gate .gate-kicker { margin: 0 0 14px; color: var(--laser); }
#gfi-gate .gate-panel h2 { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: 0.02em; }
#gfi-gate .gate-panel h2:focus { outline: none; }
#gfi-gate .gate-sub { margin: 8px 0 26px; color: var(--mute); text-wrap: pretty; }
#gfi-gate .gate-body p { text-wrap: pretty; }
#gfi-gate .gate-sub b, #gfi-gate .gate-body p b { color: var(--paper); font-weight: 600; word-break: break-all; }
#gfi-gate .gate-gbtn { display: flex; min-height: 44px; width: 100%; }
#gfi-gate .gate-gbtn iframe { color-scheme: normal; }
#gfi-gate.is-busy .gate-gbtn, #gfi-gate.is-busy .gate-form { opacity: 0.35; pointer-events: none; transition: opacity 0.3s; }
/* Google 用不了時，按鈕的位置放一句說明 */
#gfi-gate .gate-gbtn:not(:has(iframe, div)) { align-items: center; color: var(--mute); font-size: 14px; }
/* 「或」分隔線 ＋ 公司電腦帳號表單 */
#gfi-gate .gate-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: var(--mute); font-size: 13px; }
#gfi-gate .gate-or::before, #gfi-gate .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#gfi-gate .gate-form { display: grid; gap: 12px; margin: 0; }
#gfi-gate .gate-form-title { margin: 0; font-weight: 600; color: var(--paper); }
#gfi-gate .gate-field { display: grid; gap: 6px; }
#gfi-gate .gate-field span { color: var(--mute); font-size: 13px; }
#gfi-gate .gate-field input {
  width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 0;
  background: rgba(6, 7, 10, 0.6); color: var(--paper); font: 400 16px/1.3 var(--sans); /* 16px：iPhone 點進去不會自動放大 */
}
#gfi-gate .gate-field input:hover { border-color: var(--mute); }
#gfi-gate .gate-field input:focus { border-color: var(--laser); }
#gfi-gate .gate-form .gate-btn { justify-content: center; width: 100%; margin-top: 4px; }
#gfi-gate .gate-btn:disabled { opacity: 0.5; cursor: progress; }
#gfi-gate .gate-hint { margin: 0; color: var(--mute); font-size: 13px; text-wrap: pretty; }
#gfi-gate .gate-msg { margin: 16px 0 0; font-size: 14px; line-height: 1.6; text-wrap: pretty; }
#gfi-gate .gate-msg:empty { display: none; }
#gfi-gate .gate-msg[data-kind="busy"], #gfi-gate .gate-msg[data-kind="ok"] { display: flex; align-items: center; gap: 12px; color: var(--paper); }
#gfi-gate .gate-msg[data-kind="busy"]::before, #gfi-gate .gate-msg[data-kind="ok"]::before {
  content: ""; flex: none; width: 36px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 50%, transparent) 0 0 / 200% 100% no-repeat, rgba(255, 178, 63, 0.18);
  animation: gate-scan 1.1s linear infinite;
}
#gfi-gate .gate-msg[data-kind="ok"]::before { background: var(--amber); animation: none; }
#gfi-gate .gate-msg[data-kind="error"] { padding: 10px 14px; border-left: 2px solid var(--alert); background: rgba(255, 138, 115, 0.08); color: #ffd2c8; }
#gfi-gate .gate-msg small { display: block; margin-top: 4px; color: var(--mute); font-size: 12px; }
#gfi-gate .gate-msg button { margin-top: 10px; }
#gfi-gate .gate-sep { height: 1px; margin: 28px 0 20px; background: linear-gradient(90deg, var(--line), transparent); border: 0; }
#gfi-gate .gate-label { margin: 0 0 10px; color: var(--mute); font-size: 13px; }
#gfi-gate .gate-domains { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
#gfi-gate .gate-domains li { font-family: var(--mono); font-size: 12px; line-height: 1; padding: 7px 9px; border: 1px solid var(--line); color: rgba(242, 239, 233, 0.92); background: rgba(6, 7, 10, 0.5); }
#gfi-gate .gate-note { margin: 18px 0 0; color: var(--mute); font-size: 13px; text-wrap: pretty; }
#gfi-gate .gate-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line2); background: rgba(242, 239, 233, 0.04); color: var(--paper);
  font: 500 15px/1.2 var(--sans); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
#gfi-gate .gate-btn:hover { border-color: var(--laser); background: rgba(255, 74, 28, 0.1); }
#gfi-gate .gate-btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
#gfi-gate .gate-btn.primary:hover { background: #fff; }
#gfi-gate .gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
#gfi-gate .gate-url { display: block; margin-top: 6px; font-family: var(--mono); font-size: 14px; color: var(--amber); word-break: break-all; }

/* 動態開關 */
#gfi-gate .gate-motion {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px;
  border: 1px solid var(--line); background: transparent; color: var(--mute); cursor: pointer;
}
#gfi-gate .gate-motion:hover { color: var(--paper); border-color: var(--line2); }
#gfi-gate .gate-motion i { width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
#gfi-gate .gate-motion[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
#gfi-gate .gate-help { color: var(--mute); }

/* ── 手機與窄螢幕 ─────────────────────────────────────────────────── */
@media (max-width: 920px) {
  #gfi-gate .gate-main { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 32px 0 40px; max-width: 560px; }
  #gfi-gate .gate-eyebrow { margin-bottom: 18px; }
  #gfi-gate .gate-sys { font-size: 15px; margin-bottom: 12px; }
  #gfi-gate .gate-tagline { margin-top: 18px; }
  /* 窄螢幕光纖從右側垂下：入口改在面板光纖的右端，光往左走 */
  #gfi-gate .gate-fiber svg { transform-origin: right center; }
  #gfi-gate .fb-ray { animation-direction: reverse; }
  #gfi-gate .gate-fiber-in { left: 100%; }
  #gfi-gate .gate-fiber-out { left: 0; }
}
@media (max-width: 480px) {
  #gfi-gate .gate-top { height: 60px; }
  #gfi-gate .gate-top .mono { display: none; }
  #gfi-gate .gate-brand img { height: 24px; }
  #gfi-gate .gate-brand .dicon { height: 26px; }
  #gfi-gate .gate-body { padding: 24px 20px 28px; }
  #gfi-gate .gate-panel h2 { font-size: 26px; }
  #gfi-gate .gate-foot { justify-content: flex-start; }
}
@media (max-height: 640px) and (min-width: 921px) {
  #gfi-gate .gate-main { padding: 24px 0; }
  #gfi-gate .gate-year { font-size: clamp(72px, 10vw, 140px); }
}

/* ── 開場：約 1.8 秒；任何點按、按鍵、捲動立即跳到結尾（.gate-skip），全程不擋操作 ── */
#gfi-gate.gate-intro .gi { animation: gate-rise 0.7s var(--ease) var(--d, 0s) both; }
#gfi-gate.gate-intro .gate-fiber-in.gi { animation: gate-ignite 0.8s var(--ease) 0.05s both; }
#gfi-gate.gate-intro .gate-fiber svg.gi { animation: gate-beam 0.7s cubic-bezier(0.7, 0, 0.2, 1) 0.2s both; }
#gfi-gate.gate-intro .gate-panel.gi { animation: gate-unfold 0.75s cubic-bezier(0.7, 0, 0.2, 1) 0.6s both; }
#gfi-gate.gate-intro .gate-year.gi { animation: gate-year 1.25s var(--ease) 0.3s both; }
#gfi-gate.gate-intro .ch.gi { animation: gate-char 0.8s var(--ease) calc(0.45s + var(--i) * 70ms) both; }
#gfi-gate.gate-skip .gi { animation: none !important; }
#gfi-gate.gate-still .fb-ray, #gfi-gate.gate-still .gate-fiber-out, #gfi-gate.gate-still .gate-msg::before { animation-play-state: paused; }

@keyframes gate-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes gate-char { from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); } }
@keyframes gate-year { from { opacity: 0; font-variation-settings: "wdth" 66, "wght" 260; letter-spacing: 0.02em; } }
@keyframes gate-beam { from { transform: scaleX(0); } }
@keyframes gate-ignite { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes gate-unfold {
  from { clip-path: inset(-120px -120px calc(100% - 34px) -120px); }
  to { clip-path: inset(-120px -120px -120px -120px); }
}
@keyframes gate-ray { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -88; } }
@keyframes gate-out { 0%, 74% { opacity: 0.15; transform: scale(0.6); } 88% { opacity: 1; transform: scale(1.6); } 100% { opacity: 0.15; transform: scale(0.6); } }
@keyframes gate-arrive { 30% { transform: scale(2.1); box-shadow: 0 0 14px 4px rgba(255, 120, 60, 1), 0 0 60px 16px rgba(255, 74, 28, 0.5); } }
@keyframes gate-scan { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

/* 系統設定「減少動態」：不播開場、不跑環境動態，畫面維持完整的靜止樣子 */
@media (prefers-reduced-motion: reduce) {
  #gfi-gate .gi, #gfi-gate .gate-fiber-out, #gfi-gate .gate-fiber-in, #gfi-gate .gate-msg::before { animation: none !important; }
  #gfi-gate .fb-ray { animation: none; stroke-dasharray: none; stroke: rgba(255, 178, 63, 0.6); }
  #gfi-gate .gate-fiber-out { opacity: 0.7; }
}