/* Phosphor glyphs and inline emoji, shared by the chat pages. Needs --amber defined. */
/* phosphor glyphs: animate twice when they appear, again on hover */
.glyph { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -.32em; margin: 0 .08em; color: var(--amber); filter: drop-shadow(0 0 3px rgba(255,181,71,.55)); }
.glyph svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; transform-box: fill-box; }
.glyph svg * { transform-box: fill-box; transform-origin: 50% 50%; }
.a-spin svg { animation: g-spin 2.4s linear 2; }
.a-pulse .g1 { animation: g-fade 1.2s ease-in-out 3; }
.a-pulse .g2 { animation: g-fade 1.2s ease-in-out .2s 3; }
.a-pulse .g3 { animation: g-fade 1.2s ease-in-out .4s 3; }
.a-hover svg { animation: g-bob 1.6s ease-in-out 3; }
.a-hover .g2 { animation: g-fade .8s steps(2) 5; }
.a-flicker svg { animation: g-flicker 2s steps(1) 2; }
.a-draw polyline, .a-draw path { stroke-dasharray: 40; animation: g-draw 1.4s ease-out 2; }
.a-shake svg { animation: g-shake .25s linear 8; }
.a-shake .g2 { animation: g-fade .3s steps(2) 8; }
.a-blink .g1 { animation: g-blink 2.4s steps(1) 2; }
.a-nova svg { animation: g-nova 1.2s ease-out 2; }
.a-wobble svg { animation: g-wobble 2s ease-in-out 2; }
.a-leds .g1 { animation: g-fade .5s steps(2) 6; }
.a-leds .g2 { animation: g-fade .7s steps(2) .2s 5; }
.a-leds .g3 { animation: g-fade .4s steps(2) .1s 8; }
.a-look .g1 { animation: g-look 2.4s ease-in-out 2; }
.a-wander .g1 { animation: g-wander 3s ease-in-out 2; }
.a-rain path { animation: g-rain .9s linear 4; }
.a-shimmer .g1 { animation: g-rain .6s linear 6; }
.a-beat svg { animation: g-beat 1s ease-in-out 3; }
.a-bounce svg { animation: g-bob .5s ease-in-out 4; }
.a-scroll path { animation: g-rain 1s linear 4; }
.a-glitchy svg { animation: g-shake .18s steps(2) 8; }
.a-glitchy .g1 { animation: g-flicker .6s steps(1) 4; }
.a-steam .g1 { animation: g-steam 1.6s ease-in-out 3; }
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-fade { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes g-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes g-flicker { 0%, 100% { opacity: 1; } 20% { opacity: .2; } 45% { opacity: .8; } 60% { opacity: .1; } 80% { opacity: .9; } }
@keyframes g-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes g-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-.6px, .4px); } 75% { transform: translate(.6px, -.4px); } }
@keyframes g-blink { 0%, 100% { opacity: 1; } 48%, 52% { opacity: 0; } }
@keyframes g-nova { 0% { transform: scale(.4); opacity: .2; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@keyframes g-wobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 70% { transform: rotate(10deg); } }
@keyframes g-look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-1.6px); } 70% { transform: translateX(1.6px); } }
@keyframes g-wander { 0% { transform: rotate(0); } 30% { transform: rotate(140deg); } 60% { transform: rotate(-60deg); } 100% { transform: rotate(0); } }
@keyframes g-rain { to { stroke-dashoffset: -7; } }
@keyframes g-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(.95); } 45% { transform: scale(1.12); } }
@keyframes g-steam { 0% { transform: translateY(1px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-2px); opacity: 0; } }

/* message effects */
.fx-glitch { animation: fx-glitch .7s steps(2) 1; }
.fx-warp { animation: fx-warp .6s cubic-bezier(.2, .9, .3, 1.2) 1; transform-origin: 0 50%; }
.fx-nova { animation: fx-nova 1.2s ease-out 1; }
@keyframes fx-glitch { 0% { transform: translateX(-4px) skewX(-8deg); filter: hue-rotate(60deg); } 40% { transform: translateX(3px); clip-path: inset(30% 0 20% 0); } 70% { transform: translateX(-2px) skewX(6deg); } 100% { transform: none; filter: none; clip-path: none; } }
@keyframes fx-warp { from { transform: scaleX(.05) translateX(60%); opacity: 0; filter: blur(3px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes fx-nova { 0% { background: rgba(255,181,71,.35); } 100% { background: transparent; } }

.suggest { color: var(--amber-dim); }
.suggest b { color: var(--amber); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .glyph svg, .glyph svg *, .fx-glitch, .fx-warp, .fx-nova { animation: none !important; } }

/* everyday emoji and the picker */
.emoji { display: inline-block; font-size: 1.15em; line-height: 1; vertical-align: -.08em; margin: 0 .05em; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }