/* =========================================================
   첫 화면 인트로 — "다리를 놓고, 건너가 닿는다" (약 9.5초, 이후 고정)
   재생 여부는 index.html <head> 스크립트가 html 에 hi-play 클래스를 붙여 결정 (방문당 1회)
   누르기·스크롤·키 입력 시 js/landing.js 의 skipIntro() 가 바로 완성 화면으로 넘김
   ① 다리 짓기 0.3~2.9s : 탑 → 상판 → 아치·현수선
   ② 건너기   3.1~5.9s : 사람이 다리를 건너 달림(지나간 자리에 빛) → 건너편에서 반짝이며 사라짐
   ③ 글자·문구 6.0~9.5s : HYPHEN 한 자씩 → 영문 슬로건 → 한글 소개 → 헤드라인 → 스크롤 안내
   ========================================================= */
.hi-logo { overflow: visible; display: block; }
/* 헤드라인 "하이픈" 밑줄: 인트로 없이 들어와도 같은 완성 화면 */
.lp-hero__title em { background: linear-gradient(transparent 62%, rgba(207,154,60,.28) 62%) no-repeat 0 0 / 100% 100%; }
/* 차분한 곡선: 천천히 시작해 부드럽게 멈춤 */
.hi-play { --soft: cubic-bezier(.45,.05,.25,1); --glide: cubic-bezier(.37,0,.63,1); }

/* ① 다리 짓기 (0.3 ~ 2.9s) */
.hi-play .lp-hero__glow { animation: hiFade 1.6s ease-out both; }
.hi-play .hi-tower { transform-box: fill-box; transform-origin: 50% 100%; animation: hiRise .9s var(--soft) .3s both; }
.hi-play .hi-tower--r { animation-delay: .5s; }
.hi-play .hi-deck { transform-box: fill-box; transform-origin: 0 50%; animation: hiGrowX .9s var(--glide) 1.05s both; }
.hi-play .hi-arch { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hiDraw 1.1s var(--glide) 1.75s forwards; }
.hi-play .hi-hangers line { transform-box: fill-box; transform-origin: 50% 0; animation: hiDrop .45s var(--soft) both; animation-delay: calc(2.05s + var(--i) * .1s); }

/* ② 사람이 다리를 건넘 (3.1 ~ 5.9s) — 보폭도 느긋하게 */
.hi-run { opacity: 0; }
.hi-run polyline { fill: none; stroke: #0f2942; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hi-run polyline.far { stroke: #34587a; }
.hi-run circle { fill: #0f2942; }
.hi-pose { opacity: 0; }
.hi-play .hi-run { animation: hiRun 2.8s var(--glide) 3.1s both; }
.hi-play .hi-pose { animation: hiPose .6s steps(1) infinite; animation-delay: calc(3.1s + var(--p) * .15s); }
.hi-play .hi-bob { animation: hiBob .3s ease-in-out 3.1s 10 alternate; }
.hi-trailwrap { opacity: 0; }
.hi-trail { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.hi-play .hi-trailwrap { animation: hiTrailFade 4s ease-out 3.1s both; }
.hi-play .hi-trail { animation: hiTrail 2.8s var(--glide) 3.1s both; }
.hi-spark { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.hi-play .hi-spark { animation: hiSpark 1.4s ease-out 5.55s both; }

/* ③ 글자와 문구 (6.0 ~ 9.3s) */
.hi-play .hi-ch { animation: hiUp .85s var(--soft) both; animation-delay: calc(6s + var(--i) * .16s); }
.hi-play .lp-logo__en { animation: hiTrack 1s var(--soft) 7.25s both; }
.hi-play .lp-logo__en span { animation: hiGrowX .8s var(--soft) 7.55s both; }
.hi-play .lp-logo__dot { animation: hiPop .6s cubic-bezier(.3,1.5,.5,1) 7.75s both; }
.hi-play .lp-logo__ko { animation: hiUp .9s var(--soft) 7.8s both; }
.hi-play .lp-hero__title { animation: hiUp 1s var(--soft) 8.3s both; }
.hi-play .lp-hero__title em { background: linear-gradient(transparent 62%, rgba(207,154,60,.28) 62%) no-repeat 0 0 / 0% 100%; animation: hiSweep .8s var(--glide) 9.1s forwards; }
.hi-play .lp-scroll { animation: hiFade .8s ease-out 9.5s both; }

@keyframes hiFade { from { opacity: 0; } }
@keyframes hiRise { from { transform: scaleY(0); } }
@keyframes hiGrowX { from { transform: scaleX(0); } }
@keyframes hiDraw { to { stroke-dashoffset: 0; } }
@keyframes hiDrop { from { transform: scaleY(0); } }
@keyframes hiUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes hiTrack { from { opacity: 0; letter-spacing: .6em; } }
@keyframes hiPop { from { transform: scale(0); } }
@keyframes hiSweep { to { background-size: 100% 100%; } }
@keyframes hiPose { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes hiBob { to { transform: translateY(-1.6px); } }
@keyframes hiRun {
  0%   { opacity: 0; transform: translate(-8px, 86px) scale(1.25); }
  8%   { opacity: 1; }
  80%  { opacity: 1; transform: translate(404px, 86px) scale(1.25); }
  100% { opacity: 0; transform: translate(468px, 78px) scale(1.12); }
}
@keyframes hiTrail { 0% { transform: scaleX(0); } 80% { transform: scaleX(.84); } 100% { transform: scaleX(1); } }
@keyframes hiTrailFade { 0% { opacity: 0; } 6% { opacity: .9; } 70% { opacity: .9; } 100% { opacity: 0; } }
@keyframes hiSpark {
  0%   { opacity: 0; transform: translate(462px, 66px) scale(0) rotate(0deg); }
  35%  { opacity: 1; transform: translate(462px, 66px) scale(1.7) rotate(45deg); }
  100% { opacity: 0; transform: translate(462px, 60px) scale(.4) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hi-play *, .hi-play .lp-hero__glow { animation: none !important; }
  .hi-play .hi-arch { stroke-dashoffset: 0; }
  .hi-play .hi-run, .hi-play .hi-trailwrap, .hi-play .hi-spark { display: none; }
}

/* v17: 수면·물그림자는 글자가 다 선 뒤에 나타남 */
.hi-play .hi-water { animation: hiFade 1s ease-out 7s both; }