[data-scramble] {
  max-width: 100%;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

[data-scramble].is-scramble-awaiting {
  color: transparent !important;
  text-shadow: none !important;
}

.scramble-accessible {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.scramble-reserve,
.scramble-visual {
  display: block;
  max-width: 100%;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
  white-space: normal;
}

.scramble-reserve {
  visibility: hidden;
}

.scramble-visual {
  width: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.is-scramble-pending .scramble-visual {
  visibility: hidden;
}

.is-scramble-active .scramble-visual {
  visibility: visible;
}

.is-scramble-complete .scramble-reserve {
  visibility: visible;
}

.is-scramble-complete .scramble-visual {
  visibility: hidden;
}

.scramble-word {
  display: inline-block;
  white-space: nowrap;
}

.scramble-char {
  display: inline-block;
  overflow: visible;
  text-align: left;
  white-space: pre;
}

.hero h1 > [data-scramble],
.page-intro h1 > [data-scramble] {
  display: block;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  [data-scramble].is-scramble-awaiting {
    color: inherit !important;
    text-shadow: inherit !important;
  }
}

/* Menu-only brand motif decode. The reserve text owns layout and accessibility. */
.menu-motif-target {
  position: relative;
  white-space: nowrap;
}

.menu-motif-reserve {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  white-space: pre;
}

.menu-motif-visual {
  display: none;
  align-items: baseline;
  position: absolute;
  inset: 0 auto auto 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  white-space: pre;
  pointer-events: none;
}

.menu-motif-target.is-menu-motif-active .menu-motif-reserve { visibility: hidden; }
.menu-motif-target.is-menu-motif-active .menu-motif-visual { display: inline-flex; }

.menu-motif-slot {
  display: inline-grid;
  place-items: baseline center;
  position: relative;
  white-space: pre;
}

.menu-motif-slot-reserve {
  grid-area: 1 / 1;
  visibility: hidden;
}

.menu-motif-glyph {
  grid-area: 1 / 1;
  display: inline-block;
  color: #fff;
  transform: translate3d(var(--motif-x, 0), var(--motif-y, 0), 0)
    rotate(var(--motif-rotate, 0deg)) scale(var(--motif-scale, 1));
  transform-origin: 50% 55%;
  will-change: transform, opacity;
}

.menu-motif-glyph.is-motif-particle {
  color: #fff;
  font-size: .62em;
  line-height: 1;
}

/* Human Made-inspired selection cue, translated to the Visional Pop star. */
:is(.menu-drawer, .inner-menu-drawer) :is(.menu-primary, .menu-label, .menu-secondary),
.project-index a {
  position: relative;
}

:is(.menu-drawer, .inner-menu-drawer) :is(.menu-primary, .menu-label, .menu-secondary)::before,
.project-index a::before {
  content: "★";
  position: absolute;
  top: 50%;
  left: var(--hover-star-offset, -22px);
  color: currentColor;
  font-family: Arial, sans-serif;
  font-size: clamp(10px, .4em, 15px);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.52) rotate(-18deg);
  transform-origin: 50% 50%;
  transition:
    opacity 150ms ease,
    transform 240ms cubic-bezier(.16, 1, .3, 1);
}

:is(.menu-drawer, .inner-menu-drawer) :is(.menu-label, .menu-secondary) {
  --hover-star-offset: -18px;
}

.project-index a {
  --hover-star-offset: -14px;
}

:is(.menu-drawer, .inner-menu-drawer) :is(.menu-primary, .menu-label, .menu-secondary):is(:hover, :focus-visible)::before,
.project-index a:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-motif-visual { display: none !important; }
  .menu-motif-reserve { visibility: visible !important; }
  :is(.menu-drawer, .inner-menu-drawer) :is(.menu-primary, .menu-label, .menu-secondary)::before,
  .project-index a::before { transition: none; }
}