:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-dur: 0.7s;
  --motion-dur-fast: 0.25s;
}

html.js-motion .animate:not(.is-animated) {
  opacity: 0;
  will-change: transform, opacity;
}

html.js-motion .animate.fade-up:not(.is-animated) {
  transform: translateY(40px);
}

html.js-motion .animate.fade-down:not(.is-animated) {
  transform: translateY(-40px);
}

html.js-motion .animate.fade-left:not(.is-animated) {
  transform: translateX(-40px);
}

html.js-motion .animate.fade-right:not(.is-animated) {
  transform: translateX(40px);
}

html.js-motion .animate.scale-in:not(.is-animated) {
  transform: scale(0.94);
}

html.js-motion .animate.fade-in:not(.is-animated) {
  transform: none;
}

.animate.is-animated {
  will-change: auto;
}

.btn-tvs,
.site-header__cta,
.newsletter__submit,
.category-switch__btn,
.view-more-btn {
  transition: transform var(--motion-dur-fast) var(--motion-ease),
              box-shadow var(--motion-dur-fast) var(--motion-ease),
              background-color var(--motion-dur-fast) var(--motion-ease),
              color var(--motion-dur-fast) var(--motion-ease),
              border-color var(--motion-dur-fast) var(--motion-ease) !important;
}

.btn-tvs:hover,
.site-header__cta:hover,
.newsletter__submit:hover,
.view-more-btn:hover {
  transform: translateY(-2px);
}

.btn-tvs:active,
.site-header__cta:active,
.newsletter__submit:active {
  transform: translateY(0);
}

.highlight-card,
.ct-channel,
.prd-item,
.svc-card,
.article-card,
.feature-card,
.collection-card {
  transition: transform var(--motion-dur-fast) var(--motion-ease),
              box-shadow var(--motion-dur-fast) var(--motion-ease),
              border-color var(--motion-dur-fast) var(--motion-ease);
}

.highlight-card:hover,
.ct-channel:hover,
.svc-card:hover,
.article-card:hover,
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.prd-item {
  transition: transform var(--motion-dur-fast) var(--motion-ease),
              border-color var(--motion-dur-fast) var(--motion-ease),
              background-color var(--motion-dur-fast) var(--motion-ease);
}

.prd-item:hover:not(.is-active) {
  transform: translateX(4px);
}

.highlight-media,
.gallery-item,
.svc-row__media,
.article-card__media,
.about-ambition__media {
  overflow: hidden;
}

.highlight-media img,
.gallery-item img,
.svc-row__media img,
.article-card__media img,
.about-ambition__media img {
  transition: transform 0.5s var(--motion-ease);
}

.highlight-row:hover .highlight-media img,
.gallery-item:hover img,
.svc-row:hover .svc-row__media img,
.article-card:hover .article-card__media img,
.about-ambition__grid:hover .about-ambition__media img {
  transform: scale(1.03);
}

.social-links__link {
  transition: transform var(--motion-dur-fast) var(--motion-ease),
              background-color var(--motion-dur-fast) var(--motion-ease),
              border-color var(--motion-dur-fast) var(--motion-ease) !important;
}

.social-links__link:hover {
  transform: translateY(-3px) scale(1.05);
}

.back-to-top {
  transition: opacity var(--dur) var(--ease),
              visibility var(--dur) var(--ease),
              transform var(--motion-dur-fast) var(--motion-ease),
              background-color var(--motion-dur-fast) var(--motion-ease) !important;
}

.back-to-top:hover {
  transform: translateY(-4px);
}

.pd-feature {
  transition: transform var(--motion-dur-fast) var(--motion-ease),
              box-shadow var(--motion-dur-fast) var(--motion-ease),
              border-color var(--motion-dur-fast) var(--motion-ease);
}

.pd-feature:hover {
  transform: translateY(-4px);
}

.pd-colour {
  transition: transform var(--motion-dur-fast) var(--motion-ease);
}

.pd-colour:hover {
  transform: translateY(-3px);
}

.pd-spec {
  transition: transform var(--motion-dur-fast) var(--motion-ease);
}

.pd-spec:hover {
  transform: translateY(-2px);
}

.pd-gallery__grid li {
  transition: transform var(--motion-dur-fast) var(--motion-ease),
              box-shadow var(--motion-dur-fast) var(--motion-ease);
}

.pd-gallery__grid li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

body, main, #main, .hero, .inner-banner {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .animate,
  html.js-motion .animate:not(.is-animated),
  .animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn-tvs:hover,
  .site-header__cta:hover,
  .highlight-card:hover,
  .ct-channel:hover,
  .svc-card:hover,
  .article-card:hover,
  .prd-item:hover,
  .social-links__link:hover,
  .back-to-top:hover,
  .gallery-item:hover img,
  .pd-feature:hover,
  .pd-colour:hover,
  .pd-spec:hover,
  .pd-gallery__grid li:hover {
    transform: none !important;
  }
}