:root {
  --hdr-morph-ms: 260ms;
  --hdr-content-ms: 130ms;
  --hdr-slide-ms: 170ms;
  --hdr-ease: cubic-bezier(0.2, 0.78, 0.2, 1);
  --page-fade-ms: 140ms;
  --page-slide-ms: 170ms;
  --page-ease: cubic-bezier(0.22, 0.82, 0.25, 1);
}

.page-home .home-hero,
.page-categories .category-hero,
.page-subcategory .subcategory-hero {
  transition:
    width var(--hdr-morph-ms) var(--hdr-ease),
    height var(--hdr-morph-ms) var(--hdr-ease),
    min-height var(--hdr-morph-ms) var(--hdr-ease),
    padding var(--hdr-morph-ms) var(--hdr-ease),
    opacity var(--hdr-content-ms) ease;
}

.page-home .home-hero-content,
.page-home .home-compact-preview,
.page-categories .category-hero-content,
.page-categories .category-home-ghost,
.page-categories .category-subcategory-preview,
.page-subcategory .subcategory-hero-main {
  transition:
    opacity var(--hdr-content-ms) ease,
    transform var(--hdr-slide-ms) var(--hdr-ease);
}

.page-home .home-content,
.page-categories .category-content,
.page-subcategory .subcategory-content {
  transition:
    opacity var(--page-fade-ms) var(--page-ease),
    transform var(--page-slide-ms) var(--page-ease);
}

.page-home .floating-type-nav {
  transform: translateX(-50%);
  transition: transform 135ms cubic-bezier(0.22, 0.82, 0.24, 1);
}

.page-home.is-transitioning-in .home-hero,
.page-home.is-transitioning-out .home-hero,
.page-categories.is-transitioning-in .category-hero,
.page-categories.is-transitioning-out .category-hero,
.page-subcategory.is-transitioning-in .subcategory-hero,
.page-subcategory.is-transitioning-out .subcategory-hero {
  will-change: width, height, min-height, padding, opacity;
}

.page-home.is-transitioning-in .home-hero-content,
.page-home.is-transitioning-out .home-hero-content,
.page-home.is-transitioning-in .home-compact-preview,
.page-home.is-transitioning-out .home-compact-preview,
.page-categories.is-transitioning-in .category-hero-content,
.page-categories.is-transitioning-out .category-hero-content,
.page-categories.is-transitioning-in .category-home-ghost,
.page-categories.is-transitioning-out .category-home-ghost,
.page-categories.is-transitioning-in .category-subcategory-preview,
.page-categories.is-transitioning-out .category-subcategory-preview,
.page-subcategory.is-transitioning-in .subcategory-hero-main,
.page-subcategory.is-transitioning-out .subcategory-hero-main,
.page-home.is-transitioning-in .home-content,
.page-home.is-transitioning-out .home-content,
.page-categories.is-transitioning-in .category-content,
.page-categories.is-transitioning-out .category-content,
.page-subcategory.is-transitioning-in .subcategory-content,
.page-subcategory.is-transitioning-out .subcategory-content,
.page-home.is-transitioning-in .floating-type-nav,
.page-home.is-transitioning-out .floating-type-nav {
  will-change: transform, opacity;
}

html.incoming-categories-to-home body.page-home .floating-type-nav {
  transform: translate(-50%, 220%);
}

html.incoming-subcategory-to-categories .page-categories .category-hero-content,
html.incoming-categories-to-subcategory .page-subcategory .subcategory-hero-main {
  opacity: 0;
  transform: translateY(8px);
}

.page-home.leave-home-to-categories .home-hero {
  width: clamp(320px, 62%, 620px);
  height: 58px;
  min-height: 58px;
  padding: 12px 12px;
  transition-timing-function: var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), ease;
}

.page-home.leave-home-to-categories .home-hero-content {
  opacity: 0;
  transform: translateY(-8px);
}

.page-home.leave-home-to-categories .home-content {
  opacity: 0;
  transform: translateY(10px);
}

.page-home.leave-home-to-categories .floating-type-nav {
  transform: translate(-50%, 145%);
}

.page-categories.enter-home-to-categories .category-hero-content,
.page-categories.enter-home-to-categories .category-content {
  opacity: 0;
  transform: translateY(8px);
}

.page-categories.enter-home-to-categories.is-transitioning-in .category-hero-content,
.page-categories.enter-home-to-categories.is-transitioning-in .category-content {
  opacity: 1;
  transform: translateY(0);
}

.page-categories.enter-home-to-categories.is-transitioning-in .category-content {
  transition-delay: 18ms;
}

.page-categories.leave-categories-to-home .category-hero {
  width: 100%;
  height: var(--hero-min-height);
  min-height: var(--hero-min-height);
  padding: var(--hero-padding);
  transition-timing-function: var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), ease;
}

.page-categories.leave-categories-to-home .category-hero-content {
  opacity: 0;
  transform: translateY(-8px);
}

.page-categories.leave-categories-to-home .category-content {
  opacity: 0;
  transform: translateY(10px);
}

.page-home.enter-categories-to-home .home-hero-content,
.page-home.enter-categories-to-home .home-content {
  opacity: 0;
  transform: translateY(8px);
}

.page-home.enter-categories-to-home .floating-type-nav {
  transform: translate(-50%, 220%);
}

.page-home.enter-categories-to-home.is-transitioning-in .home-hero-content,
.page-home.enter-categories-to-home.is-transitioning-in .home-content {
  opacity: 1;
  transform: translateY(0);
}

.page-home.enter-categories-to-home.is-transitioning-in .home-content {
  transition-delay: 16ms;
}

.page-home.enter-categories-to-home.is-transitioning-in .floating-type-nav {
  transform: translateX(-50%);
}

.page-categories.leave-categories-to-subcategory .category-hero {
  width: min(96%, 840px);
  height: 160px;
  min-height: 160px;
  padding: 14px 14px 14px;
  transition-timing-function: var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), ease;
}

.page-categories.leave-categories-to-subcategory .category-hero-content,
.page-categories.leave-categories-to-subcategory .category-content {
  opacity: 0;
  transform: translateY(-8px);
}

.page-subcategory.enter-categories-to-subcategory .subcategory-hero-main {
  opacity: 0;
  transform: translateY(0);
}

.page-subcategory.enter-categories-to-subcategory .subcategory-content {
  opacity: 0;
  transform: translateY(8px);
}

.page-subcategory.enter-categories-to-subcategory.is-transitioning-in .subcategory-hero-main,
.page-subcategory.enter-categories-to-subcategory.is-transitioning-in .subcategory-content {
  opacity: 1;
  transform: translateY(0);
}

.page-subcategory.enter-categories-to-subcategory.is-transitioning-in .subcategory-content {
  transition-delay: 18ms;
}

.page-subcategory.leave-subcategory-to-categories .subcategory-hero {
  width: clamp(320px, 62%, 620px);
  height: 58px;
  min-height: 58px;
  padding: 12px 12px;
  transition-timing-function: var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), var(--hdr-ease), ease;
}

.page-subcategory.leave-subcategory-to-categories .subcategory-hero-main,
.page-subcategory.leave-subcategory-to-categories .subcategory-content {
  opacity: 0;
  transform: translateY(-8px);
}

.page-categories.enter-subcategory-to-categories .category-hero-content,
.page-categories.enter-subcategory-to-categories .category-content {
  opacity: 0;
  transform: translateY(8px);
}

.page-categories.enter-subcategory-to-categories.is-transitioning-in .category-hero-content,
.page-categories.enter-subcategory-to-categories.is-transitioning-in .category-content {
  opacity: 1;
  transform: translateY(0);
}

.page-categories.enter-subcategory-to-categories.is-transitioning-in .category-content {
  transition-delay: 16ms;
}

html.didban-webapp .page-home.leave-home-to-categories .home-hero {
  width: 100%;
  height: auto;
  min-height: var(--hero-min-height);
  padding: var(--hero-padding);
}

html.didban-webapp .page-categories.leave-categories-to-home .category-hero {
  width: 100%;
  height: auto;
  min-height: 58px;
  padding: 12px 12px;
}

html.didban-webapp .page-home.leave-home-to-categories .home-hero,
html.didban-webapp .page-categories.leave-categories-to-home .category-hero {
  transition-duration: 120ms, 120ms, 120ms, 120ms, 90ms;
}

html.didban-webapp .page-categories.enter-home-to-categories .category-hero-content {
  transform: none;
}

@media (max-width: 720px) {
  .page-home.leave-home-to-categories .home-hero,
  .page-categories.leave-categories-to-subcategory .category-hero,
  .page-subcategory.leave-subcategory-to-categories .subcategory-hero {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-hero,
  .page-categories .category-hero,
  .page-subcategory .subcategory-hero,
  .page-home .home-hero-content,
  .page-home .home-compact-preview,
  .page-categories .category-hero-content,
  .page-categories .category-home-ghost,
  .page-categories .category-subcategory-preview,
  .page-subcategory .subcategory-hero-main,
  .page-home .home-content,
  .page-categories .category-content,
  .page-subcategory .subcategory-content,
  .page-home .floating-type-nav {
    transition: none !important;
    animation: none !important;
  }
}