/* ============================================================
   ACIE Awards — shared chrome for sub-pages (Category / Vote / Register)
   Same design language as the cinematic home, but laid out responsively.
   ============================================================ */
:root{
  color-scheme:dark;
  --ink:#0E0C09; --card:#14110D; --edge:#4A3E2A; --line:#3A3122; --rule:#C28D39;
  --champ:#EFE5D2; --champ-85:rgba(239,229,210,.85); --muted:#A39480; --dim:#6F6453; --numeral:#8A7A62;
  --gold:#C39D39; --gold-l:#D9BC73; --green:var(--accent,#5AA67F); --green-h:var(--accent-hover,#4E9772); --bar:var(--accent-deep,#3E6A50); --logo:var(--accent-logo,var(--accent,#3DB07A));
  --en:"Cormorant Garamond","Times New Roman","Songti TC",serif;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --wrap:1412px;   /* designer content column (x255–1667 of the 1920 board) */
  --k:1;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--champ);overflow-x:clip}
body{font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* fixed ambient background (gold wave) — matched to the home */
.bgfix{position:fixed;inset:0;z-index:-1;background:var(--ink) url(img/bg.webp) center/cover no-repeat}
.bgfix::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,9,.34),rgba(14,12,9,.2) 30%,rgba(14,12,9,.6))}

/* scroll-reveal handled by GSAP (gsap.from sets the hidden start state inline);
   no CSS pre-hide, so content is always visible if JS/GSAP is unavailable */
@media print{[data-rv]{opacity:1!important;transform:none!important}}

/* rotating VOTE badge — identical to the home (1920-grid, scaled by --k) */
.badge-wrap{position:fixed;right:0;bottom:0;width:1920px;height:1080px;transform:scale(var(--k));transform-origin:100% 100%;pointer-events:none;z-index:35}
.badge{position:absolute;left:1716px;top:876px;width:330px;height:330px;pointer-events:auto;border-radius:50%}
.badge svg{width:100%;height:100%;overflow:visible}
.badge .ring{transform-box:fill-box;transform-origin:center;animation:spin 20s linear infinite}
.badge text{font-family:var(--en);font-size:40px;letter-spacing:6px;fill:var(--champ)}
.badge:hover text{fill:var(--gold-l)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.badge .ring{animation:none}}

/* type helpers */
.serif{font-family:var(--serif);font-weight:400;line-height:1.44}
.en{font-family:var(--en);line-height:1.2}
.gold{color:var(--gold)} .goldl{color:var(--gold-l)} .muted{color:var(--muted)} .dim{color:var(--dim)}
.kick{font-size:13px;letter-spacing:4px;font-weight:500;color:var(--gold);text-transform:uppercase}
.num{font-family:var(--en);color:var(--numeral)}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:1px;white-space:nowrap;cursor:pointer;transition:background .25s,transform .25s,border-color .25s,color .25s}
.pill .arw{display:inline-block;margin-left:8px;transition:transform .25s}
.pill:hover .arw{transform:translateX(4px)}
.pill.green{background:var(--green);color:#fff;border:0}
.pill.green:hover{background:var(--green-h)}
.pill.ghost{border:1.2px solid var(--gold);color:var(--champ);background:none}
.pill.ghost:hover{background:rgba(195,157,57,.14)}
.pill.sm{height:44px;padding:0 22px;font-size:15px}
.pill.off{border:1px solid var(--dim);color:var(--dim);background:none;cursor:not-allowed}

/* ---------- 1920 design stage (home standard) ----------
   The page is laid out at 1920px, then the whole stage is scaled by --k = innerWidth/1920,
   exactly like the home. .stage-wrap gets its height set by page.js (= stage height × k)
   so document scroll length stays correct. Below 860px the stage is unscaled and reflows. */
.stage-wrap{position:relative;width:100%}
.stage{width:1920px;transform:scale(var(--k));transform-origin:0 0}

/* ---------- header (scaled 1920, like the home) ---------- */
.site-head{position:fixed;left:0;top:0;width:1920px;transform:scale(var(--k));transform-origin:0 0;z-index:60}
.phase-bar{height:49px;background:var(--bar);display:flex;align-items:center;justify-content:center;gap:14px;font-size:15px;color:var(--champ);padding:0 20px}
.phase-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-l);flex:none}
.phase-bar b{font-weight:700}
.phase-bar .note{color:var(--champ-85)}
.phase-bar .cta{background:var(--green);color:#fff;padding:6px 16px;border-radius:3px;font-size:14px;transition:background .25s}
.phase-bar .cta:hover{background:var(--green-h)}
.navm{position:relative;background:transparent;transition:background .4s,backdrop-filter .4s}
.site-head.solid .navm{background:linear-gradient(180deg,rgba(14,12,9,.94),rgba(14,12,9,.75));backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;height:92px;max-width:1714px;margin:0 auto;padding:0;gap:30px}  /* 103px in from each edge, like the home logo */
.logo{position:relative;width:166px;height:47px;flex:none}
.logo img{position:absolute;max-width:none}
.logo .trophy{left:0;top:0;height:44.5px;width:19px;object-fit:contain;object-position:center top}
.logo .word{left:24px;top:11.4px;width:142px;height:26px;object-fit:contain}
.logo .sub{left:22px;top:35.5px;width:142.5px;height:11.6px;object-fit:contain}
.menu{margin-left:auto;display:flex;gap:30px}
.menu a{font-size:16px;color:var(--champ);transition:color .2s;white-space:nowrap}
.menu a:hover,.menu a.active{color:var(--gold-l)}
.lang{font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.lang:hover{color:var(--gold-l)}
.vote{width:118px;height:44px;display:grid;place-items:center;border:1.2px solid var(--gold);border-radius:2px;font-size:16px;transition:background .25s;flex:none}
.vote:hover{background:rgba(195,157,57,.14)}
.menu-btn{display:none}

/* page offset under fixed header */
.page{padding-top:141px}
section{position:relative}

/* ---------- page hero (shared) ---------- */
.phero{padding:92px 0 40px}
.phero h1{font-family:var(--serif);font-weight:500;font-size:84px;line-height:1.05;margin:0;letter-spacing:2px}
.phero .lead{font-size:22px;color:var(--champ-85);margin:22px 0 0;max-width:720px;line-height:1.7}
.phero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.statset{display:flex;gap:56px;align-items:flex-end}
.statset .st{text-align:center}
.statset .st .lb{font-size:13px;color:var(--gold);letter-spacing:1px}
.statset .st .vv{font-family:var(--en);font-size:62px;line-height:1;color:var(--champ);margin-top:8px}
.statset .st .sub{font-size:14px;color:var(--muted);margin-top:6px;letter-spacing:1px}
.hr-gold{height:1px;background:var(--edge);margin:34px 0}

/* ---------- 腳頁流線鎏金：Higgsfield 生成的 5 秒無縫循環影片（線條不動，霓虹金光由左至右沿線流動） ---------- */
.foot-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:0;pointer-events:none;opacity:.6}

/* ---------- footer (shared) — gold ribbon wave, matching the design ---------- */
.foot{position:relative;margin-top:120px;padding:210px 0 42px;overflow:hidden}
.foot{background:#0E0C09}
.foot::before{content:"";position:absolute;inset:0;background:url(img/footer_glow_poster.jpg) center bottom/cover no-repeat;opacity:.6;z-index:0}
.foot::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,var(--ink) 0%,rgba(14,12,9,0) 100%);z-index:0}
.foot .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;align-items:start}
.foot-brand .big{font-family:var(--en);font-size:96px;line-height:.95;color:var(--champ);margin:0}

.foot-brand .tag{color:var(--muted);font-size:16px;margin:18px 0 0;letter-spacing:.5px}
.fcol h4{margin:0 0 18px;font-size:14px;font-weight:500;letter-spacing:4px;color:var(--gold)}
.fcol h4::after{content:"";display:block;width:24px;height:1px;background:var(--gold);margin-top:8px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;row-gap:15px}
.fcol a{font-size:16px;color:var(--champ-85);transition:color .2s}
.fcol a:hover{color:var(--gold-l)}
.foot-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:70px;padding-top:26px;border-top:1px solid var(--edge);font-size:13px;color:var(--dim)}
.foot-bot .lang{color:var(--muted)}


/* ---------- 換頁轉場（淡出＋微上移） ---------- */
#acieFade{position:fixed;inset:0;background:#0E0C09;z-index:200;pointer-events:none;opacity:0;transition:opacity .26s ease-in}
#acieFade.on{opacity:1}
html.acie-tr body{background:#0E0C09}
html.acie-tr .stage-wrap,html.acie-tr main#top{opacity:0;transform:translateY(14px)}
html.acie-tr-in .stage-wrap,html.acie-tr-in main#top{transition:opacity .32s ease-out,transform .32s ease-out}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .phero h1{font-size:64px}
  .foot-brand .big{font-size:72px}
}
@media (max-width:860px){
  .stage{width:auto;transform:none}
  .stage-wrap{height:auto!important}
  .site-head{width:100%;transform:none}
  .wrap{padding:0 20px}
  .nav{padding:0 20px;height:66px;gap:16px;max-width:none}
  .menu{position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;background:rgba(14,12,9,.98);flex-direction:column;gap:0;padding:92px 28px;transform:translateX(100%);transition:transform .35s;z-index:70;align-items:flex-start}
  .menu.open{transform:none}
  .menu a{font-size:20px;padding:16px 0;width:100%;border-bottom:1px solid var(--line)}
  .menu-btn{display:grid;place-items:center;margin-left:auto;width:42px;height:42px;background:none;border:1px solid var(--edge);border-radius:8px;cursor:pointer;z-index:75}
  .menu-btn span{width:18px;height:1.6px;background:var(--champ);position:relative;display:block}
  .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:var(--champ)}
  .menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
  .lang{order:3}
  .vote{display:none}
  .phase-bar .note{display:none}
  .page{padding-top:115px}
  .phero{padding:48px 20px 24px}
  /* 手機：橫幅一行、標題與按鈕不折行 */
  .phase-bar{height:auto;min-height:44px;padding:6px 12px;gap:8px;font-size:13px}
  .phase-bar b{white-space:nowrap}
  .phase-bar .cta{white-space:nowrap;flex:none;font-size:12px;padding:5px 10px;margin-left:auto}
  .phero h1{font-size:44px}
  .phero .lead{font-size:16px}
  .statset{gap:30px}
  .statset .st .vv{font-size:44px}
  .foot{padding:72px 0 34px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px 24px}
  .foot-brand{grid-column:1/-1}
  .foot-brand .big{font-size:52px}
  .badge-wrap{width:auto;height:auto;transform:none;right:0;bottom:0}
  .badge{position:fixed;left:auto;top:auto;right:-66px;bottom:-66px;width:176px;height:176px}
}