/* ============================================================
   Landing Kit  ·  v1.0  ·  vanilla, zero-dependency
   양은이네 랜딩의 애니메이션·기능을 데이터속성 방식으로 재사용
   포함: 스크롤 리빌(9종+스태거) / 무한 마퀴 / 고정헤더 /
         스무스 앵커·스크롤스파이 / 탑버튼 / 유튜브 라이트박스 /
         쿠키 팝업 / 카카오 플로팅 / 탭
   ============================================================ */

/* ---------- 0. 리빌: 초기 은닉 (FOUC 방지) ---------- */
[data-reveal]{ opacity:0; }
[data-reveal].lk-in{ opacity:1; }

/* 리빌 공통: 지속시간·이징은 커스텀 프로퍼티로 오버라이드 가능 */
[data-reveal].lk-in{
  animation-duration: var(--lk-dur, .8s);
  animation-timing-function: var(--lk-ease, cubic-bezier(.22,1,.36,1)); /* ease-out-quint */
  animation-fill-mode: both;
}

/* ---------- 1. 리빌 키프레임 (animate.css 대응 9종) ---------- */
[data-reveal="fadeInLeft"].lk-in { animation-name: lkFadeInLeft; }
[data-reveal="fadeInRight"].lk-in{ animation-name: lkFadeInRight; }
[data-reveal="fadeInUp"].lk-in   { animation-name: lkFadeInUp; }
[data-reveal="fadeInDown"].lk-in { animation-name: lkFadeInDown; }
[data-reveal="fadeIn"].lk-in     { animation-name: lkFadeIn; }
[data-reveal="zoomIn"].lk-in     { animation-name: lkZoomIn; }
[data-reveal="zoomInUp"].lk-in   { animation-name: lkZoomInUp; }
[data-reveal="zoomInDown"].lk-in { animation-name: lkZoomInDown; }
[data-reveal="flip"].lk-in       { animation-name: lkFlip; }
[data-reveal="flipInX"].lk-in    { animation-name: lkFlipInX; }

@keyframes lkFadeInLeft { from{opacity:0; transform:translate3d(-48px,0,0)} to{opacity:1; transform:none} }
@keyframes lkFadeInRight{ from{opacity:0; transform:translate3d(48px,0,0)}  to{opacity:1; transform:none} }
@keyframes lkFadeInUp   { from{opacity:0; transform:translate3d(0,48px,0)}  to{opacity:1; transform:none} }
@keyframes lkFadeInDown { from{opacity:0; transform:translate3d(0,-48px,0)} to{opacity:1; transform:none} }
@keyframes lkFadeIn     { from{opacity:0} to{opacity:1} }
@keyframes lkZoomIn     { from{opacity:0; transform:scale3d(.5,.5,.5)} 50%{opacity:1} to{transform:none} }
@keyframes lkZoomInUp   { from{opacity:0; transform:scale3d(.5,.5,.5) translate3d(0,60px,0)} 60%{opacity:1} to{transform:none} }
@keyframes lkZoomInDown { from{opacity:0; transform:scale3d(.5,.5,.5) translate3d(0,-60px,0)} 60%{opacity:1} to{transform:none} }
@keyframes lkFlip       { from{opacity:0; transform:perspective(400px) rotate3d(0,1,0,-70deg)} 40%{opacity:1} to{transform:perspective(400px)} }
@keyframes lkFlipInX    { from{opacity:0; transform:perspective(400px) rotate3d(1,0,0,80deg)} 60%{opacity:1; transform:perspective(400px) rotate3d(1,0,0,-5deg)} to{transform:perspective(400px)} }

/* ---------- 2. 무한 마퀴 ---------- */
.lk-marquee{ overflow:hidden; white-space:nowrap; }
.lk-marquee__track{
  display:inline-flex; will-change:transform;
  animation: lkMarquee var(--lk-marquee-dur, 20s) linear infinite;
}
.lk-marquee[data-marquee-reverse] .lk-marquee__track{ animation-direction: reverse; }
.lk-marquee:hover .lk-marquee__track{ animation-play-state: var(--lk-marquee-hover, running); }
@keyframes lkMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- 3. 고정 헤더 ---------- */
[data-sticky-header]{ transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
[data-sticky-header].lk-stuck{ position:fixed; top:0; left:0; right:0; z-index:var(--lk-z-sticky,900); box-shadow:0 6px 24px -12px rgba(0,0,0,.35); }

/* ---------- 4. 탑 버튼 ---------- */
[data-scroll-top]{ opacity:0; visibility:hidden; transition:opacity .3s ease, transform .3s ease; transform:translateY(12px); }
[data-scroll-top].lk-show{ opacity:1; visibility:visible; transform:none; }

/* ---------- 5. 유튜브 라이트박스 ---------- */
.lk-yt{ position:fixed; inset:0; z-index:var(--lk-z-modal,1000); display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.86); opacity:0; visibility:hidden; transition:opacity .3s ease; padding:24px; }
.lk-yt.lk-open{ opacity:1; visibility:visible; }
.lk-yt__inner{ position:relative; width:min(960px,100%); }
.lk-yt__frame{ position:relative; padding-bottom:56.25%; height:0; background:#000; border-radius:8px; overflow:hidden;
  transform:scale(.94); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.lk-yt.lk-open .lk-yt__frame{ transform:scale(1); }
.lk-yt__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lk-yt__close{ position:absolute; top:-44px; right:0; color:#fff; background:none; border:0; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; padding:6px; }
.lk-yt__close::before{ content:"✕"; font-size:20px; line-height:1; }
body.lk-noscroll{ overflow:hidden; }

/* ---------- 6. 쿠키 팝업 ---------- */
[data-popup]{ transition:opacity .25s ease, transform .25s ease; }
[data-popup].lk-popup-closed{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); }
[data-popup] .lk-popup__foot{ display:flex; align-items:center; gap:8px; }
[data-popup-close]{ cursor:pointer; }

/* ---------- 7. 플로팅 버튼 (카카오 등) ---------- */
.lk-float{ position:fixed; z-index:var(--lk-z-float,800); right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; }
.lk-float a{ text-decoration:none; }

/* ---------- 8. 탭 ---------- */
[data-tab]{ cursor:pointer; }
[data-tab-panel]{ display:none; }
[data-tab-panel].lk-tab-active{ display:block; animation: lkFadeIn .35s both; }

/* ---------- 9. 카운트업 (숫자 애니) ---------- */
[data-count-up]{ font-variant-numeric: tabular-nums; }

/* ---------- 10. 스크롤 비디오 ---------- */
.lk-video-cover{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- 11. 폼 검증 ---------- */
.lk-invalid{ border-color:#e03131 !important; box-shadow:0 0 0 2px rgba(224,49,49,.15); }
.lk-field-error{ display:block; margin-top:6px; font-size:13px; color:#e03131; }

/* ---------- 12. 하단 고정 상담바 ---------- */
.lk-bottom-bar{ position:fixed; left:0; right:0; bottom:0; z-index:var(--lk-z-bottombar,850);
  background:#fff; box-shadow:0 -8px 28px -14px rgba(0,0,0,.35); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.lk-bottom-bar__body{ overflow:hidden; max-height:60vh; transition:max-height .35s ease, opacity .3s ease, padding .35s ease; }
.lk-bottom-bar.lk-collapsed .lk-bottom-bar__body{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
[data-bottom-bar-toggle]{ cursor:pointer; }
.lk-bottom-bar.lk-collapsed [data-bottom-bar-toggle]{ transform:rotate(180deg); }

/* ---------- 13. 접근성: 모션 줄이기 (필수) ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; }
  [data-reveal].lk-in{ animation:none !important; }
  .lk-marquee__track{ animation:none !important; }
  .lk-yt, .lk-yt__frame, [data-scroll-top], [data-popup], .lk-bottom-bar, .lk-bottom-bar__body{ transition:none !important; }
  html{ scroll-behavior:auto !important; }
}