/* Shared subpage entrance. Future templates can use dp-page-title and
   dp-page-heading (a heading wrapper with an existing 1px bottom border). */
.dp-subpage :is(main h1,.wp-block-post-title,.dp-page-title){
  animation:dp-title-color 2s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dp-title-color{from{color:var(--teal,#6fa9b2)}to{color:#292929}}
.dp-subpage :is(.sd-hero,.works-archive-hero,.company-hero,.dp-page-heading){
  position:relative;
  border-bottom-color:transparent;
}
.dp-subpage :is(.sd-hero,.works-archive-hero,.company-hero,.dp-page-heading)::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:rgba(111,169,178,.45);transform-origin:left center;
  animation:dp-title-line 1.2s cubic-bezier(.22,1,.36,1) .3s both;
}
.dp-subpage :is(.sd-hero,.works-archive-hero,.company-hero,.dp-page-heading) p,
.dp-subpage .dp-page-subtitle{
  animation:dp-subtitle-in 1.15s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes dp-subtitle-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes dp-title-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* About's existing reveal must not move or fade its first-view title. */
.dp-subpage .company-hero.company-reveal{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  .dp-subpage :is(.sd-hero,.works-archive-hero,.company-hero,.dp-page-heading) p,
  .dp-subpage .dp-page-subtitle{animation:none;opacity:1;transform:none}
  .dp-subpage :is(main h1,.wp-block-post-title,.dp-page-title){animation:none}
  .dp-subpage :is(.sd-hero,.works-archive-hero,.company-hero,.dp-page-heading)::after{animation:none;transform:none}
}