/* 티음 — 모션 시스템 스타일
 * 리빌 초기 숨김은 .reveal-ready 에만 적용 → JS 미동작 시 콘텐츠는 그냥 보인다.
 * delay/stagger는 JS setTimeout 담당(CSS transition-delay 사용 금지). */

:root {
  --reveal-dur: 560ms;
  --reveal-ease: var(--ease-out);
  --stagger-step: 70ms;
}

/* ── 스크롤 리빌 ─────────────────────────────── */
.reveal-ready {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
/* 방향 변형 (초기 transform만 CSS가 처리, 토글은 JS) */
.reveal-ready[data-reveal="left"] { transform: translateX(-20px); }
.reveal-ready[data-reveal="right"] { transform: translateX(20px); }
.reveal-ready[data-reveal="scale"] { transform: scale(.96); }

/* 최종 상태 — 변형 포함 모두 none으로 수렴 (명시 셀렉터로 우선순위 확보) */
.reveal-ready.reveal-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── 마퀴 ────────────────────────────────────── */
.tium-marquee { overflow: hidden; }
.tium-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.tium-marquee-track .partner { flex: 0 0 auto; }
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}
.tium-marquee:hover .tium-marquee-track { animation-play-state: paused; }

/* 정적 폴백 (reduced-motion 또는 복제 생략 시) */
.tium-marquee.is-static .tium-marquee-track {
  animation: none;
  flex-wrap: wrap;
  width: auto;
}

/* ── 히어로 장식 부유 ─────────────────────────── */
.hero-orna { animation: hero-float 7s var(--ease-out) infinite; }
@keyframes hero-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-8px) rotate(0.8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ── reduced-motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .tium-marquee-track {
    animation: none !important;
    flex-wrap: wrap;
    width: auto;
  }
  .hero-orna { animation: none !important; }
}