/* Static content remains visible; reveal effects are transient Web Animations. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .evlog-about[data-hover="true"] :where(.evlog__button, .evlog__text-link, .evlog__circle-link) svg {
    transition: transform 180ms ease;
  }
  .evlog-about[data-hover="true"] :where(.evlog__button, .evlog__text-link, .evlog__circle-link):hover svg {
    transform: translate(2px, -2px);
  }
  .evlog-about[data-hover="true"] .evlog__profile {
    transition: transform 220ms ease, box-shadow 220ms ease;
  }
  .evlog-about[data-hover="true"]:not([data-hover-style]) .evlog__profile:hover,
  .evlog-about[data-hover="true"][data-hover-style="subtle"] .evlog__profile:hover {
    transform: translateY(-2px);
  }
  .evlog-about[data-hover="true"][data-hover-style="lift"] .evlog__profile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px #0e223018;
  }
  .evlog-about[data-hover="true"][data-hover-style="glow"] .evlog__profile:hover {
    box-shadow: 0 0 0 1px var(--evlog-accent, #bc2541), 0 0 20px #bc25411c;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--evlog-accent, #bc2541) 40%, transparent), 0 0 20px color-mix(in srgb, var(--evlog-accent, #bc2541) 12%, transparent);
  }
  .evlog-about[data-hover="true"] :where(.evlog__principle-icon, .evlog__audience-icon) {
    transition: transform 180ms ease;
  }
  .evlog-about[data-hover="true"] :where(.evlog__principle, .evlog__audience):hover :where(.evlog__principle-icon, .evlog__audience-icon) {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .evlog-about[data-hover="true"] :where(.evlog__button, .evlog__text-link, .evlog__circle-link) svg,
  .evlog-about[data-hover="true"] :where(.evlog__profile, .evlog__principle-icon, .evlog__audience-icon) {
    transition: none;
    transform: none;
    box-shadow: none;
  }
}