:root {
  --motion-ease-editorial: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.32, .72, 0, 1);
  --motion-duration: 880ms;
  --motion-distance: 28px;
}

/* The reveal layer is opt-in through .motion-ready, so the site remains fully
   visible if JavaScript is unavailable. */
body.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
  transition: opacity var(--motion-duration) var(--motion-ease-editorial),
    transform var(--motion-duration) var(--motion-ease-editorial);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

body.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Hero choreography: image first, then the message, then the action row. */
body.motion-ready .tpp-hero-slide.is-active .tpp-hero-slide__content > * {
  animation: motion-hero-in 900ms var(--motion-ease-editorial) both;
}

body.motion-ready .tpp-hero-slide.is-active .tpp-hero-slide__title {
  transition-delay: 160ms;
  animation-delay: 160ms;
}

body.motion-ready .tpp-hero-slide.is-active .tpp-hero-slide__description {
  transition-delay: 260ms;
  animation-delay: 260ms;
}

body.motion-ready .tpp-hero-slide.is-active .tpp-hero-slide__actions {
  transition-delay: 360ms;
  animation-delay: 360ms;
}

@keyframes motion-hero-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

/* Keep interaction changes quiet and physical, without altering the layout. */
:where(.tpp-portfolio-card, .tpp-price-card, .tpp-review-card, .tpp-blog-card) {
  transition: transform 460ms var(--motion-ease-soft),
    box-shadow 460ms var(--motion-ease-soft);
}

:where(.tpp-portfolio-card, .tpp-price-card, .tpp-review-card, .tpp-blog-card):hover,
:where(.tpp-portfolio-card, .tpp-price-card, .tpp-review-card, .tpp-blog-card):focus-within {
  transform: translate3d(0, -3px, 0);
}

.tpp-review-card--featured:hover,
.tpp-review-card--featured:focus-within {
  transform: translate3d(0, -15px, 0);
}

:where(.tpp-hero-slide__button, .tpp-pricing-button, .tpp-outline-button,
  .tpp-blog-card__button, .article-button, .article-next__button,
  .portfolio-approach__toggle):not(:disabled) {
  transition: color 360ms var(--motion-ease-soft),
    background-color 360ms var(--motion-ease-soft),
    border-color 360ms var(--motion-ease-soft),
    transform 360ms var(--motion-ease-soft);
}

:where(.tpp-hero-slide__button, .tpp-pricing-button, .tpp-outline-button,
  .tpp-blog-card__button, .article-button, .article-next__button,
  .portfolio-approach__toggle):not(:disabled):hover,
:where(.tpp-hero-slide__button, .tpp-pricing-button, .tpp-outline-button,
  .tpp-blog-card__button, .article-button, .article-next__button,
  .portfolio-approach__toggle):not(:disabled):focus-visible {
  transform: translate3d(0, -2px, 0);
}

:where(.tpp-portfolio-card .services-content, .tpp-blog-card__media,
  .article-gallery figure, .article-investment__image, .portfolio-gallery figure) {
  overflow: hidden;
}

:where(.tpp-portfolio-card img, .tpp-blog-card__media img,
  .article-gallery img, .article-investment__image img, .portfolio-gallery img) {
  transition: transform 1100ms var(--motion-ease-editorial),
    filter 700ms var(--motion-ease-editorial);
}

:where(.tpp-portfolio-card, .tpp-blog-card, .article-gallery figure,
  .article-investment__image, .portfolio-gallery figure):hover img,
:where(.tpp-portfolio-card, .tpp-blog-card, .article-gallery figure,
  .article-investment__image, .portfolio-gallery figure):focus-within img {
  transform: scale(1.018);
}

@media (max-width: 1024px) {
  :root { --motion-distance: 18px; --motion-duration: 760ms; }
}

@media (prefers-reduced-motion: reduce) {
  body.motion-ready .motion-reveal,
  body.motion-ready .tpp-hero-slide.is-active .tpp-hero-slide__content > *,
  :where(.tpp-portfolio-card, .tpp-price-card, .tpp-review-card, .tpp-blog-card),
  :where(.tpp-hero-slide__button, .tpp-pricing-button, .tpp-outline-button,
    .tpp-blog-card__button, .article-button, .article-next__button,
    .portfolio-approach__toggle),
  :where(.tpp-portfolio-card img, .tpp-blog-card__media img,
    .article-gallery img, .article-investment__image img, .portfolio-gallery img) {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    transform: none !important;
  }
}