/* Home film: the title card, its sparks, the side index, the scroll cue (hfilm-card.js).
   10/21 04:19 the card on the film's own white frame (3.10-4.07 s): name, one line, every award mark.
   10/21 04:33-05:01 Leo: the card a little shorter; then the words and marks do not move, they go out where they are and
   one short streak of light runs to the side index at the right, like coins going into a vault in a game ("標誌實際不動是
   消失了一個簡單的小光效化過去然後出現邊欄", "不要太碎了 一個光條很短過去就行"); the index (his reference: Top /
   Awards / Services …, the current one bold with a longer line) then tells where you are on the home: Top / Projects /
   Experience / Awards, more later. The film keeps its full width. 05:04 "More projects" moved to the end of the page. */

/* ---- the card ---- */
.hfilm__card{position:absolute;inset:0 0 auto;z-index:2;height:min(100%,calc(100vh - var(--nav)));display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:3% 6%;text-align:center;color:#1d1d1f;pointer-events:none;opacity:0;transition:opacity .6s ease}
@supports (height:100svh){.hfilm__card{height:min(100%,calc(100svh - var(--nav)))}}
.hfilm__card.on{opacity:1}
.hfilm__card.is-gone{display:none}
.hfc__name{margin:0;font:600 clamp(24px,5.2vw,84px)/1.02 var(--display);letter-spacing:-.035em;color:#1d1d1f}
.hfc__line{max-width:30em;margin:.55em 0 0;font-size:clamp(12px,1.5vw,24px);line-height:1.3;color:#424245;text-wrap:balance}
.hfc__aw{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(6px,1.2vw,20px) clamp(10px,1.7vw,28px)}
.hfc__aw--marks{margin-top:clamp(12px,3vw,48px)}
.hfc__aw--badges{margin-top:clamp(6px,1.5vw,24px);gap:clamp(6px,1.2vw,20px) clamp(8px,1.3vw,22px)}
.hfc__aw--marks img{display:block;width:auto;height:clamp(14px,2.6vw,42px)}
.hfc__aw--badges img{display:block;width:auto;height:clamp(18px,3.4vw,56px)}
/* in: the name, the line, then the marks one after another (quicker than v1) */
.hfc__name,.hfc__line,.hfc__aw img{transform:translateY(10px);opacity:0;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.hfilm__card.on .hfc__name,.hfilm__card.on .hfc__line,.hfilm__card.on .hfc__aw img{opacity:1;transform:none}
.hfilm__card.on .hfc__line{transition-delay:.1s}
.hfilm__card.on .hfc__aw img{transition-delay:calc(.14s + var(--i,0) * .014s)}

/* ---- the light: one short streak in Leo's blue from the card to the index (05:01 "不要太碎了 一個光條很短過去就行") ---- */
.hfx{position:fixed;inset:0;z-index:46;pointer-events:none;overflow:hidden}
.hfx i,.hfx b{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.hfx i{width:130px;height:3px;margin:-1.5px 0 0 -130px;border-radius:3px;transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(0,94,174,0),rgba(0,94,174,.55) 55%,#9fceff 86%,#fff);box-shadow:0 0 10px 1px rgba(0,94,174,.3)}
.hfx b{width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 12%,rgba(120,180,240,.55) 32%,rgba(0,94,174,0) 68%)}

/* ---- the side index ---- */
.hidx{position:fixed;right:clamp(16px,2.2vw,40px);top:50%;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  transform:translateY(-50%);pointer-events:none}
.hidx a{display:flex;align-items:center;gap:clamp(10px,1vw,16px);padding:7px 0 7px 10px;font:600 clamp(13px,1vw,16px)/1.1 var(--display);
  letter-spacing:-.01em;color:#86868b;text-decoration:none;pointer-events:auto;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1),color .3s}
/* plain grey / near-black on the white page; a soft white halo keeps it readable where it passes over a picture */
.hidx span{text-shadow:0 0 2px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.85)}
.hidx i{display:block;transform-origin:100% 50%;width:clamp(14px,1.2vw,20px);height:2px;border-radius:1px;background:currentColor;
  box-shadow:0 0 6px 1px rgba(255,255,255,.75);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.hidx a:hover{color:#424245}
.hidx a.on{color:#1d1d1f}
.hidx a.on i{width:clamp(30px,2.6vw,46px)}
.hidx a:focus-visible{outline:2px solid #1d1d1f;outline-offset:2px;border-radius:3px}
/* before the sparks arrive: hidden; then the entries come in one after another */
html.js:not(.hidx-on) .hidx{visibility:hidden}
html.js:not(.hidx-on) .hidx a{opacity:0;transform:translateX(18px)}
html.hidx-in .hidx a{transition-delay:calc(var(--i,0) * .06s)}
body.menu .hidx{display:none}
@media (max-width:833px){.hidx{display:none}}             /* phones: no room beside the text; the menu has the parts */

/* ---- Experience and Awards on the home, for the index (10/21 05:04 Leo "re部分參考這個來": the entries of his résumé;
   05:06 on the About-style awards, a row of odd-sized marks over a list of comma strings: "這個你自我反思修改一下 這個不好").
   Experience: one row per role, his résumé's order. Awards: one tile per competition (its official mark, what he won,
   the programme), then the grants and honours that have no mark as plain rows. ---- */
.hab{padding:clamp(56px,9vh,112px) 0 clamp(48px,7vh,88px)}
.hpart{scroll-margin-top:var(--nav)}
.hpart + .hpart{margin-top:clamp(72px,11vh,136px)}
.hpart__h{margin:0 0 clamp(22px,3vw,40px);font:600 clamp(32px,4.2vw,56px)/1.05 var(--display);letter-spacing:-.035em;color:#1d1d1f}
.hjobs{border-top:1px solid #d2d2d7}
.hjob{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr) clamp(96px,10vw,150px);gap:4px 32px;padding:clamp(16px,1.7vw,22px) 0;border-bottom:1px solid #e8e8ed}
/* the company's own mark at the end of the row, like Leo's Figma CV (05:16 "有公司logo的 就在後面加上公司logo") */
.hjob__co{display:flex;justify-content:flex-end;align-items:flex-start;padding-top:3px}
.hjob__co img{display:block;width:auto;max-width:100%;height:var(--h,18px)}
.hjob__when{padding-top:2px;font-size:14px;line-height:1.5;color:#86868b;font-variant-numeric:tabular-nums}
.hjob h3{margin:0;font:600 clamp(16px,1.25vw,19px)/1.35 var(--display);letter-spacing:-.012em;color:#1d1d1f}
.hjob h3 span{font-weight:400;color:#6e6e73}
.hjob p{max-width:46em;margin:5px 0 0;font-size:15px;line-height:1.55;color:#6e6e73}
.hjob p a{color:var(--blue,#005eae);text-decoration:none}
.hjob p a:hover{text-decoration:underline;text-underline-offset:3px}
.haw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.haw__t{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(196px,16vw,236px);
  box-sizing:border-box;padding:clamp(20px,2vw,28px);border-radius:18px;background:#f5f5f7}
.haw__m{display:flex;align-items:center;height:clamp(52px,4.6vw,66px)}
.haw__m img{display:block;width:auto;max-width:100%;height:calc(var(--s,1) * clamp(48px,4.2vw,62px));object-fit:contain;object-position:left center}
.haw__big{margin:0;font:600 clamp(21px,1.9vw,28px)/1.12 var(--display);letter-spacing:-.025em;color:#1d1d1f}
.haw__sm{margin:6px 0 0;font-size:14px;line-height:1.4;color:#6e6e73}
.hsub{margin:clamp(36px,4vw,52px) 0 12px;font:600 15px/1.3 var(--display);color:#1d1d1f}
.hhon{margin:0;padding:0;list-style:none;border-top:1px solid #d2d2d7}
.hhon li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;padding:14px 0;border-bottom:1px solid #e8e8ed;font-size:15px;line-height:1.45}
.hhon b{font-weight:600;color:#1d1d1f}
.hhon span{color:#6e6e73;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1068px){.haw{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:734px){
  .hjob{grid-template-columns:minmax(0,1fr) auto;gap:2px 16px}
  .hjob > div:nth-child(2){grid-column:1 / -1;grid-row:2}
  .hjob__co{grid-column:2;grid-row:1;padding-top:0}
  .hjob__co img{height:calc(var(--h,18px) * .85)}
  .hhon li{grid-template-columns:1fr}.hhon span{text-align:left}
  .haw{gap:10px}.haw__t{gap:20px;min-height:0;padding:18px;border-radius:16px}
}
.hmore .xworks{margin-top:0}

/* the top nav of the home: Projects / Experience / Awards are in the index now, so the brand stays left and the rest
   (Résumé, Contact; more later) sits together on the right instead of spreading across the bar */
@media (min-width:834px){.nav .brand{margin-right:auto}.nav .links a{padding:0 10px}}

@media (prefers-reduced-motion:reduce){.hfc__name,.hfc__line,.hfc__aw img,.hidx a{transform:none!important}}

/* the scroll cue: fold.css's pill (.fold-cue) at the bottom of the window while the page is at the top */
.hfilm-cue span{white-space:nowrap}