/* MOAT Entry layer — 進入架構（粒子球 → ENTER → 爆散 → Logo 動畫 → 語言選擇 → Logo 飛進 Nav）
   與首頁的接合點只有三處：①<head> 先加 pre/intro-lock ②Nav 的 Logo 圖換成去透明邊版 ③body 末尾載入 entry.js
   由 prototype/entry/build_home_entry.py 產生 home_entry.html；home.html 本身不動。 */
:root{ --ease-fly:cubic-bezier(.7,0,.2,1); }
html.intro-lock,html.intro-lock body{overflow:hidden;height:100%;}

/* 進場內的按鈕一律去掉瀏覽器預設外觀（首頁本身沒有全域 button 重設；用 :where 讓特異度為 0，不蓋掉下面各自的樣式） */
:where(#intro) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;appearance:none;-webkit-appearance:none;border-radius:0;}
#intro{color:#fff;font-family:"Inter","PingFang TC","Noto Sans TC",-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}

/* Nav：Logo 用去透明邊的版本（視覺尺寸比原本的 34px 高 padded PNG 大得多），保持原 Nav 高度 78px */
.nav-inner{min-height:78px;}
.nav-logo{display:block;}
.nav-logo img{height:30px;width:auto;display:block;}
@media (max-width:768px){ .nav-inner{min-height:64px;padding-top:18px;padding-bottom:18px;} .nav-logo img{height:24px;} }

/* 進場前：Nav 底線/連結與內容先隱藏（Nav 仍佔版面，Logo 才能量到真實落點） */
html.pre header.nav{background:transparent;border-bottom-color:transparent;}
html.pre .nav-logo img{visibility:hidden;}
html.pre .nav-links,html.pre .nav-burger,html.pre .nav-contact{opacity:0;}
html.pre body > section,html.pre body > footer{opacity:0;}
header.nav{transition:background .6s var(--ease,ease),border-color .6s var(--ease,ease);}
.nav-links,.nav-burger,.nav-contact{transition:opacity .7s var(--ease,ease) .15s;}
@keyframes moatEntryFadeIn{from{opacity:0}to{opacity:1}}
html.rev body > section,html.rev body > footer{animation:moatEntryFadeIn .9s var(--ease,ease) .35s both;}

  /* ───────── 進場舞台 ───────── */
  #intro{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;}
  #intro.done{display:none;}
  /* 飛行開始即透明：底下本來就是純黑，落點不會被遮罩蓋暗而閃一下 */
  #intro.leaving{background:transparent;}

  /* 1) Gate：粒子球就是按鈕，球心只有一個 ENTER */
  #gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
        -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
  #orb{position:absolute;inset:0;width:100%;height:100%;display:block;}
  #gate .g-main{position:relative;font-size:16px;font-weight:600;letter-spacing:.52em;text-indent:.52em;text-transform:uppercase;color:#fff;
        text-shadow:0 0 16px #000,0 0 8px #000,0 0 3px #000;opacity:0;transition:opacity .65s var(--ease,ease) .15s;}
  #gate.ready .g-main{opacity:.94;}
  #gate.hot .g-main{opacity:1;}
  #gate.go .g-main{opacity:0;transition:opacity .22s linear;}          /* 點擊：ENTER 先消失 */
  #gate:focus-visible{outline:none;}
  #gate:focus-visible .g-main{text-decoration:underline;text-underline-offset:10px;text-decoration-thickness:1px;}
  #intro.playing #gate,#intro.lang #gate,#intro.leaving #gate{opacity:0;pointer-events:none;transition:none;}
  #intro.morph #gate{pointer-events:none;}

  /* 2) 影片：以「影片像素座標」排版（見 layout()） */
  #vid{position:absolute;display:block;background:#000;visibility:hidden;opacity:0;}
  #intro.vplay #vid{visibility:visible;}                                   /* 已在播放，但仍透明 */
  #intro.vplay.vfade #vid{opacity:1;transition:opacity var(--vfade,250ms) linear;}  /* 第一格出現後才淡入 */

  /* 3) 影片結束後，以同位置的真 Logo ＋ 標語取代最後一格（無縫替換） */
  #heroLogo,#heroTag{position:absolute;left:0;top:0;display:block;visibility:hidden;transform-origin:0 0;pointer-events:none;user-select:none;-webkit-user-drag:none;}
  #heroTag{transition:opacity .4s var(--ease);}
  #intro.swapped #heroLogo,#intro.swapped #heroTag{visibility:visible;}
  #intro.leaving #heroTag{opacity:0;}

  /* 4) 語言選擇 */
  #langBox{--e2:cubic-bezier(.22,1,.36,1);position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:22px;
           opacity:0;pointer-events:none;}
  #langBox .l-cap,#langBox .l-row{opacity:0;transform:translateY(8px);transition:opacity .55s var(--e2),transform .7s var(--e2);}
  #intro.lang #langBox{opacity:1;pointer-events:auto;}
  #intro.lang #langBox .l-cap{opacity:1;transform:none;}
  #intro.lang #langBox .l-row{opacity:1;transform:none;transition-delay:.1s;}
  #intro.leaving #langBox{opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);}
  #intro.leaving #langBox .l-cap,#intro.leaving #langBox .l-row{opacity:1;transform:none;}
  .l-cap{font-size:10.5px;letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;color:rgba(255,255,255,0.46);}
  .l-row{display:flex;align-items:center;gap:0;}
  .l-sep{width:1px;height:16px;background:rgba(255,255,255,0.16);margin:0 clamp(22px,5vw,40px);}
  .l-btn{position:relative;min-height:44px;min-width:88px;padding:10px 6px;font-size:15px;letter-spacing:.2em;text-indent:.2em;color:rgba(255,255,255,0.75);
         transition:color .35s var(--ease);-webkit-tap-highlight-color:transparent;}
  .l-btn[lang="zh-Hant"]{font-family:"PingFang TC","Noto Sans TC","Inter",sans-serif;letter-spacing:.3em;text-indent:.3em;}
  .l-btn::after{content:"";position:absolute;left:50%;bottom:6px;width:22px;height:1px;background:#fff;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .45s var(--ease);}
  .l-btn:hover,.l-btn:focus-visible{color:#fff;}
  .l-btn:hover::after,.l-btn:focus-visible::after{transform:translateX(-50%) scaleX(1);}
  .l-btn:focus-visible{outline:none;}

  /* Skip */
  #skip{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:3;
        font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,0.46);padding:12px 8px;opacity:0;pointer-events:none;
        transition:opacity .5s var(--ease),color .3s;}
  #intro.playing #skip{opacity:1;pointer-events:auto;transition-delay:.8s;}
  #skip:hover{color:#fff;}

  @media (prefers-reduced-motion:reduce){
    #gate .g-main{transition:none;}
    #langBox .l-cap,#langBox .l-row{transform:none;transition:none;}
  }
  @media (max-width:768px){ #gate .g-main{font-size:13px;letter-spacing:.42em;text-indent:.42em;} }

#langBox{display:none!important}