/*
 * Crystal Beannie Hero
 * Scoped, dependency-free presentation for the shortcode renderer.
 */

.cbh,
.cbh *,
.cbh *::before,
.cbh *::after {
  box-sizing: border-box;
}

.cbh {
  --cbh-ivory: #f6f1e8;
  --cbh-ivory-deep: #eee5d8;
  --cbh-ink: #24211d;
  --cbh-muted: #736a60;
  --cbh-line: #d9d0c3;
  --cbh-accent: #f9c349;
  --cbh-accent-strong: #ffb100;
  --cbh-focus: #8a5700;
  --cbh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cbh-duration: 520ms;
  --cbh-stage-height: clamp(21rem, 49svh, 34rem);
  --cbh-dock-size: clamp(19rem, 37vw, 31rem);
  --cbh-item-size: clamp(8.75rem, 15vw, 13.5rem);
  --cbh-step: clamp(13rem, 21.5vw, 20rem);
  --cbh-drag-px: 0px;
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  overflow: hidden;
  color: var(--cbh-ink);
  background:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 62%) 0 17rem, transparent 39rem),
    var(--cbh-ivory);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cbh::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(115deg, transparent 0 49.8%, rgb(88 72 53 / 2.6%) 50%, transparent 50.2%);
  background-size: 19rem 19rem;
  content: "";
  pointer-events: none;
}

.cbh__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(20rem, var(--cbh-stage-height)) auto;
  align-content: center;
  inline-size: min(100%, 106rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 3.5vh, 3rem) clamp(1rem, 4vw, 4.5rem) clamp(1.25rem, 3vh, 2.5rem);
}

.cbh__intro {
  position: relative;
  z-index: 8;
  max-inline-size: 42rem;
  margin-inline: auto;
  text-align: center;
}

.cbh__eyebrow,
.cbh__microcopy,
.cbh__name,
.cbh__meaning-label {
  margin: 0;
}

.cbh__eyebrow {
  color: var(--cbh-ink);
  font: 650 clamp(0.72rem, 0.4vw + 0.62rem, 0.84rem) / 1.25 Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cbh__microcopy {
  margin-block-start: 0.55rem;
  color: var(--cbh-muted);
  font-size: clamp(0.76rem, 0.3vw + 0.69rem, 0.9rem);
  letter-spacing: 0.02em;
}

.cbh__stage {
  position: relative;
  z-index: 1;
  min-inline-size: 0;
  block-size: var(--cbh-stage-height);
  margin-block-start: clamp(0.2rem, 1.5vh, 1rem);
  outline: 0;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.cbh__stage:focus-visible {
  outline: 2px solid var(--cbh-focus);
  outline-offset: 0.35rem;
}

.cbh.is-dragging .cbh__stage {
  cursor: grabbing;
}

.cbh__viewport,
.cbh__track {
  position: absolute;
  inset: 0;
}

.cbh__viewport {
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}

.cbh__track {
  pointer-events: none;
}

.cbh__item {
  --cbh-offset: 0;
  --cbh-shift: 0px;
  --cbh-item-scale: 0.52;
  --cbh-item-opacity: 0.52;
  position: absolute;
  inset-block-start: 36%;
  inset-inline-start: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  inline-size: var(--cbh-item-size);
  min-block-size: 11rem;
  margin: 0;
  padding: 0.5rem;
  border: 0;
  border-radius: 0;
  color: var(--cbh-ink);
  background: transparent;
  box-shadow: none;
  font: inherit;
  text-align: center;
  opacity: var(--cbh-item-opacity);
  transform:
    translate3d(
      calc(-50% + var(--cbh-shift) + var(--cbh-drag-px)),
      -50%,
      0
    )
    scale(var(--cbh-item-scale));
  transform-origin: 50% 50%;
  transition:
    transform var(--cbh-duration) var(--cbh-ease),
    opacity 360ms ease;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
}

.cbh__item[data-offset="-2"] { --cbh-offset: -2; --cbh-shift: calc(0px - var(--cbh-step) - var(--cbh-step)); }
.cbh__item[data-offset="-1"] { --cbh-offset: -1; --cbh-shift: calc(0px - var(--cbh-step)); }
.cbh__item[data-offset="0"] { --cbh-offset: 0; --cbh-shift: 0px; }
.cbh__item[data-offset="1"] { --cbh-offset: 1; --cbh-shift: var(--cbh-step); }
.cbh__item[data-offset="2"] { --cbh-offset: 2; --cbh-shift: calc(var(--cbh-step) + var(--cbh-step)); }

.cbh__item.is-adjacent {
  --cbh-item-scale: 0.76;
  --cbh-item-opacity: 0.78;
  z-index: 7;
}

.cbh__item.is-outer {
  --cbh-item-scale: 0.53;
  --cbh-item-opacity: 0.52;
  z-index: 6;
}

/* The selected crystal is represented by the registered image at the dock. */
.cbh__item.is-active {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.cbh__item.is-wrapping {
  transition: none;
}

.cbh.is-dragging .cbh__item {
  transition: none;
}

.cbh.is-settling .cbh__item {
  will-change: transform, opacity;
}

.cbh__item-media {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  transition: transform 260ms ease;
}

.cbh__item-media::after {
  position: absolute;
  inset-inline: 17%;
  inset-block-end: 4%;
  z-index: -1;
  block-size: 12%;
  border-radius: 50%;
  background: rgb(61 52 42 / 15%);
  filter: blur(10px);
  content: "";
}

.cbh__item:hover .cbh__item-media {
  transform: translateY(-0.28rem);
}

.cbh__item-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  pointer-events: none;
}

.cbh__item-name {
  display: block;
  max-inline-size: 12rem;
  margin-block-start: 0.15rem;
  color: currentColor;
  font-size: clamp(0.72rem, 0.35vw + 0.64rem, 0.87rem);
  font-weight: 640;
  letter-spacing: 0.105em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cbh__item:focus-visible {
  outline: 0;
}

.cbh__item:focus-visible .cbh__item-media {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--cbh-ivory), 0 0 0 5px var(--cbh-focus);
}

.cbh__item:focus-visible .cbh__item-name {
  text-decoration: underline;
  text-decoration-color: var(--cbh-accent-strong);
  text-decoration-thickness: 0.15rem;
  text-underline-offset: 0.25rem;
}

.cbh__dock {
  position: absolute;
  inset-block-end: -0.75rem;
  inset-inline-start: 50%;
  z-index: 4;
  inline-size: var(--cbh-dock-size);
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.cbh__dock-media {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1;
  transition: opacity 170ms ease, transform 260ms var(--cbh-ease);
}

.cbh__dock-media::after {
  position: absolute;
  inset-inline: 18%;
  inset-block-end: 0.5%;
  z-index: -1;
  block-size: 8%;
  border-radius: 50%;
  background: rgb(67 53 39 / 13%);
  filter: blur(15px);
  content: "";
}

.cbh__beannie-base,
.cbh__active-crystal {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.cbh[data-active-mode="composite"] .cbh__active-crystal {
  display: none;
}

.cbh__beannie-base {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.cbh__active-crystal {
  inset-block-start: -4.5%;
  inset-inline-start: 50%;
  inline-size: 47%;
  block-size: 47%;
  transform: translateX(-50%);
  transform-origin: 50% 90%;
}

.cbh.is-updating .cbh__dock-media {
  opacity: 0.18;
  transform: translateY(0.2rem) scale(0.992);
}

.cbh__content {
  position: relative;
  z-index: 9;
  display: grid;
  justify-items: center;
  min-block-size: 12.5rem;
  margin-block-start: clamp(-0.2rem, -0.5vh, 0rem);
  padding-block-end: clamp(1.5rem, 3vh, 2.5rem);
  text-align: center;
  transition: opacity 170ms ease, transform 220ms var(--cbh-ease);
}

.cbh.is-updating .cbh__content {
  opacity: 0.12;
  transform: translateY(0.25rem);
}

.cbh__name {
  color: var(--cbh-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 2vw + 1.2rem, 3.45rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  text-wrap: balance;
}

.cbh__meaning-label {
  margin-block-start: 0.72rem;
  color: var(--cbh-muted);
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.115em;
  text-transform: uppercase;
}

.cbh__meanings {
  display: grid;
  gap: 0.18rem;
  min-block-size: 4.35rem;
  margin: 0.55rem 0 0;
  padding: 0;
  color: #4b443d;
  font-size: clamp(0.85rem, 0.25vw + 0.8rem, 0.98rem);
  line-height: 1.42;
  list-style: none;
}

.cbh__meanings li {
  position: relative;
  padding-inline-start: 1rem;
  text-align: start;
}

.cbh__meanings li::before {
  position: absolute;
  inset-block-start: 0.69em;
  inset-inline-start: 0;
  inline-size: 0.28rem;
  block-size: 0.28rem;
  border-radius: 50%;
  background: var(--cbh-accent-strong);
  content: "";
  transform: translateY(-50%);
}

.cbh__visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  min-inline-size: 7.75rem;
  min-block-size: 2.75rem;
  margin-block-start: 0.95rem;
  padding: 0.68rem 1.15rem;
  border: 1px solid var(--cbh-ink);
  border-radius: 0.2rem;
  color: var(--cbh-ink);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 720;
  letter-spacing: 0.13em;
  line-height: 1;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.cbh__visit:hover {
  border-color: var(--cbh-accent-strong);
  color: var(--cbh-ink);
  background: var(--cbh-accent);
  transform: translateY(-0.12rem);
}

.cbh__visit:focus-visible {
  outline: 3px solid var(--cbh-focus);
  outline-offset: 3px;
}

.cbh-sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 1023px) {
  .cbh {
    --cbh-stage-height: clamp(20rem, 47svh, 30rem);
    --cbh-dock-size: clamp(18rem, 46vw, 27rem);
    --cbh-item-size: clamp(8rem, 17vw, 11rem);
    --cbh-step: clamp(11.5rem, 22.5vw, 14rem);
  }

  .cbh__inner {
    padding-inline: clamp(1rem, 3vw, 2rem);
  }

  .cbh__item.is-outer {
    --cbh-item-opacity: 0.42;
  }
}

@media (max-width: 767px) {
  .cbh {
    --cbh-stage-height: clamp(18.75rem, 45svh, 26rem);
    --cbh-dock-size: clamp(15.5rem, 66vw, 22rem);
    --cbh-item-size: clamp(7rem, 31vw, 9.25rem);
    --cbh-step: clamp(10rem, 54vw, 13.5rem);
    background:
      radial-gradient(circle at 50% 33%, rgb(255 255 255 / 64%) 0 10rem, transparent 25rem),
      var(--cbh-ivory);
  }

  .cbh__inner {
    grid-template-rows: auto minmax(18rem, var(--cbh-stage-height)) auto;
    align-content: start;
    padding: max(1.2rem, env(safe-area-inset-top)) 0.9rem max(1.2rem, env(safe-area-inset-bottom));
  }

  .cbh__intro {
    max-inline-size: 22rem;
    padding-inline: 1rem;
  }

  .cbh__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
  }

  .cbh__microcopy {
    max-inline-size: 18rem;
    margin-inline: auto;
    line-height: 1.45;
  }

  .cbh__stage {
    margin-block-start: 0.15rem;
  }

  .cbh__viewport {
    inset-inline: -0.9rem;
    overflow: hidden;
  }

  .cbh__item {
    inset-block-start: 39%;
    min-block-size: 8.5rem;
    padding: 0.3rem;
  }

  .cbh__item.is-adjacent {
    --cbh-item-scale: 0.73;
    --cbh-item-opacity: 0.7;
  }

  .cbh__item.is-outer {
    --cbh-item-scale: 0.42;
    --cbh-item-opacity: 0;
    pointer-events: none;
  }

  .cbh__item-name {
    max-inline-size: 7.5rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }

  .cbh__dock {
    inset-block-end: -0.15rem;
  }

  .cbh__active-crystal {
    inset-block-start: -5%;
    inline-size: 48%;
    block-size: 48%;
  }

  .cbh__content {
    min-block-size: 12.2rem;
    padding-inline: 1rem;
  }

  .cbh__name {
    font-size: clamp(2rem, 9.4vw, 2.55rem);
  }

  .cbh__meanings {
    font-size: 0.86rem;
  }

}

@media (max-width: 390px) {
  .cbh {
    --cbh-stage-height: clamp(17.5rem, 43svh, 22.5rem);
    --cbh-dock-size: clamp(14.5rem, 66vw, 18rem);
    --cbh-item-size: clamp(6.8rem, 32vw, 8rem);
    --cbh-step: clamp(9.5rem, 53vw, 11rem);
  }

  .cbh__microcopy {
    font-size: 0.76rem;
  }

  .cbh__meaning-label {
    font-size: 0.64rem;
  }

}

@media (max-height: 720px) and (min-width: 768px) {
  .cbh {
    --cbh-stage-height: clamp(18rem, 43svh, 24rem);
    --cbh-dock-size: clamp(17rem, 34vw, 23rem);
  }

  .cbh__inner {
    align-content: start;
    padding-block: 1.25rem;
  }

  .cbh__microcopy {
    margin-block-start: 0.35rem;
  }

}

@media (max-height: 590px) and (orientation: landscape) {
  .cbh {
    --cbh-stage-height: 18rem;
    --cbh-dock-size: 17rem;
    min-block-size: 0;
  }

  .cbh__inner {
    min-block-size: 0;
    padding-block: 1rem;
  }

  .cbh__microcopy {
    display: none;
  }
}

/*
 * The Astra desktop header is positioned over the first page section. Keep
 * the hero intro below the expanded navigation without adding unnecessary
 * space to tablet and mobile layouts, where the compact menu is used.
 */
@media (min-width: 1024px) {
  .cbh__inner {
    align-content: start;
    padding-block-start: clamp(8rem, 12vh, 9rem);
  }
}

@media (min-width: 1024px) and (max-height: 720px) {
  .cbh__inner {
    padding-block-start: 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cbh *,
  .cbh *::before,
  .cbh *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .cbh__item:hover .cbh__item-media,
  .cbh__visit:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .cbh__visit,
  .cbh__stage:focus-visible,
  .cbh__item:focus-visible .cbh__item-media {
    forced-color-adjust: auto;
  }

  .cbh__meanings li::before {
    background: CanvasText;
  }

}