@import url("brand-hangul-suffix.css");

/**
 * WITHER 로고타입 스태거 페이드 (index 홈과 동일)
 * site-header-brand.css에서 @import 하거나, 경량 페이지는 단독 링크
 */
.brandFlyText {
  display: inline-flex;
  align-items: center;
  gap: 0.01em;
}

/* .brand strong { display:block } 인라인보다 우선 */
.header .brand strong.brandFlyText,
.siteHeader .brand strong.brandFlyText {
  display: inline-flex;
}

.brandFlyText .fly-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(3px);
  color: var(--char-color, #4c1d95);
  transition: opacity 0.14s ease-out, transform 0.14s ease-out, color 0.22s ease;
}

.brandFlyText .fly-char.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .brandFlyText .fly-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 지역명 접미: WITHER 이후 오른쪽에서 짧게 슬라이드·웜톤 팔레트(JS에서 --region-char-color) */
.brandFlyText--region {
  flex-wrap: wrap;
  row-gap: 0.02em;
}

.brandFlyText--region .brandRegionSuffix {
  display: inline-flex;
  align-items: center;
  gap: 0.02em;
  margin-left: 0.12em;
  font-family: "Pretendard", -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brandRegionSuffix .region-char {
  display: inline-block;
  opacity: 0;
  transform: translateX(10px) scale(0.92);
  color: var(--region-char-color, #c2410c);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out, color 0.24s ease;
}

.brandRegionSuffix .region-char.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .brandRegionSuffix .region-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 홈(index) 전용: body.page-home ── */
body.page-home .brandFlyText.fly-mode--drop .fly-char:not(.is-visible) {
  opacity: 0;
  transform: translateY(-20px) scale(0.92);
}

body.page-home .brandFlyText.fly-mode--drop .fly-char.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.14s ease-out,
    transform 0.24s cubic-bezier(0.2, 0.9, 0.2, 1),
    color 0.22s ease;
}

body.page-home .brandFlyText .fly-char.is-visible.fly-char--spin-once {
  animation: flyCharSpin360 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

@keyframes flyCharSpin360 {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(0) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .brandFlyText .fly-char.is-visible.fly-char--spin-once {
    animation: none !important;
  }
}