/* ───────────── suui motion — Framer식 프리셋을 속성 하나로 ─────────────
   <div data-su-reveal="up">           스크롤로 들어오면 등장 (up|down|left|right|fade|scale|blur|clip)
   <ul data-su-stagger="80">           자식들이 80ms 간격으로 차례로 등장
   <a data-su-hover="lift">            lift|tilt|magnetic|press|glow
   <div class="su-marquee">            무한 흐름 (data-speed="40" 초, data-reverse)
   <b data-su-count="1200">            숫자 카운트업 (data-suffix="%", data-duration="1400")
   <h1 data-su-split="chars|words">    글자·단어 단위 등장
   <span data-su-typing="문장|문장">   타이핑 순환
   <mark data-su-highlight>            형광펜 쓸기
   <img data-su-parallax="0.2">        스크롤 패럴랙스
   <div data-su-progress>              페이지 스크롤 진행바
   suMotion.flip(el, () => 변경)       레이아웃 전환(FLIP)
   원칙: 짧고(≤ 600ms) 한 방향으로. 한 화면에 움직이는 덩어리는 1~2개. 과하면 원본의 '강강약약'과 반대.
──────────────────────────────────────────────────────────────────── */
:root {
  --su-dur-fast: 160ms;
  --su-dur: 320ms;
  --su-dur-slow: 640ms;
  --su-ease-out: cubic-bezier(.22, 1, .36, 1);        /* Framer 기본 easeOut 과 비슷 */
  --su-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --su-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --su-reveal-dist: 24px;
}

/* 등장 */
[data-su-reveal] { transition: opacity var(--su-dur-slow) var(--su-ease-out), transform var(--su-dur-slow) var(--su-ease-out), filter var(--su-dur-slow) var(--su-ease-out), clip-path var(--su-dur-slow) var(--su-ease-out); transition-delay: var(--su-delay, 0ms); }
.su-motion-ready [data-su-reveal]:not(.is-in) { opacity: 0; }
.su-motion-ready [data-su-reveal="up"]:not(.is-in)    { transform: translateY(var(--su-reveal-dist)); }
.su-motion-ready [data-su-reveal="down"]:not(.is-in)  { transform: translateY(calc(var(--su-reveal-dist) * -1)); }
.su-motion-ready [data-su-reveal="left"]:not(.is-in)  { transform: translateX(var(--su-reveal-dist)); }
.su-motion-ready [data-su-reveal="right"]:not(.is-in) { transform: translateX(calc(var(--su-reveal-dist) * -1)); }
.su-motion-ready [data-su-reveal="scale"]:not(.is-in) { transform: scale(.94); }
.su-motion-ready [data-su-reveal="blur"]:not(.is-in)  { filter: blur(10px); transform: translateY(8px); }
/* clip: clip-path 로 숨기면 IntersectionObserver 가 '안 보임'으로 판정해 영영 안 나타나므로 mask 로 쓸어 연다 */
[data-su-reveal="clip"] { -webkit-mask: linear-gradient(90deg, #000 50%, transparent 0) 0 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, transparent 0) 0 0 / 200% 100% no-repeat;
  transition: -webkit-mask-position var(--su-dur-slow) var(--su-ease-out), mask-position var(--su-dur-slow) var(--su-ease-out); transition-delay: var(--su-delay, 0ms); }
.su-motion-ready [data-su-reveal="clip"]:not(.is-in)  { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }

/* 호버 */
[data-su-hover] { transition: transform var(--su-dur) var(--su-ease-out), box-shadow var(--su-dur) var(--su-ease-out); will-change: transform; }
[data-su-hover="lift"]:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .10); }
[data-su-hover="press"]:active { transform: scale(.96); transition-duration: var(--su-dur-fast); }
[data-su-hover="glow"]:hover { box-shadow: 0 0 0 1px var(--su-primary-mid), 0 10px 40px -8px color-mix(in srgb, var(--su-primary) 45%, transparent); }
[data-su-hover="tilt"], [data-su-hover="magnetic"] { transition: transform var(--su-dur) var(--su-spring); }
[data-su-hover="tilt"] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
[data-su-hover="magnetic"] { transform: translate(var(--mx, 0px), var(--my, 0px)); }

/* 마퀴 */
.su-marquee { --gap: var(--su-gap); display: flex; overflow: hidden; gap: var(--gap); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.su-marquee__track { display: flex; gap: var(--gap); flex: none; min-width: 100%; animation: su-marquee var(--speed, 30s) linear infinite; }
.su-marquee[data-reverse] .su-marquee__track { animation-direction: reverse; }
.su-marquee:hover .su-marquee__track { animation-play-state: paused; }
@keyframes su-marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

/* 글자 분할 */
.su-split-unit { display: inline-block; white-space: pre; transition: opacity var(--su-dur-slow) var(--su-ease-out), transform var(--su-dur-slow) var(--su-ease-out), filter var(--su-dur-slow) var(--su-ease-out); transition-delay: calc(var(--i) * var(--su-split-step, 28ms)); }
.su-motion-ready [data-su-split]:not(.is-in) .su-split-unit { opacity: 0; transform: translateY(.45em); filter: blur(4px); }

/* 타이핑 커서 */
[data-su-typing]::after { content: ""; display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: currentColor; animation: su-blink 1s steps(1) infinite; }
@keyframes su-blink { 50% { opacity: 0; } }

/* 형광펜 */
[data-su-highlight] { background: linear-gradient(transparent 58%, var(--su-primary-soft) 58%) no-repeat 0 0 / 0% 100%; color: inherit; transition: background-size 900ms var(--su-ease-out) 200ms; }
[data-su-highlight].is-in { background-size: 100% 100%; }

/* 스크롤 진행바 */
[data-su-progress] { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--su-primary); z-index: 100; }

/* 탭 인디케이터(FLIP 없이 CSS 로 미끄러지는 표시) */
.su-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--su-surface-muted); }
.su-seg button { position: relative; z-index: 1; border: 0; background: none; font: inherit; font-size: var(--su-fs-caption); font-weight: var(--su-w-semibold); color: var(--su-text-muted); padding: .6em 1.2em; border-radius: 999px; cursor: pointer; transition: color var(--su-dur); }
.su-seg button.on { color: var(--su-text-strong); }
.su-seg__ind { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--su-surface); box-shadow: 0 1px 6px rgba(0,0,0,.08); transition: transform var(--su-dur) var(--su-spring), width var(--su-dur) var(--su-spring); }

@media (prefers-reduced-motion: reduce) {
  [data-su-reveal], .su-split-unit, [data-su-highlight], [data-su-hover] { transition: none !important; }
  .su-motion-ready [data-su-reveal]:not(.is-in), .su-motion-ready [data-su-split]:not(.is-in) .su-split-unit { opacity: 1; transform: none; filter: none; -webkit-mask: none; mask: none; }
  .su-marquee__track { animation: none; }
}