/* usung-r14-hero.css — 기술력 히어로 생동감 (260803 4차 ①)
 *
 * 히어로는 실측 내용 301px 에 상하 여백 290px 로 사실상 문구만 있는 빈 띠였다.
 * ⓐ 배경에 아주 느린 블롭 2개, ⓑ 기존 3줄에 시차, ⓒ 실제 카탈로그에서 읽은 칩 4개 +
 * 스크롤 유도 버튼(usung-r14.js 가 심는다)으로 채운다.
 *
 * ★ 블롭은 .th-hero:before/:after 다. usung-r8.css:547 의 .th-hero{overflow:hidden} 이
 *   넘침을 잘라주고, :552 의 .th-hero .wrap{position:relative;z-index:2} 가 문구를 위에
 *   올려주므로 z-index:0 이면 절대 글자를 가리지 않는다.
 * ★ .reveal 은 애니메이션이 아니라 트랜지션이다(usung-r8.css:426) → transition-delay 로
 *   시차를 줘도 충돌하지 않는다.
 */

html .r8x:not(#_r8_) .th-hero{position:relative;isolation:isolate}
html .r8x:not(#_r8_) .th-hero:before,
html .r8x:not(#_r8_) .th-hero:after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  border-radius:50%;filter:blur(8px);
}
html .r8x:not(#_r8_) .th-hero:before{
  width:620px;height:620px;top:-220px;left:-160px;
  background:radial-gradient(circle,rgba(37,99,235,.13),rgba(37,99,235,0) 68%);
  animation:r14-drift 24s ease-in-out infinite alternate;
}
html .r8x:not(#_r8_) .th-hero:after{
  width:520px;height:520px;bottom:-200px;right:-120px;
  background:radial-gradient(circle,rgba(96,165,250,.15),rgba(96,165,250,0) 70%);
  animation:r14-drift2 27s ease-in-out infinite alternate;
}
@keyframes r14-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(90px,60px,0) scale(1.14)}
}
@keyframes r14-drift2{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-80px,-50px,0) scale(1)}
}

/* 기존 3줄 시차 — .reveal.in 이 붙는 순간 순서대로 올라온다 */
html .r8x:not(#_r8_) .th-hero .th-kick{transition-delay:.02s}
html .r8x:not(#_r8_) .th-hero .th-h1{transition-delay:.12s}
html .r8x:not(#_r8_) .th-hero .th-sub{transition-delay:.22s}

/* ── 칩 4개 ───────────────────────────────────────────────────── */
html .r8x:not(#_r8_) .r14-chips{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:38px auto 0;max-width:760px;
}
html .r8x:not(#_r8_) .r14-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.09);
  backdrop-filter:saturate(140%) blur(6px);
  font-size:13.5px;font-weight:600;color:#1d1d1f;line-height:1.3;
  opacity:0;animation:r14-up .62s cubic-bezier(.22,.61,.36,1) forwards;
}
html .r8x:not(#_r8_) .r14-chip i{
  width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#2563EB;font-style:normal;
}
html .r8x:not(#_r8_) .r14-chip b{font-weight:800;color:#2563EB;letter-spacing:-.01em}
html .r8x:not(#_r8_) .r14-chip span{color:#6e6e73;font-weight:600}
html .r8x:not(#_r8_) .r14-chip:nth-child(1){animation-delay:.34s}
html .r8x:not(#_r8_) .r14-chip:nth-child(2){animation-delay:.42s}
html .r8x:not(#_r8_) .r14-chip:nth-child(3){animation-delay:.50s}
html .r8x:not(#_r8_) .r14-chip:nth-child(4){animation-delay:.58s}

/* ── 스크롤 유도 ──────────────────────────────────────────────── */
html .r8x:not(#_r8_) .r14-cue{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:8px;margin:34px auto 0;
  padding:11px 22px;border-radius:999px;
  background:#2563EB;border:0;color:#fff;-webkit-text-fill-color:#fff;
  font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;
  opacity:0;animation:r14-up .62s cubic-bezier(.22,.61,.36,1) .68s forwards;
  transition:background .16s;
}
html .r8x:not(#_r8_) .r14-cue:hover{background:#1D4ED8}
html .r8x:not(#_r8_) .r14-cue b{font-weight:700;animation:r14-bob 1.9s ease-in-out infinite}
@keyframes r14-up{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes r14-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

@media (prefers-reduced-motion:reduce){
  html .r8x:not(#_r8_) .th-hero:before,
  html .r8x:not(#_r8_) .th-hero:after,
  html .r8x:not(#_r8_) .r14-cue b{animation:none}
  html .r8x:not(#_r8_) .r14-chip,
  html .r8x:not(#_r8_) .r14-cue{opacity:1;animation:none}
}

@media (max-width:980px){
  html .r8x:not(#_r8_) .th-hero:before{width:420px;height:420px;top:-160px;left:-120px}
  html .r8x:not(#_r8_) .th-hero:after{width:360px;height:360px;bottom:-140px;right:-90px}
  html .r8x:not(#_r8_) .r14-chips{margin-top:30px;gap:8px}
}
@media (max-width:520px){
  html .r8x:not(#_r8_) .r14-chip{padding:7px 13px;font-size:12px}
  html .r8x:not(#_r8_) .r14-chips{margin-top:24px;gap:7px}
  html .r8x:not(#_r8_) .r14-cue{margin-top:26px;padding:10px 18px;font-size:12.5px}
}