/* 화면 움직임 (docs/05 "모션"). 없어도 화면은 온전하다: 스크롤 등장은 site.js가 첫 화면 아래 요소에만 건다 */
@keyframes motion-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes motion-fade {
  from {
    opacity: 0;
  }
}

@keyframes motion-slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

/* 페이지 첫 화면: 위에서부터 차례로. backwards라 끝나면 원래 값으로 돌아간다 (hover 변형과 충돌 없음) */
.hero__eyebrow,
.hero__title,
.hero__intro,
.hero__actions,
.audience-card,
.subvisual__eyebrow,
.subvisual__title,
.breadcrumb {
  animation: motion-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.hero__title,
.subvisual__title {
  animation-delay: 0.08s;
}

.hero__intro,
.breadcrumb {
  animation-delay: 0.16s;
}

.hero__actions {
  animation-delay: 0.24s;
}

.audience-card {
  animation-delay: 0.32s;
}

.audience-card + .audience-card {
  animation-delay: 0.4s;
}

.hero__mark,
.subvisual__mark {
  animation: motion-fade 1.2s ease-out backwards;
}

.side-consult {
  animation: motion-slide-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s backwards;
}

/* 스크롤 등장 (site.js) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* 누를 수 있는 요소의 반응 */
.btn {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.audience-card,
.practice-card,
.case-card,
.issue-card,
.channel-card {
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .audience-card:hover,
  .practice-card:hover,
  .case-card:hover,
  .issue-card:hover,
  .channel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .btn:hover,
  .audience-card:hover,
  .practice-card:hover,
  .case-card:hover,
  .issue-card:hover,
  .channel-card:hover {
    transform: none;
  }
}

@media print {
  .reveal {
    opacity: 1;
    transform: none;
  }
}