/* 나르샤 랜딩 모션 레이어. js/motion.js 와 짝. narsha.css / landing.js 무수정.
   초기 숨김은 html.js-motion 이 붙었을 때만 걸리므로 JS 가 죽으면 다 보인다.
   transform / opacity / clip-path 만 쓴다(마퀴 카드 크기만 예외). */

/* 1. 공통 스크롤 리빌 */
html.js-motion [data-m-reveal] {
  opacity: 0;
  transition: opacity .58s cubic-bezier(.22, .61, .36, 1), transform .58s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--m-d, 0ms);
}
html.js-motion [data-m-reveal="up"]    { transform: translate3d(0, 14px, 0); }
html.js-motion [data-m-reveal="left"]  { transform: translate3d(-28px, 12px, 0); }
html.js-motion [data-m-reveal="right"] { transform: translate3d(28px, 12px, 0); }
html.js-motion [data-m-reveal="arrow"] { transform: translate3d(-20px, 0, 0); }
html.js-motion [data-m-reveal="scale"] {
  transform: scale(.945);
  transition-timing-function: cubic-bezier(.2, .8, .3, 1.08);
}
html.js-motion [data-m-reveal][data-m-in] { opacity: 1; transform: none; }

/* 아이콘 · 배지용 통통 튀는 등장 */
html.js-motion [data-m-pop] { opacity: 0; transform: scale(.45); }
html.js-motion [data-m-pop][data-m-in] {
  animation: m-pop .56s cubic-bezier(.34, 1.5, .5, 1) var(--m-d, 0ms) both;
}
@keyframes m-pop {
  0%   { opacity: 0; transform: scale(.45); }
  55%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* 2. CTA 색 반전. :hover 와 :active(터치)를 같은 상태로 묶는다.
   narsha.css 의 hover:opacity-85 / hover:bg-[#232323] 를 이기려고 특이도를 높였다. */
html.js-motion a[data-m-cta] {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html.js-motion a[data-m-cta="light"]  { border: 2px solid #fff; }
html.js-motion a[data-m-cta="dark"]   { border: 2px solid #000; }
html.js-motion a[data-m-cta="sticky"] {
  border: 2px solid #e7a865;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .2s ease, transform .2s ease;
}

/* 모바일은 하단 고정 CTA 가 대신하므로 히어로 버튼만 감춘다(DOM 은 유지). */
@media (max-width: 639px) {
  html.js-motion [data-m-hero-cta] { display: none; }
}

/* 히어로가 보이면 흰 바탕, 벗어나면 금색. 특이도가 :active 반전과 같으므로
   반드시 그 규칙보다 앞에 둔다. */
html.js-motion a[data-m-cta="sticky"][data-m-sticky="top"] { background-color: #fff; border-color: #fff; }
html.js-motion a[data-m-cta="sticky"][data-m-sticky="scrolled"] { background-color: #e7a865; border-color: #e7a865; }

/* 흰 버튼(히어로) → 검정 바탕 + 금색 글씨, 흰 테두리 유지 */
html.js-motion a[data-m-cta="light"]:hover,
html.js-motion a[data-m-cta="light"]:focus-visible,
html.js-motion a[data-m-cta="light"]:active {
  opacity: 1;
  background-color: #000;
  color: #e7a865;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

/* 검정 버튼(오퍼 카드) → 흰 바탕 + 검정 글씨, 검정 테두리 유지 */
html.js-motion a[data-m-cta="dark"]:hover,
html.js-motion a[data-m-cta="dark"]:focus-visible,
html.js-motion a[data-m-cta="dark"]:active {
  opacity: 1;
  background-color: #fff;
  color: #000;
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

/* 하단 고정 CTA(금색) → 검정 바탕 + 금색 글씨, 금색 테두리 유지 */
html.js-motion a[data-m-cta="sticky"]:hover,
html.js-motion a[data-m-cta="sticky"]:focus-visible,
html.js-motion a[data-m-cta="sticky"]:active {
  opacity: 1;
  background-color: #000;
  color: #e7a865;
  border-color: #e7a865;
  transform: translateY(-2px);
  box-shadow: 0 -6px 20px rgba(231, 168, 101, .32);
}
html.js-motion a[data-m-cta="sticky"]:hover span,
html.js-motion a[data-m-cta="sticky"]:active span { color: inherit; }

/* 터치 영역 43.5px → 44px. 접근성 보정이라 js-motion 에 묶지 않는다. */
a[class*="underline-offset-4"] { min-height: 44px; }

/* 상단 바 링크는 약하게 — 금색 글씨 + 흰 밑줄. */
html.js-motion a[data-m-cta="bar"]:hover,
html.js-motion a[data-m-cta="bar"]:focus-visible,
html.js-motion a[data-m-cta="bar"]:active {
  opacity: 1;
  color: #e7a865;
  text-decoration-color: #fff;
  transform: translateY(-2px);
}

/* 3. 후기 마퀴. 본문 인라인 <style> 이 뒤에 오므로 특이도로 이긴다. */
html.js-motion .g-marquee       { --g-marquee-duration: 14s; }
html.js-motion .g-marquee--slow { --g-marquee-duration: 16s; }
@media (min-width: 640px) {
  html.js-motion .g-marquee       { --g-marquee-duration: 18s; }
  html.js-motion .g-marquee--slow { --g-marquee-duration: 21s; }
}
@media (min-width: 1024px) {
  html.js-motion .g-marquee       { --g-marquee-duration: 21s; }
  html.js-motion .g-marquee--slow { --g-marquee-duration: 25s; }
}

/* 후기 글씨가 읽히도록 카드를 키우고, 두 줄의 모서리를 통일한다. */
html.js-motion .g-marquee-track > div > div {
  height: 242px;
  width: 277px;
  border-radius: 24px;
  transition: transform .28s ease, box-shadow .28s ease;
}
@media (min-width: 640px) {
  html.js-motion .g-marquee-track > div > div {
    height: 282px;
    width: 323px;
    border-radius: 28px;
  }
}
@media (min-width: 1024px) {
  html.js-motion .g-marquee-track > div > div {
    height: 332px;
    width: 380px;
    border-radius: 34px;
  }
}

@media (hover: hover) {
  html.js-motion .g-marquee:hover .g-marquee-track { animation-play-state: paused; }
  /* 카톡 후기 줄만 손에 잡히는 느낌을 준다. */
  html.js-motion .g-marquee--slow .g-marquee-track > div > div:hover {
    transform: scale(1.035);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  }
}

/* 후기 반짝임. 레이어가 pointer-events:none 이라 마퀴 hover 정지에 영향 없다. */
html.js-motion [data-m-sparkles] { position: relative; }
html.js-motion [data-m-sparkle-layer] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
html.js-motion [data-m-sparkle] {
  position: absolute;
  top: var(--m-y);
  left: var(--m-x);
  width: var(--m-s, 12px);
  height: var(--m-s, 12px);
  margin: calc(var(--m-s, 12px) / -2);
  background-color: #e7a865;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  pointer-events: none;
}
html.js-motion [data-m-sparkles][data-m-in] [data-m-sparkle] {
  animation: m-sparkle var(--m-dur, 2.6s) ease-in-out var(--m-d, 0ms) infinite;
}
@keyframes m-sparkle {
  0%, 100% { opacity: 0;   transform: scale(.45); }
  50%      { opacity: .85; transform: scale(1); }
}

/* 카톡 후기 카드 위를 대각선으로 한 번씩 훑고 지나가는 흰 광택. */
html.js-motion [data-m-sheen]::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -55%;
  width: 42%;
  height: 140%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(0) rotate(18deg);
  opacity: 0;
  pointer-events: none;
}
html.js-motion [data-m-sparkles][data-m-in] [data-m-sheen]::after {
  animation: m-sheen var(--m-dur, 5s) ease-in-out var(--m-d, 0ms) infinite;
}
@keyframes m-sheen {
  0%        { opacity: 0; transform: translateX(0) rotate(18deg); }
  4%        { opacity: 1; }
  24%       { opacity: 1; transform: translateX(330%) rotate(18deg); }
  28%, 100% { opacity: 0; transform: translateX(330%) rotate(18deg); }
}

/* 4. 금색 제목 — shimmer 스윕 · 별 트윙클 · 손글씨 밑줄 드로잉 */
html.js-motion [data-m-shimmer][data-m-in] {
  animation: m-shimmer 4.6s ease-in-out 1s infinite;
}
@keyframes m-shimmer {
  0%        { background-position: -80% 0, 0 0; }
  42%, 100% { background-position: 180% 0, 0 0; }
}

html.js-motion [data-m-star][data-m-in] {
  animation: m-twinkle var(--m-dur, 2.4s) ease-in-out var(--m-d, 0ms) infinite;
}
@keyframes m-twinkle {
  0%, 100% { opacity: .5;  transform: scale(.86); }
  50%      { opacity: 1;   transform: scale(1.13); }
}

html.js-motion [data-m-draw] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.22, .61, .36, 1) var(--m-d, 0ms);
}
html.js-motion [data-m-draw][data-m-in] { clip-path: inset(0 0 0 0); }

/* 5. 커리큘럼 비교 링 글로우. box-shadow 는 고정, opacity 만 애니메이션. */
html.js-motion [data-m-ring]::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 9999px;
  box-shadow: 0 0 28px 6px rgba(243, 196, 137, .3);
  opacity: 0;
  pointer-events: none;
}
html.js-motion [data-m-ring][data-m-in]::after { animation: m-glow 4.5s ease-in-out .7s infinite; }
@keyframes m-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* 6. 오퍼 — 취소선 드로잉 · 50% OFF 스탬프 · 50% 할인 강조 */
html.js-motion [data-m-stamp] { opacity: 0; transform: scale(1.7) rotate(-14deg); }
html.js-motion [data-m-stamp][data-m-in] {
  animation: m-stamp .5s cubic-bezier(.22, .9, .3, 1.1) var(--m-d, 700ms) both;
}
@keyframes m-stamp {
  0%   { opacity: 0; transform: scale(1.7) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(.94) rotate(2.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

html.js-motion [data-m-emph][data-m-in] {
  animation: m-emph 1.1s cubic-bezier(.34, 1.4, .5, 1) .3s both;
}
@keyframes m-emph {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.075); }
  58%  { transform: scale(.987); }
  100% { transform: scale(1); }
}

/* 7. 하단 고정 CTA 은은한 펄스 */
html.js-motion [data-m-pulse]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(231, 168, 101, .5), 0 0 20px 5px rgba(231, 168, 101, .34);
  opacity: 0;
  pointer-events: none;
  animation: m-pulse 3s ease-in-out 1.6s infinite;
}
@keyframes m-pulse {
  0%, 100% { opacity: 0; }
  46%      { opacity: .8; }
}
html.js-motion [data-m-pulse]:hover::after,
html.js-motion [data-m-pulse]:active::after { animation: none; opacity: 0; }

/* 8. FAQ 펼침. landing.js 가 hidden 을 토글한 뒤 높이를 잡아 준다. */
html.js-motion .m-faq-anim {
  overflow: hidden;
  transition: height .3s cubic-bezier(.4, 0, .2, 1), padding-bottom .3s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
}

/* 9. prefers-reduced-motion — 전부 끄고 최종 상태를 즉시 보여준다. */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-m-reveal],
  html.js-motion [data-m-pop],
  html.js-motion [data-m-stamp],
  html.js-motion [data-m-emph],
  html.js-motion [data-m-star],
  html.js-motion [data-m-shimmer] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.js-motion [data-m-draw] {
    clip-path: none !important;
    transition: none !important;
  }
  html.js-motion [data-m-ring]::after,
  html.js-motion [data-m-pulse]::after {
    animation: none !important;
    opacity: 0 !important;
  }
  html.js-motion a[data-m-cta] { transition: none !important; }
  html.js-motion .m-faq-anim   { transition: none !important; }
  html.js-motion .g-marquee-track > div > div { transition: none !important; }
  html.js-motion [data-m-sparkle-layer] { display: none !important; }
  html.js-motion [data-m-sheen]::after {
    animation: none !important;
    opacity: 0 !important;
  }
}