/* ========================================================= */
/* 1. BASE SETUP & BOX FILTERS (40 STYLES - 100% PRESERVED)  */
/* ========================================================= */
.rfe-image-wrapper { position: relative; display: inline-block; margin: 80px; perspective: 1500px; z-index: 1; }
.rfe-image-wrapper > *:first-child { position: relative; z-index: 10; display: block; transition: all 0.5s ease; border-radius: 12px; }

/* Box Filters 1-40 */
.rfe-box-3d-pop > *:first-child { transform: rotateX(10deg) rotateY(-15deg); box-shadow: 15px 15px 0px rgba(0,0,0,0.2); border: 2px solid #333; background: #fff; padding: 20px; } .rfe-image-wrapper.rfe-box-3d-pop:hover > *:first-child { transform: rotateX(0deg) rotateY(0deg) scale(1.05); box-shadow: 25px 25px 20px rgba(0,0,0,0.1); }
.rfe-box-glossy-glass > *:first-child { background: rgba(255,255,255,0.15); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 8px 32px rgba(31,38,135,0.3); padding: 20px; color:#fff;}
.rfe-box-neon-cyber > *:first-child { border: 2px solid #0ff; box-shadow: 0 0 10px #0ff, inset 0 0 15px #0ff; background: #111; color: #0ff; padding: 20px; }
.rfe-box-clay-morph > *:first-child { background: #e0e5ec; border-radius: 30px; box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5), inset 3px 3px 5px rgba(255,255,255,0.8); padding: 20px; color:#000;}
.rfe-box-holographic > *:first-child { background: linear-gradient(135deg, rgba(255,0,150,0.5), rgba(0,204,255,0.5), rgba(0,255,100,0.5)); background-size: 200% 200%; animation: holoGradient 5s ease infinite; color: #fff; padding: 20px; }
.rfe-box-neumorphism > *:first-child { background: #f0f0f3; border-radius: 20px; box-shadow: -10px -10px 30px #ffffff, 10px 10px 30px #aeaec0; padding: 20px; color:#000;}
.rfe-box-golden-luxury > *:first-child { background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); border: 2px solid #fff; box-shadow: 0 10px 20px rgba(191,149,63,0.5); color: #000; padding: 20px; }
.rfe-box-cyber-glitch > *:first-child { background: #000; color: #fff; border: 1px solid #fff; padding: 20px; } .rfe-image-wrapper.rfe-box-cyber-glitch:hover > *:first-child { animation: boxGlitch 0.3s infinite; box-shadow: 5px 5px 0px #f0f, -5px -5px 0px #0ff; }
.rfe-box-frosted-ice > *:first-child { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(5px) saturate(150%); padding: 20px; color:#000;}
.rfe-box-matrix-rain > *:first-child { background: #000; color: #0f0; border: 1px dashed #0f0; font-family: monospace; box-shadow: 0 0 20px rgba(0,255,0,0.4); padding: 20px; }
.rfe-box-lava-lamp > *:first-child { background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); background-size: 400%; animation: holoGradient 10s linear infinite; padding: 20px; color:#fff;}
.rfe-box-vintage-crt > *:first-child { background: #111; color: #55ff55; text-shadow: 2px 0 1px rgba(255,0,0,0.5), -2px 0 1px rgba(0,0,255,0.5); padding: 20px; }
.rfe-box-liquid-metal > *:first-child { background: linear-gradient(135deg, #e6e9f0 0%, #eef1f5 100%); box-shadow: inset 0 0 20px rgba(255,255,255,0.8), inset 0 0 10px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.2); padding: 20px; color:#333;}
.rfe-box-neon-hexagon > *:first-child { background-color: #000; background-image: radial-gradient(#0ff 1px, transparent 1px); background-size: 20px 20px; border: 2px solid #0ff; color: #fff; padding: 20px; }
.rfe-box-comic-pop > *:first-child { background: #ffeb3b; border: 4px solid #000; box-shadow: 10px 10px 0px #000; font-weight: 900; color: #000; padding: 20px; transform: rotate(-2deg); }
.rfe-box-pixel-retro > *:first-child { background: #000; color: #fff; border: 4px dashed #fff; padding: 20px; font-family: monospace; }
.rfe-box-diamond-cut > *:first-child { background: rgba(255,255,255,0.8); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%); padding: 30px; box-shadow: inset 0 0 10px #000; color:#000;}
.rfe-box-alien-slime > *:first-child { background: #00ff00; border-radius: 5px 50px 5px 50px; border: 3px solid #003300; padding: 20px; color:#000; box-shadow: 0 10px 30px rgba(0,255,0,0.5); }
.rfe-box-fire-aura > *:first-child { background: #111; color: #fff; padding: 20px; box-shadow: 0 0 20px #ff0000, 0 0 40px #ff7300, 0 0 60px #fffb00; border: 1px solid #ff7300; }
.rfe-box-glass-morph-pro > *:first-child { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(25px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 30px 60px rgba(0,0,0,0.12); border-radius: 24px; padding: 25px; color:#fff;}
.rfe-box-neo-brutalism > *:first-child { background: #fff; border: 4px solid #000; box-shadow: 8px 8px 0px #000; padding: 25px; color:#000; transition: all 0.2s ease; } .rfe-image-wrapper.rfe-box-neo-brutalism:hover > *:first-child { transform: translate(4px, 4px); box-shadow: 4px 4px 0px #000; }
.rfe-box-aurora-borealis > *:first-child { background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); animation: auroraAnim 8s ease infinite; padding: 25px; box-shadow: 0 20px 40px rgba(161, 196, 253, 0.4); color: #333; }
.rfe-box-dark-mode-glow > *:first-child { background: #0f172a; border: 1px solid #334155; box-shadow: 0 0 30px rgba(56, 189, 248, 0.1); padding: 25px; color: #f8fafc; border-radius: 16px; } .rfe-image-wrapper.rfe-box-dark-mode-glow:hover > *:first-child { border-color: #38bdf8; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); }
.rfe-box-bento-grid-card > *:first-child { background: #fafafa; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05); padding: 30px; color:#111; }
.rfe-box-thor-thunder-border > *:first-child { position: relative; background: #111; color: #fff; padding: 25px; z-index: 1; } .rfe-box-thor-thunder-border > *:first-child::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; background: linear-gradient(90deg, #0ff, #f0f, #0ff); z-index: -1; filter: blur(10px); animation: thunderFlash 0.5s infinite alternate; border-radius: inherit; }
.rfe-box-cyber-punk-2077 > *:first-child { background: #fcee0a; color: #000; border: 2px solid #0ff; clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%); padding: 25px; font-weight: bold; }
.rfe-box-floating-crystal > *:first-child { background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1)); backdrop-filter: blur(10px); border-top: 2px solid rgba(255,255,255,0.8); border-left: 2px solid rgba(255,255,255,0.8); box-shadow: 10px 10px 30px rgba(0,0,0,0.2); padding: 25px; border-radius: 15px; color:#fff;}
.rfe-box-velvet-morphism > *:first-child { background: #1a1a1a; box-shadow: inset 0 10px 20px rgba(255,255,255,0.05), 0 20px 40px rgba(0,0,0,0.5); border-radius: 20px; padding: 25px; color: #ccc; }
.rfe-box-liquid-mercury > *:first-child { background: radial-gradient(circle at 50% 50%, #eee, #999); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; padding: 30px; color:#000; animation: mercuryShift 4s infinite alternate ease-in-out; }
.rfe-box-interactive-water-ripple > *:first-child { overflow: hidden; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color:#fff; padding:25px; box-shadow: 0 10px 30px rgba(0,150,255,0.2); } .rfe-box-interactive-water-ripple > *:first-child::before { content: ''; position: absolute; top: var(--mouse-y, 50%); left: var(--mouse-x, 50%); width: 150px; height: 150px; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 50%); transform: translate(-50%, -50%); mix-blend-mode: overlay; transition: width 0.2s, height 0.2s; pointer-events: none;} .rfe-image-wrapper.rfe-box-interactive-water-ripple:hover > *:first-child::before { width: 300px; height: 300px; }
.rfe-box-liquid-plasma > *:first-child { background: linear-gradient(135deg, #0ff 0%, #00f 100%); color:#fff; padding:25px; overflow:hidden; } .rfe-box-liquid-plasma > *:first-child::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 20%); background-size: 20px 20px; animation: plasmaShift 4s infinite linear; mix-blend-mode: overlay; pointer-events: none;}
.rfe-box-venom-symbiote > *:first-child { background: #000; color:#fff; padding:30px; box-shadow: 0 0 20px rgba(0,0,0,0.8); animation: mercuryShift 3s infinite alternate ease-in-out; border: 2px solid #222; }
.rfe-box-holo-liquid-foil > *:first-child { background: linear-gradient(45deg, #ff007f, #7f00ff, #00ffff); background-size: 300% 300%; animation: holoGradient 4s ease infinite; padding:25px; color:#fff; overflow: hidden; } .rfe-box-holo-liquid-foil > *:first-child::before { content: ''; position: absolute; top: var(--mouse-y, 50%); left: var(--mouse-x, 50%); width: 250px; height: 250px; background: rgba(255,255,255,0.4); filter: blur(30px); transform: translate(-50%, -50%); pointer-events: none; }
.rfe-box-deep-ocean > *:first-child { background: linear-gradient(to bottom, #001f3f, #0074D9); color:#fff; padding:25px; box-shadow: inset 0 20px 50px rgba(0,0,0,0.5); border-radius: 40% 60% 50% 50% / 30% 40% 60% 70%; animation: oceanDistort 5s infinite ease-in-out; }
.rfe-box-ferrofluid-spikes > *:first-child { background: #111; color:#0ff; padding:25px; border-radius: 10px; box-shadow: 0 0 10px #000; overflow:hidden;} .rfe-box-ferrofluid-spikes > *:first-child::after { content: ''; position: absolute; bottom: 0; left: var(--mouse-x, 50%); width: 50px; height: 50px; background: #000; box-shadow: 0 -20px 20px #000; transform: translateX(-50%) rotate(45deg); pointer-events: none; transition: left 0.1s; }
.rfe-box-liquid-gold > *:first-child { background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7); background-size: 200% auto; animation: holoGradient 3s linear infinite; padding:30px; color:#000; border-radius: 10px 40px 10px 40px; }
.rfe-box-ectoplasm-fluid > *:first-child { background: rgba(0, 255, 100, 0.2); border: 2px solid #0f0; box-shadow: 0 0 30px rgba(0,255,100,0.5); color:#fff; padding:25px; animation: mercuryShift 2.5s infinite alternate; backdrop-filter: blur(5px); }
.rfe-box-molten-lava > *:first-child { background: linear-gradient(to top, #ff0000, #ff7f00); color:#fff; padding:25px; box-shadow: 0 10px 30px rgba(255,0,0,0.6); animation: oceanDistort 4s infinite reverse; }
.rfe-box-quantum-fluid > *:first-child { background: #000; color:#fff; padding:25px; overflow:hidden; border-radius: 30px; } .rfe-box-quantum-fluid > *:first-child::before { content: ''; position: absolute; top: var(--mouse-y, 50%); left: var(--mouse-x, 50%); width: 100px; height: 100px; background: radial-gradient(circle, #f0f 0%, #0ff 50%, transparent 100%); filter: blur(20px); transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; }

@keyframes holoGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes boxGlitch { 0% { transform: translate(2px, 2px); } 50% { transform: translate(-2px, -2px); } 100% { transform: translate(2px, -2px); } }
@keyframes auroraAnim { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(60deg); } 100% { filter: hue-rotate(0deg); } }
@keyframes thunderFlash { 0% { opacity: 0.6; } 100% { opacity: 1; filter: blur(15px); } }
@keyframes mercuryShift { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } }
@keyframes plasmaShift { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.5); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes oceanDistort { 0% { border-radius: 40% 60% 50% 50% / 30% 40% 60% 70%; } 50% { border-radius: 50% 50% 60% 40% / 70% 60% 40% 30%; } 100% { border-radius: 40% 60% 50% 50% / 30% 40% 60% 70%; } }

/* ========================================================= */
/* 2. TEXT EFFECTS (23 STYLES)                               */
/* ========================================================= */
.rfe-text-content { display: inline-block; position: relative; }
.rfe-text-glass-look { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.8); text-shadow: 0px 4px 10px rgba(255,255,255,0.3); }
.rfe-text-text-masking { background: url('https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=500') center/cover; -webkit-background-clip: text; color: transparent; animation: maskAnim 10s infinite linear; } @keyframes maskAnim { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.rfe-text-text-3d-anim { transition: transform 0.3s; transform-style: preserve-3d; } .rfe-text-text-3d-anim:hover { transform: rotateX(20deg) rotateY(-20deg); text-shadow: 2px 2px 0 #0ff, 4px 4px 0 #f0f; }
.rfe-text-glitch-text { position: relative; } .rfe-text-glitch-text::before, .rfe-text-glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } .rfe-text-glitch-text::before { left: 2px; text-shadow: -2px 0 #ff00c1; clip-path: inset(45% 0 10% 0); animation: glitchAnimTxt 2s infinite linear alternate-reverse; } .rfe-text-glitch-text::after { left: -2px; text-shadow: -2px 0 #00fff9; clip-path: inset(10% 0 50% 0); animation: glitchAnimTxt 3s infinite linear alternate-reverse; } @keyframes glitchAnimTxt { 0% { clip-path: inset(20% 0 80% 0); } 100% { clip-path: inset(80% 0 20% 0); } }
.rfe-text-neon-glow { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff, 0 0 40px #0ff, 0 0 80px #0ff; animation: neonPulseTxt 1.5s infinite alternate; } @keyframes neonPulseTxt { 100% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #0ff; } }
.rfe-text-wavy-text { animation: waveText 2s infinite ease-in-out; display: inline-block; transform-origin: bottom center; } @keyframes waveText { 0%, 100% { transform: skewX(-15deg); } 50% { transform: skewX(15deg); } }
.rfe-text-glowing-3d { color: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,255,255,.5); }
.rfe-text-marquee-3d { display: inline-block; white-space: nowrap; animation: marquee3d 5s linear infinite; transform: rotateX(20deg); } @keyframes marquee3d { 0% { transform: rotateX(20deg) translateX(100%); } 100% { transform: rotateX(20deg) translateX(-100%); } }
.rfe-text-nabla-color { background: linear-gradient(180deg, #ffb347 0%, #ffcc33 100%); -webkit-background-clip: text; -webkit-text-stroke: 2px #d35400; color: transparent; font-weight: 900; filter: drop-shadow(2px 4px 0px #8e44ad); }
.rfe-text-aurora-text { position: relative; color: #fff; z-index: 2; mix-blend-mode: difference; } .rfe-text-aurora-text::before { content:''; position:absolute; top:-20px; left:-20px; width:calc(100% + 40px); height:calc(100% + 40px); background: radial-gradient(circle, #0ff 0%, #f0f 50%, transparent 100%); z-index:-1; filter:blur(15px); border-radius: 40% 60% / 50% 50%; animation: auroraShape 4s infinite alternate; } @keyframes auroraShape { 0% { border-radius: 40% 60% / 50% 50%; } 100% { border-radius: 60% 40% / 70% 30%; } }
.rfe-text-rainbow-spotlight { background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; color: transparent; background-size: 200% 100%; animation: rainbowSpot 3s linear infinite; clip-path: ellipse(50% 100% at 50% 50%); } @keyframes rainbowSpot { 100% { background-position: -200% 0; } }
.rfe-text-typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid #fff; animation: typing 3s steps(30, end) infinite alternate, blink-caret .5s step-end infinite; max-width: fit-content; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #fff } }
.rfe-text-draw-in { color: transparent; -webkit-text-stroke: 1px #fff; text-shadow: 0 0 10px rgba(255,0,255,0.5); animation: drawInAnim 2s forwards; } @keyframes drawInAnim { 0% { letter-spacing: 20px; opacity: 0; } 100% { letter-spacing: 0; opacity: 1; color: #fff; } }
.rfe-text-anim-bg-text { background: linear-gradient(90deg, #000, #fff, #000); background-size: 200% auto; color: transparent; -webkit-background-clip: text; animation: shineText 3s linear infinite; } @keyframes shineText { to { background-position: 200% center; } }
.rfe-text-gooey-marquee { filter: url('#goo'); display: inline-block; animation: gooMarquee 4s linear infinite; } @keyframes gooMarquee { 0%{ transform:translateX(50px); } 100%{ transform:translateX(-50px); } }
.rfe-text-ghost-ghoul { animation: ghostFade 2s infinite alternate; filter: blur(1px); color: rgba(255,255,255,0.7); text-shadow: 0 5px 10px #fff; } @keyframes ghostFade { 100% { filter: blur(3px); transform: translateY(-10px); opacity:0.3; } }
.rfe-text-schitts-creek { font-family: serif; text-transform: uppercase; letter-spacing: 5px; animation: scaleUp 2s forwards; } @keyframes scaleUp { 0%{ transform: scale(0.8); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
.rfe-text-frame-rotate { border: 2px dashed #fff; padding: 10px; animation: borderRotate 5s linear infinite; } @keyframes borderRotate { 100% { transform: rotate(360deg); } }
.rfe-text-typewriter-multi { overflow: hidden; white-space: nowrap; border-right: 2px solid #0ff; color: #0ff; animation: typing 3s steps(30, end) infinite alternate, colorChangeTxt 6s infinite; max-width: fit-content; } @keyframes colorChangeTxt { 0%{color:#0ff;} 50%{color:#f0f;} 100%{color:#ff0;} }
.rfe-text-gradient-type { background: linear-gradient(90deg, #ff00cc, #3333ff); -webkit-background-clip: text; color: transparent; overflow: hidden; white-space: nowrap; animation: typing 3s steps(30, end) infinite alternate; max-width: fit-content; }
.rfe-text-text-hover-trans { transition: all 0.5s ease; } .rfe-image-wrapper:hover .rfe-text-text-hover-trans { letter-spacing: 10px; color: #0ff; }
.rfe-text-breathe-font { animation: breatheTxt 2s infinite alternate ease-in-out; } @keyframes breatheTxt { 0%{ font-weight: 100; transform: scale(0.95); } 100%{ font-weight: 900; transform: scale(1.05); } }

/* ========================================================= */
/* 3. BUTTON HOVER EFFECTS (16 STYLES)                       */
/* ========================================================= */
.rfe-btn-glitch-btn > *:first-child { transition: all 0.2s; } .rfe-image-wrapper.rfe-btn-glitch-btn:hover > *:first-child { animation: btnGlitch 0.2s infinite; background: #222; color: #fff; box-shadow: 3px 3px 0 #f0f, -3px -3px 0 #0ff; }
.rfe-btn-liquid-fill > *:first-child { position: relative; overflow: hidden; z-index: 1; border: 2px solid #3498db; background: transparent; color: #fff; } .rfe-btn-liquid-fill > *:first-child::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: #3498db; z-index: -1; transition: height 0.4s ease; border-radius: 40% 40% 0 0; } .rfe-image-wrapper.rfe-btn-liquid-fill:hover > *:first-child { color: #fff; } .rfe-image-wrapper.rfe-btn-liquid-fill:hover > *:first-child::before { height: 150%; }
.rfe-btn-matrix-rain > *:first-child { position: relative; overflow: hidden; background: #000; color: #0f0; border: 1px solid #0f0; } .rfe-btn-matrix-rain > *:first-child::before { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 200%; background: repeating-linear-gradient(180deg, transparent, transparent 10px, rgba(0,255,0,0.4) 10px, #0f0 20px); z-index: -1; opacity: 0; transition: opacity 0.3s; } .rfe-image-wrapper.rfe-btn-matrix-rain:hover > *:first-child::before { opacity: 1; animation: matrixFall 1s linear infinite; } @keyframes matrixFall { 100% { transform: translateY(50%); } }
.rfe-btn-neon-pulse > *:first-child { box-shadow: 0 0 10px #0ff; border: 1px solid #0ff; background: transparent; color: #0ff; position: relative; } .rfe-image-wrapper.rfe-btn-neon-pulse:hover > *:first-child { animation: neonBtnPulse 1s infinite; } @keyframes neonBtnPulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,255,0.7); } 100% { box-shadow: 0 0 0 20px rgba(0,255,255,0); } }
.rfe-btn-magnetic-field > *:first-child { position: relative; } .rfe-image-wrapper.rfe-btn-magnetic-field:hover > *:first-child::after { content:''; position:absolute; top:-20px; left:-20px; right:-20px; bottom:-20px; background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.3) 0%, transparent 40%); z-index:-1; border-radius:inherit; }
.rfe-btn-btn-flip > *:first-child { transition: transform 0.6s; transform-style: preserve-3d; position: relative; } .rfe-image-wrapper.rfe-btn-btn-flip:hover > *:first-child { transform: rotateX(180deg); }
.rfe-btn-blob-bottom > *:first-child { overflow: hidden; position: relative; background: #fff; color:#000; } .rfe-btn-blob-bottom > *:first-child::after { content:''; position: absolute; bottom: -50%; left: 50%; transform: translateX(-50%); width: 120%; height: 50%; background: #ff0055; border-radius: 50%; transition: all 0.4s ease; z-index:-1; } .rfe-image-wrapper.rfe-btn-blob-bottom:hover > *:first-child { color: #fff; } .rfe-image-wrapper.rfe-btn-blob-bottom:hover > *:first-child::after { bottom: -10%; border-radius: 0; height: 120%; }
.rfe-image-wrapper.rfe-btn-fizzy-burst:hover > *:first-child { animation: fizzyBurst 0.5s ease-out; } @keyframes fizzyBurst { 0% { box-shadow: 0 0 0 0 #fff; } 50% { box-shadow: 10px -10px 0 0 #f0f, -10px 10px 0 0 #0ff, 15px 5px 0 0 #ff0, -15px -5px 0 0 #0f0; } 100% { box-shadow: 20px -20px 0 -10px transparent, -20px 20px 0 -10px transparent; } }
.rfe-btn-css-3d-spin > *:first-child { transition: transform 0.5s; transform-style: preserve-3d; } .rfe-image-wrapper.rfe-btn-css-3d-spin:hover > *:first-child { transform: rotateY(360deg); }
.rfe-btn-3d-stack > *:first-child { position:relative; } .rfe-image-wrapper.rfe-btn-3d-stack:hover > *:first-child { transform: translate(-5px, -5px); box-shadow: 5px 5px 0 #888, 10px 10px 0 #555, 15px 15px 0 #222; }
.rfe-btn-hover-glow > *:first-child { transition: all 0.3s; } .rfe-image-wrapper.rfe-btn-hover-glow:hover > *:first-child { background: #fff; color: #000; box-shadow: 0 0 20px #fff; }
.rfe-btn-switch-btn > *:first-child { border-radius: 50px; background: #444; transition: 0.3s; padding-left: 40px; position:relative; } .rfe-btn-switch-btn > *:first-child::before { content:''; position:absolute; left:5px; top:50%; transform:translateY(-50%); width:20px; height:20px; background:#fff; border-radius:50%; transition:0.3s; } .rfe-image-wrapper.rfe-btn-switch-btn:hover > *:first-child { background: #0f0; } .rfe-image-wrapper.rfe-btn-switch-btn:hover > *:first-child::before { left: calc(100% - 25px); }
.rfe-btn-gradient-border > *:first-child { position:relative; background:#111; z-index:1; } .rfe-btn-gradient-border > *:first-child::before { content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; background: linear-gradient(45deg, #f0f, #0ff); z-index:-1; border-radius:inherit; transition: 0.5s; } .rfe-image-wrapper.rfe-btn-gradient-border:hover > *:first-child::before { transform: scale(1.05); filter: blur(10px); }
.rfe-btn-svg-draw > *:first-child { border: 2px solid transparent; background-image: linear-gradient(#111, #111), linear-gradient(90deg, #0ff 50%, transparent 50%), linear-gradient(90deg, #0ff 50%, transparent 50%), linear-gradient(0deg, #0ff 50%, transparent 50%), linear-gradient(0deg, #0ff 50%, transparent 50%); background-repeat: no-repeat; background-size: 100% 100%, 200% 2px, 200% 2px, 2px 200%, 2px 200%; background-position: 0 0, 0 0, 100% 100%, 0 100%, 100% 0; background-clip: padding-box, border-box, border-box, border-box, border-box; transition: background-position 0.5s ease-out; } .rfe-image-wrapper.rfe-btn-svg-draw:hover > *:first-child { background-position: 0 0, 100% 0, 0 100%, 0 0, 100% 100%; }
.rfe-btn-play-glow > *:first-child { border-radius: 50%; width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; background: #f00; transition:0.3s; } .rfe-image-wrapper.rfe-btn-play-glow:hover > *:first-child { box-shadow: 0 0 30px #f00; transform: scale(1.1); }

/* ========================================================= */
/* 4. BACKGROUND FILTERS (9 STYLES)                          */
/* ========================================================= */
.rfe-image-wrapper[class*="rfe-bg-"]::before { content: ''; position: absolute; top: -30%; left: -30%; right: -30%; bottom: -30%; z-index: -5; pointer-events: none; border-radius: inherit; transition: opacity 0.5s; }
.rfe-bg-auto-shift::before { animation: bgAutoShift 10s infinite alternate; filter: blur(20px); opacity: 0.6; } @keyframes bgAutoShift { 0% { background: #ff9a9e; } 50% { background: #fecfef; } 100% { background: #a1c4fd; } }
.rfe-bg-floating-balls::before { background: radial-gradient(circle at 20% 30%, rgba(255,0,150,0.4) 0%, transparent 30%), radial-gradient(circle at 80% 70%, rgba(0,204,255,0.4) 0%, transparent 30%); animation: floatBalls 5s infinite alternate linear; filter: blur(30px); } @keyframes floatBalls { 100% { background-position: 100px 50px; } }
.rfe-bg-color-drip::before { background: linear-gradient(to bottom, #ff007f 0%, transparent 100%); background-size: 100% 200%; animation: dripAnim 3s infinite linear; opacity: 0.3; } @keyframes dripAnim { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } }
.rfe-bg-slide-diagonal::before { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 10px, transparent 10px, transparent 20px); background-size: 200% 200%; animation: slideDiag 4s infinite linear; } @keyframes slideDiag { 100% { background-position: 100% 100%; } }
.rfe-bg-rainbow-bg::before { background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); background-size: 400% 400%; animation: holoGradient 5s ease infinite; opacity: 0.4; filter: blur(20px); }
.rfe-bg-css-line-bg::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 1px, transparent 1px, transparent 20px); animation: slideDiag 5s linear infinite; }
.rfe-bg-fluid-svg::before { background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23FF0066" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,81.3,-46C90.8,-32.9,96.8,-16.4,96.5,-0.2C96.2,16.1,89.5,32.1,80,45.2C70.5,58.3,58.2,69.2,44.1,76.5C30,83.8,15,87.4,-0.4,88C-15.8,88.6,-31.6,86.2,-45.5,78.8C-59.4,71.4,-71.4,59.1,-80,45C-88.6,30.9,-93.8,15.4,-94.1,-0.2C-94.4,-15.8,-89.8,-31.6,-81.1,-45.6C-72.4,-59.6,-59.6,-71.8,-45.4,-78.9C-31.2,-86,-15.6,-88,0.2,-88.3C16,-88.6,30.6,-83.6,44.7,-76.4Z" transform="translate(100 100)"/></svg>') no-repeat center/cover; animation: auroraAnim 4s infinite alternate; opacity: 0.2; }
.rfe-bg-star-galaxy-ripple::before { background-image: radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)), radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0)); background-repeat: repeat; background-size: 200px 200px; background-color: #050510; opacity: 0.9; border-radius: 20px; z-index: -6;}
.rfe-bg-star-galaxy-ripple::after { content: ''; position: absolute; top: -30%; left: -30%; right: -30%; bottom: -30%; z-index: -4; pointer-events: none; border-radius: inherit; background: radial-gradient(circle 80px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 255, 255, 0.4) 0%, transparent 100%); mix-blend-mode: screen; transition: background 0.1s; }

/* ========================================================= */
/* 5. FLOATING BASE ANIMATIONS (20 STYLES)                   */
/* ========================================================= */
.rfe-float-none { animation: none !important; transform: none !important; }
.rfe-float-1 { animation: float1 3s ease-in-out infinite; }
.rfe-float-2 { animation: float2 4s ease-in-out infinite; }
.rfe-float-3 { animation: float3 2.5s ease-in-out infinite; }
.rfe-float-4 { animation: float4 3.5s ease-in-out infinite; }
.rfe-float-5 { animation: float5 6s linear infinite; }
.rfe-float-6 { animation: float6 4s ease-in-out infinite; }
.rfe-float-7 { animation: float7 2s ease-in-out infinite; }
.rfe-float-8 { animation: float8 0.5s infinite; }
.rfe-float-9 { transition: transform 0.5s ease; } .rfe-image-wrapper.rfe-float-9:hover { transform: translateY(-20px) scale(1.05); }
.rfe-float-10 { animation: float10 8s infinite linear; }
.rfe-float-11 { animation: float11 4s ease-in-out infinite; } 
.rfe-float-12 { animation: float12 0.2s infinite; } 
.rfe-float-13 { animation: float13 4s ease-in-out infinite alternate; } 
.rfe-float-14 { animation: float14 3s ease-in-out infinite alternate; transform-origin: top center; } 
.rfe-float-15 { animation: float15 10s infinite linear; } 
.rfe-float-16 { animation: float16 2s infinite alternate ease-in-out; } 
.rfe-float-17 { animation: float17 3s infinite linear; } 
.rfe-float-18 { animation: float18 5s infinite linear; } 
.rfe-float-19 { animation: float19 2s infinite; } 
.rfe-float-20 { animation: float20 6s infinite ease-in-out; } 

@keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes float2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
@keyframes float3 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes float4 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -12px); } }
@keyframes float5 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes float6 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes float7 { 0%, 100%{transform: translate(0,0);} 25%{transform: translate(15px, -15px);} 75%{transform: translate(-15px, -15px);} }
@keyframes float8 { 0%, 100%{transform: translate(0,0);} 20%{transform: translate(-2px, 2px);} 40%{transform: translate(2px, -2px);} 60%{transform: translate(-2px, -2px);} 80%{transform: translate(2px, 2px);} }
@keyframes float10 { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.9); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes float11 { 0% { transform: translate(0,0); } 25% { transform: translate(20px, -10px); } 50% { transform: translate(0, -20px); } 75% { transform: translate(-20px, -10px); } 100% { transform: translate(0,0); } }
@keyframes float12 { 0%{transform: translate(0,0);} 25%{transform: translate(-3px, 1px) rotate(-1deg);} 50%{transform: translate(2px, -2px) rotate(1deg);} 75%{transform: translate(-1px, 3px) rotate(0deg);} 100%{transform: translate(1px, -1px) rotate(-1deg);} }
@keyframes float13 { 0% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(1.1); filter: brightness(1.2); } }
@keyframes float14 { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }
@keyframes float15 { 0% { transform: translateY(0) rotate(0deg) scale(1); } 33% { transform: translateY(-30px) rotate(5deg) scale(1.05); } 66% { transform: translateY(15px) rotate(-5deg) scale(0.95); } 100% { transform: translateY(0) rotate(0deg) scale(1); } }
@keyframes float16 { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); border-bottom: 5px solid rgba(0,0,0,0.1); } }
@keyframes float17 { 0% { transform: skewX(0deg); } 25% { transform: skewX(5deg); } 75% { transform: skewX(-5deg); } 100% { transform: skewX(0deg); } }
@keyframes float18 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes float19 { 0%, 90% { transform: translate(0,0) skew(0deg); } 92% { transform: translate(10px, -5px) skew(10deg); } 94% { transform: translate(-10px, 5px) skew(-10deg); } 96% { transform: translate(0,0) skew(0deg); } }
@keyframes float20 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-40px) rotate(3deg); } }

/* ========================================================= */
/* 6. DOUBLE LAYER ENGINE FOR BLOOM ICONS (100% BUG FIX)     */
/* ========================================================= */
/* Outer layer handles the Bloom spreading */
.rfe-bloom-icon { 
    position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; 
    z-index: 1; opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(0.1); 
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.rfe-trigger-none .rfe-bloom-icon, .rfe-filter-none .rfe-bloom-icon { display: none !important; animation: none !important; }
.rfe-image-wrapper:hover .rfe-bloom-icon, .rfe-trigger-continuous .rfe-bloom-icon { 
    opacity: 1; visibility: visible; z-index: 20; transform: translate(var(--tx), var(--ty)) scale(1); 
}

/* Inner layer handles Colors and the actual Animations */
.rfe-icon-inner {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 22px; color: #fff; background: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* === THE ULTIMATE FIX FOR ICONS (FORCE VISIBILITY) === */
.rfe-icon-inner i { display: inline-block !important; font-weight: 900 !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; font-size: 20px !important; z-index: 5 !important; }
.rfe-icon-inner img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; opacity: 1 !important; visibility: visible !important; z-index: 5 !important; }

/* Base Coordinate Map */
.rfe-icon-1 { --tx: -140px; --ty: -140px; } .rfe-icon-2 { --tx: 100px; --ty: -150px; } .rfe-icon-3 { --tx: 150px; --ty: -40px; } .rfe-icon-4 { --tx: 110px; --ty: 110px; } .rfe-icon-5 { --tx: -30px; --ty: 150px; } .rfe-icon-6 { --tx: -150px; --ty: 80px; } .rfe-icon-7 { --tx: -180px; --ty: -40px; } .rfe-icon-8 { --tx: -50px; --ty: -190px; } .rfe-icon-9 { --tx: 180px; --ty: -120px; } .rfe-icon-10 { --tx: 180px; --ty: 80px; } .rfe-icon-11 { --tx: -100px; --ty: 190px; } .rfe-icon-12 { --tx: -200px; --ty: 120px; } .rfe-icon-13 { --tx: 0px; --ty: -230px; } .rfe-icon-14 { --tx: 230px; --ty: -60px; } .rfe-icon-15 { --tx: 200px; --ty: 200px; } .rfe-icon-16 { --tx: -230px; --ty: -20px; } .rfe-icon-17 { --tx: -200px; --ty: -200px; } .rfe-icon-18 { --tx: 80px; --ty: 220px; } .rfe-icon-19 { --tx: -120px; --ty: -240px; } .rfe-icon-20 { --tx: -250px; --ty: 150px; }
.rfe-icon-21 { --tx: 0px; --ty: 230px; } .rfe-icon-22 { --tx: -230px; --ty: 60px; } .rfe-icon-23 { --tx: 240px; --ty: 20px; } .rfe-icon-24 { --tx: 130px; --ty: 230px; } .rfe-icon-25 { --tx: -130px; --ty: 230px; } .rfe-icon-26 { --tx: 230px; --ty: 130px; } .rfe-icon-27 { --tx: -230px; --ty: 130px; } .rfe-icon-28 { --tx: 70px; --ty: -220px; } .rfe-icon-29 { --tx: -70px; --ty: -220px; } .rfe-icon-30 { --tx: 0px; --ty: 150px; }

/* Proper Social Media Colors applied to the Inner Wrapper */
.rfe-icon-inner:has(.fa-facebook), .rfe-icon-inner:has(.fa-facebook-f) { background: #1877F2; } 
.rfe-icon-inner:has(.fa-instagram) { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #285AEB 90%); } 
.rfe-icon-inner:has(.fa-youtube) { background: #FF0000; } 
.rfe-icon-inner:has(.fa-x-twitter), .rfe-icon-inner:has(.fa-tiktok) { background: #000; border: 1px solid #555; } 
.rfe-icon-inner:has(.fa-whatsapp) { background: #25D366; } 
.rfe-icon-inner:has(.fa-linkedin-in) { background: #0077B5; } 
.rfe-icon-inner:has(.fa-snapchat) { background: #FFFC00; color:#000; } 
.rfe-icon-inner:has(.fa-pinterest-p) { background: #E60023; } 
.rfe-icon-inner:has(.fa-telegram) { background: #0088cc; } 
.rfe-icon-inner:has(.fa-discord) { background: #5865F2; } 
.rfe-icon-inner:has(.fa-reddit-alien) { background: #FF4500; }

/* ========================================================= */
/* 7. THE 30 PERFECT BLOOM ANIMATIONS (Inner Layer Only)     */
/* ========================================================= */
.rfe-trigger-continuous.rfe-filter-big-bang .rfe-icon-inner { animation: bigBangExplode 2.5s infinite ease-out; } .rfe-image-wrapper.rfe-filter-big-bang:hover .rfe-icon-inner { animation: bigBangExplode 0.6s ease-out forwards; } @keyframes bigBangExplode { 0% { transform: scale(0); filter: brightness(3); } 30% { transform: scale(1.5); box-shadow: 0 0 50px #fff; } 100% { transform: scale(1); } }
.rfe-trigger-continuous.rfe-filter-galaxy-orbit .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-galaxy-orbit:hover .rfe-icon-inner { animation: galaxyOrbitAnim 6s linear infinite; } @keyframes galaxyOrbitAnim { 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); } }
.rfe-filter-glass-break .rfe-icon-inner { border-radius: 0; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); } .rfe-trigger-continuous.rfe-filter-glass-break .rfe-icon-inner { animation: glassShatter 2.5s infinite cubic-bezier(0.1, 1, 0.2, 1); } .rfe-image-wrapper.rfe-filter-glass-break:hover .rfe-icon-inner { animation: glassShatter 0.6s cubic-bezier(0.1, 1, 0.2, 1) forwards; } @keyframes glassShatter { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 100% { transform: scale(1.5) rotate(720deg) translate(20px, -20px); opacity: 0; } }
.rfe-trigger-continuous.rfe-filter-water-flow .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-water-flow:hover .rfe-icon-inner { animation: waterBlob 3s infinite alternate ease-in-out; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } @keyframes waterBlob { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: translateY(-10px); } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translateY(10px); } }
.rfe-trigger-continuous.rfe-filter-magic-shimmer .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-magic-shimmer:hover .rfe-icon-inner { animation: magicShimmer 2s infinite alternate; } @keyframes magicShimmer { 0% { box-shadow: 0 0 10px #fff, 0 0 20px #ff00ff; } 100% { box-shadow: 0 0 30px #fff, 0 0 60px #00ffff; filter: hue-rotate(90deg) brightness(1.5) scale(1.1); } }
.rfe-trigger-continuous.rfe-filter-live-motion .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-live-motion:hover .rfe-icon-inner { animation: liveBounce 1s infinite alternate cubic-bezier(0.5, 0.05, 1, 0.5); } @keyframes liveBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-30px); } }
.rfe-trigger-continuous.rfe-filter-tornado-spin .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-tornado-spin:hover .rfe-icon-inner { animation: tornadoSpin 4s infinite linear; } @keyframes tornadoSpin { 0% { transform: rotate(0deg) scale(0.5); } 50% { transform: rotate(360deg) scale(1.5); } 100% { transform: rotate(720deg) scale(0.5); } }
.rfe-trigger-continuous.rfe-filter-fireworks-pop .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-fireworks-pop:hover .rfe-icon-inner { animation: fireworksPop 2s infinite ease-out; } @keyframes fireworksPop { 0% { transform: scale(0); opacity:1; } 50% { transform: scale(1.5); box-shadow: 0 0 20px #fff; } 100% { transform: scale(0) translateY(50px); opacity:0; } }
.rfe-trigger-continuous.rfe-filter-blackhole .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-blackhole:hover .rfe-icon-inner { animation: blackholeSuck 3s infinite alternate; filter: grayscale(100%); } @keyframes blackholeSuck { 0% { transform: scale(1); opacity:1; } 100% { transform: scale(0) rotate(720deg); opacity:0; } }
.rfe-trigger-continuous.rfe-filter-heartbeat .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-heartbeat:hover .rfe-icon-inner { animation: heartBeatPulse 1.5s infinite; } @keyframes heartBeatPulse { 0%, 28%, 70% { transform: scale(1); } 14%, 42% { transform: scale(1.3); } }
.rfe-trigger-continuous.rfe-filter-meteor-shower .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-meteor-shower:hover .rfe-icon-inner { animation: meteorShower 2s infinite linear; } @keyframes meteorShower { 0% { transform: translate(50px, -50px) scale(1); opacity:0; } 50% { opacity:1; } 100% { transform: translate(-50px, 50px) scale(0.5); opacity:0; } }
.rfe-trigger-continuous.rfe-filter-quantum-leap .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-quantum-leap:hover .rfe-icon-inner { animation: quantumLeap 1s infinite steps(2, end); } @keyframes quantumLeap { 0%, 100% { transform: translate(0, 0); opacity:1; } 50% { transform: translate(-20px, -20px); opacity:0.5; } }
.rfe-trigger-continuous.rfe-filter-dna-helix .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-dna-helix:hover .rfe-icon-inner { animation: dnaHelix 4s infinite ease-in-out; } @keyframes dnaHelix { 0%, 100% { transform: translateY(-30px) scale(1); } 50% { transform: translateY(30px) scale(0.5); } }
.rfe-trigger-continuous.rfe-filter-radar-sweep .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-radar-sweep:hover .rfe-icon-inner { animation: radarSweep 3s infinite linear; } @keyframes radarSweep { 0%, 20%, 100% { opacity:0; box-shadow:none; } 10% { opacity:1; box-shadow: 0 0 20px #0f0; } }
.rfe-trigger-continuous.rfe-filter-hypnotic-spiral .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-hypnotic-spiral:hover .rfe-icon-inner { animation: hypnoticSpiral 5s infinite linear; } @keyframes hypnoticSpiral { 0% { transform: rotate(0deg) scale(0.1); } 50% { transform: rotate(180deg) scale(1.5); } 100% { transform: rotate(360deg) scale(0.1); } }
.rfe-trigger-continuous.rfe-filter-laser-grid .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-laser-grid:hover .rfe-icon-inner { animation: laserGrid 0.5s infinite alternate steps(5); } @keyframes laserGrid { 0% { transform: translate(0, 0); } 100% { transform: translate(15px, 15px); filter: hue-rotate(90deg); } }
.rfe-trigger-continuous.rfe-filter-bubble-pop .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-bubble-pop:hover .rfe-icon-inner { animation: bubblePop 2s infinite ease-in; background: rgba(255,255,255,0.2) !important; border:1px solid #fff; backdrop-filter: blur(2px); } @keyframes bubblePop { 0% { transform: scale(0.5); opacity:1; } 80% { transform: translateY(-50px) scale(1.5); opacity:0.8; } 100% { transform: translateY(-60px) scale(2); opacity:0; } }
.rfe-trigger-continuous.rfe-filter-time-warp .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-time-warp:hover .rfe-icon-inner { animation: timeWarp 3s infinite cubic-bezier(1, 0, 0, 1); } @keyframes timeWarp { 0% { filter: blur(10px); transform: scale(3); opacity:0; } 50% { filter: blur(0px); transform: scale(1); opacity:1; } 100% { filter: blur(10px); transform: scale(0); opacity:0; } }
.rfe-trigger-continuous.rfe-filter-magnetic-pulse .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-magnetic-pulse:hover .rfe-icon-inner { animation: magPulse 2s infinite alternate; } @keyframes magPulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,255,0.7); transform: scale(1); } 100% { box-shadow: 0 0 0 30px rgba(0,255,255,0); transform: scale(1.1); } }
.rfe-trigger-continuous.rfe-filter-ghost-trail .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-ghost-trail:hover .rfe-icon-inner { animation: ghostTrail 2s infinite linear; opacity: 0.5 !important; filter: blur(2px); } @keyframes ghostTrail { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(15px, 15px); } 50% { transform: translate(-15px, -15px); } }
.rfe-trigger-continuous.rfe-filter-thor-hammer-smash .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-thor-hammer-smash:hover .rfe-icon-inner { animation: hammerSmash 2s infinite cubic-bezier(0.1, 0.9, 0.2, 1); } @keyframes hammerSmash { 0% { transform: translateY(-100px) scale(2); opacity:0; } 20% { transform: translateY(0) scale(1); opacity:1; box-shadow: 0 0 0 0 rgba(255,255,255,0.8); } 40% { box-shadow: 0 0 0 30px rgba(255,255,255,0); } 100% { transform: translateY(0) scale(1); opacity:1; } }
.rfe-trigger-continuous.rfe-filter-chi-energy-burst .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-chi-energy-burst:hover .rfe-icon-inner { animation: chiBurst 3s infinite ease-out; } @keyframes chiBurst { 0% { transform: scale(0); filter: blur(10px); opacity: 1; } 50% { transform: scale(1.5); filter: blur(0px); box-shadow: 0 0 30px #0ff; } 100% { transform: scale(1); opacity: 1; } }
.rfe-trigger-continuous.rfe-filter-spring-bounce .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-spring-bounce:hover .rfe-icon-inner { animation: springBounce 2s infinite; } @keyframes springBounce { 0% { transform: scale(0); } 40% { transform: scale(1.2); } 60% { transform: scale(0.9); } 80% { transform: scale(1.05); } 100% { transform: scale(1); } }
.rfe-trigger-continuous.rfe-filter-fluid-orbit .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-fluid-orbit:hover .rfe-icon-inner { animation: fluidOrbitAnim 4s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); transform-origin: -40px -40px; } @keyframes fluidOrbitAnim { 0% { transform: rotate(0deg) scale(0.8); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(0.8); } }
.rfe-trigger-continuous.rfe-filter-neon-trail .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-neon-trail:hover .rfe-icon-inner { animation: neonTrailMove 2s infinite alternate ease-in-out; } @keyframes neonTrailMove { 0% { box-shadow: -10px 10px 0px rgba(0,255,255,0.4); } 100% { transform: translate(20px, -20px); box-shadow: -20px 20px 0px rgba(255,0,255,0.4); } }
.rfe-trigger-continuous.rfe-filter-magnet-snap .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-magnet-snap:hover .rfe-icon-inner { animation: magnetSnap 3s infinite; } @keyframes magnetSnap { 0% { transform: scale(0.5); opacity:0; } 30% { transform: translate(-30px, 30px) scale(0.8); opacity:0.5; } 35%, 100% { transform: scale(1); opacity:1; box-shadow: 0 0 20px #fff; } }
.rfe-trigger-continuous.rfe-filter-strobe-flash .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-strobe-flash:hover .rfe-icon-inner { animation: strobeFlash 0.5s infinite steps(2, start); } @keyframes strobeFlash { 0% { opacity: 1; filter: invert(0); transform: scale(1.1); } 100% { opacity: 0; filter: invert(1); transform: scale(0.9); } }
.rfe-trigger-continuous.rfe-filter-origami-fold .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-origami-fold:hover .rfe-icon-inner { animation: origamiFold 3s infinite ease-in-out; border-radius: 0; } @keyframes origamiFold { 0% { transform: rotateX(90deg) rotateY(90deg); opacity: 0; } 50%, 100% { transform: rotateX(0deg) rotateY(0deg); opacity: 1; } }
.rfe-trigger-continuous.rfe-filter-supernova-implosion .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-supernova-implosion:hover .rfe-icon-inner { animation: supernovaImp 4s infinite; } @keyframes supernovaImp { 0%, 50%, 100% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(0.2); filter: brightness(0); box-shadow: none; } 45% { transform: scale(2); filter: brightness(5); box-shadow: 0 0 100px #fff; } }
.rfe-trigger-continuous.rfe-filter-confetti-pop .rfe-icon-inner, .rfe-image-wrapper.rfe-filter-confetti-pop:hover .rfe-icon-inner { animation: confettiPop 2s infinite ease-out; } @keyframes confettiPop { 0% { transform: scale(0); opacity: 1; } 40% { transform: scale(1.2); box-shadow: -20px -20px 0px -15px #ff0, 20px -20px 0px -15px #f0f, -20px 20px 0px -15px #0ff, 20px 20px 0px -15px #0f0; } 60% { transform: scale(1); box-shadow: -30px -40px 0px -20px #ff0, 40px -30px 0px -20px #f0f, -40px 30px 0px -20px #0ff, 30px 40px 0px -20px #0f0; } 100% { transform: scale(1); box-shadow: transparent; } }