/* ----- 모션 (접근성: prefers-reduced-motion) ----- */
@keyframes anim-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes anim-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-hero-car {
  from {
    opacity: 0;
    transform: translate3d(18px, 12px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes anim-pop {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 스크롤 리빌: JS가 .is-visible 부여 */
.anim-in {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.55s var(--ease-out-soft),
    transform 0.55s var(--ease-out-soft);
  will-change: opacity, transform;
}

.anim-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 하단 탭 탭 피드백 */
.bottom-nav__item:not(.bottom-nav__item--fab):active {
  transform: scale(0.94);
}

.bottom-nav__item--fab:active {
  transform: translateY(-4px) scale(0.97);
}

/* 상단 헤더: 뷰 활성 시 (홈·견적 상세 등 header.top-bar가 첫 자식인 화면) */
.view.is-active > header.top-bar {
  animation: anim-slide-down 0.45s var(--ease-out-soft) both;
}

.view--home.is-active .home-hero-card__title {
  animation: anim-fade-up 0.55s var(--ease-out-soft) 0.04s both;
}

.view--home.is-active .home-hero-card__lead {
  animation: anim-fade-up 0.55s var(--ease-out-soft) 0.12s both;
}

.view--home.is-active .btn-hero-cta {
  animation: anim-fade-up 0.55s var(--ease-out-soft) 0.2s both;
}

.view--home.is-active .home-hero-card__visual {
  animation: anim-hero-car 0.75s var(--ease-out-soft) 0.08s both;
}

/* 차량 상세: 갤러리·요약 첫 진입 모션 */
.view-vehicle.is-active > header.vehicle-top-bar {
  animation: anim-slide-down 0.45s var(--ease-out-soft) both;
}

.view-vehicle.is-active .vehicle-gallery__img {
  animation: anim-hero-car 0.75s var(--ease-out-soft) 0.08s both;
}

.view-vehicle.is-active .vehicle-summary__name {
  animation: anim-fade-up 0.55s var(--ease-out-soft) 0.04s both;
}

.view-vehicle.is-active .vehicle-hero-quote {
  animation: anim-fade-in 0.4s var(--ease-out-soft);
}

.view-vehicle.is-active .vehicle-summary__btn--primary {
  animation: anim-fade-up 0.55s var(--ease-out-soft) 0.14s both;
}

/* 후기 페이지: 히어로·피드 진입 모션 */
#view-reviews.is-active .reviews-page__hero {
  /* sticky와 충돌하지 않도록 opacity만 */
  animation: anim-fade-in 0.4s var(--ease-out-soft) 0.02s both;
}

#view-reviews.is-active .reviews-feed__item {
  animation: anim-fade-up 0.5s var(--ease-out-soft) both;
}

#view-reviews.is-active .reviews-feed__item:nth-child(1) {
  animation-delay: 0.06s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(2) {
  animation-delay: 0.1s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(3) {
  animation-delay: 0.14s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(4) {
  animation-delay: 0.18s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(5) {
  animation-delay: 0.22s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(6) {
  animation-delay: 0.26s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(7) {
  animation-delay: 0.3s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(8) {
  animation-delay: 0.34s;
}

#view-reviews.is-active .reviews-feed__item:nth-child(n + 9) {
  animation-delay: 0.38s;
}

#view-reviews.is-active .reviews-feed__end,
#view-reviews.is-active .reviews-feed__empty {
  animation: anim-fade-up 0.45s var(--ease-out-soft) 0.42s both;
}

.view-vehicle.is-active .vehicle-summary__btn--outline {
  animation: anim-fade-up 0.55s var(--ease-out-soft) 0.2s both;
}

/* 빠른 메뉴: 부모가 리빌된 뒤 아이콘 스태거 */
.home-quick-card.is-visible .icon-menu-item {
  animation: anim-pop 0.42s var(--ease-out-soft) both;
}

.home-quick-card.is-visible .icon-menu-item:nth-child(1) {
  animation-delay: 0.02s;
}
.home-quick-card.is-visible .icon-menu-item:nth-child(2) {
  animation-delay: 0.05s;
}
.home-quick-card.is-visible .icon-menu-item:nth-child(3) {
  animation-delay: 0.08s;
}
.home-quick-card.is-visible .icon-menu-item:nth-child(4) {
  animation-delay: 0.11s;
}
.home-quick-card.is-visible .icon-menu-item:nth-child(5) {
  animation-delay: 0.14s;
}
.home-quick-card.is-visible .icon-menu-item:nth-child(6) {
  animation-delay: 0.17s;
}
.home-quick-card.is-visible .icon-menu-item:nth-child(7) {
  animation-delay: 0.2s;
}
.home-quick-card.is-visible .icon-menu-item:nth-child(8) {
  animation-delay: 0.23s;
}

@media (prefers-reduced-motion: reduce) {
  .anim-in {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .view.is-active > header.top-bar,
  .view--home.is-active .home-hero-card__title,
  .view--home.is-active .home-hero-card__lead,
  .view--home.is-active .btn-hero-cta,
  .view--home.is-active .home-hero-card__visual,
  .view-vehicle.is-active > header.vehicle-top-bar,
  .view-vehicle.is-active .vehicle-gallery__img,
  .view-vehicle.is-active .vehicle-summary__name,
  .view-vehicle.is-active .vehicle-summary__btn--primary,
  .view-vehicle.is-active .vehicle-summary__btn--outline,
  #view-reviews.is-active .reviews-page__hero,
  #view-reviews.is-active .reviews-feed__item,
  #view-reviews.is-active .reviews-feed__end,
  #view-reviews.is-active .reviews-feed__empty,
  .home-quick-card.is-visible .icon-menu-item {
    animation: none !important;
  }

  .bottom-nav__item:not(.bottom-nav__item--fab):active,
  .bottom-nav__item--fab:active {
    transform: none;
  }
}