/* Restrained motion shared by every page. Project imagery retains its colours. */
#downtown-bold {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 220ms;
}

#downtown-bold .project-visual {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f3f3;
}
#downtown-bold.philosophy .project .project-visual img { border-radius: 0; }
#downtown-bold .project:focus-visible img { outline: none; }
#downtown-bold.philosophy .project:hover .project-heading { text-decoration: none; }
#downtown-bold .project-visual img {
  transition: transform 600ms var(--motion-ease);
}
#downtown-bold :is(.project, .pill, .round-link) [aria-hidden],
#downtown-bold .svc-index-link [aria-hidden] {
  display: inline-flex;
  transition: transform 300ms var(--motion-ease);
}

/* A persistent line marks the current page; other lines follow interaction. */
#downtown-bold.philosophy .header nav a { position: relative; text-decoration: none; }
#downtown-bold .header nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-fast) var(--motion-ease);
}
#downtown-bold .header nav a:is([aria-current="page"], :focus-visible)::after {
  transform: scaleX(1);
}
#downtown-bold :is(.pill, .mobile-menu, .project-filters button),
#downtown-bold.philosophy .hero-actions > .round-link {
  transition: background-color var(--motion-fast), color var(--motion-fast),
    border-color var(--motion-fast), transform var(--motion-fast) var(--motion-ease);
}
#downtown-bold button:not(:disabled) { cursor: pointer; }
#downtown-bold .svc-index > a { transition: transform 300ms var(--motion-ease); }
#downtown-bold .contact-fields :is(input, textarea, select) {
  accent-color: #111;
  transition: border-color var(--motion-fast);
}
#downtown-bold .contact-fields :is(input, textarea, select):focus { border-color: #111; }

/* Focus remains legible on white surfaces and on the dark studio panels. */
#downtown-bold.philosophy :is(.pill, .round-link, .project):focus-visible { outline-color: #111; }
#downtown-bold.philosophy .dark :is(a, button):focus-visible { outline-color: #fff; }
#downtown-bold .project:focus-visible .arrow-circle { transform: translate(3px, -3px); }

/* Hover effects only on devices with a pointing device, avoiding sticky touch states. */
@media (hover: hover) and (pointer: fine) {
  #downtown-bold .header nav a:hover::after { transform: scaleX(1); }
  #downtown-bold .project:hover .project-visual img { transform: scale(1.035); }
  #downtown-bold .project:hover .arrow-circle,
  #downtown-bold :is(.pill, .round-link):not(:disabled):hover > [aria-hidden] {
    transform: translate(3px, -3px);
  }
  #downtown-bold .pill:not(:disabled):hover,
  #downtown-bold.philosophy .hero-actions > .round-link:hover {
    background: #fff;
    color: #111;
    border-color: #111;
  }
  #downtown-bold .pill-light:hover { background: #111; color: #fff; border-color: #fff; }
  #downtown-bold .project-filters button:not([aria-pressed="true"]):hover {
    background: #f3f3f3;
    border-color: #111;
  }
  #downtown-bold .mobile-menu:hover { background: #111; color: #fff; }
  #downtown-bold .svc-index > a:hover { transform: translateY(-3px); }
  #downtown-bold .svc-index > a:hover .svc-index-link [aria-hidden] { transform: translateY(3px); }
  #downtown-bold :is(.hero-actions > a:not(.round-link), .case-back, .svc-work-top > a):hover {
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  #downtown-bold .contact-fields :is(input, textarea, select):hover { border-color: #777; }
  #downtown-bold .contact-fields :is(input, textarea, select):focus { border-color: #111; }
}
#downtown-bold :is(.pill, .mobile-menu, .project-filters button):not(:disabled):active,
#downtown-bold.philosophy .hero-actions > .round-link:active { transform: scale(.98); }
#downtown-bold .project:active .arrow-circle { transform: translate(2px, -2px); }

/* Only animate when a target enters view. Nothing is hidden while awaiting JS. */
@keyframes dds-enter {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
#downtown-bold .motion-enter {
  animation: dds-enter 520ms var(--motion-ease) var(--motion-delay, 0ms) backwards;
}
#downtown-bold .motion-enter:focus-within,
#downtown-bold .motion-enter:target { animation: none; }
@container studio (max-width: 650px) {
  #downtown-bold .header.menu-open nav { animation: dds-enter 200ms var(--motion-ease); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #downtown-bold *, #downtown-bold *::before, #downtown-bold *::after {
    animation: none !important;
    transition: none !important;
  }
  #downtown-bold .project:hover .project-visual img,
  #downtown-bold .project :is(.arrow-circle),
  #downtown-bold :is(.pill, .round-link) > [aria-hidden],
  #downtown-bold .svc-index > a,
  #downtown-bold .svc-index-link [aria-hidden],
  #downtown-bold :is(.pill, .mobile-menu, .project-filters button):active,
  #downtown-bold.philosophy .hero-actions > .round-link:active {
    transform: none !important;
  }
}
@media print {
  #downtown-bold .motion-enter { animation: none; }
}