/* Shared interaction language for structured service and process lists. */
:is(
  .social-services__list li,
  .social-process__list li,
  .consulting-process__list li,
  .integration-flow li,
  .learning-programs__grid .learning-card,
  .learning-formats__list li,
  .learning-process__list li,
  .coach-workflow__list li,
  .coach-audiences__grid article,
  .role-system .role-item,
  .avatar-process__list li,
  .format-track article,
  .method-list li
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 260ms ease,
    background 280ms ease,
    border-color 260ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease);
}

:is(
  .social-services__list li,
  .social-process__list li,
  .consulting-process__list li,
  .integration-flow li,
  .learning-programs__grid .learning-card,
  .learning-formats__list li,
  .learning-process__list li,
  .coach-workflow__list li,
  .coach-audiences__grid article,
  .role-system .role-item,
  .avatar-process__list li,
  .format-track article,
  .method-list li
) :is(h3,strong,p,small,span) {
  transition: color 240ms ease, text-shadow 240ms ease, transform 280ms var(--ease);
}

:is(
  .consulting-principles li,
  .learning-principles li,
  .coach-problems li,
  .avatar-differences li,
  .web-foundations li,
  .web-solutions__track article,
  .web-process__list li,
  .deliverables__list li
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 280ms ease,
    border-color 260ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease);
}

:is(
  .consulting-principles li,
  .learning-principles li,
  .coach-problems li,
  .avatar-differences li,
  .web-foundations li,
  .web-solutions__track article,
  .web-process__list li,
  .deliverables__list li
) :is(h3,strong,p,small,span) {
  transition: color 240ms ease, text-shadow 240ms ease, transform 280ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .social-services__list li,
    .social-process__list li,
    .consulting-process__list li,
    .integration-flow li,
    .learning-programs__grid .learning-card,
    .learning-formats__list li,
    .learning-process__list li,
    .coach-workflow__list li,
    .coach-audiences__grid article,
    .role-system .role-item,
    .avatar-process__list li,
    .format-track article,
    .method-list li
  ):hover {
    z-index: 4;
    color: #fff;
    background:
      radial-gradient(circle at 14% 48%, rgba(216,55,234,.26), transparent 38%),
      radial-gradient(circle at 88% 22%, rgba(125,234,242,.17), transparent 36%),
      linear-gradient(105deg, rgba(139,78,238,.16), rgba(16,19,26,.9) 68%);
    border-color: rgba(125,234,242,.48);
    box-shadow:
      inset 3px 0 0 rgba(216,55,234,.95),
      inset -1px 0 rgba(125,234,242,.44),
      inset 0 0 42px rgba(125,234,242,.055),
      0 0 28px rgba(139,78,238,.2),
      0 16px 42px rgba(0,0,0,.24);
    transform: translateY(-3px) translateX(3px);
  }

  :is(
    .social-services__list li,
    .social-process__list li,
    .consulting-process__list li,
    .integration-flow li,
    .learning-programs__grid .learning-card,
    .learning-formats__list li,
    .learning-process__list li,
    .coach-workflow__list li,
    .coach-audiences__grid article,
    .role-system .role-item,
    .avatar-process__list li,
    .format-track article,
    .method-list li
  ):hover :is(h3,strong) {
    color: #fff;
    text-shadow: 0 0 18px rgba(150,97,235,.52);
    transform: translateX(3px);
  }

  :is(
    .social-services__list li,
    .social-process__list li,
    .consulting-process__list li,
    .integration-flow li,
    .learning-programs__grid .learning-card,
    .learning-formats__list li,
    .learning-process__list li,
    .coach-workflow__list li,
    .coach-audiences__grid article,
    .role-system .role-item,
    .avatar-process__list li,
    .format-track article,
    .method-list li
  ):hover p {
    color: #e2e2e8;
  }

  :is(
    .social-services__list li,
    .social-process__list li,
    .consulting-process__list li,
    .integration-flow li,
    .learning-programs__grid .learning-card,
    .learning-formats__list li,
    .learning-process__list li,
    .coach-workflow__list li,
    .coach-audiences__grid article,
    .role-system .role-item,
    .avatar-process__list li,
    .format-track article,
    .method-list li
  ):hover :is(span,small) {
    color: var(--cyan);
    text-shadow: 0 0 13px rgba(125,234,242,.55);
  }

  :is(
    .consulting-principles li,
    .learning-principles li,
    .coach-problems li,
    .avatar-differences li,
    .web-foundations li,
    .web-solutions__track article,
    .web-process__list li,
    .deliverables__list li
  ):hover {
    z-index: 3;
    background:
      radial-gradient(circle at 12% 30%, rgba(216,55,234,.13), transparent 42%),
      radial-gradient(circle at 88% 72%, rgba(125,234,242,.18), transparent 42%),
      rgba(255,255,255,.82);
    border-color: rgba(112,85,192,.46);
    box-shadow:
      inset 3px 0 0 rgba(216,55,234,.72),
      inset -1px 0 rgba(63,196,213,.38),
      0 0 28px rgba(125,94,208,.16),
      0 18px 44px rgba(31,28,52,.1);
    transform: translateY(-3px) translateX(3px);
  }

  :is(
    .consulting-principles li,
    .learning-principles li,
    .coach-problems li,
    .avatar-differences li,
    .web-foundations li,
    .web-solutions__track article,
    .web-process__list li,
    .deliverables__list li
  ):hover :is(h3,strong) {
    color: #111116;
    text-shadow: 0 0 18px rgba(139,78,238,.2);
    transform: translateX(3px);
  }

  :is(
    .consulting-principles li,
    .learning-principles li,
    .coach-problems li,
    .avatar-differences li,
    .web-foundations li,
    .web-solutions__track article,
    .web-process__list li,
    .deliverables__list li
  ):hover p {
    color: #292931;
  }

  :is(
    .consulting-principles li,
    .learning-principles li,
    .coach-problems li,
    .avatar-differences li,
    .web-foundations li,
    .web-solutions__track article,
    .web-process__list li,
    .deliverables__list li
  ):hover :is(span,small) {
    color: #6849b5;
    text-shadow: 0 0 12px rgba(139,78,238,.24);
  }

  /* The homepage method sits on a light surface: keep it light on hover. */
  .home-page .method-list li:hover {
    color: #15151a;
    background:
      radial-gradient(circle at 10% 28%, rgba(216,55,234,.16), transparent 46%),
      radial-gradient(circle at 90% 74%, rgba(125,234,242,.2), transparent 48%),
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,243,249,.94) 52%, rgba(240,250,250,.96));
    border-color: rgba(101,94,215,.36);
    box-shadow:
      inset 3px 0 0 rgba(216,55,234,.75),
      inset -2px 0 0 rgba(68,201,214,.62),
      inset 0 1px 0 rgba(255,255,255,.96),
      0 0 30px rgba(171,74,210,.15),
      0 18px 44px rgba(55,48,78,.11);
    transform: translateY(-4px);
  }

  .home-page .method-list li:hover :is(h3,strong) {
    color: #15151a;
    text-shadow: none;
    transform: none;
  }

  .home-page .method-list li:hover p {
    color: #494951;
  }

  .home-page .method-list li:hover :is(span,small) {
    color: #655ac2;
    text-shadow: 0 0 14px rgba(117,96,210,.2);
    transform: none;
  }

  /* Social pages use the same light interaction language as the homepage. */
  .social-page :is(.social-services__list li,.social-process__list li):hover {
    padding-inline: 12px;
    color: #15151a;
    background:
      radial-gradient(circle at 10% 28%, rgba(216,55,234,.16), transparent 46%),
      radial-gradient(circle at 90% 74%, rgba(125,234,242,.2), transparent 48%),
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,243,249,.94) 52%, rgba(240,250,250,.96));
    border-color: rgba(101,94,215,.36);
    box-shadow:
      inset 3px 0 0 rgba(216,55,234,.75),
      inset -2px 0 0 rgba(68,201,214,.62),
      inset 0 1px 0 rgba(255,255,255,.96),
      0 0 30px rgba(171,74,210,.15),
      0 18px 44px rgba(55,48,78,.11);
    transform: translateY(-4px);
  }

  .social-page :is(.social-services__list li,.social-process__list li):hover :is(h3,strong) {
    color: #15151a;
    text-shadow: none;
    transform: none;
  }

  .social-page :is(.social-services__list li,.social-process__list li):hover p {
    color: #494951;
  }

  .social-page :is(.social-services__list li,.social-process__list li):hover :is(span,small) {
    color: #655ac2;
    text-shadow: 0 0 14px rgba(117,96,210,.2);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .social-services__list li,
    .social-process__list li,
    .consulting-process__list li,
    .integration-flow li,
    .learning-programs__grid .learning-card,
    .learning-formats__list li,
    .learning-process__list li,
    .coach-workflow__list li,
    .coach-audiences__grid article,
    .role-system .role-item,
    .avatar-process__list li,
    .format-track article,
    .method-list li,
    .consulting-principles li,
    .learning-principles li,
    .coach-problems li,
    .avatar-differences li,
    .web-foundations li,
    .web-solutions__track article,
    .web-process__list li,
    .deliverables__list li
  ) {
    transition: none;
  }
}