/* Triangle motion keeps the label and front triangle together. */
a .triangle::before, a .triangle::after, a .triangle > span {
 transition: border-color .22s ease, color .22s ease, transform .22s ease;
}
a:hover .triangle::before, a:focus-visible .triangle::before {
 border-bottom-color: #fff;
 filter: none;
}
a:hover .triangle::after, a:focus-visible .triangle::after {
 border-top-color: #ea2e2b;
 transform: translate(-50%, 18px);
}
a:hover .triangle > span, a:focus-visible .triangle > span {
 color: #fff;
 transform: translate(-50%, 18px);
}
a:focus-visible .triangle { outline: 2px solid #34354f; outline-offset: 5px; }
.features-circle .middle-circle > .icon {
 background: #fff; border-color: #d4d4d8; color: #34354f;
 box-shadow: none; z-index: 2; pointer-events: auto;
 transition: border-color .2s ease, color .2s ease;
}
.features-circle .middle-circle > .icon > .direction { pointer-events: none; }
.features-circle .middle-circle > .icon > .about-line-icon {
 position: absolute; top: 50%; left: 50%; width: 40%; height: 40%;
 max-width: 64px; max-height: 64px; transform: translate(-50%, -50%);
 pointer-events: none;
}
.features-circle .middle-circle > .icon:hover,
.features-circle .middle-circle > .icon:focus-visible,
.features-circle .middle-circle > .icon.is-highlighted {
 color: #ea2e2b; border-color: #ea2e2b; background: #fff; box-shadow: none;
}
.features-circle .middle-circle > .icon:focus-visible { outline: 2px solid #ea2e2b; outline-offset: 4px; }
.features-circle .box-item .title, .features-circle .box-item .content {
 transition: color .22s ease, transform .22s ease;
}
.features-circle .box-item.is-highlighted .title { color: #ea2e2b; }
.features-circle .box-item.is-highlighted .content { color: #222; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
 a .triangle::before, a .triangle::after, a .triangle > span,
 .features-circle .middle-circle > .icon,
 .features-circle .box-item .title, .features-circle .box-item .content { transition: none; }
 .features-circle .box-item.is-highlighted .content { transform: none; }
 a:hover .triangle::after, a:focus-visible .triangle::after,
 a:hover .triangle > span, a:focus-visible .triangle > span { transform: translateX(-50%); }
}

/* Keep the portrait still while its expression changes. */
.features-circle .middle-circle > .about-avatar { width: 46%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); }
.features-circle .middle-circle > .about-avatar:focus-visible { outline: 2px solid #ea2e2b; outline-offset: 6px; }