/* =========================================================
   lp-motion.css : 랜딩 연출 효과 (lec_randing01 전용)
   - style.css 다음에 로드. 모든 규칙은 .lp-motion 하위로 한정
   - 숨김 상태는 JS가 .is-ready를 붙인 뒤에만 적용 (JS 실패 시 그대로 노출)
   ========================================================= */

.lp-motion {
  --lp-navy:#1a3c6e; --lp-blue:#1a5490; --lp-deep:#0a2a5e;
  --lp-orange:#e8410a; --lp-green:#4ecb71; --lp-sky:#eaf4ff;
  --lp-ease:cubic-bezier(.22,1,.36,1);
}

/* ===== 키프레임 ===== */
@keyframes lp-pop    { 0%{opacity:0;transform:scale(.3)} 55%{opacity:1;transform:scale(1.25)} 100%{opacity:1;transform:scale(1)} }
@keyframes lp-pop-soft { 0%{opacity:0;transform:scale(.85)} 60%{opacity:1;transform:scale(1.04)} 100%{opacity:1;transform:scale(1)} }
@keyframes lp-up     { from{opacity:0;transform:translate3d(0,40px,0)} to{opacity:1;transform:none} }
@keyframes lp-left   { from{opacity:0;transform:translate3d(-48px,0,0)} to{opacity:1;transform:none} }
@keyframes lp-pulse  { 0%{box-shadow:0 0 0 0 var(--pulse)} 70%{box-shadow:0 0 0 18px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@keyframes lp-shine  { 0%{transform:translateX(-150%) skewX(-20deg)} 45%,100%{transform:translateX(350%) skewX(-20deg)} }
@keyframes lp-twinkle{ 0%,100%{opacity:.2;transform:scale(.65) rotate(0)} 50%{opacity:1;transform:scale(1) rotate(25deg)} }
@keyframes lp-beam   { 0%,100%{transform:rotate(calc(var(--r) - 3deg))} 50%{transform:rotate(calc(var(--r) + 3deg))} }
@keyframes lp-fall   { from{transform:translate3d(0,-30px,0) rotate(0)} to{transform:translate3d(var(--dx),var(--fall),0) rotate(var(--rot))} }
@keyframes lp-draw   { to{stroke-dashoffset:0} }
@keyframes lp-glow   { from{box-shadow:0 8px 32px rgba(0,0,0,.25),0 0 10px rgba(78,203,113,.25)} to{box-shadow:0 8px 32px rgba(0,0,0,.25),0 0 28px rgba(78,203,113,.6)} }
@keyframes lp-blink  { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ===== SVG 아이콘 공통 ===== */
.lp-motion .lp-ico {
  width:1em; height:1em; display:inline-block; vertical-align:-.15em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.lp-motion .lp-ico-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,#ff6b2c,var(--lp-orange));
  color:#fff !important; font-size:30px;
  box-shadow:0 8px 16px rgba(232,65,10,.28);
}
.lp-motion .lp-ico-badge--navy {
  width:76px; height:76px; font-size:34px;
  background:linear-gradient(135deg,var(--lp-blue),var(--lp-deep));
  box-shadow:0 8px 18px rgba(10,42,94,.28);
}
.lp-motion .lp-ico-badge--sky {
  width:80px; height:80px; font-size:36px;
  background:var(--lp-sky); color:var(--lp-blue) !important; box-shadow:none;
}

/* ===== ① 히어로 ===== */
.lp-motion .lp-hero { position:relative; overflow:hidden; isolation:isolate; }
.lp-motion .lp-hero::before {   /* 중앙 글로우 */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 45% 55% at 50% 50%, rgba(255,255,255,.13), transparent 70%);
}
.lp-motion .lp-hero > * { position:relative; z-index:2; }
.lp-motion .lp-hero > .lp-fx-beams,
.lp-motion .lp-hero > .lp-fx-sparkles { position:absolute; inset:0; z-index:1; pointer-events:none; }

/* 사진 배경 히어로 : 좌우 네이비 비네팅 + 중앙 선명 */
.lp-motion .lp-hero--photo {
  box-sizing:border-box; min-height:760px; justify-content:center;
  padding:190px 20px 30px;   /* 위 여백↑ 아래↓ : 사진 속 현수막이 패널에 가리지 않게 (전체 높이는 760 유지) */
  background:
    linear-gradient(180deg, rgba(10,42,94,.35) 0%, rgba(10,42,94,0) 30%, rgba(10,42,94,0) 70%, rgba(10,42,94,.45) 100%),
    linear-gradient(90deg, rgba(10,42,94,.95) 0%, rgba(26,84,144,.7) 14%, rgba(26,84,144,0) 34%, rgba(26,84,144,0) 66%, rgba(14,107,168,.7) 86%, rgba(14,107,168,.95) 100%),
    #1a5490 url('img/lec01_hero2.jpg') center 35% / cover no-repeat;   /* webp는 서버(IIS)에서 404 → jpg 사용 */
}
.lp-motion .lp-hero--photo::before { display:none; }

/* 글자 뒤 유리 패널 */
.lp-motion .lp-hero-glass {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:36px 60px 40px; border-radius:24px;
  background:rgba(10,42,94,.38);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
          backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 20px 50px rgba(10,42,94,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .lp-motion .lp-hero-glass { background:rgba(10,42,94,.78); }
}
.lp-motion.is-ready .lp-hero:not(.is-in) .lp-hero-glass { opacity:0; }
.lp-motion .lp-hero.is-in .lp-hero-glass { animation:lp-pop-soft .7s var(--lp-ease) backwards; }

/* 스포트라이트 빛줄기 */
.lp-motion .lp-fx-beams::before,
.lp-motion .lp-fx-beams::after {
  content:''; position:absolute; top:-20%; width:34%; height:150%;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 80%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);
  transform-origin:50% 0; animation:lp-beam 10s ease-in-out infinite;
}
.lp-motion .lp-fx-beams::before { left:2%;  --r:-22deg; }
.lp-motion .lp-fx-beams::after  { right:2%; --r:22deg; animation-delay:-5s; }

/* 반짝이 */
.lp-motion .lp-fx-sparkles i {
  position:absolute; display:block; width:var(--s); height:var(--s); color:#fff;
  animation:lp-twinkle 3.2s ease-in-out infinite; animation-delay:var(--d);
}
.lp-motion .lp-fx-sparkles svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* 타이틀 */
.lp-motion .lp-hero h1 { text-shadow:0 6px 22px rgba(0,0,0,.28); }
.lp-motion .lp-hero h1 .hl { color:#ff3b3b; text-shadow:0 0 24px rgba(255,59,59,.45); }
.lp-motion .lp-hero h1 .hl.lp-mark--line { background-image:linear-gradient(#ff3b3b,#ff3b3b); }
.lp-motion .lp-ch { display:inline-block; white-space:pre; }

.lp-motion.is-ready .lp-hero:not(.is-in) .tag,
.lp-motion.is-ready .lp-hero:not(.is-in) .hero-sm,
.lp-motion.is-ready .lp-hero:not(.is-in) .lp-ch,
.lp-motion.is-ready .lp-hero:not(.is-in) .hero-cta { opacity:0; }

.lp-motion .lp-hero.is-in .tag { animation:lp-pop-soft .6s var(--lp-ease) backwards; }
.lp-motion .lp-hero.is-in .hero-title-group > .hero-sm:first-child { animation:lp-up .7s var(--lp-ease) .15s backwards; }
.lp-motion .lp-hero.is-in .hero-title-group > .hero-sm:last-child  { animation:lp-up .7s var(--lp-ease) 1.05s backwards; }
.lp-motion .lp-hero.is-in .lp-ch { animation:lp-pop .7s ease-out backwards; animation-delay:calc(var(--i) * 55ms + .3s); }

/* CTA : 등장 → 맥박 + 반짝 스윕 */
.lp-motion .lp-hero .hero-cta,
.lp-motion .lp-final-cta .lp-cta-btn,
.lp-motion .lp-form-card .ic-submit { position:relative; overflow:hidden; transition:background .2s, transform .2s; }
.lp-motion .lp-hero .hero-cta:hover,
.lp-motion .lp-final-cta .lp-cta-btn:hover { transform:translateY(-3px); }
.lp-motion .lp-hero .hero-cta::after,
.lp-motion .lp-final-cta .lp-cta-btn::after,
.lp-motion .lp-form-card .ic-submit::after {
  content:''; position:absolute; top:0; left:0; width:35%; height:100%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-150%) skewX(-20deg);
}
.lp-motion .lp-hero .hero-cta { --pulse:rgba(232,65,10,.55); }
.lp-motion .lp-hero.is-in .hero-cta { animation:lp-up .7s var(--lp-ease) 1.2s backwards, lp-pulse 2.4s ease-out 2.2s infinite; }
.lp-motion .lp-hero.is-in .hero-cta::after { animation:lp-shine 3.6s ease-in-out 2.4s infinite; }

.lp-motion .lp-final-cta .lp-cta-btn { --pulse:rgba(78,203,113,.6); }
.lp-motion .lp-final-cta .lp-cta-btn.is-in { animation:lp-up .8s var(--lp-ease) var(--d,0s) backwards, lp-pulse 2.4s ease-out 1.4s infinite; }
.lp-motion .lp-final-cta .lp-cta-btn.is-in::after,
.lp-motion .lp-form-card.is-in .ic-submit::after { animation:lp-shine 3.6s ease-in-out 1.6s infinite; }

/* ===== 스크롤 순차 등장 ===== */
.lp-motion.is-ready [data-reveal]:not(.is-in) { opacity:0; }
.lp-motion [data-reveal].is-in { animation:lp-up .8s var(--lp-ease) var(--d,0s) backwards; }
.lp-motion [data-reveal="left"].is-in { animation-name:lp-left; }
.lp-motion [data-reveal="pop"].is-in  { animation-name:lp-pop-soft; animation-duration:.6s; }

/* 가로 와이프 (뉴엠 itemIn 대체 : 글자 찌그러짐 없이 clip-path로)
   대기 상태에 clip-path를 걸면 IntersectionObserver가 '안 보임'으로 판단해 영영 등장하지 않으므로
   등장 시점에만 키프레임으로 잘라서 펼친다 */
@keyframes lp-wipe { from{clip-path:inset(0 100% 0 0 round 10px)} to{clip-path:inset(0 0 0 0 round 10px)} }
.lp-motion [data-reveal="wipe"].is-in { animation:lp-wipe 1s var(--lp-ease) var(--d,0s) backwards; }

/* ===== 형광펜 마커 ===== */
.lp-motion .lp-mark {
  --mk:rgba(232,65,10,.16);
  background-image:linear-gradient(transparent 56%, var(--mk) 56%, var(--mk) 92%, transparent 92%);
  background-repeat:no-repeat; background-size:0% 100%;
  padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size .9s var(--lp-ease) var(--md,.25s);
}
.lp-motion .lp-mark.is-marked { background-size:100% 100%; }
/* 어두운 배경 위 초록 글자 : 밑줄 스트로크형 */
.lp-motion .lp-mark--line {
  background-image:linear-gradient(var(--lp-green),var(--lp-green));
  background-position:0 96%; background-size:0% .12em;
}
.lp-motion .lp-mark--line.is-marked { background-size:100% .12em; }

/* ===== 6대 혜택 : 티켓 카드 ===== */
.lp-motion .lp-grid-6 { filter:drop-shadow(0 8px 18px rgba(26,60,110,.12)); }
.lp-motion .lp-grid-6 .lp-card {
  --ny:104px;
  position:relative; border:none; border-radius:14px; padding:22px 22px 26px;
  background:linear-gradient(180deg,#fff5f0 0, #fff5f0 var(--ny), #fff var(--ny));
  -webkit-mask:
    radial-gradient(circle 11px at 0 var(--ny), #0000 97%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% var(--ny), #0000 97%, #000 100%) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 11px at 0 var(--ny), #0000 97%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% var(--ny), #0000 97%, #000 100%) right / 51% 100% no-repeat;
  transition:transform .3s var(--lp-ease);
}
.lp-motion .lp-grid-6 .lp-card::after {   /* 절취선 */
  content:''; position:absolute; left:20px; right:20px; top:var(--ny);
  border-top:2px dashed #f3c9b8;
}
.lp-motion .lp-grid-6 .lp-card:hover { transform:translateY(-6px); }
.lp-motion .lp-grid-6 .lp-card .icon { margin:0 0 36px; line-height:0; font-size:inherit; }
.lp-motion .lp-grid-6 .lp-card h3 { font-size:1em; line-height:1.45; }
.lp-motion .lp-card.is-in .lp-ico-badge { animation:lp-pop .6s ease-out backwards; animation-delay:calc(var(--d,0s) + .3s); }

/* ===== 학습서비스 3종 / 교수진 / 후기 : hover 리프트 ===== */
.lp-motion .lp-service-card,
.lp-motion .lp-professor,
.lp-motion .lp-review-card { transition:transform .3s var(--lp-ease), box-shadow .3s; }
.lp-motion .lp-service-card:hover,
.lp-motion .lp-professor:hover,
.lp-motion .lp-review-card:hover { transform:translateY(-6px); box-shadow:0 16px 30px rgba(26,60,110,.14); }
.lp-motion .lp-service-card .svc-icon,
.lp-motion .lp-professor .prof-icon { line-height:0; font-size:inherit; margin-bottom:18px; }
.lp-motion .lp-service-card.is-in .lp-ico-badge,
.lp-motion .lp-professor.is-in .lp-ico-badge { animation:lp-pop .6s ease-out backwards; animation-delay:calc(var(--d,0s) + .3s); }

/* 맞춤학습 미니카드 */
.lp-motion .lp-mini-card .lp-ico { display:block; margin:0 auto 8px; font-size:28px; color:var(--lp-blue); }

/* 망설임 리스트 */
.lp-motion .lp-concerns-list li .ci {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:10px; background:var(--lp-sky);
  font-size:22px; color:var(--lp-blue) !important;
}

/* 폼 영역 소형 아이콘 */
.lp-motion .lp-form-copy .fc-badge .lp-ico,
.lp-motion .lp-form-card .fc-title .lp-ico { margin-right:4px; }
.lp-motion .lp-form-copy .fc-note .lp-ico { margin-right:4px; color:#9bb8d4; }
.lp-motion .lp-section > p .lp-ico { color:var(--lp-orange); margin-right:4px; }

/* ===== 상담폼 : D-day 배지 + 카드 글로우 ===== */
.lp-motion .lp-dday {
  display:inline-flex; align-items:center; gap:6px; margin:0 0 16px 8px; vertical-align:top;
  padding:5px 14px; border-radius:20px; background:#fff; color:var(--lp-orange) !important;
  font-size:.82em; font-weight:bold; letter-spacing:.03em;
}
.lp-motion .lp-dday[hidden] { display:none; }
.lp-motion .lp-dday::before {
  content:''; width:8px; height:8px; border-radius:50%; background:var(--lp-orange);
  animation:lp-blink 1.2s ease-in-out infinite;
}
.lp-motion .lp-form-card.is-in { animation:lp-up .8s var(--lp-ease) var(--d,0s) backwards, lp-glow 1.8s ease-in-out 1s infinite alternate; }

/* ===== 손글씨 강조 + 밑줄 드로잉 ===== */
.lp-motion .lp-hand {
  position:relative; display:inline-block;
  font-family:'Nanum Pen Script','NotoSans',cursive; font-weight:400;
  font-size:1.55em; line-height:1; letter-spacing:0; color:var(--lp-green) !important;
  transform:rotate(-3deg);
}
.lp-motion .lp-hand-line {
  position:absolute; left:-4%; bottom:-.12em; width:108%; height:.3em; overflow:visible; pointer-events:none;
}
.lp-motion .lp-hand-line path {
  fill:none; stroke:var(--lp-green); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:240; stroke-dashoffset:240;
}
.lp-motion .is-in .lp-hand-line path { animation:lp-draw .9s ease-out .5s forwards; }
.lp-motion .lp-hand--red { color:#ff3b3b !important; }
.lp-motion .lp-hand--red .lp-hand-line path { stroke:#ff3b3b; }

/* ===== 컨페티 (다크 섹션 / 마무리 CTA) ===== */
.lp-motion .lp-bg-dark,
.lp-motion .lp-final-cta { position:relative; overflow:hidden; isolation:isolate; }
.lp-motion .lp-bg-dark > *:not(.lp-fx-confetti),
.lp-motion .lp-final-cta > *:not(.lp-fx-confetti) { position:relative; z-index:2; }
.lp-motion .lp-fx-confetti { position:absolute; inset:0; z-index:1; pointer-events:none; }
.lp-motion .lp-fx-confetti i {
  position:absolute; top:0; left:var(--x); width:var(--w); height:var(--h);
  background:var(--c); border-radius:var(--br); opacity:.85;
  animation:lp-fall var(--t) linear var(--dl) infinite; animation-play-state:paused;
}
.lp-motion .is-live > .lp-fx-confetti i { animation-play-state:running; }

/* ===== 동작 줄이기 설정 존중 ===== */
@media (prefers-reduced-motion: reduce) {
  .lp-motion *, .lp-motion *::before, .lp-motion *::after { animation:none !important; transition:none !important; }
  .lp-motion.is-ready [data-reveal], .lp-motion.is-ready .lp-hero .lp-ch, .lp-motion.is-ready .lp-hero-glass,
  .lp-motion.is-ready .lp-hero .tag, .lp-motion.is-ready .lp-hero .hero-sm, .lp-motion.is-ready .lp-hero .hero-cta { opacity:1 !important; clip-path:none !important; }
  .lp-motion .lp-hand-line path { stroke-dashoffset:0; }
  .lp-motion .lp-fx-confetti { display:none; }
}

/* ===== 반응형 ===== */
@media (max-width:768px) {
  .lp-motion .lp-fx-beams::before, .lp-motion .lp-fx-beams::after { width:60%; }
  .lp-motion .lp-dday { margin-left:0; }
  .lp-motion .lp-hero--photo { min-height:600px; padding:110px 16px 24px; }
  .lp-motion .lp-hero-glass { padding:28px 22px 30px; border-radius:18px; }
}