/* 첫 화면(로그인) 움직임 (assets/js/login-motion.js) — 연구학교 보고서 누리집 첫 화면과 같은 결
   html.lm      : 처음 들어올 때 한 번 나타나는 움직임(index.html 머리말 인라인 스크립트가 붙임)
   html.lm-js   : 스크롤하면 나타나기(login-motion.js가 붙임. 스크립트가 없으면 숨기지 않는다)
   html.lm-loop : 계속 도는 움직임. 슬로건 옆 멈춤 단추(❚❚/▶)와 함께 켜지고 꺼진다
   기본은 처음부터 움직임. 멈춤(❚❚)을 골라 둔 경우에만 셋 다 없는 원래 화면. 움직임은 transform·opacity만 쓴다. */

@keyframes lm-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes lm-pop { 0% { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes lm-mark { from { background-size: 0% 100%; } }
@keyframes lm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(36, 121, 247, .35); } 55% { box-shadow: 0 0 0 10px rgba(36, 121, 247, 0); } }
@keyframes lm-jelly { 0%, 100% { transform: none; } 30% { transform: scale(1.14, .9); } 50% { transform: scale(.95, 1.07); } 70% { transform: scale(1.03, .98); } }

/* ---------- 왼쪽 글: 차례로 떠오르고 '운영 담당자 소통 지원'에 형광펜 ---------- */
.hero h1 em { background: linear-gradient(transparent 66%, rgba(255, 205, 27, .5) 66% 92%, transparent 92%) no-repeat 0 0 / 100% 100%; }
html.lm .hero h1 { animation: lm-up .7s cubic-bezier(.2, .8, .2, 1) .1s backwards !important; }
html.lm .hero h1 em { animation: lm-mark .8s cubic-bezier(.6, 0, .2, 1) 1s backwards !important; }
html.lm .hero .lead { animation: lm-up .7s cubic-bezier(.2, .8, .2, 1) .2s backwards !important; }
html.lm .hero .ask-form { animation: lm-up .6s cubic-bezier(.2, .8, .2, 1) .32s backwards !important; }
html.lm .hero .ask-chips { animation: lm-up .6s cubic-bezier(.2, .8, .2, 1) .44s backwards !important; }

/* ---------- 오른쪽 무대(assets/css/vision-stage.css): 로그인 안내가 떠오르고, 구글 단추가 두근 ---------- */
.lm-stage { isolation: isolate; }
html.lm .lm-stage .lv-cap { animation: lm-up .8s cubic-bezier(.2, .8, .2, 1) .15s backwards !important; }
html.lm .lm-stage .gbtn-box { animation: lm-pop .5s cubic-bezier(.3, 1.6, .5, 1) .7s backwards !important; }
.lm-stage .gbtn-box { position: relative; }
.lm-stage .gbtn-box::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: 999px; pointer-events: none; }
html.lm-loop .lm-stage .gbtn-box::before { animation: lm-glow 2s ease-out 1.2s infinite !important; }

/* ---------- 아래 빠른 메뉴: 화면에 들어오면 차례로, 올리면 아이콘이 말랑 ---------- */
html.lm-js .lq .lm-rv { opacity: 0; }
html.lm-js .lq .lm-rv.in { opacity: 1; animation: lm-up .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 70ms) backwards !important; }
html.lm-loop .lq button:hover .ico { animation: lm-jelly .6s ease !important; }