/* =========================================================
   PMSA Deck · theme.css — shared by every slide + deck.html
   Change colours / fonts here and every slide updates.
   ========================================================= */
:root{
  --bg:#040a1e; --navy:#0a1a3a; --cyan:#22d3ee; --blue:#3b82f6; --purple:#a78bfa;
  --green:#34d399; --text:#e8f0ff; --muted:#8ea3c9; --line:rgba(140,180,255,.16);
  --glass:rgba(255,255,255,.045); --glass-b:rgba(160,200,255,.16);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#020612;overflow:hidden;
  font-family:"Inter","Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--text)}
h1,h2,h3,p{margin:0}

/* ---------- 1600×900 stage (scaled by slide.js) ---------- */
#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:center center;transform:translate(-50%,-50%)}
.slide{position:absolute;inset:0;padding:72px 88px 80px;opacity:0;visibility:hidden;transition:opacity .7s ease;
  background:radial-gradient(1100px 700px at 78% 42%,#0e2554 0%,#081537 45%,#040a1e 100%);overflow:hidden}
.slide.active{opacity:1;visibility:visible}
.slide::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse at 70% 45%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 45%,#000 0%,transparent 70%)}

/* ---------- typography & common parts ---------- */
.eyebrow{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.eyebrow .zh{letter-spacing:.12em;margin-left:10px}
.zh{color:var(--muted);font-weight:400}
.grad{background:linear-gradient(90deg,#60a5fa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;background:var(--glass);
  border:1px solid var(--glass-b);font-size:15px;color:var(--text);backdrop-filter:blur(8px)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--glass-b);
  border-radius:18px;backdrop-filter:blur(10px)}
.footer{position:absolute;left:88px;right:88px;bottom:30px;display:flex;justify-content:flex-start;
  font-size:15px;color:var(--text)}

/* ---------- reveal on enter ---------- */
.rv{opacity:0;transform:translateY(18px)}
.slide.active .rv{animation:up .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}

/* ---------- shared animations ---------- */
@keyframes up{to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes flow{to{stroke-dashoffset:-40}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes glowp{0%,100%{opacity:.75}50%{opacity:1}}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
.spinR{transform-box:fill-box;transform-origin:center;animation:spinR 80s linear infinite}
.flow{stroke-dasharray:6 6;animation:flow 2.4s linear infinite}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}

/* ---------- deck viewer controls (deck.html only) ---------- */
.nav{position:fixed;right:28px;bottom:22px;display:flex;align-items:center;gap:12px;z-index:9;color:#9fb3da;font-size:14px;
  font-variant-numeric:tabular-nums;letter-spacing:.1em}
.nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-b);background:rgba(10,24,60,.6);color:#cfe0ff;font-size:20px;cursor:pointer}
.nav button:hover{border-color:var(--cyan);color:#fff}
.progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#3b82f6,#22d3ee);transition:width .5s;z-index:9}