@charset "utf-8";
/* site — 전 페이지 공통으로 덧붙이는 규칙.

   js/site.js 가 붙였다 떼는 상태 클래스의 모양을 여기서 정한다.
   읽는 차례: theme.css -> base.css -> site.css -> (페이지별 CSS) */

/* 맨 위로 — 푸터가 보이기 시작하면 숨는다 */
footer .scroll-top{
  transition: opacity .35s ease, visibility .35s ease;
}
footer .scroll-top.is_hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 메인 sec05 슬로건 — 화면에 들어오면 한 번 떠오른다 */
#sec05 .slogan{
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
#sec05 .slogan.is_in{
  opacity: 1;
  transform: none;
}

/* 좌하단 회전 배지 — 각도와 투명도는 js/index.js 가 스크롤에 맞춰 직접 넣는다 */
.round-text{
  transition: opacity .3s ease;
  will-change: transform;
}

/* 동작 줄이기를 켠 기기에서는 떠오르는 연출을 하지 않는다 */
@media (prefers-reduced-motion: reduce){
  footer .scroll-top,
  #sec05 .slogan{ transition: none; }
  #sec05 .slogan{ opacity: 1; transform: none; }
  .round-text{ opacity: 1; transform: none !important; }
}