/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }

:root {
  --gold:        #D4AF37;
  --gold-light:  #F5E090;
  --gold-dim:    #8C6E1A;
  --gold-glow:   rgba(212,175,55,0.35);
  --bg:          #04040C;
  --bg-card:     rgba(12,12,22,0.82);
  --text:        #EDEDF0;
  --text-dim:    #888898;
  --border:      rgba(212,175,55,0.28);
}

body {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* BACKGROUNDS */
#bg-canvas {
  position: fixed; top:0; left:0; width:100%; height:100%;
  z-index: 0; pointer-events: none;
}
.grid-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(212,175,55,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(212,175,55,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.vignette {
  position: fixed; top:0; left:0; width:100%; height:100%;
  z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(4,4,12,0.85) 100%);
}

/* GLASS NAV */
.glass-nav {
  position: fixed; top: 20px; left: 5%; right: 5%;
  background: rgba(8,8,18,0.6);
  backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 70px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  z-index: 1000;
  animation: navSlide 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
@keyframes navSlide { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0); } }
.nav-container {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 2rem;
}
.nav-logo {
  font-size: 1.7rem; font-weight: 700;
  background: linear-gradient(135deg, #FFFFFF 0%, #D4AF37 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  text-decoration: none; letter-spacing: -0.03em;
}
.nav-right {
  display: flex; align-items: center; gap: 20px;
}
.status-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.2);
  border-radius: 50px; padding: 5px 14px;
  font-size: 0.72rem; letter-spacing: 2.5px; color: var(--gold);
  text-transform: uppercase; font-weight: 500;
}
.status-dot {
  width: 7px; height: 7px; background: var(--gold); border-radius: 50%;
  flex-shrink: 0; animation: statusPulse 2s infinite;
}
@keyframes statusPulse {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(212,175,55,0.5); }
  50%      { opacity:0.7; box-shadow: 0 0 0 5px rgba(212,175,55,0); }
}
/* 漢堡選單 (手機版) */
.hamburger {
  display: none; flex-direction: column; justify-content: space-between;
  width: 30px; height: 24px; cursor: pointer; margin-left: 1rem;
}
.hamburger span {
  display: block; height: 2px; width: 100%; background: var(--gold);
  border-radius: 2px; transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.hamburger-menu {
  position: absolute; top: calc(100% + 12px); right: 5%;
  background: rgba(8,8,18,0.96); backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: 32px; padding: 1rem;
  display: flex; flex-direction: column; gap: 1rem; min-width: 180px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: all 0.3s ease; z-index: 1100;
}
.hamburger-menu.active {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.hamburger-menu a {
  color: var(--text); text-decoration: none; font-size: 1rem; font-weight: 500;
  padding: 0.5rem 1rem; border-radius: 50px; display: flex; align-items: center; gap: 10px;
  transition: all 0.2s;
}
.hamburger-menu a:hover { background: rgba(212,175,55,0.15); color: var(--gold); }

/* HERO */
.hero {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; position: relative; z-index: 10; text-align: center;
  padding: 120px 20px 80px;
}
.robot-stage { position: relative; width: 380px; height: 460px; }
.holo-ring {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 30px;
  background: radial-gradient(ellipse, rgba(212,175,55,0.25) 0%, transparent 70%);
  border-radius: 50%; filter: blur(4px); animation: ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100% { opacity:0.6; transform: translateX(-50%) scaleX(1); } 50% { opacity:1; transform: translateX(-50%) scaleX(1.1); } }
.orbit-ring {
  position: absolute; bottom: 0; left: 50%; width: 300px; height: 40px;
  transform: translateX(-50%); pointer-events: none;
}
.orbit-dot {
  position: absolute; width: 5px; height: 5px; background: var(--gold);
  border-radius: 50%; box-shadow: 0 0 8px var(--gold);
  animation: orbit 4s linear infinite; top: 50%; left: 50%;
}
.orbit-dot:nth-child(2) { animation-delay: -1.33s; opacity: 0.6; }
.orbit-dot:nth-child(3) { animation-delay: -2.66s; opacity: 0.4; }
@keyframes orbit {
  0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(140px) scale(1); }
  50%  { transform: translate(-50%,-50%) rotate(180deg) translateX(140px) scale(0.5); opacity: 0.2; }
  100% { transform: translate(-50%,-50%) rotate(360deg) translateX(140px) scale(1); }
}
.robot-wrap {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(140%) scale(0.5); opacity: 0;
  animation: robotEnter 1.4s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
  will-change: transform;
}
@keyframes robotEnter {
  0%   { transform: translateX(-50%) translateY(140%) scale(0.5) rotate(-3deg); opacity:0; }
  55%  { transform: translateX(-50%) translateY(-6%) scale(1.05) rotate(1deg);  opacity:1; }
  75%  { transform: translateX(-50%) translateY(2%)  scale(0.97) rotate(0deg);  opacity:1; }
  100% { transform: translateX(-50%) translateY(0)   scale(1)    rotate(0deg);  opacity:1; }
}
.robot-inner { animation: robotFloat 4s ease-in-out 2s infinite; }
@keyframes robotFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.speech-bubble {
  position: absolute; top: -10px; right: -145px;
  background: rgba(8,8,20,0.9); backdrop-filter: blur(16px);
  border: 1px solid rgba(212,175,55,0.5); border-radius: 18px 18px 18px 4px;
  padding: 10px 18px; font-size: 0.82rem; font-weight: 500; color: var(--gold);
  letter-spacing: 0.3px; white-space: nowrap; opacity: 0;
  transform: scale(0.75) translateY(10px);
  animation: bubbleIn 0.6s cubic-bezier(0.22,1,0.36,1) 2s forwards;
  pointer-events: none; z-index: 20;
}
.speech-bubble::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: rgba(212,175,55,0.5);
}
@keyframes bubbleIn { to { opacity:1; transform: scale(1) translateY(0); } }

/* ROBOT SVG GROUPS */
#robot-head-group { transition: transform 0.12s cubic-bezier(0.2,1,0.4,1); transform-origin: 120px 95px; }
#robot-eye-l, #robot-eye-r { transition: transform 0.08s ease; transform-origin: center; }
#robot-arm-right { transform-origin: 174px 190px; animation: armIdleR 4s ease-in-out 2s infinite; }
#robot-arm-left { transform-origin: 66px 190px; animation: armIdleL 4s ease-in-out 2.4s infinite; }
@keyframes armIdleR { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } }
@keyframes armIdleL { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }
#robot-arm-right.throwing { animation: armThrow 0.65s cubic-bezier(0.22,1,0.36,1) forwards !important; }
@keyframes armThrow { 0% { transform: rotate(0deg); } 28% { transform: rotate(-60deg); } 62% { transform: rotate(40deg); } 82% { transform: rotate(8deg); } 100% { transform: rotate(12deg); } }
#robot-body-group { animation: bodyBreathe 3.8s ease-in-out 2s infinite; transform-origin: 120px 220px; }
@keyframes bodyBreathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }

/* THROW BUTTONS (桌面版) */
.buttons-layer { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events: none; }
.throw-btn {
  position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%) scale(0); opacity:0;
  pointer-events: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 0.72rem 1.5rem; border-radius: 50px; font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem; font-weight: 500; color: var(--text); text-decoration: none;
  background: rgba(8,8,20,0.8); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(212,175,55,0.45);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  white-space: nowrap; transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s, transform 0.2s;
  z-index: 30; letter-spacing: 0.2px;
}
.throw-btn:hover { background: rgba(212,175,55,0.14); border-color: var(--gold); color: #FFE6AA; box-shadow: 0 8px 30px rgba(212,175,55,0.22), inset 0 1px 0 rgba(255,255,255,0.06); }
.btn-icon { font-size: 1.05rem; flex-shrink: 0; }
.throw-btn[data-i="0"] { --tx:-280px; --ty:-220px; }
.throw-btn[data-i="1"] { --tx:-140px; --ty:-300px; }
.throw-btn[data-i="2"] { --tx:   10px; --ty:-330px; }
.throw-btn[data-i="3"] { --tx:  165px; --ty:-305px; }
.throw-btn[data-i="4"] { --tx:  300px; --ty:-225px; }
.throw-btn.thrown { pointer-events: all; animation: btnFly var(--dur,0.8s) cubic-bezier(0.22,1,0.36,1) var(--dly,0s) forwards; }
@keyframes btnFly {
  0%   { transform: translateX(-50%) translateX(0) translateY(0) scale(0.2) rotate(0deg); opacity:0; }
  15%  { opacity:1; }
  62%  { transform: translateX(-50%) translateX(calc(var(--tx)*1.07)) translateY(calc(var(--ty)*1.1)) scale(1.06) rotate(calc(var(--spin,0deg)*1.2)); }
  82%  { transform: translateX(-50%) translateX(calc(var(--tx)*0.97)) translateY(calc(var(--ty)*0.96)) scale(0.97) rotate(calc(var(--spin,0deg)*0.9)); }
  100% { transform: translateX(-50%) translateX(var(--tx)) translateY(var(--ty)) scale(1) rotate(var(--spin,0deg)); opacity:1; }
}
@media (min-width: 700px) {
  .throw-btn[data-i="0"] { --tx:-340px; --ty:-195px; }
  .throw-btn[data-i="1"] { --tx:-175px; --ty:-295px; }
  .throw-btn[data-i="2"] { --tx:   10px; --ty:-335px; }
  .throw-btn[data-i="3"] { --tx:  195px; --ty:-295px; }
  .throw-btn[data-i="4"] { --tx:  355px; --ty:-195px; }
}

/* ENERGY LINES */
.energy-burst { position: absolute; bottom: 142px; left: calc(50% + 65px); width:0; height:0; pointer-events: none; z-index: 25; }
.e-line {
  position: absolute; top:0; left:0; width:3px; height:0;
  background: linear-gradient(to top, var(--gold), transparent); border-radius:2px;
  transform-origin: bottom center; opacity:0;
}
.e-line:nth-child(1) { transform: rotate(-60deg); }
.e-line:nth-child(2) { transform: rotate(-30deg); }
.e-line:nth-child(3) { transform: rotate(0deg); }
.e-line:nth-child(4) { transform: rotate(30deg); }
.e-line:nth-child(5) { transform: rotate(60deg); }
.e-line.burst { animation: eLine 0.5s ease-out forwards; }
@keyframes eLine {
  0%   { height:0; opacity:0.9; }
  60%  { height:55px; opacity:0.8; }
  100% { height:70px; opacity:0; }
}
.e-line:nth-child(1).burst { animation-delay:0s; }
.e-line:nth-child(2).burst { animation-delay:0.04s; }
.e-line:nth-child(3).burst { animation-delay:0.02s; }
.e-line:nth-child(4).burst { animation-delay:0.05s; }
.e-line:nth-child(5).burst { animation-delay:0.01s; }

/* TAGLINE + SCROLL */
.hero-tagline {
  margin-top: 3.5rem; font-size: 0.75rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-dim); opacity: 0; transform: translateY(12px);
  animation: fadeUp 0.8s ease 3.4s forwards; font-weight: 400;
}
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: fadeUp 1s ease 4.2s forwards; z-index: 5;
}
.scroll-hint span { font-size:0.6rem; letter-spacing:4px; color:#444; text-transform:uppercase; font-weight:400; }
.scroll-line { width:1px; height:42px; background: linear-gradient(to bottom, var(--gold), transparent); }
.scroll-line::after {
  content:''; display:block; width:1px; height:100%; background:inherit;
  animation: scrollDrop 2s ease-in-out 4.5s infinite; transform-origin:top;
  transform:scaleY(0);
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* FOOTER */
.footer {
  position: relative; z-index: 10; border-top: 1px solid rgba(212,175,55,0.12);
  padding: 2rem; text-align: center; font-size: 0.72rem; color: #383848;
  letter-spacing: 2px; text-transform: uppercase;
}

/* RESPONSIVE (手機平板電腦) */
@media (max-width: 768px) {
  .buttons-layer { display: none !important; }
  .hamburger { display: flex; }
  .glass-nav { top: 12px; left: 3%; right: 3%; width: 94%; }
  .nav-container { padding: 0.55rem 1.2rem; }
  .nav-logo { font-size: 1.3rem; }
  .status-pill { padding: 3px 10px; font-size: 0.6rem; letter-spacing: 1.5px; }
  .status-dot { width:5px; height:5px; }
  .hero { padding: 100px 16px 60px; }
  .robot-stage { width: 280px; height: 360px; }
  .speech-bubble { right: -70px; top: -18px; font-size: 0.7rem; padding: 6px 12px; white-space: nowrap; }
  .holo-ring { width: 200px; height: 22px; }
  .orbit-ring { width: 240px; }
  .orbit-dot { width:4px; height:4px; }
  @keyframes orbit {
    0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(110px) scale(1); }
    100% { transform: translate(-50%,-50%) rotate(360deg) translateX(110px) scale(1); }
  }
  .hero-tagline { font-size: 0.6rem; letter-spacing: 3px; margin-top: 2.5rem; }
  .scroll-hint span { font-size:0.5rem; }
  .footer { padding: 1.2rem; font-size: 0.6rem; }
}
@media (max-width: 480px) {
  .robot-stage { width: 260px; height: 340px; }
  .speech-bubble { right: -40px; top: -20px; font-size: 0.65rem; padding: 5px 10px; }
  .hero-tagline { font-size: 0.55rem; }
}
@media (min-width: 1440px) {
  .robot-stage { width: 440px; height: 520px; }
  .throw-btn { padding: 0.9rem 1.8rem; font-size: 1rem; }
  .btn-icon { font-size: 1.2rem; }
  .speech-bubble { font-size: 0.9rem; padding: 12px 20px; right: -170px; }
  .hero-tagline { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .robot-wrap { opacity:1; transform: translateX(-50%) scale(1); }
}