owns the
focus scale/lift transform, and two writers on one `transform` would fight.
style.css:2977 already transitions `.reaction img` transform, which the
running animation simply overrides.
Only plays while the dock is open, and obeys the motion system's ambient dial
— so it stops dead under Reduce Motion, battery-saver and in a background tab
rather than looping six animations forever behind the user's back. */
.post .reactions-box.reactions-open .reaction img,
.post .reactions-box.reactions-open .reaction .emoji {
animation: ize-ix-idle-bob 2.4s ease-in-out infinite;
animation-play-state: var(--ize-mo-ambient-play, running);
transform-origin: center bottom;
will-change: transform;
}
/* Per-reaction personality. Ids are WoWonder's fixed set (the same ones
style.css:3220-3225 gives accent colours to); anything unrecognised keeps the
gentle default bob above. */
.post .reactions-box.reactions-open .reaction-1 img { animation: ize-ix-idle-bob 2.2s ease-in-out infinite; }
.post .reactions-box.reactions-open .reaction-2 img { animation: ize-ix-idle-beat 1.4s ease-in-out infinite; }
.post .reactions-box.reactions-open .reaction-3 img { animation: ize-ix-idle-sway 1.6s ease-in-out infinite; }
.post .reactions-box.reactions-open .reaction-4 img { animation: ize-ix-idle-gasp 2.0s ease-in-out infinite; }
.post .reactions-box.reactions-open .reaction-5 img { animation: ize-ix-idle-sink 2.6s ease-in-out infinite; }
.post .reactions-box.reactions-open .reaction-6 img { animation: ize-ix-idle-fume 0.9s ease-in-out infinite; }
.post .reactions-box.reactions-open .reaction img { animation-play-state: var(--ize-mo-ambient-play, running); }
/* Like — a slow, contented bob. */
@keyframes ize-ix-idle-bob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-2px) rotate(-4deg); }
}
/* Love — a heartbeat: two quick pulses, then rest. */
@keyframes ize-ix-idle-beat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.16); }
28% { transform: scale(1); }
42% { transform: scale(1.1); }
56% { transform: scale(1); }
}
/* Haha — rocking side to side, laughing. */
@keyframes ize-ix-idle-sway {
0%, 100% { transform: rotate(-9deg) translateY(0); }
25% { transform: rotate(6deg) translateY(-2px); }
50% { transform: rotate(-6deg) translateY(0); }
75% { transform: rotate(9deg) translateY(-2px); }
}
/* Wow — an inheld breath: slow swell, quick release. */
@keyframes ize-ix-idle-gasp {
0%, 100% { transform: scale(1) translateY(0); }
45% { transform: scale(1.13) translateY(-3px); }
60% { transform: scale(1.05) translateY(-1px); }
}
/* Sad — sinking, with a slow droop. */
@keyframes ize-ix-idle-sink {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(3px) rotate(-5deg); }
}
/* Angry — a tight, fast tremble. Deliberately small: at 39px anything bigger
reads as a rendering glitch rather than as fury. */
@keyframes ize-ix-idle-fume {
0%, 100% { transform: translateX(0) scale(1); }
20% { transform: translateX(-1.5px) scale(1.03); }
40% { transform: translateX(1.5px) scale(1.05); }
60% { transform: translateX(-1px) scale(1.03); }
80% { transform: translateX(1px) scale(1.01); }
}
/* The focused face animates harder — the reference speeds its animation up
under the finger, which is what confirms "this is the one you're choosing". */
.post .reactions-box .reaction.ize-ix-hot img { animation-duration: .7s; }
/* Live tracking: the face under the finger grows and lifts, its neighbours give
way slightly. This is the affordance that makes a drag-select tray legible —
without it the user cannot tell what they are about to pick.
The transform deliberately MATCHES style.css:2966's `.reaction:hover`
(`scale(1.38) translateY(-10px)`) component-for-component AND in that order —
transform functions do not commute, so writing the translate first would lift
by a different amount than the mouse does and the two input methods would
disagree. */
.post .reactions-box .reaction.ize-ix-hot,
.post .reactions-box .reaction:hover {
/* 1.5x and a 15px lift, per spec. style.css:2966 ships 1.38 / -10px for
:hover; both are restated here so a mouse and a finger produce IDENTICAL
focus geometry — they were diverging, which is the sort of thing nobody
reports but everybody feels when they switch device.
*
Order matters and is copied deliberately: scale THEN translate, so the
lift is multiplied by the scale (an effective ~22px of travel). Writing
translate first would lift by a flat 15px and read as a shorter hop. */
transform: scale(1.5) translateY(-15px);
z-index: 2;
}
.post .reactions-box .reaction.ize-ix-near {
transform: scale(1.16) translateY(-4px);
}
/* The name label. style.css:2967 already draws it with
`.reaction::after { content: attr(data-reaction-lang) }` and reveals it on
:hover — which a finger never triggers. Mirroring that same reveal onto the
tracked face gives touch the label the mouse always had, with no second label
implementation to keep in sync.
It matters for accessibility, not just polish: without it the tray is a row
of near-identical yellow glyphs, which is exactly the case colour-blind users
and anyone unfamiliar with the icon set cannot resolve. */
.post .reactions-box .reaction.ize-ix-hot::after {
opacity: 1;
bottom: calc(100% + 4px);
}
/* NO BACKDROP — deliberately.
*
The brief asks for a slight background blur behind the tray. It is not here,
and the z-index left alone at style.css's own 999, because a backdrop cannot
be positioned safely relative to this tray: the tray is `position: absolute`
inside the feed, so it competes for z-index only within whatever stacking
context its ancestors establish, whereas a full-screen scrim has to be a
body-level `position: fixed` child competing in the ROOT context. One
transformed or z-indexed ancestor between them — and a feed card has several
— and the scrim paints over the tray, dimming and blurring the exact thing
the user is reaching for.
The tray already carries a solid background and a drop shadow
(style.css:2964), which is what actually separates it from the feed. See the
matching note in js/ize-interact-post.js. */
/* =============================================================================
6. COUNTERS
-----------------------------------------------------------------------------
The engine animates the count via WAAPI (it needs to know the direction of
travel, which CSS cannot). This only guarantees the digits do not reflow the
row while they move — a count going 9 → 10 must not shove the next button.
========================================================================== */
.post .tag_post_actions.ize-bar .ize-cnt {
font-variant-numeric: tabular-nums;
will-change: auto;
}
/* =============================================================================
7. FOCUS (Phase 12)
-----------------------------------------------------------------------------
The bar is built from carrying role="button" + tabindex="0".
Without a focus ring, keyboard and switch users have no idea where they are.
:focus-visible only, so a mouse or touch press never draws one.
========================================================================== */
.post .tag_post_actions.ize-bar [role="button"]:focus-visible,
.post .reactions-box .reaction:focus-visible {
outline: 2px solid var(--main, #1eb2c4);
outline-offset: -2px;
border-radius: 9px;
}
/* Screen-reader-only live region used by IzeInteract.announce(). Must stay in
the layout (not display:none) or assistive tech will not read it. */
.ize-ix-sr {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* =============================================================================
8. HIGH CONTRAST / FORCED COLOURS (Phase 12)
-----------------------------------------------------------------------------
In forced-colours mode the system replaces every colour, so a state conveyed
ONLY by tint disappears. The selected reaction keeps a non-colour signal.
========================================================================== */
@media (forced-colors: active) {
.post .reactions-box .reaction.ize-ix-hot { outline: 2px solid Highlight; }
.ize-ix-pending::after { forced-color-adjust: none; background: Highlight; }
}
/* =============================================================================
9. REDUCED MOTION (Phase 12)
-----------------------------------------------------------------------------
--ize-mo-scale already collapses every duration above to ~1% under Reduce
Motion, so timing is handled. What remains is motion that is not a duration:
the tray's travel, the burst's flight, the pending dot's loop.
The burst is HIDDEN rather than shortened. It is pure delight with no
informational content — the state change is carried by the button's own
colour and the counter. Removing it costs the user nothing.
NOTE the specificity: this block must beat `html.ize-lean` (0,1,1) from the
motion system, so the selectors repeat `:root` with a class where needed.
An accessibility preference must always win over a performance heuristic.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.ize-ix-burst,
.ize-ix-fly { display: none !important; }
.ize-ix-press { transform: none; }
/* Kills the dock entrance/exit AND every idle loop. The idle animations are
the single most important thing to stop here: six infinitely-looping
transforms are exactly what someone with vestibular sensitivity turned
Reduce Motion on to avoid. */
.post .reactions-box.reactions-open,
.post .reactions-box.ize-ix-tray-out,
.post .reactions-box.reactions-open .reaction,
.post .reactions-box.reactions-open .reaction img,
.post .reactions-box.reactions-open .reaction .emoji {
animation: none !important;
}
.post .reactions-box .reaction.ize-ix-hot,
.post .reactions-box .reaction:hover {
transform: none;
outline: 2px solid var(--main, #1eb2c4);
outline-offset: 2px;
}
.post .reactions-box .reaction.ize-ix-near { transform: none; }
.ize-ix-pending::after { animation: none; opacity: .5; }
}
/* Lean mode (IzeXM low-power / low-bandwidth): every state change is kept, only
the celebratory burst is dropped. Motion is already scaled to .75 by the dial,
and the tray/press timings stay as they are — a cheap device still has to feel
like the tap registered. */
html.ize-lean .ize-ix-burst { display: none; }