/* Selected hero: a more visible wordmark with a continuous, gentle drift. */
.approved-hero .b-side,
.b-stage > .b-side {
  --wordmark-angle: -16deg;
  opacity: 0.2;
  animation: wordmark-drift 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wordmark-drift {
  from {
    transform: translate3d(-55%, -44%, 0) rotate(var(--wordmark-angle));
  }
  to {
    transform: translate3d(-45%, -56%, 0) rotate(var(--wordmark-angle));
  }
}
.approved-hero .b-stage[data-motion-paused="true"] > .b-side,
.b-stage[data-motion-paused="true"] > .b-side {
  animation-play-state: paused;
}
.b-stage > .watermark-pause {
  position: absolute;
  right: 24px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff70;
  border-radius: 3px;
  padding: 5px 9px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0.8;
}
.b-stage > .watermark-pause:hover,
.b-stage > .watermark-pause:focus-visible {
  opacity: 1;
  background: #00000018;
}
.b-stage > .watermark-pause:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .approved-hero .b-side,
  .b-stage > .b-side {
    --wordmark-angle: -22deg;
    opacity: 0.18;
    animation-duration: 16s;
  }
  .b-stage > .watermark-pause {
    right: 16px;
    bottom: 8px;
    font-size: 10px;
    padding: 4px 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .approved-hero .b-side,
  .b-stage > .b-side {
    animation: none !important;
    transform: translate(-50%, -50%) rotate(var(--wordmark-angle));
    will-change: auto;
  }
  .b-stage > .watermark-pause {
    display: none;
  }
}
@media print {
  .approved-hero .b-side,
  .b-stage > .b-side {
    animation: none !important;
  }
  .b-stage > .watermark-pause {
    display: none;
  }
}