/* Effect previews: the same CSS the plugin's Effects tab uses (css/style.css in the plugin). */
.fxp{--ease:cubic-bezier(.2, .8, .2, 1)}
.fxp { position: relative; display: inline-block; font: 900 22px "Inter", "Segoe UI", Arial, sans-serif; color: #fff; white-space: nowrap; --fx: #ffe14d; }
.fxp span { display: inline-block; position: relative; z-index: 1; }
.fxp::before, .fxp::after { content: ''; position: absolute; pointer-events: none; }

.fxp-underline::after { left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: var(--fx); transform-origin: left; animation: fx-grow 2.4s var(--ease) infinite; }
.fxp-strike::after { left: -3px; right: -3px; top: 52%; height: 3px; border-radius: 2px; background: var(--fx); transform-origin: left; animation: fx-grow 2.4s var(--ease) .2s infinite; }
@keyframes fx-grow { 0% { transform: scaleX(0); transform-origin: left; animation-timing-function: cubic-bezier(.12,.75,.15,1); } 28%, 80% { transform: scaleX(1); transform-origin: right; animation-timing-function: cubic-bezier(.7,0,.85,.3); } 100% { transform: scaleX(0); transform-origin: right; } }
.fxp-marker::before { left: -5px; right: -5px; top: 35%; bottom: -2px; background: var(--fx); opacity: .8; border-radius: 3px; transform-origin: left; animation: fx-grow 2.4s var(--ease) infinite; z-index: 0; }
.fxp-marker { color: #141414; }
.fxp-circle::after { left: -12px; right: -12px; top: -9px; bottom: -9px; border: 2px solid var(--fx); border-radius: 50%; transform: rotate(-6deg); animation: fx-draw 2.4s var(--ease) infinite; }
.fxp-frame::after { left: -9px; right: -9px; top: -6px; bottom: -6px; border: 2px solid var(--fx); animation: fx-draw 2.4s var(--ease) infinite; }
@keyframes fx-draw { 0% { clip-path: inset(0 100% 100% 0); } 30%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.fxp-glitch span { animation: fx-glitch 2.4s steps(1) infinite; animation-delay: calc(var(--r) * -1s); }
@keyframes fx-glitch { 0%, 18%, 30%, 62%, 74%, 100% { transform: none; text-shadow: none; } 20% { transform: translate(3px, -1px) skewX(20deg); text-shadow: -2px 0 #ff2b5a, 2px 0 #2bf0ff; } 24% { transform: translate(-3px, 1px); opacity: .4; } 64% { transform: translate(-4px, 0) skewX(-15deg); text-shadow: 2px 0 #ff2b5a, -2px 0 #2bf0ff; } 68% { transform: translate(2px, 1px); } }
.fxp-typewriter span { animation: fx-type 2.4s steps(1) infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes fx-type { 0% { opacity: 0; } 4%, 85% { opacity: 1; } 100% { opacity: 0; } }
.fxp-wave span { animation: fx-wave 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.12s); }
@keyframes fx-wave { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
.fxp-shake { animation: fx-shake .25s steps(2) infinite; }
@keyframes fx-shake { 0% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 1px) rotate(-1deg); } 100% { transform: translate(1px, 1px); } }
.fxp-pulse { animation: fx-pulse 1.05s ease-in-out infinite; }
@keyframes fx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.fxp-rainbow { color: #ff3358; animation: fx-hue 2s linear infinite; }
.fxp-rainbow span { filter: hue-rotate(calc(var(--i) * 25deg)); }
@keyframes fx-hue { to { filter: hue-rotate(360deg); } }
.fxp-shine span { background: linear-gradient(105deg, #fff 40%, #fff7c8 48%, #fff 56%) no-repeat; background-size: 600% 100%; -webkit-background-clip: text; color: transparent; animation: fx-shine 1.8s ease-in-out infinite; }
.fxp-shine { text-shadow: none; }
@keyframes fx-shine { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.fxp-neon { color: #fff0fb; text-shadow: 0 0 4px var(--fx), 0 0 12px var(--fx); animation: fx-flicker 2.4s steps(1) infinite; }
@keyframes fx-flicker { 0%, 40%, 46%, 80%, 84%, 100% { opacity: 1; } 42%, 82% { opacity: .3; } }
.fxp-drop span { animation: fx-drop 2.4s infinite; animation-delay: calc(var(--i) * .05s); }
@keyframes fx-drop { 0% { transform: translateY(-34px); opacity: 0; animation-timing-function: ease-in; } 18% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; } 25% { transform: translateY(-6px); animation-timing-function: ease-in; } 32%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.fxp-punch { animation: fx-punch 2.4s var(--ease) infinite; }
@keyframes fx-punch { 0% { transform: scale(1.8); opacity: 0; } 12%, 88% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
.fxp-blurin span { animation: fx-blurin 2.4s infinite; animation-delay: calc(var(--i) * .06s); }
@keyframes fx-blurin { 0% { filter: blur(6px); opacity: 0; } 20%, 88% { filter: none; opacity: 1; } 100% { opacity: 0; } }
.fxp-tracking { animation: fx-track 2.4s var(--ease) infinite; }
@keyframes fx-track { 0% { letter-spacing: .5em; opacity: 0; } 25%, 88% { letter-spacing: 0; opacity: 1; } 100% { opacity: 0; } }
.fxp-spin span { animation: fx-spin 2.4s var(--ease) infinite; animation-delay: calc(var(--i) * .06s); }
@keyframes fx-spin { 0% { transform: rotate(200deg) scale(0); } 22%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.fxp-shadowpop { animation: fx-shadow 2.4s var(--ease) infinite; }
@keyframes fx-shadow { 0% { text-shadow: 0 0 0 var(--fx); } 20%, 88% { text-shadow: 3px 3px 0 var(--fx); } 100% { text-shadow: 0 0 0 var(--fx); } }
.fxp-outline span { -webkit-text-stroke: 1px #fff; animation: fx-fill 2.4s infinite; animation-delay: calc(var(--i) * .05s); }
@keyframes fx-fill { 0%, 20% { color: transparent; } 40%, 90% { color: #fff; } 100% { color: transparent; } }
.fxp-wiggle span { animation: fx-wiggle .5s ease-in-out infinite alternate; animation-delay: calc(var(--r) * -1s); }
@keyframes fx-wiggle { from { transform: rotate(-9deg); } to { transform: rotate(9deg) translateY(1px); } }
.fxp-heartbeat { animation: fx-heart 1s infinite; }
@keyframes fx-heart { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.16); } 25% { transform: scale(1.1); } }
.fxp-wipe { animation: fx-wipe 2.4s var(--ease) infinite; }
@keyframes fx-wipe { 0% { clip-path: inset(0 100% 0 0); } 30%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.fxp-flash span { animation: fx-flash 2.4s infinite; animation-delay: calc(var(--i) * .04s); }
@keyframes fx-flash { 0% { color: var(--fx); } 25%, 100% { color: #fff; } }
.fxp-bounce { animation: fx-bounce .6s ease-in-out infinite alternate; }
@keyframes fx-bounce { from { transform: translateY(4px); } to { transform: translateY(-6px); } }
.fxp-scatter span { animation: fx-scatter 2.4s ease-in infinite; }
@keyframes fx-scatter { 0%, 60% { transform: none; opacity: 1; } 95%, 100% { transform: translate(calc((var(--r) - .5) * 60px), -30px) rotate(calc((var(--r) - .5) * 300deg)); opacity: 0; } }
.fxp-dissolve span { animation: fx-dissolve 2.4s infinite; animation-delay: calc(var(--r) * .6s); }
@keyframes fx-dissolve { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
.fxp-swing { transform-origin: 50% -40%; animation: fx-swing 1.4s ease-in-out infinite alternate; }
@keyframes fx-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.fxp-cascade span { animation: fx-cascade 2.4s var(--ease) infinite; animation-delay: calc(var(--i) * .05s); }
@keyframes fx-cascade { 0% { transform: translateY(18px); opacity: 0; } 22%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.fxp-strobe { animation: fx-strobe .5s steps(1) infinite; }
@keyframes fx-strobe { 0% { opacity: 1; } 50% { opacity: .15; } }

/* новые постоянные эффекты */
.fxp-squiggle::after { left: 0; right: 0; bottom: -7px; height: 6px; background: linear-gradient(135deg, transparent 35%, var(--fx) 35%, var(--fx) 55%, transparent 55%) 0 0 / 8px 6px, linear-gradient(45deg, transparent 35%, var(--fx) 35%, var(--fx) 55%, transparent 55%) 4px 0 / 8px 6px; transform-origin: left; animation: fx-grow 2.4s infinite; }
.fxp-paint::before { left: -10px; right: -10px; top: 6%; bottom: 0; background: var(--fx); border-radius: 40% 12% 46% 10% / 30% 60% 30% 70%; transform-origin: left; animation: fx-grow 2.4s infinite; z-index: 0; }
.fxp-corners::after { left: -9px; right: -9px; top: -6px; bottom: -6px;
  background: linear-gradient(var(--fx), var(--fx)) 0 0 / 9px 2px no-repeat, linear-gradient(var(--fx), var(--fx)) 0 0 / 2px 9px no-repeat,
              linear-gradient(var(--fx), var(--fx)) 100% 0 / 9px 2px no-repeat, linear-gradient(var(--fx), var(--fx)) 100% 0 / 2px 9px no-repeat,
              linear-gradient(var(--fx), var(--fx)) 0 100% / 9px 2px no-repeat, linear-gradient(var(--fx), var(--fx)) 0 100% / 2px 9px no-repeat,
              linear-gradient(var(--fx), var(--fx)) 100% 100% / 9px 2px no-repeat, linear-gradient(var(--fx), var(--fx)) 100% 100% / 2px 9px no-repeat;
  animation: fx-corners 2.4s var(--ease) infinite; }
@keyframes fx-corners { 0% { opacity: 0; transform: scale(1.25); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fxp-sparkles::before, .fxp-sparkles::after { content: '✦'; color: var(--fx); font-size: 11px; animation: fx-twinkle 1.2s ease-in-out infinite; }
.fxp-sparkles::before { left: -12px; top: -6px; }
.fxp-sparkles::after { right: -12px; bottom: -6px; animation-delay: -.6s; }
@keyframes fx-twinkle { 0%, 100% { transform: scale(0) rotate(0); } 50% { transform: scale(1.2) rotate(90deg); } }
.fxp-glitch { animation: fx-glitch-box 2.4s steps(1) infinite; }
@keyframes fx-glitch-box { 0%, 18%, 28%, 60%, 70%, 100% { text-shadow: 1px 0 rgba(255,40,90,.5), -1px 0 rgba(0,240,255,.5); clip-path: none; } 20% { text-shadow: -4px 0 #ff2b5a, 4px 0 #2bf0ff; clip-path: inset(10% 0 45% 0); transform: translateX(4px); } 24% { text-shadow: 3px 0 #ff2b5a, -3px 0 #2bf0ff; clip-path: inset(55% 0 5% 0); transform: translateX(-4px); } 62% { text-shadow: 5px 0 #ff2b5a, -5px 0 #2bf0ff; transform: skewX(-12deg); } 66% { clip-path: inset(30% 0 30% 0); transform: translateX(3px); } }
.fxp-rgb { text-shadow: -2px 0 rgba(255,40,90,.85), 2px 0 rgba(0,240,255,.85); }
.fxp-jelly { animation: fx-jelly .9s ease-in-out infinite; }
@keyframes fx-jelly { 0%, 100% { transform: scale(1.08, .92); } 50% { transform: scale(.94, 1.06); } }
.fxp-glowpulse { text-shadow: 0 0 6px var(--fx), 0 0 14px var(--fx); animation: fx-glowp 1.6s ease-in-out infinite; }
@keyframes fx-glowp { 0%, 100% { text-shadow: 0 0 2px var(--fx); } 50% { text-shadow: 0 0 8px var(--fx), 0 0 18px var(--fx); } }

/* Effects: прокручивается только сетка, панель с кнопками всегда видна внизу (как у Templates) */

.fx-group { grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -2px; }

/* частицы и стихии: точки из box-shadow движутся вокруг слова */
.fxp-embers::before, .fxp-dust::before, .fxp-snow::before, .fxp-confetti::before, .fxp-bubbles::before { width: 4px; height: 4px; border-radius: 50%; left: 50%; top: 50%; }
.fxp-embers::before { background: var(--fx); box-shadow: -30px 0 0 var(--fx), 24px 4px 0 #ffe08a, -12px 8px 0 var(--fx), 40px -2px 0 #ffe08a, -44px 6px 0 var(--fx); filter: drop-shadow(0 0 3px var(--fx)); animation: fx-rise 1.6s ease-out infinite; }
.fxp-embers::after { width: 3px; height: 3px; border-radius: 50%; left: 30%; top: 40%; background: #ffe08a; box-shadow: 30px 4px 0 var(--fx), 60px -4px 0 #ffe08a; animation: fx-rise 1.6s ease-out .8s infinite; }
@keyframes fx-rise { 0% { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-34px) translateX(4px); opacity: 0; } }
.fxp-flames::before { left: 4%; right: 4%; top: -16px; height: 22px; z-index: 0; border-radius: 50% 50% 20% 20%;
  background: radial-gradient(12px 18px at 15% 100%, #ffd25a, var(--fx) 55%, transparent 70%), radial-gradient(12px 22px at 40% 100%, #ffd25a, var(--fx) 55%, transparent 70%),
              radial-gradient(12px 16px at 65% 100%, #ffd25a, var(--fx) 55%, transparent 70%), radial-gradient(12px 20px at 88% 100%, #ffd25a, var(--fx) 55%, transparent 70%);
  transform-origin: bottom; animation: fx-flame .35s ease-in-out infinite alternate; filter: blur(1px); }
@keyframes fx-flame { from { transform: scaleY(.8) skewX(-3deg); } to { transform: scaleY(1.15) skewX(3deg); } }
.fxp-bubbles::before { width: 8px; height: 8px; background: transparent; border: 1px solid var(--fx); box-shadow: 26px 6px 0 -1px transparent, 26px 6px 0 0 var(--fx); animation: fx-rise 2s ease-in infinite; }
.fxp-bubbles::after { width: 6px; height: 6px; border-radius: 50%; left: 20%; top: 60%; border: 1px solid var(--fx); animation: fx-rise 2s ease-in 1s infinite; }
.fxp-drips::after { width: 5px; height: 7px; left: 35%; bottom: -2px; background: var(--fx); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 30px 0 0 var(--fx); animation: fx-drip 1.8s ease-in infinite; }
@keyframes fx-drip { 0% { transform: translateY(0) scale(0); } 35% { transform: translateY(0) scale(1); } 100% { transform: translateY(26px) scaleY(1.5); opacity: 0; } }
.fxp-ripples::after { left: 10%; right: 10%; bottom: -10px; height: 10px; border: 1px solid var(--fx); border-radius: 50%; animation: fx-ripple 1.6s ease-out infinite; }
.fxp-ripples::before { left: 10%; right: 10%; bottom: -10px; height: 10px; border: 1px solid var(--fx); border-radius: 50%; animation: fx-ripple 1.6s ease-out .8s infinite; }
@keyframes fx-ripple { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.fxp-confetti::before { border-radius: 1px; background: #ff3d6e; box-shadow: -30px -6px 0 #ffd23f, 22px -10px 0 #3dd9ff, -12px 4px 0 #6ef07f, 40px 0 0 #a873ff, -46px -2px 0 #3dd9ff; animation: fx-fall 2s linear infinite; }
@keyframes fx-fall { 0% { transform: translateY(-36px) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(30px) rotate(360deg); opacity: 0; } }
.fxp-dust::before { width: 3px; height: 3px; background: var(--fx); box-shadow: -40px -10px 0 var(--fx), 30px -14px 0 var(--fx), -18px 12px 0 var(--fx), 46px 10px 0 var(--fx), -52px 4px 0 var(--fx), 10px 16px 0 var(--fx); filter: drop-shadow(0 0 2px var(--fx)); animation: fx-twinkle2 1.4s ease-in-out infinite; }
@keyframes fx-twinkle2 { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-3px); } }
.fxp-snow::before { background: var(--fx); box-shadow: -40px -10px 0 var(--fx), 30px -20px 0 var(--fx), -18px 0 0 var(--fx), 46px -4px 0 var(--fx), -52px -16px 0 var(--fx), 12px -26px 0 var(--fx); animation: fx-fall 3s linear infinite; }

/* Site overrides: the text must stay readable on the dark stage while the marker sweeps in */
.fxp-marker{color:#fff;animation:fxp-marker-text 2.4s linear infinite}
@keyframes fxp-marker-text{0%,8%{color:#fff}20%,80%{color:#141414}92%,100%{color:#fff}}