/* HONG LAB intro motion v2 (약 14초)
   점화 → 도면·기어 가공 → 프로젝트 릴 → 워프·수렴 → HONG LAB. → 작업대 */
.hl-intro{--hl-bg:#0b1011;--hl-ink:#eef1f2;--hl-dim:#7d8d8a;--hl-emerald:#00b38f;--hl-cobalt:#4f86e6;--hl-coral:#ff7966;--hl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  position:fixed;inset:0;z-index:1000;overflow:hidden;background:transparent;color:var(--hl-ink);font-family:var(--sans,"Hong Lab Workbench","Hong Lab Sans","Apple SD Gothic Neo",Arial,sans-serif);cursor:pointer;user-select:none;-webkit-user-select:none}
html.hl-intro-lock,html.hl-intro-lock body{overflow:hidden}
.hl-intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hl-intro p{margin:0}

/* HUD */
.hl-hud{position:absolute;z-index:6;font:600 11px/1.6 var(--hl-mono);letter-spacing:.06em;color:var(--hl-dim);white-space:nowrap;text-shadow:0 1px 6px #000c;opacity:0;transition:opacity .4s}
.hl-intro.is-booted .hl-hud{opacity:1}
.hl-hud b{color:var(--hl-ink);font-weight:700}
.hl-hud-tl{top:22px;left:4%}
.hl-hud-tr{top:22px;right:4%;text-align:right}
.hl-hud-bl{bottom:26px;left:4%;min-height:4.8em}
.hl-hud-bl span{display:block;animation:hl-type .25s steps(14,end) both}
.hl-hud-bl span:last-child{color:var(--hl-emerald)}
.hl-hud-br{bottom:26px;right:4%;text-align:right}
.hl-bar{display:block;width:180px;height:2px;margin:8px 0 0 auto;background:#ffffff1f;overflow:hidden}
.hl-bar i{display:block;height:100%;width:100%;background:var(--hl-emerald);transform-origin:left;transform:scaleX(0)}
@keyframes hl-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* 키네틱 타이포: 관찰하고, / 만들고, / 다시 고친다. */
.hl-words{position:absolute;z-index:3;left:7%;top:50%;transform:translateY(-50%);display:grid;font-weight:850;font-size:clamp(44px,7.6vw,124px);line-height:1.08;letter-spacing:-.02em}
.hl-word{grid-area:1/1;white-space:nowrap}
.hl-word .ch{display:inline-block;opacity:0;transform:translateY(.7em) rotate(10deg) scale(.6);filter:blur(10px)}
.hl-word .ch.em{color:var(--hl-emerald);text-shadow:0 0 28px #00b38f88}
.hl-word.is-in .ch{animation:hl-ch-in .6s cubic-bezier(.2,1.3,.3,1) both;animation-delay:calc(var(--i)*38ms)}
.hl-word.is-out .ch{animation:hl-ch-out .38s cubic-bezier(.7,0,.9,.4) both;animation-delay:calc(var(--i)*18ms)}
.hl-word small{display:block;margin-bottom:.9em;font:700 12px/1 var(--hl-mono);letter-spacing:.3em;color:var(--hl-coral);opacity:0}
.hl-word.is-in small{animation:hl-fade .3s both}
@keyframes hl-ch-in{to{opacity:1;transform:none;filter:none}}
@keyframes hl-ch-out{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateY(-.5em) skewX(-18deg) scale(1.3);filter:blur(8px)}}
@keyframes hl-fade{from{opacity:0}to{opacity:1}}

/* 프로젝트 릴 */
.hl-reel{position:absolute;inset:0;z-index:2;pointer-events:none}
.hl-reel.is-done{opacity:0;transform:scale(.92);transition:opacity .25s,transform .35s}
.hl-slide{position:absolute;inset:0;visibility:hidden;--c:#00b38f}
.hl-slide.is-on{visibility:visible}
.hl-slide.is-past .hl-cap,.hl-slide.is-past .hl-num,.hl-slide.is-past .hl-count{opacity:0;transition:opacity .12s}
.hl-shot{position:absolute;inset:0;background-color:#16201f;background-size:cover;background-position:center;clip-path:polygon(0 0,0 0,-25% 100%,-25% 100%)}
.hl-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b1011f2 0%,#0b1011b3 38%,#0b101133 70%,#0b101100 100%),linear-gradient(0deg,#0b1011cc,#0b101100 45%)}
.hl-slide.is-on .hl-shot{animation:hl-wipe .5s cubic-bezier(.75,0,.2,1) both,hl-burns 1.6s cubic-bezier(.2,.7,.3,1) both}
.hl-bars{position:absolute;inset:-10% 0;overflow:hidden}
.hl-bars i{position:absolute;top:0;bottom:0;left:-30%;width:22%;background:var(--c);transform:skewX(-16deg);opacity:0}
.hl-bars i+i{width:5%;background:#fff}
.hl-slide.is-on .hl-bars i{animation:hl-bar .55s cubic-bezier(.7,0,.25,1) both}
.hl-slide.is-on .hl-bars i+i{animation-delay:.06s}
.hl-num{position:absolute;right:4%;top:50%;transform:translateY(-50%);font-size:clamp(150px,30vw,460px);font-weight:900;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--c);opacity:0;letter-spacing:-.04em}
.hl-slide.is-on .hl-num{animation:hl-num .9s cubic-bezier(.2,.9,.2,1) .12s both}
.hl-cap{position:absolute;left:7%;bottom:16%;max-width:62%}
.hl-cat{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--hl-mono);letter-spacing:.22em;color:var(--c);opacity:0}
.hl-cat::before{content:"";width:28px;height:2px;background:var(--c)}
.hl-slide.is-on .hl-cat{animation:hl-slide-x .45s .18s cubic-bezier(.2,.9,.2,1) both}
.hl-ptitle{margin-top:14px!important;font-size:clamp(36px,5.6vw,92px);font-weight:850;line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
.hl-ptitle .ch{display:inline-block;opacity:0;transform:translateY(60%) skewY(8deg)}
.hl-slide.is-on .hl-ptitle .ch{animation:hl-ch-in .45s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(.2s + var(--i)*22ms)}
.hl-count{position:absolute;left:7%;top:16%;font:700 13px/1 var(--hl-mono);letter-spacing:.2em;color:var(--hl-ink);opacity:0}
.hl-count b{color:var(--c)}
.hl-slide.is-on .hl-count{animation:hl-fade .3s .15s both}
@keyframes hl-wipe{to{clip-path:polygon(0 0,125% 0,100% 100%,-25% 100%)}}
@keyframes hl-burns{from{transform:scale(1.22) translateX(3%)}to{transform:scale(1.04)}}
@keyframes hl-bar{0%{opacity:1;transform:skewX(-16deg) translateX(0)}99%{opacity:1}100%{opacity:0;transform:skewX(-16deg) translateX(150vw)}}
@keyframes hl-num{from{opacity:0;transform:translate(18%,-50%) scale(1.15)}to{opacity:.9;transform:translate(0,-50%)}}
@keyframes hl-slide-x{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}

/* 모자이크 → 중심으로 빨려 들어감 */
.hl-mosaic{position:absolute;z-index:2;left:50%;top:50%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;width:min(88vw,1100px);transform:translate(-50%,-50%);visibility:hidden}
.hl-mosaic.is-on{visibility:visible}
.hl-mosaic i{aspect-ratio:3/4;background:#16201f center/cover;border-top:3px solid var(--c);opacity:0}
.hl-mosaic.is-on i{animation:hl-tile-in .4s cubic-bezier(.2,1.1,.3,1) both;animation-delay:calc(var(--i)*45ms)}
.hl-mosaic.is-out{animation:hl-suck .45s cubic-bezier(.7,0,.9,.3) both}
@keyframes hl-tile-in{from{opacity:0;transform:translateY(40%) scale(1.6) rotate(calc((var(--i) - 2)*6deg))}to{opacity:1;transform:none}}
@keyframes hl-suck{to{transform:translate(-50%,-50%) scale(.02) rotate(-25deg);opacity:0;filter:brightness(3)}}

/* 타이틀 */
.hl-title{position:absolute;z-index:4;left:50%;top:50%;margin:0;transform:translate(-50%,-58%);font-size:clamp(56px,12vw,188px);font-weight:850;line-height:1;white-space:nowrap;letter-spacing:-.01em;opacity:0;transform-origin:0 0}
.hl-title .hl-dot{color:var(--hl-emerald)}
.hl-title.is-locked{animation:hl-chroma .7s cubic-bezier(.2,.9,.2,1)}
@keyframes hl-chroma{
  0%{transform:translate(-50%,-58%) scale(1.14);text-shadow:-14px 0 #ff7966,14px 0 #77dbe2,0 0 60px #00b38f}
  40%{text-shadow:6px 0 #ff7966,-6px 0 #77dbe2,0 0 40px #00b38f}
  100%{transform:translate(-50%,-58%) scale(1);text-shadow:0 0 0 transparent}}
.hl-tagline{position:absolute;z-index:4;left:50%;top:50%;width:90%;transform:translate(-50%,calc(clamp(56px,12vw,188px)*.62));text-align:center;font-size:clamp(14px,1.6vw,22px);font-weight:650;color:var(--hl-ink);opacity:0}
.hl-tagline small{display:block;margin-bottom:.5em;font:700 11px/1.4 var(--hl-mono);letter-spacing:.24em;color:var(--hl-emerald)}

.hl-flash{position:absolute;inset:0;z-index:7;background:#e9fff8;opacity:0;pointer-events:none}
.hl-skip{position:absolute;z-index:8;top:14px;left:50%;transform:translateX(-50%);padding:7px 14px;border:1px solid #ffffff33;border-radius:99px;background:#0b101199;color:var(--hl-ink);font:600 12px/1 var(--hl-mono);letter-spacing:.05em;cursor:pointer;backdrop-filter:blur(6px)}
.hl-skip:hover,.hl-skip:focus-visible{border-color:var(--hl-emerald);color:#fff;outline:none}
.hl-intro.is-exiting .hl-hud,.hl-intro.is-exiting .hl-skip,.hl-intro.is-exiting .hl-tagline,.hl-intro.is-exiting .hl-reel,.hl-intro.is-exiting .hl-words,.hl-intro.is-exiting .hl-mosaic{opacity:0!important;transition:opacity .25s}

/* 인트로가 끝난 뒤 작업대 등장 */
.hl-arrive .workbench-copy>*{animation:hl-rise .8s cubic-bezier(.2,.9,.2,1) both}
.hl-arrive .workbench-copy>:nth-child(1){animation-delay:.05s}
.hl-arrive .workbench-copy>:nth-child(2){animation:none}
.hl-arrive .workbench-copy>:nth-child(3){animation-delay:.18s}
.hl-arrive .workbench-copy>:nth-child(4){animation-delay:.28s}
.hl-arrive .workbench-scene{animation:hl-settle 1.4s cubic-bezier(.2,.8,.2,1) both}
.hl-arrive .workbench-projects,.hl-arrive .workbench-enter{animation:hl-rise .8s .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes hl-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hl-settle{from{transform:scale(1.06);filter:saturate(.4) brightness(.8)}to{transform:none;filter:none}}

/* 포트폴리오 카드 순차 등장 */
.hl-motion .project-card.hl-pending{opacity:0;transform:translateY(34px) scale(.98)}
.hl-motion .project-card.hl-shown{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.9,.2,1);transition-delay:var(--hl-delay,0s)}
.hl-motion .project-card .media-preview img{transition:transform .8s cubic-bezier(.2,.9,.2,1)}
.hl-motion .project-card:hover .media-preview img{transform:scale(1.035)}
.hl-progress{position:fixed;z-index:60;top:0;left:0;right:0;height:2px;background:var(--emerald,#007c65);transform-origin:left;transform:scaleX(0);pointer-events:none}
body:not([data-view="portfolio"]) .hl-progress{display:none}

@media (max-width:720px){
  .hl-words{left:6%;top:auto;bottom:22%;transform:none}
  .hl-hud-tr,.hl-hud-br{display:none}
  .hl-hud-bl{font-size:10px}
  .hl-skip{top:auto;bottom:22px;left:auto;right:6%;transform:none}
  .hl-shot::after{background:linear-gradient(0deg,#0b1011f5 0%,#0b1011bb 40%,#0b101122 75%)}
  .hl-num{top:24%;right:5%;transform:none}
  .hl-cap{left:6%;bottom:18%;max-width:88%}
  .hl-ptitle{white-space:normal}
  .hl-count{left:6%;top:12%}
  .hl-mosaic{gap:6px}
  @keyframes hl-num{from{opacity:0;transform:translateX(18%) scale(1.15)}to{opacity:.9;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .hl-motion .project-card.hl-pending{opacity:1;transform:none}
  .hl-arrive *{animation:none!important}
}