/* 首頁主視覺甲版「晴字落筆」（115.09.30 律師裁示採甲版；提案 93_系統報告/115.09.30_首頁主視覺動畫三版提案）。
   首屏左側加晴字標（向量取自品牌源檔 晴字標誌_向量.svg），金線依序描出「日」「主」「月」後填成實心，所名與標題隨之展開；總長約 2.1 秒、只播一次。
   完成態＝各元素本身樣式。進場動畫只在 html 未帶 hero-seen（本分頁已播過，由 appearance-init.js 於首次繪製前加上；首播結束後 hero-intro.js 亦加上）
   且未帶 motion-off（系統減少動態或站內暫停）時套用。色碼只用站內既有色。 */
.hero-a{--hx-gold:#e0c789;--hx-glint:#f0d897;--hx-rule:#a8976a}
html[data-theme="dark"] .hero-a{--hx-gold:#d8bf80;--hx-rule:#80714d}

/* 取代 style.css 之通用進場（.intro 與 .hero-directory 之 textUncover） */
.hero-a .intro,.hero-a .hero-directory{animation:none}

/* 字標與所名並排：字標尺寸寫死，避免版面位移 */
.hero-lockup{display:flex;align-items:center;gap:16px;margin-bottom:24px;position:relative}
.theme-a .hero .hero-lockup .hero-firm-name{margin-bottom:0;order:2}
.hero-mark{display:block;width:56px;height:61px;flex:none;order:0;overflow:visible}
.hero-lockup::after{content:'';order:1;width:1px;height:36px;background:var(--hx-rule);flex:none;transform-origin:50% 100%}
.hero-lockup::before{content:'';position:absolute;left:-18px;top:50%;width:92px;height:92px;margin-top:-46px;border-radius:50%;background:radial-gradient(circle,rgba(240,216,151,.42),rgba(240,216,151,0) 66%);opacity:0;pointer-events:none}
@media(max-width:620px){.hero-mark{width:44px;height:48px}.hero-lockup{gap:12px;margin-bottom:22px}.hero-lockup::after{height:28px}.hero-lockup::before{left:-16px;width:76px;height:76px;margin-top:-38px}}

/* 字標完成態＝金色實心；各筆畫起訖時間（--t 起點、--d 長度）亦供 hero-intro.js 重描使用 */
.hero-mark path{fill:var(--hx-gold);stroke:var(--hx-glint);stroke-width:150;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0;stroke-opacity:0}
.hero-mark .p2{--t:0s;--d:.62s}   /* 日框 */
.hero-mark .p3{--t:.14s;--d:.5s}  /* 日中弧 */
.hero-mark .p4{--t:.30s;--d:.3s}  /* 光芒一 */
.hero-mark .p5{--t:.38s;--d:.3s}  /* 光芒二 */
.hero-mark .p6{--t:.46s;--d:.3s}  /* 光芒三 */
.hero-mark .p7{--t:.18s;--d:.45s} /* 主：拱形首筆 */
.hero-mark .p1{--t:.28s;--d:.42s} /* 主：直筆 */
.hero-mark .p8{--t:.40s;--d:.32s} /* 主：上橫 */
.hero-mark .p0{--t:.46s;--d:.32s} /* 主：下橫 */
.hero-mark .p9{--t:.34s;--d:.62s} /* 月 */
.hero-mark .p10{--t:.66s;--d:.24s}/* 月：內筆 */
.hero-values span{display:inline-block}

/* ── 首播（只在未播過、未減少動態時） ── */
html:not(.hero-seen):not(.motion-off) .hero-mark path{animation:hxTrace var(--d,.5s) var(--t,0s) cubic-bezier(.55,0,.35,1) both,hxFill .38s .88s ease-out both}
html:not(.hero-seen):not(.motion-off) .hero-lockup::before{animation:hxGlint 1.05s .98s ease-out both}
html:not(.hero-seen):not(.motion-off) .hero-lockup::after{animation:hxRuleY .4s .55s cubic-bezier(.22,.7,.2,1) both}
/* 所名由字標右側展開 */
html:not(.hero-seen):not(.motion-off) .hero-a .hero-firm-name{animation:hxWipe .6s .6s cubic-bezier(.22,.7,.2,1) both}
/* 標題上升；金色行一次光澤掃過 */
html:not(.hero-seen):not(.motion-off) .hero-a h1{animation:hxRise .8s .18s cubic-bezier(.22,.7,.2,1) both}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  html:not(.hero-seen):not(.motion-off) .hero-a h1 em{background:linear-gradient(100deg,var(--hx-gold) 0 40%,rgb(250,229,166) 50%,var(--hx-gold) 60% 100%) 0 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hxSheen .9s 1.2s cubic-bezier(.4,0,.2,1) both}
}
@media(forced-colors:active){html:not(.hero-seen):not(.motion-off) .hero-a h1 em{background:none;-webkit-text-fill-color:currentColor}}
/* 其餘依序淡入 */
html:not(.hero-seen):not(.motion-off) .hero-a .hero-description{animation:hxUp .6s .95s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .hero-values span{animation:hxUp .5s 1.25s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .hero-values span:nth-child(2){animation-delay:1.37s}
html:not(.hero-seen):not(.motion-off) .hero-a .hero-values span:nth-child(3){animation-delay:1.49s}
html:not(.hero-seen):not(.motion-off) .hero-a .hero-actions{animation:hxUp .55s 1.5s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .hero-shortcuts{animation:hxUp .55s 1.6s cubic-bezier(.22,.7,.2,1) both}
html:not(.hero-seen):not(.motion-off) .hero-a .hero-directory{animation:hxSide .8s .8s cubic-bezier(.22,.7,.2,1) both}

@keyframes hxTrace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hxFill{from{fill-opacity:0;stroke-opacity:1}to{fill-opacity:1;stroke-opacity:0}}
@keyframes hxGlint{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes hxRuleY{from{transform:scaleY(0)}to{transform:none}}
@keyframes hxWipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-10px)}to{clip-path:inset(0 -2% 0 0);transform:none}}
@keyframes hxRise{from{clip-path:inset(0 0 100% 0);transform:translateY(.45em)}to{clip-path:inset(-10% -2% -10% 0);transform:none}}
@keyframes hxSheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes hxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hxSide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* 鍵盤焦點：動畫未完成前以 Tab 移入時，該區塊以 !important 直接呈現完成態（不改 animation，焦點移出不會重播），焦點框不被遮蔽 */
.hero-a .hero-actions:focus-within,.hero-a .hero-shortcuts:focus-within,.hero-a .hero-directory:focus-within{opacity:1!important;transform:none!important}

/* 減少動態（.motion-off）時 style.css 既有 .motion-off .intro{clip-path:inset(0)!important} 會裁掉首屏按鈕與連結之焦點框（上、下、左），首屏改為不裁切 */
html.motion-off .hero-a .intro{clip-path:none!important}

/* 減少動態（無腳本時之後備；有腳本時由 appearance-init.js 加 .motion-off 處理）：首屏直接顯示完成態，並停止背景光帶與按鈕光點 */
@media(prefers-reduced-motion:reduce){
  .hero-a *,.hero-a *::before,.hero-a *::after{animation:none!important;transition:none!important}
}