/* ============================================================
 * REMOTAX 정적 페이지 공용 애니메이션 — v3
 * - 더 부드러운 이징 (slow-start, smooth-end)
 * - CTA pulse 제거
 * - floating 키프레임 추가 (위아래 부유)
 * ============================================================ */

:root {
  /* 부드러운 expo-out: slow-start, very smooth end */
  --anim-ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-soft:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --anim-ease-out-back:  cubic-bezier(0.34, 1.32, 0.64, 1);

  --anim-duration:       1200ms;
  --anim-duration-fast:  900ms;
  --anim-duration-slow:  1600ms;

  --anim-brand: #e94624;
}

/* ──────────── 페이지 진입/이탈 (Page Enter/Leave) ──────────── */
/* anim-ready 가드 — JS 실패 시 body가 영영 숨겨지는 사고 방지 */
html.anim-ready.page-loading body { opacity: 0; }
html.anim-ready.page-leaving body {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 360ms var(--anim-ease-soft), transform 360ms var(--anim-ease-soft);
}
body {
  opacity: 1;
  transition: opacity 700ms var(--anim-ease), transform 700ms var(--anim-ease);
}

/* ──────────── 스크롤 등장 효과 (data-animate) ──────────── */
/*
 * file:// 환경에서 JS가 늦게 로드되거나 차단돼도 콘텐츠가 보이도록
 * 기본을 opacity:1로 두고, JS가 로드되면 .anim-ready 클래스를 추가해 초기 숨김 적용.
 * animations.js가 DOMContentLoaded 시점에 html.anim-ready 토글.
 */
[data-animate] {
  opacity: 1;
  will-change: opacity, transform, filter;
  transition-property: opacity, transform, filter;
  transition-duration: var(--anim-duration);
  transition-timing-function: var(--anim-ease);
}
html.anim-ready [data-animate] {
  opacity: 0;
}

/* anim-ready 클래스가 붙은 경우만 시작 transform/filter 적용 (JS 가용 시) */
html.anim-ready [data-animate="fade-up"]    { transform: translateY(40px); }
html.anim-ready [data-animate="fade-down"]  { transform: translateY(-40px); }
html.anim-ready [data-animate="fade-right"] { transform: translateX(-44px); }
html.anim-ready [data-animate="fade-left"]  { transform: translateX(44px); }
html.anim-ready [data-animate="fade-in"]    { transform: none; }
html.anim-ready [data-animate="zoom-in"]    { transform: scale(0.9); }
html.anim-ready [data-animate="zoom-out"]   { transform: scale(1.06); }
html.anim-ready [data-animate="blur-up"]    { transform: translateY(32px) scale(0.98); filter: blur(8px); }
html.anim-ready [data-animate="blur-in"]    { filter: blur(12px); transform: scale(1.015); }
html.anim-ready [data-animate="reveal"]     { clip-path: inset(0 100% 0 0); opacity: 1; }
html.anim-ready [data-animate="rotate-in"]  { transform: rotate(-4deg) scale(0.96) translateY(22px); }
html.anim-ready [data-animate="flip-up"]    { transform: perspective(1000px) rotateX(16deg) translateY(20px); transform-origin: bottom; }
html.anim-ready [data-animate="bounce-in"]  { transform: scale(0.78); transition-timing-function: var(--anim-ease-out-back); }

[data-animate].is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: inset(0 0 0 0) !important;
}

[data-animate][data-duration="fast"]  { transition-duration: var(--anim-duration-fast); }
[data-animate][data-duration="slow"]  { transition-duration: var(--anim-duration-slow); }

/* ──────────── Stagger (자식 순차 등장) ──────────── */
[data-stagger] > [data-animate] {
  transition-delay: calc(var(--stagger-i, 0) * 100ms);
}

/* ──────────── Hover 효과 ──────────── */
[data-hover-wrap] {
  display: block;
}
[data-hover="lift"] {
  transition: transform 500ms var(--anim-ease), box-shadow 500ms var(--anim-ease);
}
/* 래퍼(히트박스 고정)로 감싼 카드: 래퍼가 hover 상태일 때만 안쪽 카드를 띄운다.
   카드 자체가 아니라 래퍼가 마우스 진입/이탈을 판정하므로 카드가 위로 움직여도
   래퍼 영역(원래 카드 크기)을 벗어나지 않는 한 hover가 풀리지 않아 들썩임이 없다. */
[data-hover-wrap]:hover > [data-hover="lift"] {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.14), 0 10px 20px rgba(233,70,36,0.10);
}
/* 래퍼 없이 단독으로 쓰인 경우를 위한 폴백 */
[data-hover="lift"]:not([data-hover-wrap] > [data-hover="lift"]):hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.14), 0 10px 20px rgba(233,70,36,0.10);
}
[data-hover="tilt"] {
  transition: transform 600ms var(--anim-ease);
  transform-style: preserve-3d;
}
[data-hover="tilt"]:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
}
[data-hover="glow"] {
  position: relative;
  transition: box-shadow 600ms var(--anim-ease);
}
[data-hover="glow"]:hover {
  box-shadow: 0 0 0 4px rgba(233,70,36,0.12), 0 14px 36px rgba(233,70,36,0.22);
}

/* ──────────── Floating (위아래 부유) ──────────── */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes float-tiny {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes float-tilt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-1.5deg); }
}

.float-soft  { animation: float-soft  5s ease-in-out infinite; }
.float-tiny  { animation: float-tiny  4s ease-in-out infinite; }
.float-tilt  { animation: float-tilt  6s ease-in-out infinite; }
.float-delay-1 { animation-delay: 0.6s; }
.float-delay-2 { animation-delay: 1.2s; }
.float-delay-3 { animation-delay: 1.8s; }

/* ──────────── 패럴랙스 ──────────── */
[data-parallax] {
  will-change: transform;
  transition: transform 140ms linear;
}

/* ──────────── 카운터 ──────────── */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ──────────── reduced-motion 사용자 배려 ──────────── */
@media (prefers-reduced-motion: reduce) {
  html.page-loading body,
  html.page-leaving body,
  [data-animate],
  [data-hover],
  .float-soft, .float-tiny, .float-tilt {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}