.guide-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  color: #7c8b94;
  font-size: 13px;
  font-weight: 700;
}

.guide-breadcrumb[hidden] {
  display: none;
}

.guide-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.guide-hero::before,
.guide-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(3px);
}

.guide-hero::before {
  top: -38%;
  right: 5%;
  width: clamp(260px, 38vw, 560px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(158, 199, 226, .3), rgba(214, 232, 244, .1) 50%, transparent 72%);
  animation: guideLightBreathe 24s ease-in-out infinite alternate;
}

.guide-hero::after {
  bottom: -54%;
  left: 12%;
  width: clamp(220px, 30vw, 440px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 224, 190, .2), transparent 70%);
  animation: guideWarmBreathe 30s ease-in-out infinite alternate;
}

.guide-hero .wrap {
  position: relative;
  z-index: 1;
}

.guide-hero.is-ready h1 {
  animation: guideHeroEnter .7s cubic-bezier(.22, 1, .36, 1) both;
}

.guide-hero.is-ready > .wrap > p {
  animation: guideHeroEnter .72s .09s cubic-bezier(.22, 1, .36, 1) both;
}

.guide-hero.is-ready .guide-breadcrumb {
  animation: guideHeroEnter .68s .18s cubic-bezier(.22, 1, .36, 1) both;
}

.guide-breadcrumb.has-collection #collection-breadcrumb-label {
  animation: guideCrumbEnter .38s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes guideHeroEnter {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes guideCrumbEnter {
  from { opacity: 0; transform: translate3d(-6px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes guideLightBreathe {
  from { transform: translate3d(-10px, -4px, 0) scale(.98); opacity: .72; }
  to { transform: translate3d(18px, 10px, 0) scale(1.03); opacity: 1; }
}

@keyframes guideWarmBreathe {
  from { transform: translate3d(8px, 8px, 0) scale(1); }
  to { transform: translate3d(-14px, -5px, 0) scale(1.02); }
}

.guide-breadcrumb a {
  color: #547b96;
  text-decoration: none;
  transition: color .25s cubic-bezier(.2, .8, .2, 1);
}

.guide-breadcrumb a:hover {
  color: #315d79;
}

@media (max-width: 560px) {
  .guide-breadcrumb {
    margin-top: 18px;
    overflow: hidden;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-hero::before,
  .guide-hero::after,
  .guide-hero.is-ready h1,
  .guide-hero.is-ready > .wrap > p,
  .guide-hero.is-ready .guide-breadcrumb,
  .guide-breadcrumb.has-collection #collection-breadcrumb-label {
    animation: none;
  }
}