/* Transforms decorate fixed layout boxes; the navigation never changes size. */
.product-nav .wordmark-text{position:relative}
.product-nav .wordmark-home{display:inline-flex}
.product-nav .brand-logo-control{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;line-height:0;border-radius:8px}
.product-nav .brand-logo-shell{display:inline-flex;flex:none;transform-origin:50% 70%;backface-visibility:visible}
.product-nav .brand-logo-shell[data-idle]{will-change:transform}
.product-nav .wordmark-letter{
  color:color-mix(in srgb,var(--ink),var(--lime) calc(var(--brand-strength,0)*48%));
  transform:translate3d(calc(var(--brand-x,0)*1px),calc(var(--brand-y,0)*1px),0) rotate(calc(var(--brand-rotation,0)*1deg)) scale(calc(1 + var(--brand-scale,0)));
}
.product-nav .brand-logo{
  color:color-mix(in srgb,var(--lime),var(--ink) calc(var(--brand-strength,0)*40%));
  transform:perspective(160px) translate3d(calc(var(--brand-x,0)*1px),calc(var(--brand-y,0)*1px),0) rotateX(calc(var(--brand-pitch,0)*1deg)) rotateY(calc(var(--brand-yaw,0)*1deg)) rotateZ(calc(var(--brand-yaw,0)*.12deg));
  transform-origin:50% 80%;
}
.product-nav .wordmark[data-moving] .wordmark-letter,.product-nav .wordmark[data-moving] .brand-logo{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .product-nav .wordmark-letter{transform:none;color:var(--ink)}
  .product-nav .brand-logo{transform:none;color:var(--lime)}
  .product-nav .brand-logo-shell{transform:none!important}
}