| /* THE POINTED-AT THING. | |
| A tip has no scrim and no spotlight — the arrow is the whole mechanism — so | |
| the subject gets marked rather than the rest of the app getting dimmed. The | |
| host hangs `data-tip-target` on the subject — the arrow's anchor, or the | |
| region that anchor defers to — and takes it off when the tip goes. Nothing | |
| here knows what that element is. | |
| `outline` and not a border, ring or glow: it draws outside the box without | |
| taking part in layout, so nothing shifts when a tip lands, and it inherits | |
| whatever `border-radius` the target already has instead of imposing one. | |
| A glow was the first attempt and read as noise at every intensity — the | |
| targets sit on busy surfaces, and a soft accent haze looks like more of the | |
| same. A hard line does not. */ | |
| [data-tip-target] { | |
| outline: 2px solid var(--dt-primary); | |
| outline-offset: 3px; | |
| animation: hermes-tip-outline-pulse 1.8s ease-in-out infinite; | |
| } | |
| /* A region is a whole area — a nav row, the sidebar, the composer — and those | |
| are the elements sitting flush against a scroller or an `overflow-hidden` | |
| parent, where an outline drawn 3px OUTSIDE the box is the outline you can't | |
| see. Inset it and it always lands on its own surface. Applies whether the | |
| region was deferred to or anchored directly. */ | |
| [data-tip-target][data-tip-region] { | |
| outline-offset: -2px; | |
| } | |
| @keyframes hermes-tip-outline-pulse { | |
| 50% { | |
| outline-color: color-mix(in srgb, var(--dt-primary) 45%, transparent); | |
| } | |
| } | |
| /* Marked, not breathing. The outline is the signal; the pulse is only flavour. */ | |
| @media (prefers-reduced-motion: reduce) { | |
| [data-tip-target] { | |
| animation: none; | |
| } | |
| } | |