/* Entrance starts at the divider; only the artwork is clipped above it. */
.arch-motion-pending :is(.architecture-wave-field,.pm-spatial-field,.hci-blank-field){clip-path:inset(100% 0 0);border-bottom-color:transparent}
.arch-motion-pending :is(.selected-works-title,.pm-spatial-title,.hci-uiux-title){visibility:hidden}
.arch-motion-pending :is(.architecture-waves-hero .category-kicker,.pm-spatial-kicker){opacity:0}
@keyframes arch-toolbar-grow{from{opacity:0;transform:scaleX(.025);clip-path:inset(0 49%)}to{opacity:1;transform:scaleX(1);clip-path:inset(0)}}
@keyframes arch-toolbar-content{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.arch-entrance-divider{position:absolute;left:0;right:0;height:1px;z-index:4;background:#1d1d1f;pointer-events:none;visibility:hidden}
.arch-entering .arch-entrance-divider{visibility:visible}
.arch-entered .arch-entrance-divider{display:none}
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title){background:none;animation:none;color:#1d1d1f;-webkit-text-fill-color:currentColor;perspective:900px}
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title) :is([data-selected-works-type],[data-pm-title-type],[data-hci-title-type]){display:inline-block!important;width:auto;transform-origin:50% 0%;line-height:inherit}
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title) span:after{content:none!important}
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title) .arch-word{display:inline-block!important;width:auto;white-space:nowrap!important}
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title) .arch-letter{position:relative;display:inline-block!important;width:auto;vertical-align:bottom;line-height:1em;height:1em;overflow:hidden}
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title) .arch-letter.is-spinning{color:transparent}
.arch-letter-reel{position:absolute;inset:0 auto auto 0;display:block;width:100%;font:inherit;color:#1d1d1f;letter-spacing:inherit;will-change:transform}
.arch-letter-reel>b{display:block;width:100%;height:1em;line-height:1em;font-weight:inherit;text-align:center}
@media(prefers-reduced-motion:reduce){.arch-motion-pending :is(.architecture-wave-field,.pm-spatial-field,.hci-blank-field){clip-path:none}.arch-motion-pending :is(.selected-works-title,.pm-spatial-title,.hci-uiux-title){visibility:visible}.arch-motion-pending :is(.architecture-waves-hero .category-kicker,.pm-spatial-kicker){opacity:1}}
/* The top bar waits just above the screen, then grows down from the top edge
   as the entrance begins, instead of being there from the first frame. */
@keyframes arch-head-grow{from{transform:translateY(-100%)}to{transform:none}}
.arch-motion-pending:not(:has(.arch-entering,.arch-entered)) .site-head{transform:translateY(-100%)}
.arch-motion-pending:has(.arch-entering) .site-head{animation:arch-head-grow 1.6s cubic-bezier(.33,.9,.25,1) .15s both}
/* Oct 6: the title keeps one rendering from the roll-in onward. Without this
   the roll's 3D layer was dropped right after it ended and the letters were
   redrawn slightly thinner (and re-kerned when split into spinning slots). */
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title) :is([data-selected-works-type],[data-pm-title-type],[data-hci-title-type]){will-change:transform;font-kerning:none;line-height:1em}
/* Oct 6: a spinning slot clips only top and bottom. Before, the reel was also
   clipped at the sides, so wider passing letters (M, W, X) were cut off. */
:is(.architecture-waves-hero h1.selected-works-title,.pm-spatial-hero h1.pm-spatial-title,.hci-blank-hero h1.hci-uiux-title) .arch-letter{overflow:visible;clip-path:inset(.1em -.6em .12em)}
.arch-letter-reel{will-change:auto}