@charset "utf-8";
/* ==========================================================================
   animation.css — 스크롤 등장 · 슬라이드 · 흐름 · 레이어 전환 효과
   ========================================================================== */

/* 스크롤 진입 페이드인 [data-reveal] — js/animation.js 가 html.js-reveal 부여
   (JS가 동작하지 않으면 그대로 보임) */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(12px);   /* 이동 거리 · 시간을 줄여 긴 페이지에서 늦게 보이는 느낌 완화 */
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* 슬라이더 이동 (시간은 JS가 data-speed 로 지정) */
.slider__track { transition-property: transform; transition-timing-function: ease; will-change: transform; }

/* 시공 사진 무한 흐름 — JS가 트랙을 한 번 복제, -50% 이동 후 반복 */
.marquee__track { animation: marquee var(--marquee-duration, 60s) linear infinite; }
.marquee:hover .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 3.5px)); } }
@keyframes marquee-mo { to { transform: translateX(calc(-50% - 1.5px)); } }
@media (max-width: 991px) {
    .marquee__track { animation-name: marquee-mo; }
}

/* 모바일 메뉴 — 왼쪽에서 오른쪽으로 슬라이드 인 (메뉴 버튼이 왼쪽에 있음) */
.mobile-menu__panel { transform: translateX(-100%); transition: transform .3s var(--ease); }
.mobile-menu.is-open .mobile-menu__panel { transform: none; }

/* 모달 페이드 인 */
.modal__dialog { opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }

/* 움직임 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    .marquee__track { animation: none; }
    .marquee .pause-btn { display: none; }   /* 움직이지 않으므로 버튼 불필요 */
    .slider__track,
    .mobile-menu__panel,
    .modal__dialog,
    .logobar__menu-icon span { transition: none; }
}