/* WebTwist public-site micro-interactions • 2026-11-13
   Layered over webtwist.css: no layout changes, no external dependencies. */
:root { --wt-ease: cubic-bezier(.22,1,.36,1); }

/* Navigation: smoothly drawn underline, with active state retained. */
@media (min-width: 761px) {
  .site-nav > a:not(.nav-cta) { transition: color .2s ease; }
  .site-nav > a:not(.nav-cta)::after {
    background: var(--red);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .28s var(--wt-ease);
  }
  .site-nav > a:not(.nav-cta):is(:hover, :focus-visible, .active)::after { transform: scaleX(1); }
}

/* CTA / text arrows move independently of their labels. */
.btn, .site-nav .nav-cta {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .24s ease;
}
.btn > span[aria-hidden], .site-nav .nav-cta > span[aria-hidden],
.text-link > span[aria-hidden] {
  display: inline-block;
  transition: transform .26s var(--wt-ease);
}
.btn:is(:hover, :focus-visible) > span[aria-hidden],
.site-nav .nav-cta:is(:hover, :focus-visible) > span[aria-hidden],
.text-link:is(:hover, :focus-visible) > span[aria-hidden] { transform: translateX(4px); }
.btn:is(:hover, :focus-visible), .site-nav .nav-cta:is(:hover, :focus-visible) { box-shadow: 0 5px 14px rgb(17 26 42 / 12%); }
.btn:active, .site-nav .nav-cta:active { box-shadow: none; }

/* Service list / article cards: quiet, unmistakable feedback. */
.service-line { transition: background-color .24s ease, padding-left .28s var(--wt-ease); }
.service-line:is(:hover, :focus-within) { padding-left: 12px; }
.line-arrow, .project-card-copy > span {
  transition: transform .28s var(--wt-ease);
}
.service-line:is(:hover, :focus-within) .line-arrow,
.project-card:is(:hover, :focus-visible) .project-card-copy > span { transform: translateX(4px); }

.project-card { transition: border-color .24s ease, box-shadow .3s ease; }
.project-card:is(:hover, :focus-visible) { border-color: #cad2dc; box-shadow: 0 10px 26px rgb(17 26 42 / 6%); }
.project-card-image img { transition: transform .42s var(--wt-ease); }
.project-card:is(:hover, :focus-visible) img { transform: scale(1.025); }
.featured-project-image { overflow: hidden; }
.featured-project-image img { transition: transform .45s var(--wt-ease); }
.featured-project:is(:hover, :focus-within) .featured-project-image img { transform: scale(1.018); }

.blog-row h3 { transition: color .22s ease; }
.blog-row-image img, .featured-article-image img { transition: transform .45s var(--wt-ease); }
.blog-row:is(:hover, :focus-within) .blog-row-image img,
.featured-article:is(:hover, :focus-within) .featured-article-image img { transform: scale(1.025); }
.filter-tabs a { transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.footer-main a, .footer-bottom a, .crumbs a { transition: color .2s ease; }

/* Forms: focus remains highly visible without a jarring snap. */
.form-clean input:not([type=checkbox]):not([type=radio]),
.form-clean select, .form-clean textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-clean input:focus-visible, .form-clean select:focus-visible, .form-clean textarea:focus-visible {
  border-color: var(--red);
  outline: 2px solid var(--red);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgb(228 0 54 / 7%);
}
.form-clean :is(button, input, select, textarea):disabled { cursor: not-allowed; }

/* Mobile menu: no display toggling, so the reveal can animate. */
@media (max-width: 760px) {
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .24s ease, transform .28s var(--wt-ease), visibility 0s linear .28s;
  }
  .site-nav.is-open {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .24s ease, transform .28s var(--wt-ease), visibility 0s;
  }
  .nav-toggle span { transition: transform .24s var(--wt-ease), opacity .18s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .service-line:is(:hover, :focus-within) { padding-left: 0; }
}

/* Scroll reveals are progressive enhancement; no JS = normal, visible content. */
@media (prefers-reduced-motion: no-preference) {
  [data-wt-reveal].wt-reveal-pending {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  [data-wt-reveal].wt-reveal-pending.wt-reveal-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .42s ease, transform .42s var(--wt-ease);
    transition-delay: var(--wt-reveal-delay, 0ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  [data-wt-reveal] { opacity: 1 !important; transform: none !important; }
}