/* ============================================================
Mercury — Text Effects (from Effects Lab handoff)
Selection-based effects on chat messages via [fx:NAME]text[/fx]
markers. Pairs with web/js/effects.js particle engine.
============================================================ */
/* Particle canvases (created by effects.js on init).
Back canvas (z:7) draws below .fx spans; front canvas (z:11) draws above. */
#fxCanvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 7;
}
#fxCanvasFront {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 11;
}
#fxSpotlight {
position: fixed;
width: 105px;
height: 105px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(59,196,202,0.18) 0%, rgba(59,196,202,0.06) 40%, transparent 70%);
transform: translate(-50%, -50%);
display: none;
z-index: 8;
mix-blend-mode: screen;
}
/* ============================================================
THE EFFECTS — styling layer
(paired with effects.js particle emitters)
============================================================ */
/* base — every effect span keeps its layout role */
.fx {
display: inline-block;
position: relative;
font-weight: inherit;
/* Sit between the two particle canvases (back z:7 / front z:11)
so most VFX render behind text + emojis, and only the small,
bright "front" kinds (sparks, firecore, bolts, bursts) bloom on top. */
z-index: 10;
}
/* Ice / Frozen on a solo emoji: the default styling uses background-clip:
text + color: transparent, which is invisible on an ![]()
. Reset those
so the emoji shows, then tint cyan via filter and lay a translucent
frost overlay on top so the emoji actually reads as frozen. */
.message.emoji-only .fx-ice,
.message.emoji-only .fx-frozen {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: initial;
color: initial;
filter:
saturate(0.45)
brightness(0.95)
drop-shadow(0 0 10px rgba(160, 220, 255, 0.6));
}
.message.emoji-only .fx-ice::after,
.message.emoji-only .fx-frozen::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(220, 240, 255, 0.30), rgba(140, 200, 255, 0.20));
pointer-events: none;
border-radius: 6px;
mix-blend-mode: screen;
}
/* The default fire flicker skews/translates the wrapped content — fine
on text-sized letters, but on a 69 px emoji the same %s read as a
violent wobble. Swap in a calmer flicker that keeps the brightness
pulse but drops the geometry shake. */
.message.emoji-only .fx-fire {
animation:
fxFireFlickerCalm 0.18s steps(3) infinite,
fxFireRoll 1.2s linear infinite;
}
@keyframes fxFireFlickerCalm {
0% { filter: drop-shadow(0 0 8px rgba(255, 90, 0, 0.75)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1); }
33% { filter: drop-shadow(0 0 16px rgba(255, 160, 40, 1)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1.15); }
66% { filter: drop-shadow(0 0 11px rgba(255, 110, 0, 0.9)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1.08); }
100% { filter: drop-shadow(0 0 12px rgba(255, 140, 30, 0.85)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1.1); }
}
/* ---------- FIRE ---------- */
.fx-fire {
position: relative;
background: linear-gradient(
180deg,
#fffbe0 0%,
#ffea7a 25%,
#ffc04a 50%,
#ff8a2c 75%,
#ff5a1a 100%
);
background-size: 100% 180%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter:
drop-shadow(0 0 8px rgba(255, 140, 30, 0.85))
drop-shadow(0 1px 0 rgba(80, 20, 0, 0.55));
animation:
fxFireFlicker 0.09s steps(3) infinite,
fxFireRoll 1.2s linear infinite;
transform-origin: bottom center;
isolation: isolate;
}
.fx-fire::before {
content: "";
position: absolute;
inset: -8px -6px -4px -6px;
background:
radial-gradient(60% 80% at 50% 100%, rgba(255, 120, 30, 0.4) 0%, rgba(255, 60, 0, 0.18) 40%, transparent 75%),
radial-gradient(40% 60% at 30% 90%, rgba(255, 200, 80, 0.28) 0%, transparent 70%),
radial-gradient(40% 60% at 70% 90%, rgba(255, 80, 0, 0.28) 0%, transparent 70%);
filter: blur(8px);
z-index: -1;
pointer-events: none;
animation: fxFireHalo 0.18s steps(2) infinite;
mix-blend-mode: screen;
}
@keyframes fxFireFlicker {
0% { filter: drop-shadow(0 0 8px rgba(255, 90, 0, 0.75)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1); transform: translateY(0) skewX(0deg) scaleY(1); }
20% { filter: drop-shadow(0 0 16px rgba(255, 160, 40, 1)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1.25); transform: translateY(-0.6px) skewX(-2deg) scaleY(1.04); }
40% { filter: drop-shadow(0 0 11px rgba(255, 110, 0, 0.9)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1.1); transform: translateY(0.4px) skewX(1.5deg) scaleY(0.98); }
60% { filter: drop-shadow(0 0 18px rgba(255, 210, 100, 0.95)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1.3); transform: translateY(-0.4px) skewX(-1.5deg) scaleY(1.05); }
80% { filter: drop-shadow(0 0 9px rgba(255, 80, 0, 0.8)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1); transform: translateY(0.3px) skewX(2deg) scaleY(0.99); }
100% { filter: drop-shadow(0 0 12px rgba(255, 140, 30, 0.85)) drop-shadow(0 1px 0 rgba(80,20,0,0.55)) brightness(1.15); transform: translateY(0) skewX(0) scaleY(1); }
}
@keyframes fxFireRoll {
from { background-position: 0% 100%; }
to { background-position: 0% 0%; }
}
@keyframes fxFireHalo {
0%, 100% { opacity: 0.7; transform: scale(1, 1); }
50% { opacity: 0.95; transform: scale(1.08, 1.12); }
}
/* ---------- SMOKE ---------- */
.fx-smoke {
color: #a8b0bb;
text-shadow: 0 0 12px rgba(168,176,187,0.4);
filter: blur(0.4px);
animation: fxSmokeDrift 3.2s ease-in-out infinite;
}
@keyframes fxSmokeDrift {
0%, 100% { filter: blur(0.4px) opacity(1); transform: translateY(0); }
50% { filter: blur(1.4px) opacity(0.65); transform: translateY(-1px); }
}
/* ---------- METAL ---------- */
.fx-metal {
background: linear-gradient(180deg, #f4f6fa 0%, #b9c2cf 25%, #6d7886 50%, #cbd2dc 75%, #8b95a3 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
background-size: 100% 200%;
animation: fxMetalSheen 3.2s linear infinite;
text-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
@keyframes fxMetalSheen {
0% { background-position: 0% 0%; }
100% { background-position: 0% 200%; }
}
/* ---------- WIND ---------- */
.fx-wind {
color: #e0ecff;
animation: fxWindLean 1.6s ease-in-out infinite;
transform-origin: bottom center;
text-shadow: -1px 0 0 rgba(180,210,255,0.25), -3px 0 6px rgba(180,210,255,0.18);
}
@keyframes fxWindLean {
0%, 100% { transform: skewX(-2deg) translateX(-1px); }
50% { transform: skewX(-8deg) translateX(-3px); }
}
/* ---------- ICE ---------- */
.fx-ice {
background: linear-gradient(180deg, #e9f7ff 0%, #a4dfff 40%, #66c2f5 70%, #8ad7fd 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
text-shadow: 0 0 14px rgba(120, 200, 255, 0.45);
filter: drop-shadow(0 0 4px rgba(120, 200, 255, 0.5));
}
/* ---------- FROZEN ---------- */
.fx-frozen {
background: linear-gradient(180deg, #ffffff 0%, #c4e8ff 60%, #6da8d4 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
text-shadow: 0 0 18px rgba(180, 220, 255, 0.55);
filter: drop-shadow(0 0 6px rgba(140, 200, 255, 0.5));
animation: fxFrozenLock 4s ease-in-out infinite;
}
@keyframes fxFrozenLock {
0%, 100% { letter-spacing: 0; }
50% { letter-spacing: 0.05em; }
}
.fx-frozen::before {
content: "";
position: absolute;
inset: -2px -4px;
border-radius: 4px;
background:
linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(120,180,220,0.04));
pointer-events: none;
z-index: -1;
}
/* ---------- LIGHTNING ---------- */
.fx-lightning {
color: #fff8c1;
text-shadow: 0 0 6px #fff, 0 0 14px #ffd84a, 0 0 24px rgba(255, 220, 80, 0.7);
animation: fxLightningFlash 1.6s steps(1) infinite;
}
@keyframes fxLightningFlash {
0%, 90%, 100% { filter: brightness(1); }
92%, 94% { filter: brightness(2.4); transform: translate(0.5px, -0.3px); }
96%, 98% { filter: brightness(0.7); transform: translate(-0.5px, 0.3px); }
}
/* ---------- HEART (love) ---------- */
.fx-heart {
color: #ff7aa8;
text-shadow: 0 0 10px rgba(255, 122, 168, 0.55), 0 0 20px rgba(255, 122, 168, 0.3);
animation: fxHeartBeat 1.1s ease-in-out infinite;
transform-origin: center;
display: inline-block;
}
@keyframes fxHeartBeat {
0%, 100% { transform: scale(1); text-shadow: 0 0 10px rgba(255,122,168,0.55), 0 0 20px rgba(255,122,168,0.3); }
18% { transform: scale(1.18); text-shadow: 0 0 16px rgba(255,122,168,0.85), 0 0 28px rgba(255,122,168,0.5); }
30% { transform: scale(1); }
44% { transform: scale(1.12); text-shadow: 0 0 14px rgba(255,122,168,0.75), 0 0 24px rgba(255,122,168,0.45); }
60% { transform: scale(1); }
}
/* ---------- GLOW (iMessage) ---------- */
.fx-glow {
color: #fff;
animation: fxGlowPulse 1.8s ease-in-out infinite;
display: inline-block;
}
@keyframes fxGlowPulse {
0%, 100% { text-shadow: 0 0 4px var(--accent), 0 0 10px rgba(59,196,202,0.4), 0 0 18px rgba(59,196,202,0.2); transform: scale(1); }
50% { text-shadow: 0 0 14px var(--accent), 0 0 28px rgba(59,196,202,0.7), 0 0 48px rgba(59,196,202,0.4); transform: scale(1.04); }
}
/* ---------- SLAM (iMessage) ---------- */
.fx-slam {
display: inline-block;
font-weight: 800 !important;
animation: fxSlam 4.5s cubic-bezier(.2,.6,.2,1) infinite;
transform-origin: center;
color: var(--text-primary);
}
@keyframes fxSlam {
0% { transform: scale(1.7); opacity: 0; letter-spacing: 0.12em; }
10% { transform: scale(1); opacity: 1; letter-spacing: 0; }
92% { transform: scale(1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* ---------- LOUD ---------- */
.fx-loud {
display: inline-block;
font-weight: 800 !important;
animation: fxLoud 1.4s ease-in-out infinite;
color: var(--text-primary);
}
@keyframes fxLoud {
0%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
50% { transform: scale(1.18); text-shadow: 0 0 14px rgba(255,255,255,0.4); }
}
/* ---------- GENTLE / WHISPER ---------- */
.fx-whisper {
color: var(--text-muted);
font-style: italic;
font-weight: 300;
letter-spacing: 0.04em;
opacity: 0.65;
font-size: 0.85em;
}
/* ---------- SHAKE ---------- */
.fx-shake {
display: inline-block;
animation: fxShake 0.28s linear infinite;
color: var(--text-primary);
font-weight: 600;
}
@keyframes fxShake {
0% { transform: translate(0, 0) rotate(0); }
10% { transform: translate(-2.5px, 1px) rotate(-2.5deg); }
20% { transform: translate(2.5px, -1px) rotate(2deg); }
30% { transform: translate(-2px, 2px) rotate(-1.5deg); }
40% { transform: translate(2px, -2px) rotate(2.5deg); }
50% { transform: translate(-1.5px, 1.5px) rotate(-1deg); }
60% { transform: translate(2px, -1px) rotate(1.5deg); }
70% { transform: translate(-2.5px, -1.5px) rotate(-2deg); }
80% { transform: translate(1.5px, 2px) rotate(1deg); }
90% { transform: translate(-1px, -1px) rotate(-0.5deg); }
100% { transform: translate(0, 0) rotate(0); }
}
/* ---------- WAVE ---------- */
.fx-wave {
background: linear-gradient(90deg, var(--accent) 0%, #6ec5ff 50%, var(--accent) 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: fxWaveSlide 2.4s linear infinite, fxWaveBob 2.4s ease-in-out infinite;
display: inline-block;
}
@keyframes fxWaveSlide {
from { background-position: 200% 0; }
to { background-position: 0% 0; }
}
@keyframes fxWaveBob {
0%, 100% { transform: translateY(0) skewY(0); }
25% { transform: translateY(-2px) skewY(-1deg); }
50% { transform: translateY(0); }
75% { transform: translateY(2px) skewY(1deg); }
}
/* ---------- RAIN ---------- */
.fx-rain {
color: #8fb6d6;
text-shadow: 0 0 8px rgba(143, 182, 214, 0.4);
}
/* ---------- INVISIBLE ---------- */
.fx-invisible {
position: relative;
cursor: help;
color: var(--text-primary);
--reveal-x: -9999px;
--reveal-y: -9999px;
padding: 0 3px;
isolation: isolate;
}
.fx-invisible::before {
content: "";
position: absolute;
inset: 1px -1px;
background:
repeating-linear-gradient(
45deg,
var(--bg-modifier-active, #1A2030) 0 6px,
var(--bg-hover, #151A23) 6px 12px
);
border: 1px solid var(--border, #232A38);
border-radius: 4px;
z-index: 1;
pointer-events: none;
-webkit-mask-image: radial-gradient(
68px 24px at var(--reveal-x) var(--reveal-y),
transparent 25%, rgba(0,0,0,0.4) 55%, black 75%
);
mask-image: radial-gradient(
68px 24px at var(--reveal-x) var(--reveal-y),
transparent 25%, rgba(0,0,0,0.4) 55%, black 75%
);
transition: opacity 0.18s;
}
.fx-invisible::after {
content: "\1F441";
position: absolute;
right: -14px; top: -2px;
font-size: 9px;
opacity: 0.5;
pointer-events: none;
filter: grayscale(0.4);
}
/* ---------- EXPLODE ---------- */
.fx-explode {
display: inline-block;
cursor: pointer;
color: var(--accent);
text-shadow: 0 0 10px rgba(59,196,202,0.45), 0 0 22px rgba(59,196,202,0.25);
position: relative;
animation: fxExplodePulse 1.4s ease-in-out infinite;
}
.fx-explode::after {
content: "\2736";
font-size: 0.55em;
color: var(--accent);
margin-left: 3px;
opacity: 0.8;
vertical-align: super;
animation: fxExplodeSpin 3s linear infinite;
display: inline-block;
}
@keyframes fxExplodePulse {
0%, 100% { text-shadow: 0 0 10px rgba(59,196,202,0.45), 0 0 22px rgba(59,196,202,0.25); }
50% { text-shadow: 0 0 16px rgba(59,196,202,0.7), 0 0 32px rgba(59,196,202,0.45); }
}
@keyframes fxExplodeSpin {
to { transform: rotate(360deg); }
}
.fx-explode .explode-letter {
display: inline-block;
transform: translate(0, 0) rotate(0) scale(1);
transition: transform 0.7s cubic-bezier(.16,.84,.32,1), opacity 0.7s ease-out;
will-change: transform, opacity;
}
.fx-explode.is-exploded .explode-letter { opacity: 0; }
/* ---------- POISON ---------- */
.fx-poison {
color: #9bff7e;
text-shadow: 0 0 8px rgba(155, 255, 126, 0.55);
animation: fxPoisonDrip 2.4s ease-in-out infinite;
}
@keyframes fxPoisonDrip {
0%, 100% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(-15deg) saturate(1.2); }
}
/* ---------- GHOST ---------- */
.fx-ghost {
color: rgba(232, 240, 255, 0.55);
text-shadow: 0 0 10px rgba(160, 200, 255, 0.35);
animation: fxGhostDrift 3s ease-in-out infinite;
font-style: italic;
}
@keyframes fxGhostDrift {
0%, 100% { transform: translateY(0); opacity: 0.55; }
50% { transform: translateY(-2px); opacity: 0.85; }
}
/* ---------- GLITCH ---------- */
.fx-glitch {
position: relative;
color: var(--text-primary);
animation: fxGlitchShift 2.4s steps(8) infinite;
}
@keyframes fxGlitchShift {
0%, 80%, 100% { text-shadow: 0 0 0 transparent; transform: translate(0,0); }
82% { text-shadow: 2px 0 #ff5f56, -2px 0 #3bc4ca; transform: translate(-1px, 0); }
86% { text-shadow: -2px 0 #ff5f56, 2px 0 #3bc4ca; transform: translate(1px, 1px); }
90% { text-shadow: 1px 0 #ffbd2e, -1px 0 #3bc4ca; transform: translate(0, -1px); }
}
/* ---------- HUGE ---------- */
/* Comically huge but capped to ~one third of the viewport so it never
overflows the message area on a phone. Forces nested images
(custom + unicode-override emojis) to scale alongside the text. */
.fx-huge {
display: inline-block;
vertical-align: middle;
line-height: 1.1;
font-size: min(2em, 32vw);
}
.fx-huge img {
width: 2em !important;
height: 2em !important;
vertical-align: middle;
}
/* Mercury's emoji-only mode forces .emoji-img to 69 px !important with
specificity 0,3,1. Override it for HUGE solo stickers (3em ≈ 207 px,
capped at 35vw so it can't overflow on a phone) and beat the base
sticker rule on specificity. */
.message.emoji-only .message-body .fx-huge { font-size: min(3em, 35vw); }
.message.emoji-only .message-body .fx-huge img,
.message.emoji-only .message-body .fx-huge .emoji-img {
width: min(3em, 35vw) !important;
height: min(3em, 35vw) !important;
}
/* ---------- TURBO (fast-forward animated emojis) ---------- */
/* effects.js swaps each animated emoji ![]()
for a