/*!
 * motion.css — motion.js 짝꿍 스타일 + 반응형 유틸리티
 * 정적 HTML 사이트에 <link rel="stylesheet" href="motion.css"> 한 줄.
 * 모든 모션은 prefers-reduced-motion 에서 자동 비활성화됩니다.
 */

/* ============ 0. 토큰 (사이트 브랜드에 맞게 덮어쓰기) ============ */
:root {
  --mo-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* 부드러운 out */
  --mo-dur: 0.7s;
  --mo-shift: 28px;                             /* 리빌 이동 거리 */
  --mo-accent: #111;                           /* 진행바/버튼 강조색 */
}

/* ============ 1. 스크롤 리빌 ============ */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(var(--mo-shift)); }
[data-reveal="down"]  { transform: translateY(calc(var(--mo-shift) * -1)); }
[data-reveal="left"]  { transform: translateX(var(--mo-shift)); }
[data-reveal="right"] { transform: translateX(calc(var(--mo-shift) * -1)); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* ============ 2. 스크롤 진행바 ============ */
.motion-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--mo-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 9999; pointer-events: none;
  transition: transform 0.1s linear;
}

/* ============ 3. 맨 위로 버튼 ============ */
.motion-top {
  position: fixed; right: 20px; bottom: 20px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--mo-accent); color: #fff; border: 0;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 9998; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.motion-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.motion-top:hover { transform: translateY(-2px); }

/* ============ 4. 헤더 스크롤 축소/글래스 ============ */
[data-shrink] {
  transition: padding 0.3s var(--mo-ease), background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
[data-shrink].is-shrunk {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* ============ 5. 마퀴 ============ */
[data-marquee] { display: flex; gap: 0; overflow: hidden; white-space: nowrap; }
[data-marquee] > * { flex: 0 0 auto; }

/* ============ 6. 아코디언 기본 모양(선택) ============ */
[data-accordion-item] [data-accordion-panel],
[data-accordion-item] > button + div { max-height: 0; overflow: hidden; }

/* ============ 7. 인터랙션 헬퍼 ============ */
[data-tilt], [data-magnetic] { transition: transform 0.25s var(--mo-ease); }
.hover-lift { transition: transform 0.3s var(--mo-ease), box-shadow 0.3s var(--mo-ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }

/* 밑줄 슬라이드 링크 */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--mo-ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* 이미지 줌 (부모에 .zoom-wrap { overflow:hidden }) */
.zoom-wrap { overflow: hidden; }
.zoom-wrap img { transition: transform 0.6s var(--mo-ease); display: block; }
.zoom-wrap:hover img { transform: scale(1.06); }

/* 버튼 광택 스윕 */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg); transition: left 0.6s var(--mo-ease);
}
.btn-shine:hover::after { left: 125%; }

/* ============ 8. 반응형 유틸 (clamp 기반 유동값) ============ */
/* 유동 타이포: 화면 폭 따라 자연스럽게 확대/축소 */
.fluid-h1 { font-size: clamp(1.9rem, 5vw + 0.5rem, 4rem);   line-height: 1.1;  letter-spacing: -0.02em; }
.fluid-h2 { font-size: clamp(1.5rem, 3.5vw + 0.4rem, 2.6rem); line-height: 1.18; letter-spacing: -0.015em; }
.fluid-lead { font-size: clamp(1rem, 1.2vw + 0.6rem, 1.35rem); line-height: 1.6; }
/* 유동 섹션 여백 */
.section-pad { padding-block: clamp(3rem, 8vw, 7rem); }
.container { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
/* 자동 채움 카드 그리드 — 미디어쿼리 불필요 */
.auto-grid { display: grid; gap: clamp(1rem, 2vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
/* 가로 스크롤 스냅 캐러셀 (모바일 슬라이더 대체) */
.snap-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: start; flex: 0 0 auto; }
/* 데스크톱에서만 hover 효과 적용 (터치 오작동 방지) */
@media (hover: none) {
  .hover-lift:hover, [data-tilt], [data-magnetic] { transform: none !important; }
}

/* ============ 9. 접근성: 모션 최소화 존중 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}