/* Local interactions only. The clickable cards stay in place; their artwork responds. */
.program-card:hover { transform: none; }

.program-bottom .round-arrow,
.people-v5 .pp-person h3 > span,
.people-v5 .pp-person-play,
.stories-v7 .review-video-time,
.stories-v7 .review-watch > span,
.footer-telegram svg,
.footer-wordmark img {
  transition: transform 350ms cubic-bezier(.2,.75,.2,1), background 200ms, color 200ms;
}
.people-v5 .pp-person-portrait img,
.stories-v7 .review-media > img,
#activities .activity-tile > img {
  transition: transform 600ms cubic-bezier(.2,.75,.2,1);
}
#activities .activity-tile > img { transform-origin: 50% 100%; }
.faq-list summary > span { transition: transform 250ms, scale 250ms, color 200ms; }
.footer-wordmark img { transform-origin: 48% 65%; }

/* A growing underline leaves multi-line links and their hit areas unchanged. */
.footer-column > a:not(.footer-telegram) { position: relative; }
.footer-column > a:not(.footer-telegram)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}
.footer-column > a:not(.footer-telegram):focus-visible::after { transform: scaleX(1); }
.footer-column > a:not(.footer-telegram):focus-visible { color: #171717; }
.program-card:focus-visible .round-arrow,
.people-v5 .pp-person-portrait:focus-visible .pp-person-play,
.people-v5 .pp-person-video:focus-visible .pp-link-arrow,
#activities .activity-more:focus-visible > span { background: #171717; color: #fff; }
.faq-list summary:focus-visible > span { color: #6955b6; }

@media (hover: hover) and (pointer: fine) {
  .program-card:hover .round-arrow,
  .people-v5 .pp-person:hover .pp-person-play,
  #activities .activity-more:hover > span { background: #171717; color: #fff; }
  .faq-list summary:hover > span { color: #6955b6; }
  .footer-column > a:not(.footer-telegram):hover { text-decoration: none; }
  .footer-column > a:not(.footer-telegram):hover::after { transform: scaleX(1); }
}

/* Keyboard users receive the same small cues as a pointer, without moving controls. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .program-card:focus-visible .round-arrow { transform: rotate(6deg) scale(1.08); }
  html[data-motion="on"] .people-v5 .pp-person:has(:focus-visible) .pp-person-portrait img { transform: scale(1.035) rotate(-2deg); }
  html[data-motion="on"] .people-v5 .pp-person:has(:focus-visible) h3 > span { transform: translateY(-2px) rotate(-2deg); }
  html[data-motion="on"] .people-v5 .pp-person-portrait:focus-visible .pp-person-play { transform: translateX(-50%) scale(1.08); }
  html[data-motion="on"] .people-v5 .pp-person-video:focus-visible .pp-link-arrow { transform: translate(2px,-2px) rotate(9deg); }
  html[data-motion="on"] .stories-v7 .review-card.review-archive-card:focus-visible .review-media > img { transform: scale(1.045); }
  html[data-motion="on"] .stories-v7 .review-card:focus-visible .review-video-time { transform: translateY(-3px); }
  html[data-motion="on"] .stories-v7 .review-card:focus-visible .review-watch > span { transform: translate(3px,-3px); }
  html[data-motion="on"] #activities .activity-original:has(:focus-visible) .activity-tile > img { transform: scale(1.035); }
  html[data-motion="on"] #activities .activity-more:focus-visible > span { transform: translate(2px,-2px); }
  html[data-motion="on"] .faq-list summary:focus-visible > span { scale: 1.15; }
  html[data-motion="on"] .footer-telegram:focus-visible svg { transform: translate(3px,-2px) rotate(-8deg); }
  html[data-motion="on"] .footer-wordmark a:focus-visible img { transform: rotate(-4deg); }
  html[data-motion="on"] .button:focus-visible > .arrow,
  html[data-motion="on"] .button:focus-visible > span[aria-hidden="true"],
  html[data-motion="on"] .text-link:focus-visible > span { transform: translate(2px,-2px); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .program-card:hover .round-arrow { transform: rotate(6deg) scale(1.08); }
  html[data-motion="on"] .people-v5 .pp-person:hover .pp-person-portrait img { transform: scale(1.035) rotate(-2deg); }
  html[data-motion="on"] .people-v5 .pp-person:hover h3 > span { transform: translateY(-2px) rotate(-2deg); }
  html[data-motion="on"] .people-v5 .pp-person-portrait:hover .pp-person-play { transform: translateX(-50%) scale(1.08); }
  html[data-motion="on"] .people-v5 .pp-person-video:hover .pp-link-arrow { transform: translate(2px,-2px) rotate(9deg); }
  html[data-motion="on"] .stories-v7 .review-card.review-archive-card:hover .review-media > img { transform: scale(1.045); }
  html[data-motion="on"] .stories-v7 .review-card:hover .review-video-time { transform: translateY(-3px); }
  html[data-motion="on"] .stories-v7 .review-card:hover .review-watch > span { transform: translate(3px,-3px); }
  html[data-motion="on"] #activities .activity-original:hover .activity-tile > img { transform: scale(1.035); }
  html[data-motion="on"] .faq-list summary:hover > span { scale: 1.15; }
  html[data-motion="on"] .footer-telegram:hover svg { transform: translate(3px,-2px) rotate(-8deg); }
  html[data-motion="on"] .footer-wordmark a:hover img { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .program-bottom .round-arrow,
  .people-v5 .pp-person h3 > span,
  .people-v5 .pp-person-play,
  .people-v5 .pp-person-portrait img,
  .stories-v7 .review-media > img,
  .stories-v7 .review-video-time,
  .stories-v7 .review-watch > span,
  #activities .activity-tile > img,
  #activities .activity-more > span,
  .faq-list summary > span,
  .footer-telegram svg,
  .footer-wordmark img,
  .footer-column > a:not(.footer-telegram)::after { transition: none; }
  #activities .activity-more:hover > span { transform: none; }
}