/* The approved full Illustrator logo contains its Design line. Reuse its
   exact upper word pixels on a floating layer and its lower Design pixels
   on a stationary layer; PORTFOLIO and ENTER keep their current positions. */
.opening-logo-stack .opening-word-float{
  position:absolute;left:0;top:12px;width:100%;height:100%;pointer-events:none;
}
.opening-logo-stack .opening-logo-layer[data-logo-part="bae-woogi"]{
  aspect-ratio:859/188;
}
.opening-logo-stack .opening-logo-layer[data-logo-part="design"]{
  display:block;inset:auto;left:50%;top:15px;width:170px;height:auto;
  aspect-ratio:859/271;translate:-50% 0;scale:.88;
  clip-path:inset(69.37% 0 0 0);filter:invert(1);
}
@keyframes woogi-word-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-5px,0)}
}
html[data-opening-motion="ready"] .opening-word-float{
  animation:woogi-word-float 4.8s ease-in-out infinite;
}
/* The old hover selector could revive the DOM source at .64 while the Warp
   canvas was also visible. Only the canvas paints in the active state. */
.svc-psd-heading h2.is-service-warp-active > span:not(.svc-title-selection){
  opacity:0!important;animation:none!important;
}
.svc-psd-heading h2.is-service-warp-active .service-warp-canvas{opacity:1!important}
@media(max-width:700px){
  .opening-logo-stack .opening-word-float{top:8px}
  .opening-logo-stack .opening-logo-layer[data-logo-part="design"]{
    top:calc(24% + 13px);width:63%;
  }
}
@media(prefers-reduced-motion:reduce){
  .opening-word-float{animation:none!important;transform:none!important}
  .svc-psd-heading h2.is-service-warp-active > span:not(.svc-title-selection){opacity:1!important}
}