/* ============================================================
 * FerrumCSS Unified Effects Library
 * Optimized: comments stripped, 72 duplicate keyframes deduplicated,
 * whitespace collapsed.
 *
 * Effects: 906+ | Keyframes: 619 (from 691 original)
 * Prefixes: roycss-* (legacy), rc-* (canonical)
 * ============================================================ */

.roycss-pulse-glow {
animation: roy-pulse-glow 2s ease-in-out infinite;
}

@keyframes roy-pulse-glow {
0%, 100% {
box-shadow: 0 0 5px rgba(16, 185, 129, 0.3),
0 0 10px rgba(16, 185, 129, 0.1);
}
50% {
box-shadow: 0 0 20px rgba(16, 185, 129, 0.6),
0 0 40px rgba(16, 185, 129, 0.3),
0 0 60px rgba(16, 185, 129, 0.1);
}
}

.roycss-bounce-in {
animation: roy-bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

@keyframes roy-bounce-in {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}

.roycss-fade-in-up {
animation: roy-fade-in-up 0.6s ease-out both;
}

@keyframes roy-fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.roycss-rotate-spin {
animation: roy-rotate-spin 2s linear infinite;
}

@keyframes roy-rotate-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.roycss-shake {
animation: roy-shake 0.5s ease-in-out;
}

@keyframes roy-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.roycss-float {
animation: roy-float 3s ease-in-out infinite;
}

@keyframes roy-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}

.roycss-jello {
animation: roy-jello 0.9s ease both;
}

@keyframes roy-jello {
0% { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, 0.85, 1); }
65% { transform: scale3d(0.95, 1.05, 1); }
75% { transform: scale3d(1.05, 0.95, 1); }
100% { transform: scale3d(1, 1, 1); }
}

.roycss-heartbeat {
animation: roy-heartbeat 1.5s ease-in-out infinite;
}

@keyframes roy-heartbeat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.15); }
28% { transform: scale(1); }
42% { transform: scale(1.15); }
70% { transform: scale(1); }
}

.roycss-wobble {
animation: roy-wobble 1s ease-in-out infinite;
}

@keyframes roy-wobble {
0%, 100% { transform: translateX(0) rotate(0deg); }
15% { transform: translateX(-10px) rotate(-5deg); }
30% { transform: translateX(10px) rotate(5deg); }
45% { transform: translateX(-8px) rotate(-3deg); }
60% { transform: translateX(8px) rotate(3deg); }
75% { transform: translateX(-5px) rotate(-2deg); }
}

.roycss-tada {
animation: roy-tada 1s ease infinite;
}

@keyframes roy-tada {
0%, 100% { transform: scale(1) rotate(0); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

.roycss-swing {
transform-origin: top center;
animation: roy-swing 1.2s ease-in-out infinite;
}

@keyframes roy-swing {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
}

.roycss-head-shake {
animation: roy-head-shake 1s ease-in-out;
}

@keyframes roy-head-shake {
0%, 100% { transform: translateX(0); }
6.5% { transform: translateX(-6px) rotateY(-9deg); }
18.5% { transform: translateX(5px) rotateY(7deg); }
31.5% { transform: translateX(-3px) rotateY(-5deg); }
43.5% { transform: translateX(2px) rotateY(3deg); }
50% { transform: translateX(0); }
}

.roycss-rubber-band {
animation: roy-rubber-band 1s ease infinite;
}

@keyframes roy-rubber-band {
0%, 100% { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, 0.75, 1); }
40% { transform: scale3d(0.75, 1.25, 1); }
50% { transform: scale3d(1.15, 0.85, 1); }
65% { transform: scale3d(0.95, 1.05, 1); }
75% { transform: scale3d(1.05, 0.95, 1); }
}

.roycss-slide-in-left {
animation: roy-slide-in-left 0.7s ease-out both;
}

@keyframes roy-slide-in-left {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.roycss-slide-in-right {
animation: roy-slide-in-right 0.7s ease-out both;
}

@keyframes roy-slide-in-right {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.roycss-zoom-in {
animation: roy-zoom-in 0.6s ease-out both;
}

@keyframes roy-zoom-in {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}

.roycss-flip-in-x {
backface-visibility: visible;
animation: roy-flip-in-x 0.9s ease-in both;
}

@keyframes roy-flip-in-x {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}

.roycss-flip-in-y {
backface-visibility: visible;
animation: roy-flip-in-y 0.9s ease-in both;
}

@keyframes roy-flip-in-y {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}

.roycss-light-speed-in {
animation: roy-light-speed-in 0.9s ease-out both;
}

@keyframes roy-light-speed-in {
from {
transform: translate3d(-100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
}
to {
transform: translate3d(0, 0, 0);
}
}

.roycss-roll-in {
animation: roy-roll-in 0.9s ease-out both;
}

@keyframes roy-roll-in {
from {
opacity: 0;
transform: translateX(-100%) rotate(-120deg);
}
to {
opacity: 1;
transform: translateX(0) rotate(0);
}
}

.roycss-jack-in-box {
animation: roy-jack-in-box 1s ease both;
}

@keyframes roy-jack-in-box {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}

.roycss-bounce-out {
animation: roy-bounce-out 1s ease-in both;
}

@keyframes roy-bounce-out {
0% { transform: scale(1); opacity: 1; }
20% { transform: scale(0.9); }
40%, 55% { transform: scale(1.1); opacity: 1; }
80%, 100% { transform: scale(0.3); opacity: 0; }
}

.roycss-fade-out-down {
animation: roy-fade-out-down 0.7s ease-in both;
}

@keyframes roy-fade-out-down {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(40px);
}
}

.roycss-rotate-out {
transform-origin: center;
animation: roy-rotate-out 0.8s ease-in both;
}

@keyframes roy-rotate-out {
from {
opacity: 1;
transform: rotate(0);
}
to {
opacity: 0;
transform: rotate(200deg);
}
}

.roycss-zoom-out {
animation: roy-zoom-out 0.8s ease-in both;
}

@keyframes roy-zoom-out {
0% {
opacity: 1;
transform: scale(0);
}
40%, 50% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}

.roycss-roll-out {
animation: roy-roll-out 0.9s ease-in both;
}

@keyframes roy-roll-out {
from {
opacity: 1;
transform: translateX(0) rotate(0);
}
to {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}

.roycss-flash {
animation: roy-flash 1.2s ease-in-out infinite;
}

@keyframes roy-flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}

.roycss-pulse-soft {
animation: roy-pulse-soft 2.5s ease-in-out infinite;
}

@keyframes roy-pulse-soft {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

.roycss-wiggle {
animation: roy-wiggle 0.8s ease-in-out infinite;
}

@keyframes roy-wiggle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}

.roycss-breathe {
animation: roy-breathe 4s ease-in-out infinite;
}

@keyframes roy-breathe {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.08); opacity: 1; }
}

.roycss-hover-scale {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}

.roycss-hover-scale:hover {
transform: scale(1.08);
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
}

.roycss-hover-underline-slide {
position: relative;
display: inline-block;
text-decoration: none;
}

.roycss-hover-underline-slide::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #10b981, #14b8a6);
transition: width 0.3s ease;
}

.roycss-hover-underline-slide:hover::after {
width: 100%;
}

.roycss-hover-glow-border {
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
transition: all 0.3s ease;
}

.roycss-hover-glow-border::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, #10b981, #14b8a6, #06b6d4);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
filter: blur(8px);
}

.roycss-hover-glow-border:hover::before {
opacity: 1;
}

.roycss-hover-glow-border:hover {
border-color: rgba(16, 185, 129, 0.5);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}

.roycss-hover-shadow-grow {
transition: transform 0.3s ease,
box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.roycss-hover-shadow-grow:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12),
0 4px 8px rgba(0, 0, 0, 0.06);
}

.roycss-hover-color-shift {
background: linear-gradient(135deg, #10b981, #059669);
transition: all 0.4s ease;
background-size: 200% 200%;
background-position: 0% 50%;
}

.roycss-hover-color-shift:hover {
background: linear-gradient(135deg, #f59e0b, #ef4444);
background-size: 200% 200%;
background-position: 100% 50%;
}

.roycss-hover-tilt-rotate {
transition: transform 0.3s ease;
transform-style: preserve-3d;
perspective: 1000px;
}

.roycss-hover-tilt-rotate:hover {
transform: rotateY(8deg) rotateX(-5deg) scale(1.02);
}

.roycss-hover-zoom-blur {
transition: transform 0.4s ease, filter 0.4s ease;
}

.roycss-hover-zoom-blur:hover {
transform: scale(1.12);
filter: blur(0.6px) brightness(1.1);
}

.roycss-hover-overlay-reveal {
position: relative;
overflow: hidden;
transition: color 0.3s ease;
}

.roycss-hover-overlay-reveal::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.85) 100%);
transform: translateY(100%);
transition: transform 0.4s ease;
z-index: 0;
}

.roycss-hover-overlay-reveal:hover::before {
transform: translateY(0);
}

.roycss-hover-overlay-reveal > * {
position: relative;
z-index: 1;
}

.roycss-hover-push-up {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}

.roycss-hover-push-up:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.4);
}

.roycss-hover-slide-overlay {
position: relative;
overflow: hidden;
transition: color 0.3s ease;
}

.roycss-hover-slide-overlay::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #10b981, #06b6d4);
transition: left 0.4s ease;
z-index: 0;
}

.roycss-hover-slide-overlay:hover::before {
left: 0;
}

.roycss-hover-slide-overlay:hover {
color: #ffffff;
}

.roycss-hover-slide-overlay > * {
position: relative;
z-index: 1;
}

.roycss-hover-fade-overlay {
position: relative;
isolation: isolate;
}

.roycss-hover-fade-overlay::after {
content: '';
position: absolute;
inset: 0;
background: rgba(16, 185, 129, 0.35);
opacity: 0;
transition: opacity 0.35s ease;
border-radius: inherit;
z-index: 0;
}

.roycss-hover-fade-overlay:hover::after {
opacity: 1;
}

.roycss-hover-grayscale-to-color {
filter: grayscale(100%);
transition: filter 0.5s ease;
}

.roycss-hover-grayscale-to-color:hover {
filter: grayscale(0%);
}

.roycss-hover-hue-rotate {
transition: filter 0.3s ease;
}

.roycss-hover-hue-rotate:hover {
animation: roy-hue-cycle 2s linear infinite;
}

@keyframes roy-hue-cycle {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}

.roycss-hover-drop-shadow {
transition: filter 0.35s ease, transform 0.35s ease;
}

.roycss-hover-drop-shadow:hover {
transform: translateY(-3px);
filter: drop-shadow(0 8px 14px rgba(16, 185, 129, 0.55));
}

.roycss-hover-skew {
transition: transform 0.3s ease;
}

.roycss-hover-skew:hover {
transform: skew(-12deg, 4deg);
}

.roycss-hover-flip {
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
perspective: 800px;
}

.roycss-hover-flip:hover {
transform: rotateY(180deg);
}

.roycss-hover-rotate {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.roycss-hover-rotate:hover {
transform: rotate(90deg);
}

.roycss-hover-scale-down {
transition: transform 0.3s ease;
}

.roycss-hover-scale-down:hover {
transform: scale(0.9);
}

.roycss-hover-opacity {
transition: opacity 0.3s ease;
}

.roycss-hover-opacity:hover {
opacity: 0.45;
}

.roycss-hover-border-draw {
position: relative;
box-sizing: border-box;
}

.roycss-hover-border-draw::before,
.roycss-hover-border-draw::after {
content: '';
position: absolute;
border: 2px solid #10b981;
box-sizing: border-box;
transition: width 0.3s ease, height 0.3s ease;
width: 0;
height: 0;
}

.roycss-hover-border-draw::before {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}

.roycss-hover-border-draw::after {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}

.roycss-hover-border-draw:hover::before,
.roycss-hover-border-draw:hover::after {
width: 100%;
height: 100%;
}

.roycss-hover-neon-flicker {
transition: box-shadow 0.2s ease;
}

.roycss-hover-neon-flicker:hover {
animation: roy-neon-flicker 1.2s infinite;
}

@keyframes roy-neon-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
box-shadow:
0 0 4px #10b981,
0 0 11px #10b981,
0 0 19px #10b981,
0 0 40px #0d9668,
0 0 80px #0d9668;
}
20%, 24%, 55% {
box-shadow: none;
}
}

.roycss-hover-depth {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.06);
}

.roycss-hover-depth:hover {
transform: translateY(-6px);
box-shadow:
0 4px 8px rgba(16, 185, 129, 0.12),
0 12px 24px rgba(16, 185, 129, 0.18),
0 24px 48px rgba(16, 185, 129, 0.12);
}

.roycss-hover-press {
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 6px 0 #047857, 0 8px 14px rgba(0, 0, 0, 0.3);
}

.roycss-hover-press:hover {
transform: translateY(3px);
box-shadow: 0 3px 0 #047857, 0 5px 10px rgba(0, 0, 0, 0.3);
}

.roycss-hover-slide-right {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.roycss-hover-slide-right:hover {
transform: translateX(12px);
}

.roycss-hover-bounce:hover {
animation: roy-hover-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes roy-hover-bounce {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-18px); }
60% { transform: translateY(-4px); }
}

.roycss-text-gradient {
background: linear-gradient(135deg, #10b981 0%, #14b8a6 40%, #06b6d4 70%, #8b5cf6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
}

.roycss-text-neon-glow {
color: #10b981;
text-shadow:
0 0 7px rgba(16, 185, 129, 0.8),
0 0 10px rgba(16, 185, 129, 0.6),
0 0 21px rgba(16, 185, 129, 0.4),
0 0 42px rgba(16, 185, 129, 0.2),
0 0 82px rgba(16, 185, 129, 0.1);
}

.roycss-text-stroke {
-webkit-text-stroke: 2px currentColor;
color: transparent;
font-weight: 700;
}

.roycss-text-typing-cursor {
border-right: 3px solid #10b981;
animation: roy-text-blink-cursor 1s step-end infinite;
padding-right: 4px;
}

@keyframes roy-text-blink-cursor {
0%, 100% { border-color: #10b981; }
50% { border-color: transparent; }
}

.roycss-text-glitch {
position: relative;
font-weight: 700;
}

.roycss-text-glitch::before,
.roycss-text-glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.roycss-text-glitch::before {
animation: roy-glitch-1 2s infinite linear alternate-reverse;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
color: #ef4444;
}

.roycss-text-glitch::after {
animation: roy-glitch-2 3s infinite linear alternate-reverse;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
color: #06b6d4;
}

@keyframes roy-glitch-1 {
0% { transform: translate(0); }
20% { transform: translate(-3px, 3px); }
40% { transform: translate(-3px, -3px); }
60% { transform: translate(3px, 3px); }
80% { transform: translate(3px, -3px); }
100% { transform: translate(0); }
}

@keyframes roy-glitch-2 {
0% { transform: translate(0); }
20% { transform: translate(3px, -3px); }
40% { transform: translate(3px, 3px); }
60% { transform: translate(-3px, -3px); }
80% { transform: translate(-3px, 3px); }
100% { transform: translate(0); }
}

.roycss-text-3d-shadow {
color: #f0fdf4;
text-shadow:
1px 1px 0 #065f46,
2px 2px 0 #047857,
3px 3px 0 #059669,
4px 4px 0 #10b981,
5px 5px 0 rgba(16, 185, 129, 0.4),
6px 6px 10px rgba(0, 0, 0, 0.3);
font-weight: 700;
}

.roycss-text-rainbow {
background: linear-gradient(
90deg,
#ef4444, #f59e0b, #eab308, #10b981, #06b6d4, #8b5cf6, #ec4899, #ef4444
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
animation: roy-rainbow-flow 4s linear infinite;
}

@keyframes roy-rainbow-flow {
from { background-position: 0% center; }
to { background-position: 200% center; }
}

.roycss-text-shimmer {
background: linear-gradient(
110deg,
#475569 0%,
#475569 35%,
#f1f5f9 50%,
#475569 65%,
#475569 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
animation: roy-shimmer-sweep 3s linear infinite;
}

@keyframes roy-shimmer-sweep {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}

.roycss-text-gradient-shift {
background: linear-gradient(45deg, #10b981, #06b6d4, #8b5cf6, #ec4899, #10b981);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
animation: roy-text-grad-shift 6s ease infinite;
}

@keyframes roy-text-grad-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}

.roycss-text-blur-reveal {
color: #10b981;
font-weight: 700;
animation: roy-blur-reveal 4s ease-in-out infinite;
}

@keyframes roy-blur-reveal {
0%, 100% { filter: blur(8px); opacity: 0.4; }
50% { filter: blur(0); opacity: 1; }
}

.roycss-text-wave {
display: inline-flex;
font-weight: 700;
color: #10b981;
}

.roycss-text-wave > span {
animation: roy-wave 1.5s ease-in-out infinite;
display: inline-block;
}

.roycss-text-wave > span:nth-child(1) { animation-delay: 0s; }
.roycss-text-wave > span:nth-child(2) { animation-delay: 0.1s; }
.roycss-text-wave > span:nth-child(3) { animation-delay: 0.2s; }
.roycss-text-wave > span:nth-child(4) { animation-delay: 0.3s; }
.roycss-text-wave > span:nth-child(5) { animation-delay: 0.4s; }
.roycss-text-wave > span:nth-child(6) { animation-delay: 0.5s; }

@keyframes roy-wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.roycss-text-bounce-letters {
display: inline-flex;
font-weight: 700;
color: #06b6d4;
}

.roycss-text-bounce-letters > span {
display: inline-block;
animation: roy-bounce-letters 1.6s ease-in-out infinite;
}

.roycss-text-bounce-letters > span:nth-child(1) { animation-delay: 0s; }
.roycss-text-bounce-letters > span:nth-child(2) { animation-delay: 0.1s; }
.roycss-text-bounce-letters > span:nth-child(3) { animation-delay: 0.2s; }
.roycss-text-bounce-letters > span:nth-child(4) { animation-delay: 0.3s; }
.roycss-text-bounce-letters > span:nth-child(5) { animation-delay: 0.4s; }
.roycss-text-bounce-letters > span:nth-child(6) { animation-delay: 0.5s; }

@keyframes roy-bounce-letters {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(-14px); }
60% { transform: translateY(-6px); }
}

.roycss-text-flip {
display: inline-block;
font-weight: 700;
color: #8b5cf6;
transform-style: preserve-3d;
perspective: 400px;
animation: roy-text-flip 3s ease-in-out infinite;
}

@keyframes roy-text-flip {
0%, 100% { transform: rotateX(0); }
50% { transform: rotateX(360deg); }
}

.roycss-text-stretch {
font-weight: 700;
color: #f59e0b;
animation: roy-text-stretch 3s ease-in-out infinite;
}

@keyframes roy-text-stretch {
0%, 100% { letter-spacing: 0px; }
50% { letter-spacing: 12px; }
}

.roycss-text-underline-draw {
position: relative;
display: inline-block;
font-weight: 700;
color: #10b981;
}

.roycss-text-underline-draw::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, #10b981, #06b6d4);
transform: scaleX(0);
transform-origin: left center;
animation: roy-underline-draw 2.5s ease-in-out infinite;
}

@keyframes roy-underline-draw {
0% { transform: scaleX(0); transform-origin: left; }
50% { transform: scaleX(1); transform-origin: left; }
50.01% { transform-origin: right; }
100% { transform: scaleX(0); transform-origin: right; }
}

.roycss-text-highlight-marker {
font-weight: 700;
color: #0f172a;
background: linear-gradient(180deg, transparent 50%, #fde047 50%);
padding: 0 4px;
}

.roycss-text-shadow-long {
color: #f0fdf4;
font-weight: 700;
text-shadow:
1px 1px 0 #10b981,
2px 2px 0 #0d9668,
3px 3px 0 #059669,
4px 4px 0 #047857,
5px 5px 0 #065f46,
6px 6px 0 #064e3b,
7px 7px 0 #053b30,
8px 8px 0 #042f24,
9px 9px 0 #03241c,
10px 10px 12px rgba(0, 0, 0, 0.4);
}

.roycss-text-shadow-soft {
color: #f8fafc;
font-weight: 600;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.18),
0 4px 12px rgba(16, 185, 129, 0.25),
0 8px 24px rgba(16, 185, 129, 0.15);
}

.roycss-text-outline-offset {
font-weight: 700;
color: #10b981;
-webkit-text-stroke: 2px rgba(16, 185, 129, 0.5);
text-shadow:
4px 4px 0 rgba(6, 182, 212, 0.5),
8px 8px 0 rgba(139, 92, 246, 0.4);
}

.roycss-text-holographic {
background: conic-gradient(
from 0deg,
#ff6ec7, #ffd93d, #6bcf7f, #4ecdc4, #a78bfa, #ff6ec7
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
filter: drop-shadow(0 0 6px rgba(255, 110, 199, 0.5));
animation: roy-holo-shift 5s linear infinite;
}

@keyframes roy-holo-shift {
from { background-position: 0% 0%; }
to { background-position: 200% 200%; }
}

.roycss-text-chrome {
background: linear-gradient(
180deg,
#fef3c7 0%,
#f8fafc 25%,
#94a3b8 50%,
#f8fafc 75%,
#cbd5e1 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 800;
letter-spacing: 1px;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

.roycss-text-fire {
font-weight: 800;
color: #fde047;
text-shadow:
0 -2px 4px #fef08a,
0 -3px 6px #fde047,
0 -6px 10px #facc15,
0 -10px 16px #f59e0b,
0 -16px 24px #ea580c,
0 -22px 32px #dc2626;
animation: roy-fire-flicker 0.4s ease-in-out infinite alternate;
}

@keyframes roy-fire-flicker {
from { filter: brightness(1) hue-rotate(0deg); }
to { filter: brightness(1.15) hue-rotate(-8deg); }
}

.roycss-text-reflection {
position: relative;
display: inline-block;
font-weight: 700;
color: #06b6d4;
}

.roycss-text-reflection::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 100%;
transform: scaleY(-1);
transform-origin: top;
background: linear-gradient(180deg, rgba(6, 182, 212, 0.5) 0%, transparent 70%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
opacity: 0.6;
pointer-events: none;
}

.roycss-text-mirror {
display: inline-flex;
font-weight: 700;
color: #8b5cf6;
}

.roycss-text-mirror::after {
content: attr(data-text);
transform: scaleX(-1);
margin-left: 0.5ch;
background: linear-gradient(90deg, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

.roycss-text-skew {
display: inline-block;
font-weight: 800;
font-style: italic;
color: #f8fafc;
background: linear-gradient(135deg, #10b981, #06b6d4);
padding: 4px 14px;
transform: skew(-10deg);
letter-spacing: 2px;
text-transform: uppercase;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.roycss-bg-animated-gradient {
background: linear-gradient(-45deg, #065f46, #10b981, #06b6d4, #8b5cf6);
background-size: 400% 400%;
animation: roy-gradient-shift 8s ease infinite;
}

@keyframes roy-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.roycss-bg-dot-pattern {
background-color: #0f172a;
background-image: radial-gradient(circle, #10b981 1px, transparent 1px);
background-size: 24px 24px;
}

.roycss-bg-mesh-gradient {
background-color: #0f172a;
position: relative;
overflow: hidden;
}

.roycss-bg-mesh-gradient::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(at 20% 30%, rgba(16, 185, 129, 0.3) 0, transparent 50%),
radial-gradient(at 80% 20%, rgba(6, 182, 212, 0.25) 0, transparent 50%),
radial-gradient(at 50% 80%, rgba(139, 92, 246, 0.2) 0, transparent 50%);
filter: blur(60px);
}

.roycss-bg-grid-lines {
background-color: #0f172a;
background-image:
linear-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 185, 129, 0.06) 1px, transparent 1px);
background-size: 48px 48px;
}

.roycss-bg-noise {
position: relative;
background-color: #0f172a;
}

.roycss-bg-noise::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
background-repeat: repeat;
pointer-events: none;
z-index: 1;
}

.roycss-bg-aurora {
background: linear-gradient(135deg, #0f172a 0%, #0c1e2e 100%);
position: relative;
overflow: hidden;
}

.roycss-bg-aurora::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
from 0deg at 50% 50%,
transparent 0deg,
rgba(16, 185, 129, 0.15) 60deg,
transparent 120deg,
rgba(6, 182, 212, 0.1) 180deg,
transparent 240deg,
rgba(139, 92, 246, 0.1) 300deg,
transparent 360deg
);
animation: roy-rotate-spin 12s linear infinite;
}

.roycss-bg-stripes {
background: repeating-linear-gradient(
45deg,
#10b981,
#10b981 10px,
#0f172a 10px,
#0f172a 20px
);
}

.roycss-bg-diagonal-stripes {
background-color: #0f172a;
background-image: repeating-linear-gradient(
-60deg,
#06b6d4 0,
#06b6d4 12px,
#0e7490 12px,
#0e7490 24px
);
background-size: 200% 200%;
animation: roy-diagonal-shift 6s linear infinite;
}

@keyframes roy-diagonal-shift {
from { background-position: 0 0; }
to { background-position: 48px 0; }
}

.roycss-bg-checkerboard {
background-color: #0f172a;
background-image:
linear-gradient(45deg, #10b981 25%, transparent 25%),
linear-gradient(-45deg, #10b981 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #10b981 75%),
linear-gradient(-45deg, transparent 75%, #10b981 75%);
background-size: 32px 32px;
background-position: 0 0, 0 16px, 16px -16px, -16px 0;
}

.roycss-bg-hexagon {
background-color: #0f172a;
background-image: url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16.18V50.5L28 66.68L0 50.5V16.18L28 0z' fill='none' stroke='%2310b981' stroke-width='1' opacity='0.5'/%3E%3Cpath d='M28 33.32L56 49.5V83.82L28 100L0 83.82V49.5L28 33.32z' fill='none' stroke='%2310b981' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
background-size: 56px 100px;
}

.roycss-bg-triangles {
background-color: #0f172a;
background-image:
linear-gradient(45deg, #10b981 25%, transparent 25%),
linear-gradient(-45deg, #06b6d4 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #06b6d4 75%),
linear-gradient(-45deg, transparent 75%, #10b981 75%);
background-size: 40px 40px;
background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}

.roycss-bg-zigzag {
background-color: #0f172a;
background-image:
linear-gradient(135deg, #10b981 25%, transparent 25%) -10px 0,
linear-gradient(225deg, #10b981 25%, transparent 25%) -10px 0,
linear-gradient(315deg, #10b981 25%, transparent 25%),
linear-gradient(45deg, #10b981 25%, transparent 25%);
background-size: 20px 20px;
}

.roycss-bg-waves {
background-color: #0c1e2e;
background-image: url("data:image/svg+xml,%3Csvg width='120' height='40' viewBox='0 0 120 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 30 0 60 20 T 120 20' stroke='%2310b981' stroke-width='1.5' fill='none' opacity='0.55'/%3E%3Cpath d='M0 30 Q 30 10 60 30 T 120 30' stroke='%2306b6d4' stroke-width='1.5' fill='none' opacity='0.45'/%3E%3C/svg%3E");
background-size: 120px 40px;
}

.roycss-bg-concentric {
background: repeating-radial-gradient(
circle at center,
#10b981 0,
#10b981 8px,
#0f172a 8px,
#0f172a 16px
);
}

.roycss-bg-radial-rays {
background-color: #0f172a;
background-image: repeating-conic-gradient(
from 0deg at 50% 50%,
#10b981 0deg 4deg,
transparent 4deg 12deg
);
}

.roycss-bg-sunburst {
background-color: #1a1205;
position: relative;
overflow: hidden;
}

.roycss-bg-sunburst::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: repeating-conic-gradient(
from 0deg at 50% 50%,
#fbbf24 0deg 6deg,
#f59e0b 6deg 12deg
);
animation: roy-sunburst-rotate 20s linear infinite;
}

@keyframes roy-sunburst-rotate {
to { transform: rotate(360deg); }
}

.roycss-bg-plaid {
background-color: #0f172a;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(16, 185, 129, 0.4) 18px, rgba(16, 185, 129, 0.4) 20px),
repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(16, 185, 129, 0.4) 18px, rgba(16, 185, 129, 0.4) 20px),
repeating-linear-gradient(45deg, transparent, transparent 24px, rgba(6, 182, 212, 0.3) 24px, rgba(6, 182, 212, 0.3) 26px),
repeating-linear-gradient(-45deg, transparent, transparent 24px, rgba(6, 182, 212, 0.3) 24px, rgba(6, 182, 212, 0.3) 26px);
}

.roycss-bg-conic-gradient {
background: conic-gradient(
from 0deg at 50% 50%,
#10b981,
#06b6d4,
#8b5cf6,
#ec4899,
#f59e0b,
#10b981
);
animation: roy-conic-hue 6s linear infinite;
}

@keyframes roy-conic-hue {
to { filter: hue-rotate(360deg); }
}

.roycss-bg-starfield {
background-color: #050810;
background-image:
radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
radial-gradient(1px 1px at 40px 70px, #ffffff, transparent),
radial-gradient(1px 1px at 90px 40px, #ffffff, transparent),
radial-gradient(2px 2px at 130px 80px, #ffffff, transparent),
radial-gradient(1px 1px at 160px 30px, #ffffff, transparent),
radial-gradient(1px 1px at 50px 120px, #ffffff, transparent),
radial-gradient(2px 2px at 180px 100px, #ffffff, transparent),
radial-gradient(1px 1px at 220px 60px, #ffffff, transparent);
background-size: 250px 150px;
animation: roy-starfield-twinkle 3s ease-in-out infinite alternate;
}

@keyframes roy-starfield-twinkle {
from { opacity: 0.6; }
to { opacity: 1; }
}

.roycss-bg-gradient-sweep {
background: linear-gradient(
90deg,
#0f172a 0%,
#10b981 25%,
#06b6d4 50%,
#10b981 75%,
#0f172a 100%
);
background-size: 200% 100%;
animation: roy-shimmer-sweep 4s linear infinite;
}

.roycss-bg-gradient-pulse {
background-color: #0f172a;
background-image:
radial-gradient(circle at 50% 50%, #10b981 0%, rgba(16, 185, 129, 0) 40%),
radial-gradient(circle at 30% 70%, #06b6d4 0%, rgba(6, 182, 212, 0) 40%),
radial-gradient(circle at 70% 30%, #8b5cf6 0%, rgba(139, 92, 246, 0) 40%);
animation: roy-gradient-pulse 4s ease-in-out infinite;
}

@keyframes roy-gradient-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}

.roycss-bg-lava-lamp {
background-color: #1a0b2e;
position: relative;
overflow: hidden;
}

.roycss-bg-lava-lamp::before,
.roycss-bg-lava-lamp::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(30px);
}

.roycss-bg-lava-lamp::before {
width: 120px;
height: 120px;
background: radial-gradient(circle, #ec4899, transparent);
top: 15%;
left: 15%;
animation: roy-lava-1 6s ease-in-out infinite alternate;
}

.roycss-bg-lava-lamp::after {
width: 150px;
height: 150px;
background: radial-gradient(circle, #f59e0b, transparent);
bottom: 15%;
right: 15%;
animation: roy-lava-2 7s ease-in-out infinite alternate;
}

@keyframes roy-lava-1 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(40px, -30px) scale(1.3); }
}

@keyframes roy-lava-2 {
0% { transform: translate(0, 0) scale(1.2); }
100% { transform: translate(-30px, 40px) scale(0.9); }
}

.roycss-bg-plasma {
background-color: #0f172a;
background-image:
radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.4) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.4) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
linear-gradient(135deg, #0f172a, #1a0b2e);
background-size: 150% 150%, 150% 150%, 200% 200%, 100% 100%;
animation: roy-plasma-flow 12s ease-in-out infinite;
}

@keyframes roy-plasma-flow {
0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
33% { background-position: 50% 30%, 50% 0%, 0% 100%, 0 0; }
66% { background-position: 100% 100%, 0% 50%, 100% 0%, 0 0; }
}

.roycss-bg-smoke {
background-color: #0f172a;
position: relative;
overflow: hidden;
}

.roycss-bg-smoke::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
filter: blur(20px);
animation: roy-smoke-drift 15s ease-in-out infinite;
}

@keyframes roy-smoke-drift {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, -20px) rotate(5deg); }
}

.roycss-bg-sunset {
background: linear-gradient(
180deg,
#0c1e2e 0%,
#5b2c6f 25%,
#c2185b 50%,
#f59e0b 75%,
#fde68a 100%
);
background-size: 100% 200%;
animation: roy-sunset-shift 8s ease-in-out infinite;
}

@keyframes roy-sunset-shift {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 0% 50%; }
}

.roycss-loader-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(16, 185, 129, 0.2);
border-top-color: #10b981;
border-radius: 50%;
animation: roy-sunburst-rotate 0.8s linear infinite;
}

.roycss-loader-dots {
display: flex;
gap: 6px;
align-items: center;
}

.roycss-loader-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #10b981;
animation: roy-bounce-dots 1.4s ease-in-out infinite;
}

.roycss-loader-dots span:nth-child(2) { animation-delay: 0.16s; }
.roycss-loader-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes roy-bounce-dots {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.4;
}
40% {
transform: scale(1);
opacity: 1;
}
}

.roycss-loader-bars {
display: flex;
gap: 3px;
align-items: flex-end;
height: 32px;
}

.roycss-loader-bars span {
width: 4px;
border-radius: 2px;
background: #10b981;
animation: roy-eq-bar 1.2s ease-in-out infinite;
}

.roycss-loader-bars span:nth-child(1) { animation-delay: 0s; }
.roycss-loader-bars span:nth-child(2) { animation-delay: 0.1s; }
.roycss-loader-bars span:nth-child(3) { animation-delay: 0.2s; }
.roycss-loader-bars span:nth-child(4) { animation-delay: 0.3s; }
.roycss-loader-bars span:nth-child(5) { animation-delay: 0.4s; }

@keyframes roy-eq-bar {
0%, 100% { height: 8px; }
50% { height: 28px; }
}

.roycss-loader-orbit {
width: 40px;
height: 40px;
position: relative;
}

.roycss-loader-orbit::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #10b981;
animation: roy-sunburst-rotate 1s linear infinite;
}

.roycss-loader-orbit::after {
content: '';
position: absolute;
top: -3px;
left: 50%;
width: 8px;
height: 8px;
margin-left: -4px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
animation: roy-orbit-move 1s linear infinite;
}

@keyframes roy-orbit-move {
0% { transform: rotate(0deg) translateX(20px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

.roycss-loader-pulse-ring {
width: 40px;
height: 40px;
position: relative;
}

.roycss-loader-pulse-ring::before,
.roycss-loader-pulse-ring::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #10b981;
animation: roy-pulse-ring 1.5s ease-out infinite;
}

.roycss-loader-pulse-ring::after {
animation-delay: 0.5s;
}

@keyframes roy-pulse-ring {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}

.roycss-loader-dual-ring {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid rgba(16, 185, 129, 0.15);
border-top-color: #10b981;
border-bottom-color: #06b6d4;
animation: roy-sunburst-rotate 1.2s linear infinite;
}

.roycss-loader-cube {
width: 40px;
height: 40px;
position: relative;
transform-style: preserve-3d;
animation: roy-loader-cube-rotate 4s linear infinite;
}

.roycss-loader-cube span {
position: absolute;
width: 40px;
height: 40px;
background: rgba(16, 185, 129, 0.7);
border: 1px solid #10b981;
display: block;
}

.roycss-loader-cube span:nth-child(1) { transform: rotateY(0deg) translateZ(20px); }
.roycss-loader-cube span:nth-child(2) { transform: rotateY(90deg) translateZ(20px); }
.roycss-loader-cube span:nth-child(3) { transform: rotateY(180deg) translateZ(20px); }
.roycss-loader-cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(20px); }
.roycss-loader-cube span:nth-child(5) { transform: rotateX(90deg) translateZ(20px); }
.roycss-loader-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(20px); }

@keyframes roy-loader-cube-rotate {
0% { transform: perspective(400px) rotateX(0deg) rotateY(0deg); }
100% { transform: perspective(400px) rotateX(360deg) rotateY(360deg); }
}

.roycss-loader-folding-cube {
width: 40px;
height: 40px;
position: relative;
transform: rotateZ(45deg);
}

.roycss-loader-folding-cube span {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
}

.roycss-loader-folding-cube span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #10b981;
animation: roy-fold-cube 2.4s infinite linear both;
transform-origin: 100% 100%;
}

.roycss-loader-folding-cube span:nth-child(2) { transform: scale(1.1) rotateZ(90deg); }
.roycss-loader-folding-cube span:nth-child(3) { transform: scale(1.1) rotateZ(180deg); }
.roycss-loader-folding-cube span:nth-child(4) { transform: scale(1.1) rotateZ(270deg); }
.roycss-loader-folding-cube span:nth-child(2)::before { animation-delay: 0.3s; }
.roycss-loader-folding-cube span:nth-child(3)::before { animation-delay: 0.6s; }
.roycss-loader-folding-cube span:nth-child(4)::before { animation-delay: 0.9s; }

@keyframes roy-fold-cube {
0%, 10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; }
25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; }
90%, 100% { transform: perspective(140px) rotateY(180deg); opacity: 0; }
}

.roycss-loader-chasing-dots {
width: 40px;
height: 40px;
position: relative;
animation: roy-chasing-rotate 2s infinite linear;
}

.roycss-loader-chasing-dots span {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #10b981;
border-radius: 100%;
animation: roy-chasing-bounce 2s infinite ease-in-out;
}

.roycss-loader-chasing-dots span:nth-child(2) {
top: auto;
bottom: 0;
animation-delay: -1s;
}

@keyframes roy-chasing-rotate {
100% { transform: rotate(360deg); }
}

@keyframes roy-chasing-bounce {
0%, 100% { transform: scale(0); }
50% { transform: scale(1); }
}

.roycss-loader-fading-dots {
width: 80px;
text-align: center;
}

.roycss-loader-fading-dots span {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 2px;
background-color: #10b981;
border-radius: 50%;
animation: roy-fading-dots 1.4s ease-in-out infinite both;
}

.roycss-loader-fading-dots span:nth-child(1) { animation-delay: -0.48s; }
.roycss-loader-fading-dots span:nth-child(2) { animation-delay: -0.32s; }
.roycss-loader-fading-dots span:nth-child(3) { animation-delay: -0.16s; }
.roycss-loader-fading-dots span:nth-child(4) { animation-delay: 0s; }
.roycss-loader-fading-dots span:nth-child(5) { animation-delay: 0.16s; }

@keyframes roy-fading-dots {
0%, 80%, 100% { transform: scale(0); opacity: 0; }
40% { transform: scale(1); opacity: 1; }
}

.roycss-loader-grid {
width: 40px;
height: 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 4px;
}

.roycss-loader-grid span {
background-color: #10b981;
border-radius: 2px;
animation: roy-grid-fade 1.2s ease-in-out infinite;
}

.roycss-loader-grid span:nth-child(1) { animation-delay: 0.4s; }
.roycss-loader-grid span:nth-child(2) { animation-delay: 0.5s; }
.roycss-loader-grid span:nth-child(3) { animation-delay: 0.6s; }
.roycss-loader-grid span:nth-child(4) { animation-delay: 0.3s; }
.roycss-loader-grid span:nth-child(5) { animation-delay: 0.4s; }
.roycss-loader-grid span:nth-child(6) { animation-delay: 0.5s; }
.roycss-loader-grid span:nth-child(7) { animation-delay: 0.2s; }
.roycss-loader-grid span:nth-child(8) { animation-delay: 0.3s; }
.roycss-loader-grid span:nth-child(9) { animation-delay: 0.4s; }

@keyframes roy-grid-fade {
0%, 70%, 100% { transform: scale(1); opacity: 1; }
35% { transform: scale(0); opacity: 0; }
}

.roycss-loader-ripple {
position: relative;
width: 64px;
height: 64px;
}

.roycss-loader-ripple span {
position: absolute;
border: 4px solid #10b981;
opacity: 1;
border-radius: 50%;
animation: roy-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.roycss-loader-ripple span:nth-child(2) { animation-delay: -0.5s; }

@keyframes roy-ripple {
0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
100% { top: 0; left: 0; width: 56px; height: 56px; opacity: 0; }
}

.roycss-loader-square-spin {
width: 40px;
height: 40px;
background-color: #10b981;
border-radius: 4px;
animation: roy-square-spin 3s ease-in-out infinite;
}

@keyframes roy-square-spin {
25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% { transform: perspective(100px) rotateX(0) rotateY(0); }
}

.roycss-loader-bouncing-grid {
width: 42px;
height: 42px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 3px;
}

.roycss-loader-bouncing-grid span {
background-color: #06b6d4;
border-radius: 50%;
animation: roy-bouncing-grid 1.5s ease-in-out infinite;
}

.roycss-loader-bouncing-grid span:nth-child(1) { animation-delay: 0s; }
.roycss-loader-bouncing-grid span:nth-child(2) { animation-delay: 0.1s; }
.roycss-loader-bouncing-grid span:nth-child(3) { animation-delay: 0.2s; }
.roycss-loader-bouncing-grid span:nth-child(4) { animation-delay: 0.1s; }
.roycss-loader-bouncing-grid span:nth-child(5) { animation-delay: 0.2s; }
.roycss-loader-bouncing-grid span:nth-child(6) { animation-delay: 0.3s; }
.roycss-loader-bouncing-grid span:nth-child(7) { animation-delay: 0.2s; }
.roycss-loader-bouncing-grid span:nth-child(8) { animation-delay: 0.3s; }
.roycss-loader-bouncing-grid span:nth-child(9) { animation-delay: 0.4s; }

@keyframes roy-bouncing-grid {
0%, 100% { transform: scale(0.7); opacity: 0.6; }
50% { transform: scale(1.1); opacity: 1; }
}

.roycss-loader-line-scale {
display: flex;
gap: 4px;
align-items: center;
height: 40px;
}

.roycss-loader-line-scale span {
width: 4px;
height: 32px;
background-color: #10b981;
border-radius: 2px;
animation: roy-line-scale 1s ease-in-out infinite;
}

.roycss-loader-line-scale span:nth-child(1) { animation-delay: -0.4s; }
.roycss-loader-line-scale span:nth-child(2) { animation-delay: -0.3s; }
.roycss-loader-line-scale span:nth-child(3) { animation-delay: -0.2s; }
.roycss-loader-line-scale span:nth-child(4) { animation-delay: -0.1s; }
.roycss-loader-line-scale span:nth-child(5) { animation-delay: 0s; }

@keyframes roy-line-scale {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1); }
}

.roycss-loader-pacman {
position: relative;
width: 60px;
height: 40px;
}

.roycss-loader-pacman::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background: #f59e0b;
border-radius: 50%;
clip-path: polygon(100% 35%, 50% 50%, 100% 65%, 50% 100%, 0% 50%, 50% 0%);
animation: roy-pacman-chomp 0.4s ease-in-out infinite alternate;
}

.roycss-loader-pacman::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 4px;
height: 4px;
background: #10b981;
border-radius: 50%;
box-shadow:
-10px 0 0 #10b981,
-20px 0 0 #10b981;
transform: translateY(-50%);
}

@keyframes roy-pacman-chomp {
from { clip-path: polygon(100% 35%, 50% 50%, 100% 65%, 50% 100%, 0% 50%, 50% 0%); }
to { clip-path: polygon(100% 50%, 50% 50%, 100% 50%, 50% 100%, 0% 50%, 50% 0%); }
}

.roycss-loader-circle-fade {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
box-shadow:
0 -20px 0 0 #10b981,
14px -14px 0 0 rgba(16, 185, 129, 0.85),
20px 0 0 0 rgba(16, 185, 129, 0.65),
14px 14px 0 0 rgba(16, 185, 129, 0.45),
0 20px 0 0 rgba(16, 185, 129, 0.3),
-14px 14px 0 0 rgba(16, 185, 129, 0.45),
-20px 0 0 0 rgba(16, 185, 129, 0.65),
-14px -14px 0 0 rgba(16, 185, 129, 0.85);
animation: roy-sunburst-rotate 2s linear infinite;
}

.roycss-loader-circle-notch {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #10b981;
border-top-color: transparent;
border-left-color: transparent;
animation: roy-circle-notch 0.9s linear infinite;
}

@keyframes roy-circle-notch {
0% { transform: rotate(0deg); }
60% { transform: rotate(280deg); }
100% { transform: rotate(360deg); }
}

.roycss-loader-three-bounce {
width: 80px;
text-align: center;
}

.roycss-loader-three-bounce span {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 3px;
border-radius: 50%;
background-color: #10b981;
animation: roy-three-bounce 1.4s ease-in-out infinite both;
}

.roycss-loader-three-bounce span:nth-child(1) { animation-delay: -0.32s; }
.roycss-loader-three-bounce span:nth-child(2) { animation-delay: -0.16s; }

@keyframes roy-three-bounce {
0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}

.roycss-loader-progress-bar {
width: 200px;
height: 8px;
background-color: rgba(16, 185, 129, 0.15);
border-radius: 4px;
position: relative;
overflow: hidden;
}

.roycss-loader-progress-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: linear-gradient(90deg, #10b981, #06b6d4);
border-radius: 4px;
animation: roy-progress-bar 2s ease-in-out infinite;
}

@keyframes roy-progress-bar {
0% { left: -40%; }
50% { left: 50%; }
100% { left: 100%; }
}

.roycss-loader-indeterminate {
width: 200px;
height: 4px;
background-color: rgba(16, 185, 129, 0.15);
border-radius: 2px;
position: relative;
overflow: hidden;
}

.roycss-loader-indeterminate::before,
.roycss-loader-indeterminate::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 40%;
background-color: #10b981;
border-radius: 2px;
}

.roycss-loader-indeterminate::before {
animation: roy-indeterminate 2s linear infinite;
}

.roycss-loader-indeterminate::after {
animation: roy-indeterminate-short 2s linear infinite;
animation-delay: 1s;
}

@keyframes roy-indeterminate {
0% { left: -40%; }
100% { left: 100%; }
}

@keyframes roy-indeterminate-short {
0% { left: -40%; }
50% { left: 60%; }
100% { left: 100%; }
}

.roycss-loader-skeleton {
width: 200px;
height: 12px;
background-color: rgba(255, 255, 255, 0.06);
border-radius: 4px;
position: relative;
overflow: hidden;
}

.roycss-loader-skeleton::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
animation: roy-skeleton-shimmer 1.5s infinite;
}

@keyframes roy-skeleton-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

.roycss-loader-typing {
display: flex;
gap: 4px;
align-items: center;
background-color: rgba(16, 185, 129, 0.1);
padding: 8px 12px;
border-radius: 16px;
}

.roycss-loader-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #10b981;
animation: roy-typing 1.4s infinite ease-in-out;
}

.roycss-loader-typing span:nth-child(1) { animation-delay: 0s; }
.roycss-loader-typing span:nth-child(2) { animation-delay: 0.2s; }
.roycss-loader-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes roy-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-6px); opacity: 1; }
}

.roycss-loader-whale {
width: 50px;
height: 40px;
position: relative;
}

.roycss-loader-whale::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 18px;
background: #06b6d4;
border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px;
animation: roy-whale-float 1.5s ease-in-out infinite;
}

.roycss-loader-whale::after {
content: '';
position: absolute;
bottom: 16px;
left: 50%;
width: 4px;
height: 18px;
background: linear-gradient(to top, #06b6d4, transparent);
border-radius: 2px;
transform: translateX(-50%) scaleY(0);
transform-origin: bottom center;
animation: roy-whale-spout 1.5s ease-in-out infinite;
}

@keyframes roy-whale-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}

@keyframes roy-whale-spout {
0%, 100% { transform: translateX(-50%) scaleY(0); opacity: 0; }
50% { transform: translateX(-50%) scaleY(1); opacity: 1; }
}

.roycss-loader-clock {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid #10b981;
background: transparent;
}

.roycss-loader-clock::before,
.roycss-loader-clock::after {
content: '';
position: absolute;
bottom: 50%;
left: 50%;
width: 2px;
background: #10b981;
transform-origin: bottom center;
border-radius: 2px;
margin-left: -1px;
}

.roycss-loader-clock::before {
height: 12px;
animation: roy-sunburst-rotate 4s linear infinite;
}

.roycss-loader-clock::after {
height: 16px;
animation: roy-sunburst-rotate 1s linear infinite;
}

.roycss-card-flip {
perspective: 1000px;
width: 200px;
height: 120px;
}

.roycss-card-flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}

.roycss-card-flip:hover .roycss-card-flip-inner {
transform: rotateY(180deg);
}

.roycss-card-flip-front,
.roycss-card-flip-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}

.roycss-card-flip-back {
transform: rotateY(180deg);
}

.roycss-perspective-tilt {
transform-style: preserve-3d;
transform: perspective(800px) rotateX(5deg) rotateY(-5deg);
transition: transform 0.4s ease;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}

.roycss-perspective-tilt:hover {
transform: perspective(800px) rotateX(-5deg) rotateY(5deg);
}

.roycss-cube-rotate {
width: 60px;
height: 60px;
transform-style: preserve-3d;
animation: roy-cube-rotate 6s linear infinite;
}

@keyframes roy-cube-rotate {
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}

.roycss-cube-face {
position: absolute;
width: 60px;
height: 60px;
border: 2px solid rgba(16, 185, 129, 0.5);
background: rgba(16, 185, 129, 0.08);
border-radius: 4px;
}

.roycss-depth-shadow {
box-shadow:
1px 1px 0 #065f46,
2px 2px 0 #059669,
3px 3px 0 #047857,
4px 4px 0 #10b981,
5px 5px 0 rgba(16, 185, 129, 0.6),
6px 6px 0 rgba(16, 185, 129, 0.4),
7px 7px 0 rgba(16, 185, 129, 0.2),
8px 8px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}

.roycss-depth-shadow:hover {
transform: translate(-2px, -2px);
box-shadow:
3px 3px 0 #065f46,
4px 4px 0 #059669,
5px 5px 0 #047857,
6px 6px 0 #10b981,
7px 7px 0 rgba(16, 185, 129, 0.6),
8px 8px 0 rgba(16, 185, 129, 0.4),
9px 9px 0 rgba(16, 185, 129, 0.2),
10px 10px 30px rgba(0, 0, 0, 0.2);
}

.roycss-flip-x {
perspective: 800px;
transition: transform 0.6s ease;
transform-style: preserve-3d;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 12px;
}

.roycss-flip-x:hover {
transform: rotateX(180deg);
}

.roycss-flip-y {
perspective: 800px;
transition: transform 0.6s ease;
transform-style: preserve-3d;
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
border-radius: 12px;
}

.roycss-flip-y:hover {
transform: rotateY(180deg);
}

.roycss-rotate-3d {
transform-style: preserve-3d;
background: linear-gradient(135deg, #10b981, #8b5cf6);
border-radius: 12px;
animation: roy-rotate-3d 4s linear infinite;
}

@keyframes roy-rotate-3d {
0% { transform: perspective(800px) rotate3d(1, 1, 1, 0deg); }
100% { transform: perspective(800px) rotate3d(1, 1, 1, 360deg); }
}

.roycss-book-open {
perspective: 1000px;
width: 80px;
height: 60px;
position: relative;
transform-style: preserve-3d;
background: transparent;
}

.roycss-book-open::before,
.roycss-book-open::after {
content: '';
position: absolute;
top: 0;
width: 50%;
height: 100%;
transition: transform 0.8s ease;
border-radius: 2px 8px 8px 2px;
}

.roycss-book-open::before {
left: 0;
background: linear-gradient(135deg, #10b981, #06b6d4);
transform-origin: right center;
}

.roycss-book-open::after {
right: 0;
transform-origin: left center;
background: linear-gradient(225deg, #10b981, #06b6d4);
border-radius: 8px 2px 2px 8px;
}

.roycss-book-open:hover::before {
transform: rotateY(-160deg);
}

.roycss-book-open:hover::after {
transform: rotateY(160deg);
}

.roycss-door-open {
perspective: 800px;
width: 60px;
height: 80px;
position: relative;
background: rgba(16, 185, 129, 0.1);
border: 2px solid rgba(16, 185, 129, 0.3);
border-radius: 4px;
}

.roycss-door-open::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, #10b981, #065f46);
border-radius: 4px;
transform-origin: left center;
transition: transform 0.8s ease;
}

.roycss-door-open:hover::before {
transform: rotateY(-80deg);
}

.roycss-drawer-slide {
perspective: 800px;
width: 80px;
height: 60px;
position: relative;
background: rgba(16, 185, 129, 0.08);
border: 2px solid rgba(16, 185, 129, 0.25);
border-radius: 6px;
}

.roycss-drawer-slide::before {
content: '';
position: absolute;
top: 25%;
left: 10%;
width: 80%;
height: 50%;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 3px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top center;
}

.roycss-drawer-slide:hover::before {
transform: translateY(-50%) rotateX(60deg);
}

.roycss-fold {
perspective: 800px;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 6px;
transition: transform 0.8s ease;
transform-origin: top center;
}

.roycss-fold:hover {
transform: rotateX(90deg);
}

.roycss-accordion-3d {
perspective: 800px;
width: 80px;
height: 60px;
position: relative;
transform-style: preserve-3d;
}

.roycss-accordion-3d::before,
.roycss-accordion-3d::after {
content: '';
position: absolute;
left: 50%;
width: 60px;
height: 16px;
margin-left: -30px;
border-radius: 3px;
transition: transform 0.6s ease;
}

.roycss-accordion-3d::before {
top: 8px;
background: linear-gradient(90deg, #10b981, #06b6d4);
transform-origin: bottom center;
}

.roycss-accordion-3d::after {
bottom: 8px;
background: linear-gradient(90deg, #06b6d4, #8b5cf6);
transform-origin: top center;
}

.roycss-accordion-3d:hover::before {
transform: rotateX(-55deg);
}

.roycss-accordion-3d:hover::after {
transform: rotateX(55deg);
}

.roycss-3d-book {
perspective: 800px;
width: 60px;
height: 80px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-25deg);
transition: transform 0.6s ease;
}

.roycss-3d-book::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #10b981, #065f46);
border-radius: 2px 6px 6px 2px;
box-shadow:
-5px 5px 0 #047857,
-10px 10px 20px rgba(0, 0, 0, 0.3);
}

.roycss-3d-book::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 12px);
height: 4px;
background: #f59e0b;
border-radius: 1px;
}

.roycss-3d-book:hover {
transform: rotateY(-45deg);
}

.roycss-3d-poster {
perspective: 1000px;
width: 80px;
height: 100px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent),
linear-gradient(135deg, #8b5cf6, #ec4899);
border-radius: 6px;
box-shadow:
0 10px 30px rgba(139, 92, 246, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1);
transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
transition: transform 0.5s ease;
}

.roycss-3d-poster:hover {
transform: perspective(1000px) rotateY(15deg) rotateX(-5deg);
}

.roycss-3d-gallery {
perspective: 1000px;
width: 80px;
height: 60px;
position: relative;
transform-style: preserve-3d;
animation: roy-3d-gallery-rotate 8s linear infinite;
}

.roycss-3d-gallery::before,
.roycss-3d-gallery::after {
content: '';
position: absolute;
inset: 0;
border-radius: 6px;
}

.roycss-3d-gallery::before {
background: linear-gradient(135deg, #10b981, #06b6d4);
transform: rotateY(0deg) translateZ(20px);
}

.roycss-3d-gallery::after {
background: linear-gradient(135deg, #ec4899, #8b5cf6);
transform: rotateY(90deg) translateZ(20px);
}

@keyframes roy-3d-gallery-rotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}

.roycss-transform-origin-spin {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 8px;
transform-origin: 0% 0%;
animation: roy-origin-spin 2s linear infinite;
}

@keyframes roy-origin-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.roycss-scale-3d {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #10b981, #065f46);
border-radius: 8px;
transform-style: preserve-3d;
transition: transform 0.5s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.roycss-scale-3d:hover {
transform: perspective(800px) scale3d(1.2, 1.2, 1.2) translateZ(40px);
}

.roycss-skew-3d {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
border-radius: 8px;
transform: perspective(800px) skew(-15deg, 5deg);
transition: transform 0.5s ease;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3);
}

.roycss-skew-3d:hover {
transform: perspective(800px) skew(15deg, -5deg) rotateY(20deg);
}

.roycss-rotate-x {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 8px;
transform-style: preserve-3d;
animation: roy-rotate-x 3s linear infinite;
}

@keyframes roy-rotate-x {
0% { transform: perspective(800px) rotateX(0deg); }
100% { transform: perspective(800px) rotateX(360deg); }
}

.roycss-rotate-y {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
border-radius: 8px;
transform-style: preserve-3d;
animation: roy-rotate-y 3s linear infinite;
}

@keyframes roy-rotate-y {
0% { transform: perspective(800px) rotateY(0deg); }
100% { transform: perspective(800px) rotateY(360deg); }
}

.roycss-btn-shine-sweep {
position: relative;
overflow: hidden;
background: #10b981;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}

.roycss-btn-shine-sweep::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 40%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
pointer-events: none;
}

.roycss-btn-shine-sweep:hover::after {
left: 120%;
}

.roycss-btn-fill-slide {
position: relative;
overflow: hidden;
z-index: 1;
background: transparent;
color: #10b981;
border: 2px solid #10b981;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: color 0.4s ease;
}

.roycss-btn-fill-slide::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background: #10b981;
z-index: -1;
transition: height 0.4s ease;
}

.roycss-btn-fill-slide:hover {
color: #fff;
}

.roycss-btn-fill-slide:hover::before {
height: 100%;
}

.roycss-btn-ripple {
position: relative;
overflow: hidden;
background: #10b981;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}

.roycss-btn-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.45);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
pointer-events: none;
}

.roycss-btn-ripple:active::after {
width: 320px;
height: 320px;
opacity: 1;
transition: 0s;
}

.roycss-btn-border-draw {
position: relative;
background: transparent;
color: #10b981;
border: 2px solid transparent;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
z-index: 1;
}

.roycss-btn-border-draw::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid #10b981;
border-radius: inherit;
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transition: clip-path 0.45s ease;
z-index: -1;
}

.roycss-btn-border-draw:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
background: rgba(16, 185, 129, 0.08);
}

.roycss-btn-glow {
background: #10b981;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}

.roycss-btn-glow:hover {
box-shadow: 0 0 20px rgba(16, 185, 129, 0.6), 0 0 40px rgba(16, 185, 129, 0.3);
}

.roycss-btn-pulse {
background: #ef4444;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: background 0.3s ease;
}

.roycss-btn-pulse:hover {
background: #dc2626;
animation: roy-btn-pulse 0.8s ease-in-out infinite;
}

@keyframes roy-btn-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}

.roycss-btn-bounce {
background: #f59e0b;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}

.roycss-btn-bounce:hover {
animation: roy-btn-bounce 0.7s ease;
}

@keyframes roy-btn-bounce {
0%, 100% { transform: translateY(0); }
20% { transform: translateY(-12px); }
40% { transform: translateY(0); }
60% { transform: translateY(-6px); }
80% { transform: translateY(0); }
}

.roycss-btn-press {
background: #8b5cf6;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
box-shadow: 0 6px 0 #6d28d9, 0 8px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.roycss-btn-press:active {
transform: translateY(6px);
box-shadow: 0 0 0 #6d28d9, 0 2px 6px rgba(0, 0, 0, 0.25);
}

.roycss-btn-lift {
background: #14b8a6;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
box-shadow: 0 4px 10px rgba(20, 184, 166, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roycss-btn-lift:hover {
transform: translateY(-5px);
box-shadow: 0 14px 28px rgba(20, 184, 166, 0.45);
}

.roycss-btn-slide-bg {
position: relative;
overflow: hidden;
background: #0f172a;
color: #f59e0b;
border: 2px solid #f59e0b;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
z-index: 1;
transition: color 0.4s ease;
}

.roycss-btn-slide-bg::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #f59e0b;
z-index: -1;
transition: left 0.4s ease;
}

.roycss-btn-slide-bg:hover {
color: #0f172a;
}

.roycss-btn-slide-bg:hover::before {
left: 0;
}

.roycss-btn-flip {
background: #ec4899;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transform-style: preserve-3d;
transition: transform 0.6s ease, background 0.3s ease;
}

.roycss-btn-flip:hover {
transform: rotateY(360deg);
background: #f43f5e;
}

.roycss-btn-3d-push {
position: relative;
background: #84cc16;
color: #1a2e05;
border: none;
padding: 10px 24px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
box-shadow: 0 5px 0 #65a30d, 0 7px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.roycss-btn-3d-push:hover {
transform: translateY(-2px);
box-shadow: 0 7px 0 #65a30d, 0 10px 18px rgba(0, 0, 0, 0.3);
}

.roycss-btn-3d-push:active {
transform: translateY(5px);
box-shadow: 0 0 0 #65a30d, 0 1px 4px rgba(0, 0, 0, 0.2);
}

.roycss-btn-neon {
background: #0a0a0a;
color: #06b6d4;
border: 2px solid #06b6d4;
padding: 10px 24px;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 0 5px #06b6d4, inset 0 0 5px rgba(6, 182, 212, 0.4);
text-shadow: 0 0 5px #06b6d4;
transition: all 0.3s ease;
}

.roycss-btn-neon:hover {
color: #fff;
box-shadow: 0 0 20px #06b6d4, 0 0 40px #06b6d4, inset 0 0 15px rgba(6, 182, 212, 0.6);
text-shadow: 0 0 10px #fff, 0 0 20px #06b6d4;
}

.roycss-btn-gradient {
background: linear-gradient(45deg, #10b981, #06b6d4, #8b5cf6, #ec4899, #10b981);
background-size: 300% 300%;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
animation: roy-gradient-shift 5s ease infinite;
transition: transform 0.3s ease;
}

.roycss-btn-gradient:hover {
transform: scale(1.06);
}

.roycss-btn-outline-fill {
position: relative;
background: transparent;
color: #f43f5e;
border: 2px solid #f43f5e;
padding: 10px 24px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}

.roycss-btn-outline-fill::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #f43f5e;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: -1;
transition: width 0.5s ease, height 0.5s ease;
}

.roycss-btn-outline-fill:hover {
color: #fff;
}

.roycss-btn-outline-fill:hover::before {
width: 320px;
height: 320px;
}

.roycss-btn-icon-slide {
background: #d946ef;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 0;
transition: padding 0.3s ease, gap 0.3s ease;
}

.roycss-btn-icon-slide::after {
content: '→';
display: inline-block;
opacity: 0;
width: 0;
overflow: hidden;
transform: translateX(-8px);
transition: opacity 0.3s ease, width 0.3s ease, transform 0.3s ease;
font-size: 16px;
}

.roycss-btn-icon-slide:hover {
padding-left: 20px;
padding-right: 32px;
}

.roycss-btn-icon-slide:hover::after {
opacity: 1;
width: 16px;
transform: translateX(0);
}

.roycss-btn-arrow-slide {
background: #f97316;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease, background 0.3s ease;
}

.roycss-btn-arrow-slide::after {
content: '→';
display: inline-block;
transition: transform 0.3s ease;
}

.roycss-btn-arrow-slide:hover {
gap: 16px;
background: #ea580c;
}

.roycss-btn-arrow-slide:hover::after {
transform: translateX(4px);
}

.roycss-btn-border-glow {
background: #1e293b;
color: #14b8a6;
border: 2px solid rgba(20, 184, 166, 0.35);
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}

.roycss-btn-border-glow:hover {
border-color: #14b8a6;
color: #5eead4;
box-shadow: 0 0 18px rgba(20, 184, 166, 0.55), inset 0 0 12px rgba(20, 184, 166, 0.2);
}

.roycss-btn-shadow-push {
background: #ef4444;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
box-shadow: 5px 5px 0 #7f1d1d;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.roycss-btn-shadow-push:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 #7f1d1d;
}

.roycss-btn-shadow-push:active {
transform: translate(5px, 5px);
box-shadow: 0 0 0 #7f1d1d;
}

.roycss-btn-liquid {
background: #06b6d4;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: border-radius 0.4s ease, background 0.4s ease;
}

.roycss-btn-liquid:hover {
border-radius: 8px;
background: #0891b2;
animation: roy-btn-liquid 0.6s ease;
}

@keyframes roy-btn-liquid {
0%, 100% { transform: skew(0); }
25% { transform: skew(-4deg); }
75% { transform: skew(4deg); }
}

.roycss-btn-morph {
background: #8b5cf6;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.roycss-btn-morph:hover {
border-radius: 50%;
padding: 18px 28px;
transform: rotate(8deg);
background: #a78bfa;
}

.roycss-btn-expand {
background: #10b981;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
letter-spacing: 0;
transition: all 0.4s ease;
}

.roycss-btn-expand:hover {
padding: 10px 38px;
letter-spacing: 4px;
background: #059669;
}

.roycss-btn-rotate {
background: #f59e0b;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: transform 0.3s ease, background 0.3s ease;
}

.roycss-btn-rotate:hover {
transform: rotate(-4deg) scale(1.06);
background: #d97706;
}

.roycss-btn-skew {
background: #ec4899;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: transform 0.3s ease, background 0.3s ease;
}

.roycss-btn-skew:hover {
transform: skewX(-15deg);
background: #db2777;
}

.roycss-btn-sparkle {
position: relative;
background: #1e293b;
color: #fde68a;
border: 1px solid #f59e0b;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: color 0.3s ease, box-shadow 0.3s ease;
}

.roycss-btn-sparkle::before,
.roycss-btn-sparkle::after {
content: '✦';
position: absolute;
color: #fbbf24;
font-size: 14px;
opacity: 0;
transition: opacity 0.4s ease, transform 0.5s ease;
pointer-events: none;
}

.roycss-btn-sparkle::before {
top: -6px;
left: 8%;
}

.roycss-btn-sparkle::after {
bottom: -6px;
right: 8%;
}

.roycss-btn-sparkle:hover {
color: #fbbf24;
box-shadow: 0 0 18px rgba(251, 191, 36, 0.55);
}

.roycss-btn-sparkle:hover::before {
opacity: 1;
transform: translateY(-10px) rotate(180deg);
}

.roycss-btn-sparkle:hover::after {
opacity: 1;
transform: translateY(10px) rotate(-180deg);
}

.roycss-card-glassmorphism {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
color: #f1f5f9;
}

.roycss-card-neon {
background: #0f172a;
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 16px;
padding: 24px;
color: #d1fae5;
animation: roy-card-neon 2s ease-in-out infinite alternate;
}

@keyframes roy-card-neon {
from {
box-shadow: 0 0 5px rgba(16, 185, 129, 0.1), inset 0 0 5px rgba(16, 185, 129, 0.05);
}
to {
box-shadow: 0 0 22px rgba(16, 185, 129, 0.5), 0 0 44px rgba(16, 185, 129, 0.2), inset 0 0 22px rgba(16, 185, 129, 0.1);
}
}

.roycss-card-spotlight {
position: relative;
overflow: hidden;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
}

.roycss-card-spotlight::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.6);
opacity: 0;
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}

.roycss-card-spotlight:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

@property --roy-gb-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

.roycss-card-gradient-border {
position: relative;
background: #0f172a;
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
}

.roycss-card-gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(var(--roy-gb-angle), #10b981, #06b6d4, #8b5cf6, #f59e0b, #10b981);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: roy-card-gb-rotate 4s linear infinite;
pointer-events: none;
}

@keyframes roy-card-gb-rotate {
to { --roy-gb-angle: 360deg; }
}

.roycss-card-hover-lift {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.roycss-card-hover-lift:hover {
transform: translateY(-10px);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
border-color: rgba(16, 185, 129, 0.45);
}

.roycss-card-hover-zoom {
background: linear-gradient(135deg, #134e4a, #1e293b);
border: 1px solid rgba(20, 184, 166, 0.25);
border-radius: 16px;
padding: 24px;
color: #ccfbf1;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.roycss-card-hover-zoom:hover {
transform: scale(1.08);
box-shadow: 0 16px 32px rgba(20, 184, 166, 0.3);
}

.roycss-card-hover-flip {
background: #1e293b;
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transform-style: preserve-3d;
transition: transform 0.7s ease, background 0.4s ease, color 0.4s ease;
}

.roycss-card-hover-flip:hover {
transform: rotateY(360deg);
background: linear-gradient(135deg, #10b981, #06b6d4);
color: #fff;
}

.roycss-card-hover-reveal {
position: relative;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
overflow: hidden;
}

.roycss-card-hover-reveal::after {
content: '★ Featured ★';
position: absolute;
bottom: -42px;
left: 0;
right: 0;
background: linear-gradient(90deg, #10b981, #06b6d4);
color: #fff;
padding: 10px;
text-align: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
transition: bottom 0.4s ease;
}

.roycss-card-hover-reveal:hover::after {
bottom: 0;
}

.roycss-card-hover-slide {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.roycss-card-hover-slide:hover {
transform: translateX(14px);
border-color: rgba(16, 185, 129, 0.5);
box-shadow: -12px 0 30px rgba(16, 185, 129, 0.25);
}

.roycss-card-hover-fade {
position: relative;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
overflow: hidden;
}

.roycss-card-hover-fade::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(6, 182, 212, 0.35));
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}

.roycss-card-hover-fade:hover::before {
opacity: 1;
}

.roycss-card-hover-glow {
background: #0f172a;
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.roycss-card-hover-glow:hover {
border-color: rgba(16, 185, 129, 0.85);
box-shadow: 0 0 28px rgba(16, 185, 129, 0.5), 0 0 56px rgba(16, 185, 129, 0.3);
}

.roycss-card-hover-border {
position: relative;
background: #1e293b;
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
}

.roycss-card-hover-border::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid #10b981;
border-radius: inherit;
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transition: clip-path 0.5s ease;
pointer-events: none;
}

.roycss-card-hover-border:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.roycss-card-hover-color {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

.roycss-card-hover-color:hover {
background: linear-gradient(135deg, #10b981, #06b6d4);
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
}

.roycss-card-hover-rotate {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
perspective: 800px;
transform-style: preserve-3d;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.roycss-card-hover-rotate:hover {
transform: rotateX(14deg) rotateY(-14deg);
box-shadow: -10px 14px 30px rgba(0, 0, 0, 0.4);
}

.roycss-card-hover-skew {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.roycss-card-hover-skew:hover {
transform: skew(-8deg, 2deg);
background: linear-gradient(135deg, #8b5cf6, #ec4899);
color: #fff;
}

.roycss-card-hover-push {
position: relative;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transform-style: preserve-3d;
transition: transform 0.35s ease;
}

.roycss-card-hover-push::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: #10b981;
transform: translateZ(-30px);
transition: transform 0.35s ease;
pointer-events: none;
}

.roycss-card-hover-push:hover {
transform: translateZ(25px);
}

.roycss-card-hover-push:hover::before {
transform: translateZ(-55px);
}

.roycss-card-hover-press {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.roycss-card-hover-press:hover {
transform: scale(0.95);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background: #10b981;
color: #fff;
}

.roycss-card-hover-swing {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transform-origin: top center;
transition: transform 0.3s ease;
}

.roycss-card-hover-swing:hover {
animation: roy-card-hover-swing 0.9s ease;
}

@keyframes roy-card-hover-swing {
20% { transform: rotate(9deg); }
40% { transform: rotate(-7deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-3deg); }
100% { transform: rotate(0deg); }
}

.roycss-card-hover-wobble {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.3s ease;
}

.roycss-card-hover-wobble:hover {
animation: roy-card-hover-wobble 0.85s ease;
}

@keyframes roy-card-hover-wobble {
0%, 100% { transform: translateX(0) rotate(0); }
15% { transform: translateX(-9px) rotate(-3deg); }
30% { transform: translateX(8px) rotate(3deg); }
45% { transform: translateX(-6px) rotate(-2deg); }
60% { transform: translateX(5px) rotate(2deg); }
75% { transform: translateX(-3px) rotate(-1deg); }
}

.roycss-card-hover-tada {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.3s ease;
}

.roycss-card-hover-tada:hover {
animation: roy-card-hover-tada 0.95s ease;
}

@keyframes roy-card-hover-tada {
0% { transform: scale(1); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
100% { transform: scale(1) rotate(0); }
}

.roycss-border-animated-dash {
width: 140px;
height: 80px;
background: #0f172a;
border: 3px dashed #10b981;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #d1fae5;
font-size: 12px;
font-weight: 600;
animation: roy-border-dash-glow 1.6s ease-in-out infinite;
}

@keyframes roy-border-dash-glow {
0%, 100% {
border-color: #10b981;
box-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}
50% {
border-color: #34d399;
box-shadow: 0 0 18px rgba(16, 185, 129, 0.65);
}
}

.roycss-border-marching-ants {
width: 140px;
height: 80px;
background-color: #0f172a;
background-image:
repeating-linear-gradient(90deg, #f59e0b 0 6px, transparent 6px 12px),
repeating-linear-gradient(90deg, #f59e0b 0 6px, transparent 6px 12px),
repeating-linear-gradient(0deg, #f59e0b 0 6px, transparent 6px 12px),
repeating-linear-gradient(0deg, #f59e0b 0 6px, transparent 6px 12px);
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fde68a;
font-size: 12px;
font-weight: 600;
animation: roy-border-march 0.7s linear infinite;
}

@keyframes roy-border-march {
to {
background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px;
}
}

.roycss-border-corner-brackets {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
background-image:
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4);
background-position:
top left, top left,
top right, top right,
bottom left, bottom left,
bottom right, bottom right;
background-size:
22px 3px, 3px 22px,
22px 3px, 3px 22px,
22px 3px, 3px 22px,
22px 3px, 3px 22px;
background-repeat: no-repeat;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #67e8f9;
font-size: 12px;
font-weight: 600;
}

.roycss-border-clip-path {
position: relative;
width: 140px;
height: 80px;
background: linear-gradient(135deg, #10b981, #06b6d4);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 600;
}

.roycss-border-clip-path::before {
content: '';
position: absolute;
inset: 3px;
background: #0f172a;
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

@property --roy-bg-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

.roycss-border-gradient-animated {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #e2e8f0;
font-size: 12px;
font-weight: 600;
}

.roycss-border-gradient-animated::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 3px;
background: linear-gradient(var(--roy-bg-angle), #10b981, #ec4899, #f59e0b, #06b6d4, #10b981);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: roy-border-gradient 4s linear infinite;
pointer-events: none;
}

@keyframes roy-border-gradient {
to { --roy-bg-angle: 360deg; }
}

.roycss-border-neon-pulse {
width: 140px;
height: 80px;
background: #0a0a0a;
border: 2px solid #ec4899;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #f9a8d4;
font-size: 12px;
font-weight: 600;
animation: roy-border-neon 1.5s ease-in-out infinite;
}

@keyframes roy-border-neon {
0%, 100% {
border-color: #ec4899;
box-shadow: 0 0 5px #ec4899, inset 0 0 5px #ec4899;
}
50% {
border-color: #f472b6;
box-shadow: 0 0 22px #ec4899, 0 0 44px #ec4899, inset 0 0 16px #ec4899;
}
}

.roycss-border-torn-paper {
width: 140px;
height: 80px;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
clip-path: polygon(
0% 6%, 5% 0%, 12% 6%, 20% 1%, 28% 5%, 35% 0%, 42% 4%, 50% 1%, 58% 5%, 65% 0%, 72% 4%, 80% 1%, 88% 5%, 95% 0%, 100% 6%,
100% 94%, 95% 100%, 88% 94%, 80% 99%, 72% 95%, 65% 100%, 58% 96%, 50% 99%, 42% 95%, 35% 100%, 28% 96%, 20% 99%, 12% 95%, 5% 100%, 0% 94%
);
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
}

.roycss-border-sticker {
width: 140px;
height: 80px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border: 6px solid #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
transform: rotate(-3deg);
}

.roycss-border-ribbon {
width: 140px;
height: 90px;
background: #ef4444;
clip-path: polygon(0 0, 100% 0, 100% 100%, 52% 78%, 0 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
padding-bottom: 14px;
box-sizing: border-box;
}

.roycss-border-banner {
width: 140px;
height: 80px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
padding-right: 16px;
box-sizing: border-box;
}

.roycss-border-frame {
position: relative;
width: 140px;
height: 80px;
background: #1e293b;
border: 3px double #f59e0b;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fde68a;
font-size: 12px;
font-weight: 600;
outline: 1px solid #f59e0b;
outline-offset: 4px;
}

.roycss-border-frame::before {
content: '';
position: absolute;
inset: 5px;
border: 1px solid rgba(245, 158, 11, 0.45);
border-radius: 2px;
pointer-events: none;
}

.roycss-border-polaroid {
width: 140px;
height: 110px;
background: #fff;
padding: 8px 8px 30px;
box-sizing: border-box;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-4deg);
}

.roycss-border-double-glow {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
border: 1px solid #10b981;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #6ee7b7;
font-size: 12px;
font-weight: 600;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), 0 0 24px rgba(16, 185, 129, 0.3), inset 0 0 12px rgba(16, 185, 129, 0.2);
}

.roycss-border-double-glow::before {
content: '';
position: absolute;
inset: -7px;
border: 1px solid rgba(16, 185, 129, 0.45);
border-radius: 12px;
pointer-events: none;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.roycss-border-dashed-draw {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #a78bfa;
font-size: 12px;
font-weight: 600;
}

.roycss-border-dashed-draw::before {
content: '';
position: absolute;
inset: 0;
border: 2px dashed #8b5cf6;
border-radius: inherit;
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transition: clip-path 0.6s ease;
pointer-events: none;
}

.roycss-border-dashed-draw:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.roycss-border-inset-glow {
width: 140px;
height: 80px;
background: #0a0a0a;
border: 1px solid rgba(6, 182, 212, 0.5);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #67e8f9;
font-size: 12px;
font-weight: 600;
box-shadow:
inset 0 0 22px rgba(6, 182, 212, 0.4),
inset 0 0 4px rgba(6, 182, 212, 0.7);
}

.roycss-filter-vintage {
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 40%, #ff9ff3 80%, #48dbfb 100%);
filter: sepia(0.55) saturate(0.8) contrast(0.9) brightness(0.95) hue-rotate(-10deg);
}

.roycss-filter-cinematic {
background: linear-gradient(135deg, #f12711 0%, #f5af19 40%, #2193b0 80%, #6dd5ed 100%);
filter: contrast(1.25) saturate(1.3) brightness(0.92) hue-rotate(-8deg) sepia(0.18);
}

.roycss-filter-dramatic {
background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 30%, #ff758c 60%, #ff7e5f 100%);
filter: contrast(1.6) saturate(1.5) brightness(0.82);
}

.roycss-filter-dreamy {
background: linear-gradient(135deg, #c471f5 0%, #fa71cd 40%, #89f7fe 100%);
filter: blur(1.2px) brightness(1.18) saturate(1.4) contrast(0.92);
}

.roycss-filter-glitch {
background: linear-gradient(135deg, #00f260 0%, #0575e6 50%, #f7971e 100%);
animation: roy-filter-glitch 1.2s steps(2, end) infinite;
}
@keyframes roy-filter-glitch {
0%   { filter: hue-rotate(0deg) saturate(1.5); }
20%  { filter: hue-rotate(60deg) saturate(2) contrast(1.3); }
40%  { filter: hue-rotate(180deg) saturate(1.8) invert(0.15); }
60%  { filter: hue-rotate(270deg) saturate(2.5) contrast(1.1); }
80%  { filter: hue-rotate(120deg) saturate(1.6); }
100% { filter: hue-rotate(360deg) saturate(1.5); }
}

.roycss-filter-duotone {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 50%, #fbc2eb 100%);
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(3) contrast(1.3);
}

.roycss-filter-halftone {
background:
radial-gradient(circle, rgba(0,0,0,0.85) 1px, transparent 1.6px) 0 0 / 5px 5px,
linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #ffe66d 100%);
filter: contrast(1.4) saturate(1.3);
}

.roycss-filter-emboss {
background: linear-gradient(135deg, #414d0b 0%, #727a17 50%, #d7e850 100%);
filter: grayscale(1) brightness(1.1) contrast(1.4)
drop-shadow(2px 2px 1px rgba(255,255,255,0.5))
drop-shadow(-2px -2px 1px rgba(0,0,0,0.6));
}

.roycss-filter-blur-focus {
background: linear-gradient(135deg, #f7797d 0%, #fbd786 50%, #c6ffdd 100%);
filter: blur(8px) saturate(1.2);
animation: roy-filter-blur-focus 3s ease-in-out infinite;
}
@keyframes roy-filter-blur-focus {
0%, 100% { filter: blur(8px) saturate(1.2); }
50%      { filter: blur(0px) saturate(1.4); }
}

.roycss-filter-grayscale-hover {
background: linear-gradient(135deg, #fc466b 0%, #3f5efb 50%, #fc466b 100%);
filter: grayscale(1) brightness(0.85);
transition: filter 0.5s ease;
}
.roycss-filter-grayscale-hover:hover {
filter: grayscale(0) brightness(1) saturate(1.3);
}

.roycss-filter-sepia {
background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 50%, #fef9d7 100%);
filter: sepia(0.85) contrast(1.1) brightness(1.05);
}

.roycss-filter-hue-rotate {
background: linear-gradient(135deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%);
animation: roy-filter-hue-rotate 4s linear infinite;
}
@keyframes roy-filter-hue-rotate {
0%   { filter: hue-rotate(0deg) saturate(1.5); }
100% { filter: hue-rotate(360deg) saturate(1.5); }
}

.roycss-filter-invert {
background: linear-gradient(135deg, #ff6a00 0%, #ee0979 50%, #ff6a00 100%);
filter: invert(1) hue-rotate(180deg);
}

.roycss-filter-saturate {
background: linear-gradient(135deg, #c94b4b 0%, #4b134f 50%, #c94b4b 100%);
filter: saturate(3.2) contrast(1.1);
}

.roycss-filter-contrast {
background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 50%, #bdc3c7 100%);
filter: contrast(2.4) brightness(1.05);
}

.roycss-form-focus-glow {
position: relative;
width: 170px;
height: 40px;
padding: 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.55);
transition: all 0.3s ease;
}
.roycss-form-focus-glow > span { display: none; }
.roycss-form-focus-glow::before { content: "you@example.com"; }
.roycss-form-focus-glow::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
background: linear-gradient(135deg, #10b981, #34d399);
border-radius: 50%;
opacity: 0;
transform: scale(0.4);
transition: all 0.3s ease;
}
.roycss-form-focus-glow:hover {
border-color: #10b981;
background: rgba(16,185,129,0.06);
color: #ecfdf5;
box-shadow: 0 0 0 3px rgba(16,185,129,0.18), 0 0 24px rgba(16,185,129,0.35);
}
.roycss-form-focus-glow:hover::after {
opacity: 1;
transform: scale(1);
}

.roycss-form-label-float {
position: relative;
width: 170px;
height: 48px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px;
transition: all 0.3s ease;
}
.roycss-form-label-float > span { display: none; }
.roycss-form-label-float::before {
content: "Full name";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font: 13px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.5);
transition: all 0.25s ease;
pointer-events: none;
}
.roycss-form-label-float::after {
content: "Roy Wanyoike";
position: absolute;
left: 14px;
top: 24px;
font: 12px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.85);
}
.roycss-form-label-float:hover {
border-color: #10b981;
background: rgba(16,185,129,0.05);
}
.roycss-form-label-float:hover::before {
top: 9px;
font-size: 9px;
color: #10b981;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.roycss-form-placeholder-shimmer {
position: relative;
width: 180px;
height: 40px;
padding: 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
overflow: hidden;
}
.roycss-form-placeholder-shimmer > span { display: none; }
.roycss-form-placeholder-shimmer::before {
content: "Start typing...";
background: linear-gradient(90deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.95) 50%,
rgba(255,255,255,0.3) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: roy-form-shimmer 2s linear infinite;
}
@keyframes roy-form-shimmer {
0%   { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

.roycss-form-error-shake {
position: relative;
width: 160px;
height: 40px;
padding: 0 14px;
background: rgba(239,68,68,0.08);
border: 1px solid #ef4444;
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
color: #fca5a5;
animation: roy-form-error-shake 0.5s ease-in-out infinite;
}
.roycss-form-error-shake > div { display: none; }
.roycss-form-error-shake::before { content: "⚠  Invalid email"; }
@keyframes roy-form-error-shake {
0%, 100% { transform: translateX(0); }
20%      { transform: translateX(-5px); }
40%      { transform: translateX(5px); }
60%      { transform: translateX(-3px); }
80%      { transform: translateX(3px); }
}

.roycss-form-success-check {
position: relative;
width: 160px;
height: 40px;
padding: 0 14px 0 38px;
background: rgba(16,185,129,0.1);
border: 1px solid #10b981;
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
color: #6ee7b7;
}
.roycss-form-success-check > div { display: none; }
.roycss-form-success-check::before { content: "Submitted!"; }
.roycss-form-success-check::after {
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 16px;
height: 8px;
margin-top: -4px;
border-left: 2px solid #10b981;
border-bottom: 2px solid #10b981;
transform: rotate(-45deg) scale(0);
animation: roy-form-check 0.6s 0.2s ease-out forwards;
}
@keyframes roy-form-check {
0%   { transform: rotate(-45deg) scale(0); }
60%  { transform: rotate(-45deg) scale(1.4); }
100% { transform: rotate(-45deg) scale(1); }
}

.roycss-form-toggle-switch {
position: relative;
width: 54px;
height: 28px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 14px;
transition: background 0.3s ease, border-color 0.3s ease;
}
.roycss-form-toggle-switch > div {
width: 22px !important;
height: 22px !important;
margin: 0 !important;
background: #fff !important;
border-radius: 50% !important;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.roycss-form-toggle-switch:hover {
background: #10b981;
border-color: #10b981;
}
.roycss-form-toggle-switch:hover > div {
transform: translateX(26px);
}

.roycss-form-checkbox-custom {
position: relative;
width: 32px;
height: 32px;
background: transparent;
border: 2px solid #10b981;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
}
.roycss-form-checkbox-custom > div { display: none; }
.roycss-form-checkbox-custom::after {
content: "";
width: 14px;
height: 7px;
border-left: 2px solid #10b981;
border-bottom: 2px solid #10b981;
transform: rotate(-45deg) translate(1px, -1px) scale(0);
animation: roy-form-checkbox 0.5s 0.2s ease-out forwards;
}
@keyframes roy-form-checkbox {
0%   { transform: rotate(-45deg) translate(1px, -1px) scale(0); }
60%  { transform: rotate(-45deg) translate(1px, -1px) scale(1.3); }
100% { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
}

.roycss-form-radio-custom {
position: relative;
width: 32px;
height: 32px;
background: transparent;
border: 2px solid #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.roycss-form-radio-custom > div { display: none; }
.roycss-form-radio-custom::after {
content: "";
width: 14px;
height: 14px;
background: #10b981;
border-radius: 50%;
transform: scale(0.4);
animation: roy-form-radio 0.9s ease-in-out infinite alternate;
}
@keyframes roy-form-radio {
0%   { transform: scale(0.5); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}

.roycss-form-search-expand {
position: relative;
width: 56px;
height: 40px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 20px;
display: flex;
align-items: center;
padding: 0 14px;
font: 12px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.6);
overflow: hidden;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s ease;
}
.roycss-form-search-expand > span { display: none; }
.roycss-form-search-expand::before {
content: "";
width: 14px;
height: 14px;
border: 2px solid #10b981;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 6px 6px 0 -1px #10b981;
transform: rotate(-45deg);
}
.roycss-form-search-expand::after {
content: "Search docs...";
margin-left: 12px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s 0.2s ease;
}
.roycss-form-search-expand:hover {
width: 200px;
border-color: #10b981;
background: rgba(16,185,129,0.05);
}
.roycss-form-search-expand:hover::after { opacity: 1; }

.roycss-form-underline-draw {
position: relative;
width: 180px;
height: 40px;
padding: 0 4px;
background: transparent;
border: none;
border-bottom: 2px solid rgba(255,255,255,0.18);
display: flex;
align-items: center;
font: 13px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
}
.roycss-form-underline-draw > span { display: none; }
.roycss-form-underline-draw::before { content: "@username"; }
.roycss-form-underline-draw::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: linear-gradient(90deg, #10b981, #34d399, #10b981);
transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.roycss-form-underline-draw:hover {
color: #ecfdf5;
}
.roycss-form-underline-draw:hover::after { width: 100%; }

.roycss-nav-menu-slide {
position: relative;
width: 220px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
overflow: hidden;
letter-spacing: 0.15em;
}
.roycss-nav-menu-slide > span { display: none; }
.roycss-nav-menu-slide::before {
content: "HOME   ABOUT   WORK   BLOG";
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.roycss-nav-menu-slide::after {
content: "→ HOME   ABOUT   WORK   BLOG";
position: absolute;
left: 0; right: 0;
top: 100%;
text-align: center;
color: #10b981;
transition: top 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.roycss-nav-menu-slide:hover::before { transform: translateY(-100%); }
.roycss-nav-menu-slide:hover::after  { top: 50%; transform: translateY(-50%); }

.roycss-nav-menu-fade {
position: relative;
width: 220px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
overflow: hidden;
letter-spacing: 0.15em;
}
.roycss-nav-menu-fade > span { display: none; }
.roycss-nav-menu-fade::before {
content: "DASHBOARD   PROJECTS   TEAM";
transition: opacity 0.3s ease, transform 0.3s ease;
}
.roycss-nav-menu-fade::after {
content: "▸ DASHBOARD   PROJECTS   TEAM";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #10b981;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.roycss-nav-menu-fade:hover::before {
opacity: 0;
transform: scale(1.1);
}
.roycss-nav-menu-fade:hover::after {
opacity: 1;
transform: scale(1);
}

.roycss-nav-menu-scale {
position: relative;
width: 220px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
letter-spacing: 0.15em;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.roycss-nav-menu-scale > span { display: none; }
.roycss-nav-menu-scale::before { content: "HOME  ABOUT  SERVICES  CONTACT"; }
.roycss-nav-menu-scale::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid #10b981;
border-radius: 10px;
opacity: 0;
transform: scale(0.94);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.roycss-nav-menu-scale:hover {
background: rgba(16,185,129,0.08);
color: #10b981;
transform: scale(1.06);
letter-spacing: 0.22em;
}
.roycss-nav-menu-scale:hover::after {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 22px rgba(16,185,129,0.35);
}

.roycss-nav-accordion {
position: relative;
width: 180px;
height: 34px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.8);
overflow: hidden;
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s ease;
}
.roycss-nav-accordion > span { display: none; }
.roycss-nav-accordion::before {
content: "▸  Menu Item";
display: block;
padding: 11px 14px;
color: rgba(255,255,255,0.8);
transition: color 0.3s ease;
}
.roycss-nav-accordion::after {
content: "Sub 1  ·  Sub 2  ·  Sub 3";
display: block;
padding: 0 14px 10px 28px;
color: rgba(16,185,129,0.75);
font-size: 10px;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.roycss-nav-accordion:hover {
height: 70px;
border-color: rgba(16,185,129,0.4);
}
.roycss-nav-accordion:hover::before {
content: "▾  Menu Item";
color: #10b981;
}
.roycss-nav-accordion:hover::after {
opacity: 1;
transform: translateY(0);
}

.roycss-nav-tabs-underline {
position: relative;
width: 200px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.6);
letter-spacing: 0.12em;
}
.roycss-nav-tabs-underline > span { display: none; }
.roycss-nav-tabs-underline::before { content: "TAB 1     TAB 2     TAB 3"; }
.roycss-nav-tabs-underline::after {
content: "";
position: absolute;
left: 24px;
bottom: 0;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #10b981, #34d399);
border-radius: 1px;
animation: roy-nav-tabs-underline 3s ease-in-out infinite;
}
@keyframes roy-nav-tabs-underline {
0%, 100% { left: 24px; }
33%      { left: 80px; }
66%      { left: 136px; }
}

.roycss-nav-breadcrumb {
position: relative;
width: 240px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font: 11px/1 system-ui, sans-serif;
letter-spacing: 0.05em;
}
.roycss-nav-breadcrumb > span { display: none; }
.roycss-nav-breadcrumb::before {
content: "Home  ›  Shop  ›  Electronics  ›  Phones";
color: rgba(255,255,255,0.5);
}
.roycss-nav-breadcrumb::after {
content: "";
position: absolute;
bottom: 2px;
left: 50%;
width: 40px;
height: 2px;
background: #10b981;
border-radius: 1px;
transform: translateX(-50%);
animation: roy-nav-breadcrumb 3s ease-in-out infinite;
}
@keyframes roy-nav-breadcrumb {
0%, 100% { transform: translateX(-180%); }
50%      { transform: translateX(80%); }
}

.roycss-nav-pagination {
position: relative;
width: 200px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.6);
letter-spacing: 0.3em;
}
.roycss-nav-pagination > span { display: none; }
.roycss-nav-pagination::before { content: "‹   1   2   3   4   5   ›"; }
.roycss-nav-pagination::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 1.5px solid #10b981;
border-radius: 50%;
background: rgba(16,185,129,0.15);
animation: roy-nav-pagination 3.5s steps(5, end) infinite;
}
@keyframes roy-nav-pagination {
0%   { transform: translateX(-44px); }
20%  { transform: translateX(-22px); }
40%  { transform: translateX(0); }
60%  { transform: translateX(22px); }
80%, 100% { transform: translateX(44px); }
}

.roycss-nav-stepper {
position: relative;
width: 220px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.roycss-nav-stepper > span { display: none; }
.roycss-nav-stepper::before {
content: "";
width: 180px;
height: 4px;
border-radius: 2px;
background:
linear-gradient(90deg, #10b981 0 66%, rgba(255,255,255,0.2) 66% 100%),
repeating-linear-gradient(90deg,
transparent 0 42px,
rgba(255,255,255,0.6) 42px 46px,
transparent 46px 88px,
rgba(255,255,255,0.6) 88px 92px,
transparent 92px 134px,
rgba(255,255,255,0.6) 134px 138px,
transparent 138px 180px);
}
.roycss-nav-stepper::after {
content: "Step 3 of 4";
position: absolute;
bottom: 4px;
font: 10px/1 system-ui, sans-serif;
color: #10b981;
letter-spacing: 0.18em;
text-transform: uppercase;
}

.roycss-nav-progress-indicator {
position: relative;
width: 120px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.roycss-nav-progress-indicator > div { display: none; }
.roycss-nav-progress-indicator::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
box-shadow:
16px 0 0 rgba(255,255,255,0.25),
32px 0 0 rgba(255,255,255,0.25),
48px 0 0 rgba(255,255,255,0.25),
64px 0 0 rgba(255,255,255,0.25);
animation: roy-nav-progress 1.6s steps(5, end) infinite;
}
@keyframes roy-nav-progress {
0%   { background: #10b981; box-shadow:
16px 0 0 rgba(255,255,255,0.25),
32px 0 0 rgba(255,255,255,0.25),
48px 0 0 rgba(255,255,255,0.25),
64px 0 0 rgba(255,255,255,0.25); }
20%  { background: rgba(255,255,255,0.25); box-shadow:
16px 0 0 #10b981,
32px 0 0 rgba(255,255,255,0.25),
48px 0 0 rgba(255,255,255,0.25),
64px 0 0 rgba(255,255,255,0.25); }
40%  { background: rgba(255,255,255,0.25); box-shadow:
16px 0 0 rgba(255,255,255,0.25),
32px 0 0 #10b981,
48px 0 0 rgba(255,255,255,0.25),
64px 0 0 rgba(255,255,255,0.25); }
60%  { background: rgba(255,255,255,0.25); box-shadow:
16px 0 0 rgba(255,255,255,0.25),
32px 0 0 rgba(255,255,255,0.25),
48px 0 0 #10b981,
64px 0 0 rgba(255,255,255,0.25); }
80%, 100% { background: rgba(255,255,255,0.25); box-shadow:
16px 0 0 rgba(255,255,255,0.25),
32px 0 0 rgba(255,255,255,0.25),
48px 0 0 rgba(255,255,255,0.25),
64px 0 0 #10b981; }
}

.roycss-nav-dropdown {
position: relative;
width: 180px;
height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.8);
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s ease;
}
.roycss-nav-dropdown > span { display: none; }
.roycss-nav-dropdown::before {
content: "Select option    ▾";
white-space: nowrap;
}
.roycss-nav-dropdown::after {
content: "↳ First choice\A ↳ Second choice\A ↳ Third choice";
white-space: pre;
position: absolute;
top: 34px;
left: 0;
right: 0;
padding: 6px 14px 10px;
background: rgba(16,185,129,0.08);
color: #6ee7b7;
font-size: 10px;
line-height: 1.7;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.roycss-nav-dropdown:hover {
height: 86px;
border-color: rgba(16,185,129,0.4);
}
.roycss-nav-dropdown:hover::before { color: #10b981; }
.roycss-nav-dropdown:hover::after {
opacity: 1;
transform: translateY(0);
}

.roycss-misc-confetti {
background:
radial-gradient(circle at 15% 0%, #ff6b6b 0 3px, transparent 4px) 0 0 / 40px 40px,
radial-gradient(circle at 45% 0%, #feca57 0 3px, transparent 4px) 0 0 / 55px 55px,
radial-gradient(circle at 75% 0%, #48dbfb 0 3px, transparent 4px) 0 0 / 45px 45px,
radial-gradient(circle at 30% 0%, #1dd1a1 0 3px, transparent 4px) 0 0 / 60px 60px,
radial-gradient(circle at 90% 0%, #ff9ff3 0 3px, transparent 4px) 0 0 / 50px 50px,
linear-gradient(135deg, #1a1a2e, #16213e);
background-repeat: repeat;
animation: roy-misc-confetti 2.5s linear infinite;
}
@keyframes roy-misc-confetti {
from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
to   { background-position: 0 40px, 0 55px, 0 45px, 0 60px, 0 50px, 0 0; }
}

.roycss-misc-snow {
background:
radial-gradient(circle at 10% 0%, #fff 0 2px, transparent 3px) 0 0 / 30px 30px,
radial-gradient(circle at 60% 0%, #fff 0 1.5px, transparent 2px) 0 0 / 45px 45px,
radial-gradient(circle at 80% 0%, #fff 0 2.5px, transparent 3px) 0 0 / 35px 35px,
radial-gradient(circle at 30% 0%, rgba(255,255,255,0.7) 0 1px, transparent 2px) 0 0 / 25px 25px,
linear-gradient(180deg, #0f2027, #203a43, #2c5364);
background-repeat: repeat;
animation: roy-misc-snow 3s linear infinite;
}
@keyframes roy-misc-snow {
from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
to   { background-position: 5px 30px, -3px 45px, 2px 35px, -2px 25px, 0 0; }
}

.roycss-misc-rain {
background:
linear-gradient(105deg, transparent 0 48%, rgba(174,194,224,0.6) 48% 50%, transparent 50% 100%) 0 0 / 15px 30px,
linear-gradient(105deg, transparent 0 49%, rgba(174,194,224,0.35) 49% 50%, transparent 50% 100%) 0 0 / 25px 40px,
linear-gradient(180deg, #1a2a3a, #2c3e50);
background-repeat: repeat;
animation: roy-misc-rain 0.6s linear infinite;
}
@keyframes roy-misc-rain {
from { background-position: 0 0, 0 0, 0 0; }
to   { background-position: 5px 30px, 7px 40px, 0 0; }
}

.roycss-misc-bubbles {
background:
radial-gradient(circle at 20% 100%, rgba(255,255,255,0.7) 0 4px, transparent 5px) 0 0 / 60px 60px,
radial-gradient(circle at 50% 100%, rgba(255,255,255,0.5) 0 6px, transparent 7px) 0 0 / 80px 80px,
radial-gradient(circle at 80% 100%, rgba(255,255,255,0.6) 0 3px, transparent 4px) 0 0 / 50px 50px,
linear-gradient(180deg, #2193b0, #6dd5ed);
background-repeat: repeat;
animation: roy-misc-bubbles 4s linear infinite;
}
@keyframes roy-misc-bubbles {
from { background-position: 0 0, 0 0, 0 0, 0 0; }
to   { background-position: 0 -60px, 0 -80px, 0 -50px, 0 0; }
}

.roycss-misc-fireflies {
background:
radial-gradient(circle at 20% 30%, rgba(212,255,127,0.9) 0 2px, transparent 5px) 0 0 / 100px 100px,
radial-gradient(circle at 70% 60%, rgba(212,255,127,0.7) 0 2.5px, transparent 6px) 0 0 / 130px 130px,
radial-gradient(circle at 40% 80%, rgba(212,255,127,0.8) 0 1.5px, transparent 4px) 0 0 / 90px 90px,
linear-gradient(180deg, #0f0c29, #302b63, #24243e);
background-repeat: repeat;
animation: roy-misc-fireflies 5s ease-in-out infinite alternate;
}
@keyframes roy-misc-fireflies {
0%   { background-position: 0 0, 0 0, 0 0, 0 0; filter: brightness(0.6); }
50%  { filter: brightness(1.5); }
100% { background-position: 20px -15px, -25px 10px, 15px 20px, 0 0; filter: brightness(0.85); }
}

.roycss-misc-sparkles {
background:
radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 2px) 0 0 / 50px 50px,
radial-gradient(circle at 65% 75%, #fff 0 1.5px, transparent 2.5px) 0 0 / 70px 70px,
radial-gradient(circle at 85% 15%, #fff 0 1px, transparent 2px) 0 0 / 40px 40px,
radial-gradient(circle at 35% 85%, #fff 0 2px, transparent 3px) 0 0 / 60px 60px,
linear-gradient(135deg, #0a0a23, #1a1a4e);
background-repeat: repeat;
animation: roy-misc-sparkles 1.8s ease-in-out infinite alternate;
}
@keyframes roy-misc-sparkles {
0%   { opacity: 0.4; filter: brightness(0.8); }
100% { opacity: 1; filter: brightness(1.6); }
}

.roycss-misc-fireworks {
position: relative;
background: linear-gradient(180deg, #0a0a23, #1a1a4e);
overflow: hidden;
}
.roycss-misc-fireworks::before {
content: "";
position: absolute;
top: 30%;
left: 30%;
width: 4px;
height: 4px;
border-radius: 50%;
box-shadow:
0 0 0 2px #ff6b6b,
0 -20px 0 -1px #ff6b6b, 0 20px 0 -1px #ff6b6b,
-20px 0 0 -1px #ff6b6b, 20px 0 0 -1px #ff6b6b,
-14px -14px 0 -1px #ff6b6b, 14px 14px 0 -1px #ff6b6b,
-14px 14px 0 -1px #ff6b6b, 14px -14px 0 -1px #ff6b6b;
animation: roy-misc-firework1 2s ease-out infinite;
}
.roycss-misc-fireworks::after {
content: "";
position: absolute;
top: 60%;
left: 70%;
width: 4px;
height: 4px;
border-radius: 50%;
box-shadow:
0 0 0 2px #feca57,
0 -16px 0 -1px #feca57, 0 16px 0 -1px #feca57,
-16px 0 0 -1px #feca57, 16px 0 0 -1px #feca57,
-11px -11px 0 -1px #feca57, 11px 11px 0 -1px #feca57,
-11px 11px 0 -1px #feca57, 11px -11px 0 -1px #feca57;
animation: roy-misc-firework1 2s ease-out 1s infinite;
}
@keyframes roy-misc-firework1 {
0%   { transform: scale(0); opacity: 1; }
100% { transform: scale(2.6); opacity: 0; }
}

.roycss-misc-ripple-click {
position: relative;
width: 80px;
height: 80px;
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.3);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
}
.roycss-misc-ripple-click > div { display: none; }
.roycss-misc-ripple-click::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
background: #10b981;
border-radius: 50%;
transform: scale(0);
}
.roycss-misc-ripple-click::after {
content: "Click";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: 11px/1 system-ui, sans-serif;
color: #10b981;
z-index: 1;
}
.roycss-misc-ripple-click:hover::before {
animation: roy-misc-ripple 0.8s ease-out;
}
@keyframes roy-misc-ripple {
0%   { transform: scale(0); opacity: 1; }
100% { transform: scale(12); opacity: 0; }
}

.roycss-misc-wave {
background:
linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.6) 50%, transparent 100%) 0 30% / 40px 4px repeat-x,
linear-gradient(90deg, transparent 0%, rgba(20,184,166,0.5) 50%, transparent 100%) 0 50% / 30px 3px repeat-x,
linear-gradient(90deg, transparent 0%, rgba(52,211,153,0.5) 50%, transparent 100%) 0 70% / 50px 4px repeat-x,
linear-gradient(180deg, #04293a, #063b52);
animation: roy-misc-wave 1.5s linear infinite;
}
@keyframes roy-misc-wave {
from { background-position: 0 30%, 0 50%, 0 70%, 0 0; }
to   { background-position: 40px 30%, -30px 50%, 50px 70%, 0 0; }
}

.roycss-misc-pulse-ring-expand {
position: relative;
width: 80px;
height: 80px;
background: transparent;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.roycss-misc-pulse-ring-expand > div {
width: 16px !important;
height: 16px !important;
background: #10b981 !important;
border-radius: 50% !important;
box-shadow: 0 0 12px #10b981;
}
.roycss-misc-pulse-ring-expand::before,
.roycss-misc-pulse-ring-expand::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid #10b981;
border-radius: 50%;
animation: roy-misc-pulse-ring 2s ease-out infinite;
}
.roycss-misc-pulse-ring-expand::after { animation-delay: 1s; }
@keyframes roy-misc-pulse-ring {
0%   { transform: scale(1); opacity: 0.8; }
100% { transform: scale(5); opacity: 0; }
}

.roycss-misc-shimmer-overlay {
position: relative;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #10b981, #34d399);
border-radius: 16px;
overflow: hidden;
}
.roycss-misc-shimmer-overlay > div { display: none; }
.roycss-misc-shimmer-overlay::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.6), transparent);
transform: skewX(-20deg);
animation: roy-misc-shimmer 2.5s ease-in-out infinite;
}
.roycss-misc-shimmer-overlay::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.25) 100%);
pointer-events: none;
}
@keyframes roy-misc-shimmer {
0%        { left: -100%; }
60%, 100% { left: 200%; }
}

.roycss-misc-scan-line {
position: relative;
background:
repeating-linear-gradient(0deg, rgba(16,185,129,0.06) 0 2px, transparent 2px 4px),
linear-gradient(180deg, #0a1a14, #142822);
overflow: hidden;
}
.roycss-misc-scan-line > span { color: rgba(16,185,129,0.5) !important; }
.roycss-misc-scan-line::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(180deg, transparent, rgba(16,185,129,0.9), transparent);
box-shadow: 0 0 20px rgba(16,185,129,0.7);
animation: roy-misc-scan 2.5s ease-in-out infinite;
}
.roycss-misc-scan-line::after {
content: "SCAN";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: bold 14px/1 'Courier New', monospace;
color: rgba(16,185,129,0.4);
letter-spacing: 0.4em;
}
@keyframes roy-misc-scan {
0%, 100% { top: 0; }
50%      { top: 100%; }
}

.roycss-misc-hologram {
position: relative;
width: 80px;
height: 80px;
background: linear-gradient(115deg,
#ff006e 0%, #8338ec 25%, #3a86ff 50%, #06ffa5 75%, #ffbe0b 100%);
background-size: 400% 100%;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 0 22px rgba(131,56,236,0.45);
animation: roy-misc-hologram 4s linear infinite;
}
.roycss-misc-hologram > div { display: none; }
.roycss-misc-hologram::before {
content: "HOLO";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: bold 14px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.95);
letter-spacing: 0.3em;
text-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.roycss-misc-hologram::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg,
rgba(255,255,255,0.12) 0 1px,
transparent 1px 3px);
border-radius: 16px;
pointer-events: none;
}
@keyframes roy-misc-hologram {
0%   { background-position: 0% 0%; }
100% { background-position: 400% 0%; }
}

.roycss-misc-vhs-effect {
position: relative;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 4px),
linear-gradient(135deg, #2a0845, #6441a5);
overflow: hidden;
}
.roycss-misc-vhs-effect > span { color: rgba(255,255,255,0.9) !important; }
.roycss-misc-vhs-effect::before {
content: "▶ REC";
position: absolute;
top: 10px;
left: 12px;
font: 12px/1 'Courier New', monospace;
color: rgba(255,80,80,0.95);
letter-spacing: 0.18em;
z-index: 2;
}
.roycss-misc-vhs-effect::after {
content: "";
position: absolute;
top: -50%;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg,
transparent,
rgba(255,255,255,0.18) 40%,
rgba(255,255,255,0.32) 50%,
rgba(255,255,255,0.18) 60%,
transparent);
animation: roy-misc-vhs 3s linear infinite;
z-index: 1;
}
@keyframes roy-misc-vhs {
0%   { top: -50%; }
100% { top: 100%; }
}

.roycss-misc-typewriter {
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
color: #10b981;
overflow: hidden;
white-space: nowrap;
border-right: 3px solid #10b981;
width: 0;
animation:
roy-misc-typewriter-type 2.5s steps(6) infinite,
roy-misc-typewriter-cursor 0.6s step-end infinite;
}
@keyframes roy-misc-typewriter-type {
0%, 90%, 100% { width: 0; }
40%, 60%      { width: 6ch; }
}

.roycss-fade-in {
animation: roy-fade-in 0.6s ease-out both;
}

@keyframes roy-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

.roycss-fade-in-down {
animation: roy-fade-in-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roy-fade-in-down {
from {
opacity: 0;
transform: translate3d(0, -28px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

.roycss-fade-in-left {
animation: roy-fade-in-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roy-fade-in-left {
from {
opacity: 0;
transform: translate3d(-32px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

.roycss-fade-in-right {
animation: roy-fade-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roy-fade-in-right {
from {
opacity: 0;
transform: translate3d(32px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

.roycss-fade-out {
animation: roy-fade-out 0.6s ease-in both;
}

@keyframes roy-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}

.roycss-fade-out-up {
animation: roy-fade-out-up 0.7s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

@keyframes roy-fade-out-up {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(0, -28px, 0);
}
}

.roycss-fade-out-left {
animation: roy-fade-out-left 0.7s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

@keyframes roy-fade-out-left {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-32px, 0, 0);
}
}

.roycss-fade-out-right {
animation: roy-fade-out-right 0.7s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

@keyframes roy-fade-out-right {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(32px, 0, 0);
}
}

.roycss-fade-in-bl {
animation: roy-fade-in-bl 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roy-fade-in-bl {
from {
opacity: 0;
transform: translate3d(-28px, 28px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

.roycss-fade-in-br {
animation: roy-fade-in-br 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roy-fade-in-br {
from {
opacity: 0;
transform: translate3d(28px, 28px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

.roycss-slide-in-top {
animation: roy-slide-in-top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes roy-slide-in-top {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}

.roycss-slide-in-bottom {
animation: roy-slide-in-bottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes roy-slide-in-bottom {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}

.roycss-slide-out-top {
animation: roy-slide-out-top 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes roy-slide-out-top {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}

.roycss-slide-out-bottom {
animation: roy-slide-out-bottom 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes roy-slide-out-bottom {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}

.roycss-slide-out-left {
animation: roy-slide-out-left 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes roy-slide-out-left {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
}
}

.roycss-slide-out-right {
animation: roy-slide-out-right 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes roy-slide-out-right {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}

.roycss-slide-diagonal {
animation: roy-slide-diagonal 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

@keyframes roy-slide-diagonal {
0% {
transform: translate3d(-30px, 30px, 0) rotate(-3deg);
}
100% {
transform: translate3d(30px, -30px, 0) rotate(3deg);
}
}

.roycss-slide-rotate-in {
animation: roy-slide-rotate-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes roy-slide-rotate-in {
0% {
opacity: 0;
transform: translate3d(60px, 0, 0) rotate(180deg);
}
60% {
opacity: 1;
transform: translate3d(-8px, 0, 0) rotate(-12deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
}

.roycss-zoom-in-left {
animation: roy-zoom-in-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: left center;
}

@keyframes roy-zoom-in-left {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
}
60% {
opacity: 1;
transform: scale3d(0.6, 0.6, 0.6) translate3d(20px, 0, 0);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}

.roycss-zoom-in-right {
animation: roy-zoom-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: right center;
}

@keyframes roy-zoom-in-right {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
}
60% {
opacity: 1;
transform: scale3d(0.6, 0.6, 0.6) translate3d(-20px, 0, 0);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}

.roycss-zoom-in-up {
animation: roy-zoom-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center bottom;
}

@keyframes roy-zoom-in-up {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
}
60% {
opacity: 1;
transform: scale3d(0.6, 0.6, 0.6) translate3d(0, -20px, 0);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}

.roycss-zoom-in-down {
animation: roy-zoom-in-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center top;
}

@keyframes roy-zoom-in-down {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
}
60% {
opacity: 1;
transform: scale3d(0.6, 0.6, 0.6) translate3d(0, 20px, 0);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}

.roycss-zoom-out-left {
animation: roy-zoom-out-left 0.65s cubic-bezier(0.55, 0, 0.68, 0.53) both;
transform-origin: left center;
}

@keyframes roy-zoom-out-left {
40% {
opacity: 1;
transform: scale3d(0.7, 0.7, 0.7) translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
}
}

.roycss-zoom-out-up {
animation: roy-zoom-out-up 0.65s cubic-bezier(0.55, 0, 0.68, 0.53) both;
transform-origin: center bottom;
}

@keyframes roy-zoom-out-up {
40% {
opacity: 1;
transform: scale3d(0.7, 0.7, 0.7) translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
}
}

.roycss-bounce-in-left {
animation: roy-bounce-in-left 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes roy-bounce-in-left {
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-12px, 0, 0);
}
90% {
transform: translate3d(6px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

.roycss-bounce-in-right {
animation: roy-bounce-in-right 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes roy-bounce-in-right {
0% {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(12px, 0, 0);
}
90% {
transform: translate3d(-6px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

.roycss-bounce-in-up {
animation: roy-bounce-in-up 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes roy-bounce-in-up {
0% {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -24px, 0);
}
75% {
transform: translate3d(0, 12px, 0);
}
90% {
transform: translate3d(0, -6px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

.roycss-bounce-in-down {
animation: roy-bounce-in-down 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes roy-bounce-in-down {
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 24px, 0);
}
75% {
transform: translate3d(0, -12px, 0);
}
90% {
transform: translate3d(0, 6px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

.roycss-bounce-rotate {
animation: roy-bounce-rotate 1.1s cubic-bezier(0.28, 1.42, 0.55, 1) both;
}

@keyframes roy-bounce-rotate {
0% {
opacity: 0;
transform: scale(0.3) rotate(-180deg);
}
40% {
opacity: 1;
transform: scale(1.15) rotate(20deg);
}
60% {
transform: scale(0.92) rotate(-10deg);
}
80% {
transform: scale(1.04) rotate(4deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}

.roycss-blur-in {
animation: roy-blur-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roy-blur-in {
from {
opacity: 0;
filter: blur(24px);
transform: scale(1.05);
}
to {
opacity: 1;
filter: blur(0px);
transform: scale(1);
}
}

.roycss-blur-in-up {
animation: roy-blur-in-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roy-blur-in-up {
from {
opacity: 0;
filter: blur(18px);
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
filter: blur(0px);
transform: translate3d(0, 0, 0);
}
}

.roycss-blur-out {
animation: roy-blur-out 0.8s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

@keyframes roy-blur-out {
from {
opacity: 1;
filter: blur(0px);
transform: scale(1);
}
to {
opacity: 0;
filter: blur(24px);
transform: scale(0.95);
}
}

.roycss-blur-out-down {
animation: roy-blur-out-down 0.85s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

@keyframes roy-blur-out-down {
from {
opacity: 1;
filter: blur(0px);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
filter: blur(18px);
transform: translate3d(0, 40px, 0);
}
}

.roycss-scale-grow {
animation: roy-scale-grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes roy-scale-grow {
0% {
opacity: 0;
transform: scale(0);
}
70% {
opacity: 1;
transform: scale(1.12);
}
100% {
transform: scale(1);
}
}

.roycss-scale-shrink {
animation: roy-scale-shrink 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes roy-scale-shrink {
0% {
opacity: 0;
transform: scale(1.8);
}
70% {
opacity: 1;
transform: scale(0.92);
}
100% {
transform: scale(1);
}
}

.roycss-scale-expand {
animation: roy-scale-expand 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center;
}

@keyframes roy-scale-expand {
0% {
opacity: 0;
transform: scaleX(0.2) scaleY(0.6);
}
55% {
opacity: 1;
transform: scaleX(1.1) scaleY(0.85);
}
100% {
transform: scaleX(1) scaleY(1);
}
}

.roycss-scale-compress {
animation: roy-scale-compress 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
transform-origin: center;
}

@keyframes roy-scale-compress {
0% {
opacity: 0;
transform: scaleY(0.2) scaleX(1.4);
}
60% {
opacity: 1;
transform: scaleY(1.15) scaleX(0.9);
}
100% {
transform: scaleY(1) scaleX(1);
}
}

.roycss-swing-in {
animation: roy-swing-in 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
transform-origin: top center;
}

@keyframes roy-swing-in {
0% {
opacity: 0;
transform: rotate3d(0, 0, 1, -90deg);
}
40% {
opacity: 1;
transform: rotate3d(0, 0, 1, 25deg);
}
60% {
transform: rotate3d(0, 0, 1, -15deg);
}
80% {
transform: rotate3d(0, 0, 1, 8deg);
}
100% {
transform: rotate3d(0, 0, 1, 0deg);
}
}

.roycss-drop-in {
animation: roy-drop-in 1s cubic-bezier(0.645, 0.045, 0.355, 1) both;
transform-origin: center bottom;
}

@keyframes roy-drop-in {
0% {
opacity: 0;
transform: translate3d(0, -300px, 0) scaleY(0.6);
}
50% {
opacity: 1;
transform: translate3d(0, 0, 0) scaleY(1.1);
}
65% {
transform: translate3d(0, -20px, 0) scaleY(0.95);
}
80% {
transform: translate3d(0, 0, 0) scaleY(1.04);
}
100% {
transform: translate3d(0, 0, 0) scaleY(1);
}
}

.roycss-pop-in {
animation: roy-pop-in 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}

@keyframes roy-pop-in {
0% {
opacity: 0;
transform: scale3d(0, 0, 0);
}
60% {
opacity: 1;
transform: scale3d(1.2, 1.2, 1.2);
}
100% {
transform: scale3d(1, 1, 1);
}
}

.roycss-pop-out {
animation: roy-pop-out 0.5s cubic-bezier(0.32, -0.28, 0.82, 0.11) both;
}

@keyframes roy-pop-out {
0% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
50% {
opacity: 0.7;
transform: scale3d(1.2, 1.2, 1.2);
}
100% {
opacity: 0;
transform: scale3d(0, 0, 0);
}
}

.roycss-blink {
animation: roy-blink 1.4s steps(2, start) infinite;
}

@keyframes roy-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0.15; }
}

.roycss-vibrate {
animation: roy-vibrate 0.32s linear infinite;
}

@keyframes roy-vibrate {
0%   { transform: translate3d(0, 0, 0); }
10%  { transform: translate3d(-2px, 1px, 0); }
20%  { transform: translate3d(2px, -1px, 0); }
30%  { transform: translate3d(-2px, -1px, 0); }
40%  { transform: translate3d(2px, 1px, 0); }
50%  { transform: translate3d(-1px, 2px, 0); }
60%  { transform: translate3d(1px, -2px, 0); }
70%  { transform: translate3d(-2px, 1px, 0); }
80%  { transform: translate3d(2px, -1px, 0); }
90%  { transform: translate3d(-1px, 1px, 0); }
100% { transform: translate3d(0, 0, 0); }
}

.roycss-jiggle {
animation: roy-jiggle 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
transform-origin: center;
}

@keyframes roy-jiggle {
0%, 100% { transform: rotate(0deg); }
20%      { transform: rotate(-7deg); }
40%      { transform: rotate(6deg); }
60%      { transform: rotate(-4deg); }
80%      { transform: rotate(3deg); }
}

.roycss-sway {
animation: roy-sway 4s ease-in-out infinite;
transform-origin: top center;
}

@keyframes roy-sway {
0%, 100% { transform: rotate(-4deg); }
50%      { transform: rotate(4deg); }
}

.roycss-pendulum {
animation: roy-pendulum 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
transform-origin: top center;
}

@keyframes roy-pendulum {
0%   { transform: rotate(28deg); }
50%  { transform: rotate(-28deg); }
100% { transform: rotate(28deg); }
}

.roycss-snap-in {
animation: roy-snap-in 0.55s cubic-bezier(0.16, 1.32, 0.5, 1) both;
transform-origin: center;
}

@keyframes roy-snap-in {
0% {
opacity: 0;
transform: scale(1.6) translate3d(40px, -20px, 0);
}
55% {
opacity: 1;
transform: scale(0.85) translate3d(-4px, 2px, 0);
}
75% {
transform: scale(1.06) translate3d(2px, -1px, 0);
}
100% {
transform: scale(1) translate3d(0, 0, 0);
}
}

.roycss-stretch {
animation: roy-stretch 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
transform-origin: center;
}

@keyframes roy-stretch {
0%, 100% { transform: scaleY(1) scaleX(1); }
40%      { transform: scaleY(1.4) scaleX(0.75); }
70%      { transform: scaleY(0.85) scaleX(1.12); }
}

.roycss-spring-in {
animation: roy-spring-in 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
transform-origin: center bottom;
}

@keyframes roy-spring-in {
0% {
opacity: 0;
transform: translate3d(0, 200px, 0) scale(0.5);
}
35% {
opacity: 1;
transform: translate3d(0, -30px, 0) scale(1.1);
}
55% {
transform: translate3d(0, 10px, 0) scale(0.95);
}
75% {
transform: translate3d(0, -4px, 0) scale(1.02);
}
100% {
transform: translate3d(0, 0, 0) scale(1);
}
}

.roycss-dissolve {
animation: roy-dissolve 1s cubic-bezier(0.55, 0, 0.45, 1) both;
}

@keyframes roy-dissolve {
0% {
opacity: 1;
filter: blur(0px);
transform: scale(1);
}
40% {
opacity: 0.7;
filter: blur(4px);
transform: scale(1.05);
}
100% {
opacity: 0;
filter: blur(20px);
transform: scale(0.7);
}
}

.roycss-scroll-reveal-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}

.roycss-scroll-reveal-up.is-visible {
opacity: 1;
transform: translateY(0);
}

.roycss-scroll-reveal-left {
animation: roy-scroll-reveal-left 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

@keyframes roy-scroll-reveal-left {
0% { opacity: 0; transform: translateX(-60px); }
25%, 70% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(-60px); }
}

.roycss-scroll-reveal-right {
animation: roy-scroll-reveal-right 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

@keyframes roy-scroll-reveal-right {
0% { opacity: 0; transform: translateX(60px); }
25%, 70% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(60px); }
}

.roycss-scroll-reveal-scale {
animation: roy-scroll-reveal-scale 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

@keyframes roy-scroll-reveal-scale {
0% { opacity: 0; transform: scale(0.6); }
25%, 70% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.6); }
}

.roycss-scroll-reveal-rotate {
animation: roy-scroll-reveal-rotate 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

@keyframes roy-scroll-reveal-rotate {
0% { opacity: 0; transform: rotate(-15deg) scale(0.85); }
25%, 70% { opacity: 1; transform: rotate(0deg) scale(1); }
100% { opacity: 0; transform: rotate(-15deg) scale(0.85); }
}

.roycss-scroll-progress-bar {
position: relative;
width: 100%;
height: 8px;
background: rgba(148, 163, 184, 0.25);
border-radius: 999px;
overflow: hidden;
}

.roycss-scroll-progress-bar::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: linear-gradient(90deg, #10b981, #06b6d4, #6366f1);
border-radius: inherit;
box-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
animation: roy-scroll-progress-fill 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes roy-scroll-progress-fill {
0% { width: 0; }
70%, 100% { width: 100%; }
}

.roycss-scroll-indicator {
position: relative;
width: 28px;
height: 46px;
border: 2px solid rgba(16, 185, 129, 0.65);
border-radius: 14px;
background: transparent;
}

.roycss-scroll-indicator::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 4px;
height: 8px;
margin-left: -2px;
background: #10b981;
border-radius: 2px;
animation: roy-scroll-indicator-wheel 1.8s ease-in-out infinite;
}

.roycss-scroll-indicator::after {
content: "";
position: absolute;
bottom: 6px;
left: 50%;
width: 7px;
height: 7px;
margin-left: -3.5px;
border-right: 2px solid #10b981;
border-bottom: 2px solid #10b981;
transform: rotate(45deg);
animation: roy-scroll-indicator-arrow 1.8s ease-in-out infinite;
}

@keyframes roy-scroll-indicator-wheel {
0% { transform: translateY(0); opacity: 1; }
70%, 100% { transform: translateY(14px); opacity: 0; }
}

@keyframes roy-scroll-indicator-arrow {
0%, 100% { opacity: 0; transform: rotate(45deg) translate(-3px, -3px); }
50% { opacity: 1; transform: rotate(45deg) translate(0, 0); }
}

.roycss-scroll-parallax-slow {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0f172a, #1e293b);
}

.roycss-scroll-parallax-slow::before {
content: "";
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -45px 0 0 -45px;
background: radial-gradient(circle at 30% 30%, #6366f1, #06b6d4 70%);
filter: blur(2px);
animation: roy-scroll-parallax-drift 6s ease-in-out infinite;
}

.roycss-scroll-parallax-slow::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent 0 18px,
rgba(148, 163, 184, 0.08) 18px 19px
);
animation: roy-scroll-parallax-grid 6s linear infinite;
}

@keyframes roy-scroll-parallax-drift {
0%, 100% { transform: translate(-25px, -30px) scale(1.1); }
50% { transform: translate(25px, 30px) scale(1); }
}

@keyframes roy-scroll-parallax-grid {
0% { background-position: 0 0; }
100% { background-position: 0 60px; }
}

.roycss-scroll-sticky-header {
display: flex;
align-items: center;
height: 64px;
padding: 0 22px;
background: linear-gradient(90deg, #0f172a, #1e293b);
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 10px;
color: #e2e8f0;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 6px 20px rgba(2, 6, 23, 0.4);
animation: roy-scroll-sticky-shrink 3.2s ease-in-out infinite;
}

@keyframes roy-scroll-sticky-shrink {
0%, 35% {
height: 64px;
font-size: 18px;
padding: 0 22px;
background: linear-gradient(90deg, #0f172a, #1e293b);
box-shadow: 0 6px 20px rgba(2, 6, 23, 0.4);
}
50%, 85% {
height: 36px;
font-size: 13px;
padding: 0 14px;
background: linear-gradient(90deg, #020617, #0f172a);
box-shadow: 0 10px 26px rgba(2, 6, 23, 0.7);
letter-spacing: 0.04em;
}
100% {
height: 64px;
font-size: 18px;
padding: 0 22px;
}
}

.roycss-scroll-fade-out {
animation: roy-scroll-fade-out 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

@keyframes roy-scroll-fade-out {
0%, 25% { opacity: 1; transform: translateY(0); }
75%, 100% { opacity: 0; transform: translateY(-32px); }
}

.roycss-scroll-zoom-in {
animation: roy-scroll-zoom-in 2.8s ease-in-out infinite;
will-change: opacity, transform;
}

@keyframes roy-scroll-zoom-in {
0% { opacity: 0.4; transform: scale(0.8); }
40%, 60% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0.4; transform: scale(0.8); }
}

.roycss-scroll-horizontal {
position: relative;
width: 100%;
height: 6px;
background: rgba(148, 163, 184, 0.25);
border-radius: 999px;
overflow: hidden;
}

.roycss-scroll-horizontal::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.25), transparent);
background-size: 80px 100%;
animation: roy-scroll-horizontal-sheen 1.6s linear infinite;
}

.roycss-scroll-horizontal::after {
content: "";
position: absolute;
top: -3px;
left: 0;
width: 24px;
height: 12px;
border-radius: 999px;
background: linear-gradient(90deg, #f59e0b, #ef4444);
box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
animation: roy-scroll-horizontal-move 2.8s ease-in-out infinite;
}

@keyframes roy-scroll-horizontal-sheen {
0% { background-position: -80px 0; }
100% { background-position: 100% 0; }
}

@keyframes roy-scroll-horizontal-move {
0%, 100% { left: 0; }
50% { left: calc(100% - 24px); }
}

.roycss-cursor-glow-dot {
position: relative;
background: radial-gradient(circle at 50% 50%, #111827, #0b1020);
overflow: hidden;
}

.roycss-cursor-glow-dot::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
background: #22d3ee;
box-shadow:
0 0 12px 4px rgba(34, 211, 238, 0.85),
0 0 28px 8px rgba(34, 211, 238, 0.4);
animation: roy-cursor-glow-orbit 3s linear infinite;
}

@keyframes roy-cursor-glow-orbit {
0% { transform: translate(-22px, -10px); }
25% { transform: translate(0, -20px); }
50% { transform: translate(22px, -10px); }
75% { transform: translate(0, 12px); }
100% { transform: translate(-22px, -10px); }
}

.roycss-cursor-trail {
position: relative;
background: radial-gradient(circle at 50% 50%, #1a0f2e, #0b1020);
overflow: hidden;
}

.roycss-cursor-trail::before {
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -4.5px 0 0 -4.5px;
background: #f472b6;
box-shadow:
0 0 10px 2px rgba(244, 114, 182, 0.7),
-10px 5px 0 -1px rgba(244, 114, 182, 0.8),
-20px 10px 0 -2px rgba(244, 114, 182, 0.55),
-30px 15px 0 -3px rgba(244, 114, 182, 0.35),
-40px 20px 0 -3px rgba(244, 114, 182, 0.18);
animation: roy-cursor-trail-sweep 3.2s ease-in-out infinite;
}

@keyframes roy-cursor-trail-sweep {
0%, 100% { transform: translate(-26px, -8px); }
50% { transform: translate(26px, 8px); }
}

.roycss-cursor-blob {
position: relative;
background: radial-gradient(circle at 50% 50%, #111827, #0b1020);
overflow: hidden;
}

.roycss-cursor-blob::before {
content: "";
position: absolute;
width: 44px;
height: 44px;
top: 50%;
left: 50%;
margin: -22px 0 0 -22px;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
filter: blur(3px);
border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
animation:
roy-cursor-blob-morph 4s ease-in-out infinite,
roy-cursor-blob-drift 5s ease-in-out infinite;
}

@keyframes roy-cursor-blob-morph {
0%, 100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
33% { border-radius: 40% 60% 60% 40% / 60% 40% 50% 50%; }
66% { border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%; }
}

.roycss-cursor-ring {
position: relative;
background: radial-gradient(circle at 50% 50%, #0c1426, #0b1020);
overflow: hidden;
}

.roycss-cursor-ring::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -7px 0 0 -7px;
border: 2px solid #22d3ee;
animation:
roy-cursor-ring-orbit 3s linear infinite,
roy-cursor-ring-pulse 1.6s ease-out infinite;
}

.roycss-cursor-ring::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -3px 0 0 -3px;
background: #22d3ee;
box-shadow: 0 0 10px 2px rgba(34, 211, 238, 0.8);
animation: roy-cursor-ring-orbit 3s linear infinite;
}

@keyframes roy-cursor-ring-orbit {
0% { transform: translate(-20px, -10px); }
50% { transform: translate(20px, 10px); }
100% { transform: translate(-20px, -10px); }
}

.roycss-cursor-ripple {
position: relative;
background: radial-gradient(circle at 50% 50%, #0c2a1f, #0b1020);
overflow: hidden;
}

.roycss-cursor-ripple::before,
.roycss-cursor-ripple::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
border: 2px solid #10b981;
animation: roy-cursor-ripple-expand 1.8s ease-out infinite;
}

.roycss-cursor-ripple::after {
animation-delay: 0.9s;
border-color: #34d399;
}

@keyframes roy-cursor-ripple-expand {
0% { transform: scale(0.4); opacity: 1; }
100% { transform: scale(3.8); opacity: 0; }
}

.roycss-cursor-spotlight {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e1b4b);
overflow: hidden;
}

.roycss-cursor-spotlight::before {
content: "";
position: absolute;
width: 130px;
height: 130px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -65px 0 0 -65px;
background: radial-gradient(circle, rgba(34, 211, 238, 0.45), rgba(34, 211, 238, 0.15) 40%, transparent 70%);
pointer-events: none;
animation: roy-cursor-spotlight-move 4.5s ease-in-out infinite;
}

.roycss-cursor-spotlight::after {
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -4.5px 0 0 -4.5px;
background: #67e8f9;
box-shadow: 0 0 14px 3px rgba(34, 211, 238, 0.85);
animation: roy-cursor-spotlight-move 4.5s ease-in-out infinite;
}

@keyframes roy-cursor-spotlight-move {
0%, 100% { transform: translate(-34px, -18px); }
25% { transform: translate(24px, -24px); }
50% { transform: translate(34px, 18px); }
75% { transform: translate(-24px, 22px); }
}

.roycss-cursor-magnetic {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0b1020, #111827);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 10px;
cursor: pointer;
transition:
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}

.roycss-cursor-magnetic::before {
content: "Hover";
color: #94a3b8;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
transition:
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
color 0.3s ease;
}

.roycss-cursor-magnetic:hover {
transform: scale(1.1);
border-color: rgba(34, 211, 238, 0.6);
box-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
}

.roycss-cursor-magnetic:hover::before {
transform: translateY(-5px) scale(1.12);
color: #22d3ee;
}

.roycss-cursor-crosshair {
position: relative;
background:
linear-gradient(0deg, transparent 49.5%, rgba(148, 163, 184, 0.08) 49.5% 50.5%, transparent 50.5%),
linear-gradient(90deg, transparent 49.5%, rgba(148, 163, 184, 0.08) 49.5% 50.5%, transparent 50.5%),
radial-gradient(circle at 50% 50%, #1a0f1f, #0b1020);
overflow: hidden;
}

.roycss-cursor-crosshair::before,
.roycss-cursor-crosshair::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #f43f5e;
box-shadow: 0 0 10px rgba(244, 63, 94, 0.85);
animation: roy-cursor-crosshair-move 3s ease-in-out infinite;
}

.roycss-cursor-crosshair::before {
width: 26px;
height: 2px;
margin: -1px 0 0 -13px;
}

.roycss-cursor-crosshair::after {
width: 2px;
height: 26px;
margin: -13px 0 0 -1px;
}

@keyframes roy-cursor-crosshair-move {
0%, 100% { transform: translate(-22px, -12px); }
50% { transform: translate(22px, 14px); }
}

.roycss-cursor-arrow-bounce {
position: relative;
background: radial-gradient(circle at 50% 50%, #2a1a08, #0b1020);
overflow: hidden;
}

.roycss-cursor-arrow-bounce::before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
border-left: 9px solid transparent;
border-top: 15px solid #f59e0b;
filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.75));
transform-origin: 0 0;
animation: roy-cursor-arrow-bounce 1.4s ease-in-out infinite;
}

.roycss-cursor-arrow-bounce::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -13px 0 0 -13px;
border: 1.5px dashed rgba(245, 158, 11, 0.55);
animation: roy-cursor-arrow-ring 1.4s ease-out infinite;
}

@keyframes roy-cursor-arrow-bounce {
0%, 100% { transform: translate(-16px, -16px); }
50% { transform: translate(16px, 16px); }
}

@keyframes roy-cursor-arrow-ring {
0% { transform: scale(0.6); opacity: 0.85; }
100% { transform: scale(1.7); opacity: 0; }
}

.roycss-cursor-pulse-ring {
position: relative;
background: radial-gradient(circle at 50% 50%, #1f0f2e, #0b1020);
overflow: hidden;
}

.roycss-cursor-pulse-ring::before {
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -4.5px 0 0 -4.5px;
background: #a855f7;
box-shadow: 0 0 12px 3px rgba(168, 85, 247, 0.85);
animation: roy-cursor-pulse-dot 3s ease-in-out infinite;
}

.roycss-cursor-pulse-ring::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -13px 0 0 -13px;
border: 2px solid #a855f7;
animation: roy-cursor-pulse-ring 3s ease-in-out infinite;
}

@keyframes roy-cursor-pulse-dot {
0%, 100% { transform: translate(-16px, -10px); }
50% { transform: translate(16px, 10px); }
}

@keyframes roy-cursor-pulse-ring {
0%, 100% { transform: translate(-16px, -10px) scale(1); opacity: 0.7; }
50% { transform: translate(16px, 10px) scale(1.7); opacity: 0; }
}

.roycss-cursor-gradient-trail {
position: relative;
background: radial-gradient(circle at 50% 50%, #1a0f2e, #0b1020);
overflow: hidden;
}

.roycss-cursor-gradient-trail::before {
content: "";
position: absolute;
width: 76px;
height: 76px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -38px 0 0 -38px;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(244, 114, 182, 0.9) 60deg,
rgba(34, 211, 238, 0.9) 120deg,
transparent 180deg,
transparent 360deg
);
filter: blur(2px);
animation: roy-sunburst-rotate 2.4s linear infinite;
}

.roycss-cursor-gradient-trail::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
background: #22d3ee;
box-shadow: 0 0 12px 3px rgba(34, 211, 238, 0.85);
animation: roy-cursor-gradient-orbit 3s linear infinite;
}

@keyframes roy-cursor-gradient-orbit {
0% { transform: rotate(0deg) translateX(22px); }
100% { transform: rotate(360deg) translateX(22px); }
}

.roycss-cursor-firefly {
position: relative;
background: linear-gradient(135deg, #0a0f1f, #1a0f2e);
overflow: hidden;
}

.roycss-cursor-firefly::before {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -3.5px 0 0 -3.5px;
background: #fde047;
box-shadow:
0 0 8px 2px rgba(253, 224, 71, 0.95),
0 0 22px 6px rgba(253, 224, 71, 0.4);
animation:
roy-cursor-firefly-drift 5s ease-in-out infinite,
roy-cursor-firefly-glow 1.4s ease-in-out infinite;
}

.roycss-cursor-firefly::after {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
top: 32%;
left: 30%;
background: #fef08a;
box-shadow:
0 0 7px 1px rgba(254, 240, 138, 0.85),
0 0 16px 4px rgba(254, 240, 138, 0.35);
animation:
roy-cursor-firefly-drift2 6s ease-in-out infinite,
roy-cursor-firefly-glow 1.8s ease-in-out 0.5s infinite;
}

@keyframes roy-cursor-firefly-drift {
0%, 100% { transform: translate(-26px, -14px); }
25% { transform: translate(16px, -22px); }
50% { transform: translate(26px, 16px); }
75% { transform: translate(-16px, 20px); }
}

@keyframes roy-cursor-firefly-drift2 {
0%, 100% { transform: translate(22px, 18px); }
33% { transform: translate(-22px, 10px); }
66% { transform: translate(8px, -20px); }
}

.roycss-page-fade {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-fade::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #6366f1, #ec4899);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
animation: roy-page-fade 2.8s ease-in-out infinite;
}

@keyframes roy-page-fade {
0% { opacity: 0; }
30%, 60% { opacity: 1; }
100% { opacity: 0; }
}

.roycss-page-slide-left {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-slide-left::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #06b6d4, #3b82f6);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
animation: roy-page-slide-left 3.2s ease-in-out infinite;
}

@keyframes roy-page-slide-left {
0% { transform: translateX(100%); opacity: 0; }
30%, 60% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(-100%); opacity: 0; }
}

.roycss-page-slide-up {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-slide-up::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #10b981, #84cc16);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
animation: roy-page-slide-up 3.2s ease-in-out infinite;
}

@keyframes roy-page-slide-up {
0% { transform: translateY(100%); opacity: 0; }
30%, 60% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-100%); opacity: 0; }
}

.roycss-page-curtain {
position: relative;
background: linear-gradient(135deg, #7c3aed, #db2777);
overflow: hidden;
}

.roycss-page-curtain::before,
.roycss-page-curtain::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background: linear-gradient(135deg, #0f172a, #1e293b);
}

.roycss-page-curtain::before {
left: 0;
border-right: 1px solid rgba(255, 255, 255, 0.12);
animation: roy-page-curtain-left 3.4s ease-in-out infinite;
}

.roycss-page-curtain::after {
right: 0;
border-left: 1px solid rgba(255, 255, 255, 0.12);
animation: roy-page-curtain-right 3.4s ease-in-out infinite;
}

@keyframes roy-page-curtain-left {
0%, 25% { transform: translateX(0); }
50%, 75% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}

@keyframes roy-page-curtain-right {
0%, 25% { transform: translateX(0); }
50%, 75% { transform: translateX(100%); }
100% { transform: translateX(0); }
}

.roycss-page-zoom {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-zoom::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(239, 68, 68, 0.4);
animation: roy-page-zoom 2.8s ease-in-out infinite;
}

@keyframes roy-page-zoom {
0% { transform: scale(0); opacity: 0; }
30%, 60% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.6); opacity: 0; }
}

.roycss-page-flip {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
perspective: 800px;
}

.roycss-page-flip::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4);
backface-visibility: hidden;
transform-origin: left center;
animation: roy-page-flip 3.4s ease-in-out infinite;
}

@keyframes roy-page-flip {
0%, 10% { transform: rotateY(0deg); opacity: 1; }
40% { transform: rotateY(-90deg); opacity: 0.4; }
50% { transform: rotateY(-180deg); opacity: 0; }
60% { transform: rotateY(-180deg); opacity: 0; }
90%, 100% { transform: rotateY(-360deg); opacity: 1; }
}

.roycss-page-circle-reveal {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-circle-reveal::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4);
clip-path: circle(0% at 50% 50%);
animation: roy-page-circle-reveal 3s ease-in-out infinite;
}

@keyframes roy-page-circle-reveal {
0% { clip-path: circle(0% at 50% 50%); opacity: 0; }
30%, 60% { clip-path: circle(75% at 50% 50%); opacity: 1; }
100% { clip-path: circle(0% at 50% 50%); opacity: 0; }
}

.roycss-page-mask-reveal {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-mask-reveal::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(236, 72, 153, 0.4);
clip-path: inset(0 100% 0 0);
animation: roy-page-mask-reveal 3s ease-in-out infinite;
}

@keyframes roy-page-mask-reveal {
0% { clip-path: inset(0 100% 0 0); opacity: 0; }
30%, 60% { clip-path: inset(0 0 0 0); opacity: 1; }
100% { clip-path: inset(0 0 0 100%); opacity: 0; }
}

.roycss-page-cube {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
perspective: 700px;
}

.roycss-page-cube::before {
content: "";
position: absolute;
inset: 12px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
animation: roy-page-cube 3.6s ease-in-out infinite;
}

@keyframes roy-page-cube {
0% { transform: rotateY(0deg) scale(1); }
25% { transform: rotateY(-90deg) scale(0.88); }
50% { transform: rotateY(-180deg) scale(1); }
75% { transform: rotateY(-270deg) scale(0.88); }
100% { transform: rotateY(-360deg) scale(1); }
}

.roycss-page-liquid {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-liquid::before {
content: "";
position: absolute;
inset: 10px;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
filter: blur(0px);
animation: roy-page-liquid 3.4s ease-in-out infinite;
}

@keyframes roy-page-liquid {
0%, 100% {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
transform: scale(1) rotate(0deg);
opacity: 1;
filter: blur(0px);
}
40% {
border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
transform: scale(0.75) rotate(45deg);
opacity: 0.5;
filter: blur(5px);
}
60% {
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
transform: scale(0.55) rotate(90deg);
opacity: 0.2;
filter: blur(10px);
}
}

.roycss-page-shutter {
position: relative;
background: linear-gradient(135deg, #f59e0b, #ef4444);
overflow: hidden;
}

.roycss-page-shutter::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0f172a, #1e293b);
border-radius: 50%;
transform: scale(0);
animation: roy-page-shutter 3.2s ease-in-out infinite;
}

.roycss-page-shutter::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: #fde047;
box-shadow: 0 0 14px 3px rgba(253, 224, 71, 0.85);
opacity: 0;
animation: roy-page-shutter-aperture 3.2s ease-in-out infinite;
}

@keyframes roy-page-shutter {
0%, 100% { transform: scale(0); }
40%, 60% { transform: scale(1.5); }
}

@keyframes roy-page-shutter-aperture {
0%, 35%, 65%, 100% { opacity: 0; transform: scale(0.4); }
45%, 55% { opacity: 1; transform: scale(1.2); }
}

.roycss-page-dissolve {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.roycss-page-dissolve::before {
content: "";
position: absolute;
inset: 8px;
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(34, 211, 238, 0.4);
animation: roy-page-dissolve 3.2s ease-in-out infinite;
}

@keyframes roy-page-dissolve {
0%, 100% { opacity: 1; filter: blur(0px); transform: scale(1); }
50% { opacity: 0; filter: blur(22px); transform: scale(1.06); }
}

.roycss-glass-frosted {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.roycss-glass-frosted span {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.roycss-glass-acrylic {
background: rgba(245, 247, 250, 0.65);
backdrop-filter: blur(30px) saturate(140%);
-webkit-backdrop-filter: blur(30px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.roycss-glass-acrylic span {
color: #1e293b;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.roycss-glass-liquid {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px) brightness(1.1) contrast(1.05) hue-rotate(15deg);
-webkit-backdrop-filter: blur(8px) brightness(1.1) contrast(1.05) hue-rotate(15deg);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.4),
inset 0 -2px 6px rgba(0, 0, 0, 0.1),
0 10px 30px rgba(0, 0, 0, 0.15);
animation: roy-glass-liquid-refract 6s ease-in-out infinite alternate;
}
.roycss-glass-liquid span {
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
@keyframes roy-glass-liquid-refract {
0%   { backdrop-filter: blur(8px) brightness(1.1) contrast(1.05) hue-rotate(0deg); }
100% { backdrop-filter: blur(14px) brightness(1.15) contrast(1.1) hue-rotate(25deg); }
}

.roycss-glass-neumorphism {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 8px 8px 16px #b8bcc2, -8px -8px 16px #ffffff;
}
.roycss-glass-neumorphism span {
color: #475569;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.roycss-glass-neumorphism-inset {
background: #e0e5ec;
border-radius: 16px;
box-shadow: inset 6px 6px 12px #b8bcc2, inset -6px -6px 12px #ffffff;
}
.roycss-glass-neumorphism-inset span {
color: #64748b;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

.roycss-glass-claymorphism {
background: linear-gradient(145deg, #fef3f8, #fbcfe8);
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
8px 8px 16px rgba(190, 24, 93, 0.18),
-4px -4px 12px rgba(255, 255, 255, 0.9),
inset 2px 2px 4px rgba(255, 255, 255, 0.7),
inset -2px -2px 6px rgba(190, 24, 93, 0.12);
}
.roycss-glass-claymorphism span {
color: #9d174d;
font-weight: 600;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
}

.roycss-glass-transparent-blur {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.roycss-glass-transparent-blur span {
color: rgba(255, 255, 255, 0.85);
}

.roycss-glass-frosted-dark {
background: rgba(20, 20, 35, 0.55);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.roycss-glass-frosted-dark span {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.roycss-glass-vibrant {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(236, 72, 153, 0.28));
backdrop-filter: blur(16px) saturate(220%) brightness(1.1);
-webkit-backdrop-filter: blur(16px) saturate(220%) brightness(1.1);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.roycss-glass-vibrant span {
color: #ffffff;
text-shadow: 0 1px 4px rgba(126, 34, 110, 0.6);
}

.roycss-glass-border-glow {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
animation: roy-glass-border-pulse 3s ease-in-out infinite alternate;
}
.roycss-glass-border-glow span {
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 8px rgba(0, 255, 200, 0.6);
}
@keyframes roy-glass-border-pulse {
0%   { box-shadow: 0 0 0 1px rgba(0, 255, 200, 0.4), 0 0 16px rgba(0, 255, 200, 0.35), 0 8px 32px rgba(0, 0, 0, 0.12); }
100% { box-shadow: 0 0 0 1px rgba(0, 180, 255, 0.6), 0 0 30px rgba(0, 180, 255, 0.6), 0 8px 32px rgba(0, 0, 0, 0.12); }
}

.roycss-glass-noise-overlay {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.roycss-glass-noise-overlay::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.1;
pointer-events: none;
mix-blend-mode: overlay;
}
.roycss-glass-noise-overlay span {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.9);
}

.roycss-glass-reflection {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.roycss-glass-reflection::before {
content: "";
position: absolute;
top: -50%;
left: -60%;
width: 35%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-20deg) rotate(8deg);
animation: roy-glass-reflection-sweep 4s ease-in-out infinite;
pointer-events: none;
}
.roycss-glass-reflection span {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.95);
}
@keyframes roy-glass-reflection-sweep {
0%, 100% { left: -60%; }
50%      { left: 130%; }
}

.roycss-particles-floating-dots {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}
.roycss-particles-floating-dots span {
position: absolute;
bottom: -12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle, #60a5fa 0%, #3b82f6 100%);
box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
color: transparent;
font-size: 0;
animation: roy-particle-float-up 4s linear infinite;
}
.roycss-particles-floating-dots span:nth-child(1) { left: 8%;  animation-delay: 0s;   width: 10px; height: 10px; }
.roycss-particles-floating-dots span:nth-child(2) { left: 20%; animation-delay: 0.5s; width: 6px;  height: 6px;  }
.roycss-particles-floating-dots span:nth-child(3) { left: 32%; animation-delay: 1s;   width: 8px;  height: 8px;  }
.roycss-particles-floating-dots span:nth-child(4) { left: 44%; animation-delay: 1.5s; width: 5px;  height: 5px;  }
.roycss-particles-floating-dots span:nth-child(5) { left: 56%; animation-delay: 2s;   width: 9px;  height: 9px;  }
.roycss-particles-floating-dots span:nth-child(6) { left: 68%; animation-delay: 2.5s; width: 7px;  height: 7px;  }
.roycss-particles-floating-dots span:nth-child(7) { left: 80%; animation-delay: 3s;   width: 6px;  height: 6px;  }
.roycss-particles-floating-dots span:nth-child(8) { left: 92%; animation-delay: 3.5s; width: 8px;  height: 8px;  }
@keyframes roy-particle-float-up {
0%   { transform: translateY(0) scale(0); opacity: 0; }
10%  { opacity: 1; transform: translateY(-10px) scale(1); }
90%  { opacity: 1; }
100% { transform: translateY(-210px) scale(0.3); opacity: 0; }
}

.roycss-particles-confetti-burst {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: radial-gradient(circle at center, #1a1a3e 0%, #0f0f1e 100%);
}
.roycss-particles-confetti-burst span {
--tx: 0px;
--ty: 0px;
--rot: 0deg;
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 10px;
border-radius: 2px;
color: transparent;
font-size: 0;
animation: roy-particle-confetti-burst 1.8s ease-out infinite;
}
.roycss-particles-confetti-burst span:nth-child(1)  { --tx: 55px;  --ty: -50px; --rot: 200deg; background: #ef4444; }
.roycss-particles-confetti-burst span:nth-child(2)  { --tx: -55px; --ty: -45px; --rot: 180deg; background: #f59e0b; }
.roycss-particles-confetti-burst span:nth-child(3)  { --tx: 60px;  --ty: 30px;  --rot: 360deg; background: #10b981; }
.roycss-particles-confetti-burst span:nth-child(4)  { --tx: -60px; --ty: 35px;  --rot: 270deg; background: #3b82f6; }
.roycss-particles-confetti-burst span:nth-child(5)  { --tx: 0px;   --ty: -60px; --rot: 180deg; background: #ec4899; }
.roycss-particles-confetti-burst span:nth-child(6)  { --tx: 40px;  --ty: -20px; --rot: 220deg; background: #8b5cf6; }
.roycss-particles-confetti-burst span:nth-child(7)  { --tx: -45px; --ty: -15px; --rot: 320deg; background: #f97316; }
.roycss-particles-confetti-burst span:nth-child(8)  { --tx: 30px;  --ty: 55px;  --rot: 250deg; background: #06b6d4; }
.roycss-particles-confetti-burst span:nth-child(9)  { --tx: -35px; --ty: 50px;  --rot: 300deg; background: #84cc16; }
.roycss-particles-confetti-burst span:nth-child(10) { --tx: 0px;   --ty: 60px;  --rot: 190deg; background: #fbbf24; }
@keyframes roy-particle-confetti-burst {
0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity: 0; }
}

.roycss-particles-snow-fall {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1e2a4a 0%, #2c3e6b 50%, #1a2540 100%);
}
.roycss-particles-snow-fall span {
position: absolute;
top: -12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
color: transparent;
font-size: 0;
animation: roy-particle-snow-fall 5s linear infinite;
}
.roycss-particles-snow-fall span:nth-child(1) { left: 6%;  animation-delay: 0s;   width: 10px; height: 10px; }
.roycss-particles-snow-fall span:nth-child(2) { left: 20%; animation-delay: 0.8s; width: 6px;  height: 6px;  }
.roycss-particles-snow-fall span:nth-child(3) { left: 33%; animation-delay: 1.6s; width: 8px;  height: 8px;  }
.roycss-particles-snow-fall span:nth-child(4) { left: 46%; animation-delay: 2.4s; width: 5px;  height: 5px;  }
.roycss-particles-snow-fall span:nth-child(5) { left: 58%; animation-delay: 3.2s; width: 9px;  height: 9px;  }
.roycss-particles-snow-fall span:nth-child(6) { left: 70%; animation-delay: 4s;   width: 7px;  height: 7px;  }
.roycss-particles-snow-fall span:nth-child(7) { left: 82%; animation-delay: 4.5s; width: 6px;  height: 6px;  }
.roycss-particles-snow-fall span:nth-child(8) { left: 94%; animation-delay: 1.2s; width: 8px;  height: 8px;  }
@keyframes roy-particle-snow-fall {
0%   { transform: translate(0, -10px); opacity: 0; }
10%  { opacity: 0.9; }
50%  { transform: translate(15px, 100px); }
90%  { opacity: 0.9; }
100% { transform: translate(-10px, 210px); opacity: 0; }
}

.roycss-particles-rain {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1a2533 0%, #243447 50%, #161e2a 100%);
}
.roycss-particles-rain span {
position: absolute;
top: -30px;
width: 2px;
height: 18px;
background: linear-gradient(180deg, transparent, rgba(174, 194, 224, 0.85));
border-radius: 2px;
color: transparent;
font-size: 0;
animation: roy-particle-rain-fall 0.9s linear infinite;
}
.roycss-particles-rain span:nth-child(1) { left: 10%; animation-delay: 0s;   height: 22px; }
.roycss-particles-rain span:nth-child(2) { left: 26%; animation-delay: 0.15s; height: 16px; }
.roycss-particles-rain span:nth-child(3) { left: 42%; animation-delay: 0.3s;  height: 20px; }
.roycss-particles-rain span:nth-child(4) { left: 58%; animation-delay: 0.45s; height: 18px; }
.roycss-particles-rain span:nth-child(5) { left: 74%; animation-delay: 0.6s;  height: 24px; }
.roycss-particles-rain span:nth-child(6) { left: 90%; animation-delay: 0.75s; height: 16px; }
@keyframes roy-particle-rain-fall {
0%   { transform: translate(0, -30px); opacity: 0; }
10%  { opacity: 0.8; }
100% { transform: translate(-20px, 230px); opacity: 0; }
}

.roycss-particles-fireflies {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #0a1f0a 0%, #14281a 50%, #0a1f12 100%);
}
.roycss-particles-fireflies span {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: #d4ff7f;
box-shadow: 0 0 8px rgba(212, 255, 127, 0.9), 0 0 16px rgba(212, 255, 127, 0.5);
color: transparent;
font-size: 0;
animation: roy-particle-firefly-glow 6s ease-in-out infinite;
}
.roycss-particles-fireflies span:nth-child(1) { top: 30%; left: 12%; animation-delay: 0s;   }
.roycss-particles-fireflies span:nth-child(2) { top: 60%; left: 28%; animation-delay: 1s;   }
.roycss-particles-fireflies span:nth-child(3) { top: 20%; left: 48%; animation-delay: 2s;   }
.roycss-particles-fireflies span:nth-child(4) { top: 70%; left: 62%; animation-delay: 3s;   }
.roycss-particles-fireflies span:nth-child(5) { top: 40%; left: 78%; animation-delay: 4s;   }
.roycss-particles-fireflies span:nth-child(6) { top: 55%; left: 90%; animation-delay: 1.5s; }
@keyframes roy-particle-firefly-glow {
0%, 100% { transform: translate(0, 0); opacity: 0.2; box-shadow: 0 0 4px rgba(212, 255, 127, 0.4); }
25%      { transform: translate(15px, -10px); opacity: 1; box-shadow: 0 0 12px rgba(212, 255, 127, 1); }
50%      { transform: translate(-8px, -20px); opacity: 0.5; box-shadow: 0 0 6px rgba(212, 255, 127, 0.6); }
75%      { transform: translate(12px, -30px); opacity: 1; box-shadow: 0 0 14px rgba(212, 255, 127, 1); }
}

.roycss-particles-bubbles {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #0e7490 0%, #06b6d4 50%, #0891b2 100%);
}
.roycss-particles-bubbles span {
position: absolute;
bottom: -20px;
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15) 60%, transparent);
border: 1px solid rgba(255, 255, 255, 0.3);
color: transparent;
font-size: 0;
animation: roy-particle-bubble-rise 5s ease-in infinite;
}
.roycss-particles-bubbles span:nth-child(1) { left: 10%; animation-delay: 0s;   width: 18px; height: 18px; }
.roycss-particles-bubbles span:nth-child(2) { left: 25%; animation-delay: 0.8s; width: 12px; height: 12px; }
.roycss-particles-bubbles span:nth-child(3) { left: 40%; animation-delay: 1.6s; width: 20px; height: 20px; }
.roycss-particles-bubbles span:nth-child(4) { left: 58%; animation-delay: 2.4s; width: 14px; height: 14px; }
.roycss-particles-bubbles span:nth-child(5) { left: 75%; animation-delay: 3.2s; width: 16px; height: 16px; }
.roycss-particles-bubbles span:nth-child(6) { left: 90%; animation-delay: 4s;   width: 10px; height: 10px; }
@keyframes roy-particle-bubble-rise {
0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
10%  { opacity: 0.85; transform: translate(0, -10px) scale(1); }
50%  { transform: translate(10px, -100px) scale(1); }
100% { transform: translate(-8px, -210px) scale(0.7); opacity: 0; }
}

.roycss-particles-sparks {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1a0a00 0%, #2d1100 50%, #1a0a00 100%);
}
.roycss-particles-sparks span {
--tx: 10px;
position: absolute;
bottom: 10px;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: #fbbf24;
box-shadow: 0 0 6px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.6);
color: transparent;
font-size: 0;
animation: roy-particle-spark-fly 1.6s ease-out infinite;
}
.roycss-particles-sparks span:nth-child(1) { --tx: -30px; margin-left: -20px; animation-delay: 0s;   }
.roycss-particles-sparks span:nth-child(2) { --tx: -15px; margin-left: -8px;  animation-delay: 0.2s; }
.roycss-particles-sparks span:nth-child(3) { --tx: 0px;   margin-left: 0;     animation-delay: 0.4s; background: #f97316; }
.roycss-particles-sparks span:nth-child(4) { --tx: 15px;  margin-left: 8px;   animation-delay: 0.6s; }
.roycss-particles-sparks span:nth-child(5) { --tx: 30px;  margin-left: 20px;  animation-delay: 0.8s; background: #ef4444; }
.roycss-particles-sparks span:nth-child(6) { --tx: -22px; margin-left: -14px; animation-delay: 1s;   }
.roycss-particles-sparks span:nth-child(7) { --tx: 22px;  margin-left: 14px;  animation-delay: 1.2s; }
.roycss-particles-sparks span:nth-child(8) { --tx: 8px;   margin-left: 4px;   animation-delay: 1.4s; background: #f97316; }
@keyframes roy-particle-spark-fly {
0%   { transform: translate(0, 0) scale(0); opacity: 1; }
20%  { transform: translate(calc(var(--tx) * 0.4), -40px) scale(1); opacity: 1; }
100% { transform: translate(var(--tx), -160px) scale(0.2); opacity: 0; }
}

.roycss-particles-dust {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(135deg, #4a3520 0%, #6b4e2e 40%, #8b6b3a 70%, #5a3f25 100%);
}
.roycss-particles-dust span {
--tx: 30px;
--ty: -30px;
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 240, 200, 0.7);
box-shadow: 0 0 3px rgba(255, 240, 200, 0.4);
color: transparent;
font-size: 0;
animation: roy-particle-dust-drift 8s ease-in-out infinite;
}
.roycss-particles-dust span:nth-child(1) { top: 20%; left: 10%; --tx: 40px;  --ty: -30px; animation-delay: 0s;   width: 5px; height: 5px; }
.roycss-particles-dust span:nth-child(2) { top: 50%; left: 25%; --tx: -25px; --ty: -40px; animation-delay: 1s;   width: 3px; height: 3px; }
.roycss-particles-dust span:nth-child(3) { top: 30%; left: 40%; --tx: 35px;  --ty: -20px; animation-delay: 2s;   width: 4px; height: 4px; }
.roycss-particles-dust span:nth-child(4) { top: 70%; left: 55%; --tx: -30px; --ty: -35px; animation-delay: 3s;   width: 6px; height: 6px; }
.roycss-particles-dust span:nth-child(5) { top: 40%; left: 70%; --tx: 20px;  --ty: -45px; animation-delay: 4s;   width: 3px; height: 3px; }
.roycss-particles-dust span:nth-child(6) { top: 60%; left: 85%; --tx: -40px; --ty: -25px; animation-delay: 5s;   width: 5px; height: 5px; }
.roycss-particles-dust span:nth-child(7) { top: 15%; left: 60%; --tx: 30px;  --ty: -50px; animation-delay: 2.5s; width: 4px; height: 4px; }
.roycss-particles-dust span:nth-child(8) { top: 80%; left: 30%; --tx: -20px; --ty: -40px; animation-delay: 6s;   width: 3px; height: 3px; }
@keyframes roy-particle-dust-drift {
0%, 100% { transform: translate(0, 0); opacity: 0; }
20%      { opacity: 0.7; }
80%      { opacity: 0.7; }
100%     { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

.roycss-particles-stars-twinkle {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: radial-gradient(ellipse at top, #1a1a4e 0%, #0a0a23 60%, #050511 100%);
}
.roycss-particles-stars-twinkle span {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #ffffff;
color: transparent;
font-size: 0;
animation: roy-particle-star-twinkle 3s ease-in-out infinite;
}
.roycss-particles-stars-twinkle span:nth-child(1)  { top: 12%; left: 8%;  animation-delay: 0s;   width: 4px; height: 4px; }
.roycss-particles-stars-twinkle span:nth-child(2)  { top: 25%; left: 22%; animation-delay: 0.3s; width: 2px; height: 2px; }
.roycss-particles-stars-twinkle span:nth-child(3)  { top: 40%; left: 15%; animation-delay: 0.6s; width: 5px; height: 5px; }
.roycss-particles-stars-twinkle span:nth-child(4)  { top: 18%; left: 38%; animation-delay: 0.9s; width: 3px; height: 3px; }
.roycss-particles-stars-twinkle span:nth-child(5)  { top: 55%; left: 48%; animation-delay: 1.2s; width: 4px; height: 4px; }
.roycss-particles-stars-twinkle span:nth-child(6)  { top: 30%; left: 60%; animation-delay: 1.5s; width: 2px; height: 2px; }
.roycss-particles-stars-twinkle span:nth-child(7)  { top: 65%; left: 70%; animation-delay: 1.8s; width: 5px; height: 5px; }
.roycss-particles-stars-twinkle span:nth-child(8)  { top: 22%; left: 78%; animation-delay: 2.1s; width: 3px; height: 3px; }
.roycss-particles-stars-twinkle span:nth-child(9)  { top: 48%; left: 88%; animation-delay: 2.4s; width: 4px; height: 4px; }
.roycss-particles-stars-twinkle span:nth-child(10) { top: 72%; left: 32%; animation-delay: 2.7s; width: 2px; height: 2px; }
@keyframes roy-particle-star-twinkle {
0%, 100% { opacity: 0.2; transform: scale(0.6); box-shadow: 0 0 2px rgba(255, 255, 255, 0.3); }
50%      { opacity: 1; transform: scale(1.3); box-shadow: 0 0 8px rgba(255, 255, 255, 0.9); }
}

.roycss-particles-fire {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #2d0a00 0%, #4a1500 40%, #1a0500 100%);
}
.roycss-particles-fire span {
position: absolute;
bottom: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle, #fde047 0%, #f97316 50%, #dc2626 100%);
box-shadow: 0 0 10px #f97316, 0 0 20px rgba(249, 115, 22, 0.6);
color: transparent;
font-size: 0;
animation: roy-particle-flame-flicker 2s ease-out infinite;
}
.roycss-particles-fire span:nth-child(1) { left: 25%; animation-delay: 0s;   width: 10px; height: 10px; }
.roycss-particles-fire span:nth-child(2) { left: 40%; animation-delay: 0.4s; width: 7px;  height: 7px;  }
.roycss-particles-fire span:nth-child(3) { left: 55%; animation-delay: 0.8s; width: 9px;  height: 9px;  }
.roycss-particles-fire span:nth-child(4) { left: 68%; animation-delay: 1.2s; width: 6px;  height: 6px;  }
.roycss-particles-fire span:nth-child(5) { left: 82%; animation-delay: 1.6s; width: 8px;  height: 8px;  }
@keyframes roy-particle-flame-flicker {
0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
15%  { opacity: 1; transform: translate(3px, -15px) scale(1); }
50%  { transform: translate(-4px, -60px) scale(0.9); opacity: 0.9; }
100% { transform: translate(6px, -140px) scale(0.2); opacity: 0; }
}

.roycss-particles-smoke {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #0f0f0f 100%);
}
.roycss-particles-smoke span {
--tx: 10px;
position: absolute;
bottom: -10px;
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200, 200, 200, 0.4) 0%, rgba(150, 150, 150, 0.15) 60%, transparent 100%);
filter: blur(4px);
color: transparent;
font-size: 0;
animation: roy-particle-smoke-rise 5s ease-out infinite;
}
.roycss-particles-smoke span:nth-child(1) { left: 20%; --tx: 12px;  animation-delay: 0s;   }
.roycss-particles-smoke span:nth-child(2) { left: 45%; --tx: -15px; animation-delay: 1.2s; width: 28px; height: 28px; }
.roycss-particles-smoke span:nth-child(3) { left: 65%; --tx: 10px;  animation-delay: 2.4s; }
.roycss-particles-smoke span:nth-child(4) { left: 80%; --tx: -8px;  animation-delay: 3.6s; width: 20px; height: 20px; }
@keyframes roy-particle-smoke-rise {
0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
20%  { opacity: 0.7; }
100% { transform: translate(var(--tx), -180px) scale(2.2); opacity: 0; }
}

.roycss-particles-orbiting {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: radial-gradient(circle at center, #1e1b4b 0%, #0f0a2e 60%, #050314 100%);
}
.roycss-particles-orbiting::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px;
border-radius: 50%;
background: radial-gradient(circle, #fbbf24 0%, #f59e0b 50%, transparent 80%);
box-shadow: 0 0 20px #f59e0b, 0 0 40px rgba(245, 158, 11, 0.5);
}
.roycss-particles-orbiting span {
--r: 30px;
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px;
border-radius: 50%;
color: transparent;
font-size: 0;
animation: roy-particle-orbit 4s linear infinite;
}
.roycss-particles-orbiting span:nth-child(1) { --r: 24px; background: #60a5fa; box-shadow: 0 0 6px #60a5fa; animation-duration: 3s; }
.roycss-particles-orbiting span:nth-child(2) { --r: 38px; background: #34d399; box-shadow: 0 0 6px #34d399; animation-duration: 4s; animation-direction: reverse; }
.roycss-particles-orbiting span:nth-child(3) { --r: 52px; background: #f472b6; box-shadow: 0 0 6px #f472b6; animation-duration: 5s; }
.roycss-particles-orbiting span:nth-child(4) { --r: 66px; background: #a78bfa; box-shadow: 0 0 6px #a78bfa; animation-duration: 6s; animation-direction: reverse; width: 6px; height: 6px; margin: -3px; }
.roycss-particles-orbiting span:nth-child(5) { --r: 80px; background: #facc15; box-shadow: 0 0 6px #facc15; animation-duration: 7s; width: 6px; height: 6px; margin: -3px; }
@keyframes roy-particle-orbit {
from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); }
to   { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}

.roycss-micro-toggle-switch {
position: relative;
width: 56px;
height: 30px;
background: #cbd5e1;
border-radius: 15px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
animation: roy-micro-toggle-bg 3s ease-in-out infinite;
}
.roycss-micro-toggle-switch > span { display: none; }
.roycss-micro-toggle-switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
animation: roy-micro-toggle-slide 3s ease-in-out infinite;
}
@keyframes roy-micro-toggle-bg {
0%, 45%   { background: #cbd5e1; }
55%, 100% { background: #10b981; }
}
@keyframes roy-micro-toggle-slide {
0%, 45%   { left: 3px; }
55%, 100% { left: 29px; }
}

.roycss-micro-checkbox-check {
position: relative;
width: 38px;
height: 38px;
background: #ffffff;
border: 2px solid #10b981;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.roycss-micro-checkbox-check > span { display: none; }
.roycss-micro-checkbox-check::after {
content: "";
width: 16px;
height: 8px;
border-left: 3px solid #10b981;
border-bottom: 3px solid #10b981;
transform: rotate(-45deg) scale(0);
transform-origin: bottom left;
animation: roy-micro-check-draw 2.5s ease-in-out infinite;
}
@keyframes roy-micro-check-draw {
0%, 5%   { transform: rotate(-45deg) scale(0); }
10%, 35% { transform: rotate(-45deg) scale(1); }
80%      { transform: rotate(-45deg) scale(1); }
95%, 100% { transform: rotate(-45deg) scale(0); }
}

.roycss-micro-radio-select {
position: relative;
width: 38px;
height: 38px;
background: #ffffff;
border: 2px solid #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.roycss-micro-radio-select > span { display: none; }
.roycss-micro-radio-select::after {
content: "";
width: 16px;
height: 16px;
background: #10b981;
border-radius: 50%;
animation: roy-micro-radio-pulse 2s ease-in-out infinite;
}
@keyframes roy-micro-radio-pulse {
0%, 100% { transform: scale(0.4); opacity: 0.5; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
50%      { transform: scale(1); opacity: 1; box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.roycss-micro-accordion-expand {
position: relative;
width: 140px;
height: 90px;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.roycss-micro-accordion-expand > span { display: none; }
.roycss-micro-accordion-expand::before {
content: "Section Title";
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 8px 12px;
background: #6366f1;
color: #ffffff;
font: 600 11px/1 system-ui, sans-serif;
z-index: 1;
}
.roycss-micro-accordion-expand::after {
content: "Expanded content reveals here with a smooth height animation.";
position: absolute;
top: 30px;
left: 0;
right: 0;
padding: 0 12px;
background: #eef2ff;
color: #475569;
font: 9px/1.4 system-ui, sans-serif;
overflow: hidden;
max-height: 0;
opacity: 0;
animation: roy-micro-accordion-expand 3s ease-in-out infinite;
}
@keyframes roy-micro-accordion-expand {
0%, 20%   { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
40%, 75%  { max-height: 60px; padding-top: 8px; padding-bottom: 8px; opacity: 1; }
95%, 100% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
}

.roycss-micro-tooltip-appear {
position: relative;
width: 130px;
height: 70px;
}
.roycss-micro-tooltip-appear > span { display: none; }
.roycss-micro-tooltip-appear::before {
content: "Hover me";
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
padding: 6px 16px;
background: #3b82f6;
color: #ffffff;
font: 600 11px/1 system-ui, sans-serif;
border-radius: 6px;
}
.roycss-micro-tooltip-appear::after {
content: "I'm a tooltip!";
position: absolute;
top: 4px;
left: 50%;
padding: 5px 10px;
background: #1e293b;
color: #ffffff;
font: 10px/1 system-ui, sans-serif;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
transform: translateX(-50%) translateY(8px);
animation: roy-micro-tooltip-appear 2.5s ease-in-out infinite;
}
@keyframes roy-micro-tooltip-appear {
0%, 30%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
45%, 75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
90%, 100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

.roycss-micro-toast-slide {
position: relative;
width: 150px;
height: 80px;
overflow: hidden;
border-radius: 8px;
}
.roycss-micro-toast-slide > span { display: none; }
.roycss-micro-toast-slide::before {
content: "✓  Success! Action completed.";
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 12px;
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
font: 600 10px/1.3 system-ui, sans-serif;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
transform: translateY(-100%);
animation: roy-micro-toast-slide 3s ease-in-out infinite;
}
@keyframes roy-micro-toast-slide {
0%, 10%   { transform: translateY(-100%); }
20%, 75%  { transform: translateY(0); }
90%, 100% { transform: translateY(-100%); }
}

.roycss-micro-dropdown-reveal {
position: relative;
width: 120px;
height: 90px;
}
.roycss-micro-dropdown-reveal > span { display: none; }
.roycss-micro-dropdown-reveal::before {
content: "Menu";
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 7px 12px;
background: #6366f1;
color: #ffffff;
font: 600 11px/1 system-ui, sans-serif;
border-radius: 6px;
text-align: center;
z-index: 1;
}
.roycss-micro-dropdown-reveal::after {
content: "Edit\ADelete\AShare";
white-space: pre;
position: absolute;
top: 32px;
left: 0;
right: 0;
padding: 6px 12px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
font: 10px/1.7 system-ui, sans-serif;
color: #475569;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
transform: scaleY(0);
transform-origin: top;
opacity: 0;
animation: roy-micro-dropdown-reveal 3s ease-in-out infinite;
}
@keyframes roy-micro-dropdown-reveal {
0%, 20%   { transform: scaleY(0); opacity: 0; }
40%, 75%  { transform: scaleY(1); opacity: 1; }
90%, 100% { transform: scaleY(0); opacity: 0; }
}

.roycss-micro-modal-scale {
position: relative;
width: 150px;
height: 90px;
overflow: hidden;
border-radius: 8px;
background: #f1f5f9;
}
.roycss-micro-modal-scale > span { display: none; }
.roycss-micro-modal-scale::before {
content: "";
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
opacity: 0;
animation: roy-micro-modal-backdrop 3s ease-in-out infinite;
}
.roycss-micro-modal-scale::after {
content: "Modal Dialog";
position: absolute;
top: 50%;
left: 50%;
padding: 14px 22px;
background: #ffffff;
color: #1e293b;
font: 600 12px/1.2 system-ui, sans-serif;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) scale(0);
animation: roy-micro-modal-scale 3s ease-in-out infinite;
}
@keyframes roy-micro-modal-backdrop {
0%, 15%   { opacity: 0; }
30%, 75%  { opacity: 1; }
90%, 100% { opacity: 0; }
}
@keyframes roy-micro-modal-scale {
0%, 15%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
30%       { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
40%, 75%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
90%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
}

.roycss-micro-fab-expand {
position: relative;
width: 150px;
height: 90px;
}
.roycss-micro-fab-expand > span { display: none; }
.roycss-micro-fab-expand::before {
content: "+";
position: absolute;
bottom: 8px;
right: 8px;
width: 38px;
height: 38px;
background: linear-gradient(135deg, #ec4899, #be185d);
color: #ffffff;
font: 300 24px/1 system-ui, sans-serif;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
animation: roy-micro-fab-rotate 3s ease-in-out infinite;
z-index: 2;
}
.roycss-micro-fab-expand::after {
content: "Share";
position: absolute;
bottom: 16px;
right: 54px;
padding: 5px 12px;
background: #8b5cf6;
color: #ffffff;
font: 600 10px/1 system-ui, sans-serif;
border-radius: 12px;
white-space: nowrap;
opacity: 0;
transform: translateX(20px) scale(0.5);
transform-origin: right center;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
animation: roy-micro-fab-expand 3s ease-in-out infinite;
}
@keyframes roy-micro-fab-rotate {
0%, 30%   { transform: rotate(0deg); }
50%, 75%  { transform: rotate(45deg); }
95%, 100% { transform: rotate(0deg); }
}
@keyframes roy-micro-fab-expand {
0%, 30%   { opacity: 0; transform: translateX(20px) scale(0.5); }
50%, 75%  { opacity: 1; transform: translateX(0) scale(1); }
95%, 100% { opacity: 0; transform: translateX(20px) scale(0.5); }
}

.roycss-micro-progress-fill {
position: relative;
width: 140px;
height: 14px;
background: #e2e8f0;
border-radius: 7px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.roycss-micro-progress-fill > span { display: none; }
.roycss-micro-progress-fill::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: linear-gradient(90deg, #10b981, #34d399, #10b981);
background-size: 200% 100%;
border-radius: 7px;
animation: roy-micro-progress-fill 2.5s ease-in-out infinite;
}
@keyframes roy-micro-progress-fill {
0%   { width: 0; background-position: 200% 0; }
50%  { width: 60%; background-position: 0 0; }
100% { width: 100%; background-position: -200% 0; }
}

.roycss-micro-tab-indicator {
position: relative;
width: 150px;
height: 50px;
}
.roycss-micro-tab-indicator > span { display: none; }
.roycss-micro-tab-indicator::before {
content: "Tab 1      Tab 2      Tab 3";
position: absolute;
top: 12px;
left: 0;
right: 0;
font: 600 10px/1 system-ui, sans-serif;
color: #94a3b8;
letter-spacing: 1px;
text-align: left;
padding-left: 12px;
}
.roycss-micro-tab-indicator::after {
content: "";
position: absolute;
bottom: 8px;
left: 12px;
width: 34px;
height: 3px;
background: #6366f1;
border-radius: 2px;
animation: roy-micro-tab-slide 3.6s ease-in-out infinite;
}
@keyframes roy-micro-tab-slide {
0%, 15%   { left: 12px; }
35%, 50%  { left: 64px; }
70%, 85%  { left: 116px; }
100%      { left: 12px; }
}

.roycss-micro-badge-bounce {
position: relative;
width: 64px;
height: 64px;
background: #f1f5f9;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.roycss-micro-badge-bounce > span { display: none; }
.roycss-micro-badge-bounce::before {
content: "\2709";
font-size: 28px;
color: #64748b;
}
.roycss-micro-badge-bounce::after {
content: "3";
position: absolute;
top: -6px;
right: -6px;
width: 24px;
height: 24px;
background: #ef4444;
color: #ffffff;
font: 700 11px/1 system-ui, sans-serif;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
transform: scale(0);
animation: roy-micro-badge-bounce 2.2s ease-in-out infinite;
}
@keyframes roy-micro-badge-bounce {
0%        { transform: scale(0); opacity: 0; }
10%       { transform: scale(1.35); opacity: 1; }
20%       { transform: scale(0.85); }
30%, 80%  { transform: scale(1); opacity: 1; }
95%, 100% { transform: scale(0); opacity: 0; }
}

@property --roy-vbb-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

.roycss-visual-border-beam {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0f172a;
border: none;
overflow: hidden;
}

.roycss-visual-border-beam > div { display: none; }

.roycss-visual-border-beam::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 2px;
background: conic-gradient(
from var(--roy-vbb-angle),
transparent 0deg,
#10b981 30deg,
#34d399 50deg,
transparent 90deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: roy-visual-border-beam 3s linear infinite;
}

.roycss-visual-border-beam::after {
content: 'BEAM';
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #34d399;
font: 700 13px/1 system-ui, sans-serif;
letter-spacing: 0.25em;
text-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

@keyframes roy-visual-border-beam {
to { --roy-vbb-angle: 360deg; }
}

.roycss-visual-aurora-border {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0b1026;
border: none;
overflow: hidden;
}

.roycss-visual-aurora-border > div { display: none; }

.roycss-visual-aurora-border::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
padding: 2px;
background: linear-gradient(
120deg,
#22d3ee 0%,
#a855f7 25%,
#ec4899 50%,
#22d3ee 75%,
#a855f7 100%
);
background-size: 300% 300%;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: roy-gradient-shift 6s ease infinite;
}

.roycss-visual-aurora-border::after {
content: 'AURORA';
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #e0e7ff;
font: 600 13px/1 system-ui, sans-serif;
letter-spacing: 0.25em;
}

.roycss-visual-inner-glow {
width: 180px;
height: 120px;
border-radius: 14px;
background: #0f172a;
border: none;
animation: roy-visual-inner-glow 2.6s ease-in-out infinite;
}

.roycss-visual-inner-glow > div { display: none; }

@keyframes roy-visual-inner-glow {
0%, 100% {
box-shadow:
inset 0 0 20px rgba(16, 185, 129, 0.3),
inset 0 0 40px rgba(16, 185, 129, 0.1);
}
50% {
box-shadow:
inset 0 0 50px rgba(16, 185, 129, 0.7),
inset 0 0 100px rgba(16, 185, 129, 0.35);
}
}

.roycss-visual-shadow-pulse {
width: 140px;
height: 100px;
border-radius: 14px;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
border: none;
animation: roy-visual-shadow-pulse 2s ease-in-out infinite;
}

.roycss-visual-shadow-pulse > div { display: none; }

@keyframes roy-visual-shadow-pulse {
0%, 100% {
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
transform: scale(1);
}
50% {
box-shadow: 0 14px 38px rgba(236, 72, 153, 0.6);
transform: scale(1.04);
}
}

.roycss-visual-holographic {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(
115deg,
#ff0080 0%,
#ff8a00 14%,
#ffe600 28%,
#00ff96 42%,
#00d4ff 56%,
#6f00ff 70%,
#ff00d4 84%,
#ff0080 100%
);
background-size: 300% 300%;
overflow: hidden;
animation: roy-text-grad-shift 6s ease infinite;
}

.roycss-visual-holographic > div { display: none; }

.roycss-visual-holographic::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.5) 50%,
transparent 70%
);
background-size: 200% 100%;
animation: roy-shimmer-sweep 3s linear infinite;
}

.roycss-visual-metallic {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
linear-gradient(
180deg,
#f5f5f5 0%,
#d0d0d8 14%,
#a0a0a8 28%,
#808088 42%,
#c0c0c8 58%,
#f0f0f5 74%,
#b0b0b8 88%,
#d0d0d8 100%
);
overflow: hidden;
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.7),
inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.roycss-visual-metallic > div { display: none; }

.roycss-visual-metallic::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.06) 0px,
rgba(0, 0, 0, 0.06) 1px,
rgba(255, 255, 255, 0.06) 2px
);
mix-blend-mode: overlay;
}

.roycss-visual-metallic::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent
);
animation: roy-visual-metallic 4s ease-in-out infinite;
}

@keyframes roy-visual-metallic {
0%, 100% { left: -100%; }
50%      { left: 200%; }
}

.roycss-visual-chrome {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(
180deg,
#fefefe 0%,
#c8c8d0 10%,
#888890 20%,
#d8d8e0 30%,
#f8f8fc 45%,
#a0a0a8 55%,
#686870 65%,
#d0d0d8 75%,
#f0f0f5 85%,
#b0b0b8 95%,
#808088 100%
);
overflow: hidden;
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.7),
inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.roycss-visual-chrome > div { display: none; }

.roycss-visual-chrome::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.85),
transparent
);
animation: roy-visual-chrome 5s ease-in-out infinite;
}

@keyframes roy-visual-chrome {
0%, 100% { left: -50%; }
50%      { left: 100%; }
}

.roycss-visual-liquid-fill {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0f172a;
border: none;
overflow: hidden;
}

.roycss-visual-liquid-fill > div { display: none; }

.roycss-visual-liquid-fill::before,
.roycss-visual-liquid-fill::after {
content: '';
position: absolute;
left: -50%;
width: 200%;
height: 50%;
bottom: 0;
background-repeat: repeat-x;
background-size: 100px 40px;
}

.roycss-visual-liquid-fill::before {
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 Q25,0 50,20 T100,20 L100,40 L0,40 Z' fill='%2306b6d4'/%3E%3C/svg%3E");
animation: roy-visual-liquid-wave 2.4s linear infinite;
}

.roycss-visual-liquid-fill::after {
bottom: 4px;
height: 46%;
opacity: 0.55;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 Q25,40 50,20 T100,20 L100,40 L0,40 Z' fill='%2322d3ee'/%3E%3C/svg%3E");
animation: roy-visual-liquid-wave 1.8s linear infinite reverse;
}

@keyframes roy-visual-liquid-wave {
from { transform: translateX(0); }
to   { transform: translateX(100px); }
}

.roycss-visual-gradient-text-animated {
background: linear-gradient(
90deg,
#ef4444,
#f59e0b,
#eab308,
#22c55e,
#06b6d4,
#3b82f6,
#8b5cf6,
#ec4899,
#ef4444
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: roy-visual-gradient-text-animated 4s linear infinite;
}

@keyframes roy-visual-gradient-text-animated {
to { background-position: 200% center; }
}

.roycss-visual-gradient-mesh {
background:
radial-gradient(at 20% 20%, #ec4899 0px, transparent 50%),
radial-gradient(at 80% 0%,  #f59e0b 0px, transparent 50%),
radial-gradient(at 0% 50%,  #8b5cf6 0px, transparent 50%),
radial-gradient(at 80% 80%, #06b6d4 0px, transparent 50%),
radial-gradient(at 50% 100%, #22c55e 0px, transparent 50%),
#0f172a;
background-size: 200% 200%;
animation: roy-visual-gradient-mesh 10s ease-in-out infinite;
}

@keyframes roy-visual-gradient-mesh {
0%, 100% { background-position: 0% 0%; }
25%      { background-position: 100% 50%; }
50%      { background-position: 50% 100%; }
75%      { background-position: 0% 50%; }
}

.roycss-visual-image-distortion {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #06b6d4);
animation: roy-visual-image-distortion 2.4s ease-in-out infinite;
}

.roycss-visual-image-distortion > div { display: none; }

@keyframes roy-visual-image-distortion {
0%, 100% {
filter: blur(0px);
transform: skew(0deg, 0deg) scale(1);
}
20% {
filter: blur(0.5px);
transform: skew(2deg, 1deg) scale(1.01);
}
40% {
filter: blur(1px);
transform: skew(-2deg, -1deg) scale(0.99);
}
60% {
filter: blur(0.5px);
transform: skew(1deg, 2deg) scale(1.01);
}
80% {
filter: blur(0px);
transform: skew(-1deg, -2deg) scale(1);
}
}

.roycss-visual-pixelate {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #06b6d4);
overflow: hidden;
}

.roycss-visual-pixelate > div { display: none; }

.roycss-visual-pixelate::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 0, 0, 0.25) 50%, transparent 50%),
linear-gradient(90deg, rgba(0, 0, 0, 0.25) 50%, transparent 50%);
background-size: 12px 12px, 12px 12px;
mix-blend-mode: overlay;
animation: roy-visual-pixelate 1.4s steps(4) infinite;
}

@keyframes roy-visual-pixelate {
0%   { background-size: 12px 12px, 12px 12px; }
25%  { background-size: 6px 6px, 6px 6px; }
50%  { background-size: 24px 24px, 24px 24px; }
75%  { background-size: 4px 4px, 4px 4px; }
100% { background-size: 12px 12px, 12px 12px; }
}

.roycss-visual-frost-blur {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
radial-gradient(circle at 30% 30%, #06b6d4 0%, transparent 50%),
radial-gradient(circle at 70% 70%, #ec4899 0%, transparent 50%),
linear-gradient(135deg, #8b5cf6, #f59e0b);
overflow: hidden;
}

.roycss-visual-frost-blur > div { display: none; }

.roycss-visual-frost-blur::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-radius: inherit;
}

.roycss-visual-frost-blur::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.08) 0px,
rgba(255, 255, 255, 0.08) 1px,
transparent 1px,
transparent 3px
),
repeating-linear-gradient(
-45deg,
rgba(255, 255, 255, 0.08) 0px,
rgba(255, 255, 255, 0.08) 1px,
transparent 1px,
transparent 3px
);
border-radius: inherit;
mix-blend-mode: overlay;
}

@property --roy-vsf-x {
syntax: '<percentage>';
inherits: false;
initial-value: 20%;
}
@property --roy-vsf-y {
syntax: '<percentage>';
inherits: false;
initial-value: 30%;
}

.roycss-visual-spotlight-follow {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0a0a0f;
border: none;
overflow: hidden;
}

.roycss-visual-spotlight-follow > div { display: none; }

.roycss-visual-spotlight-follow::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle 70px at var(--roy-vsf-x) var(--roy-vsf-y),
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.1) 40%,
transparent 70%
);
animation: roy-visual-spotlight-follow 5s ease-in-out infinite;
}

@keyframes roy-visual-spotlight-follow {
0%   { --roy-vsf-x: 20%; --roy-vsf-y: 30%; }
25%  { --roy-vsf-x: 80%; --roy-vsf-y: 30%; }
50%  { --roy-vsf-x: 80%; --roy-vsf-y: 70%; }
75%  { --roy-vsf-x: 20%; --roy-vsf-y: 70%; }
100% { --roy-vsf-x: 20%; --roy-vsf-y: 30%; }
}

.roycss-visual-mask-fade {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
-webkit-mask: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%) no-repeat;
mask: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%) no-repeat;
-webkit-mask-size: 100% 200%;
mask-size: 100% 200%;
animation: roy-visual-mask-fade 3s ease-in-out infinite alternate;
}

.roycss-visual-mask-fade > div { display: none; }

@keyframes roy-visual-mask-fade {
from {
-webkit-mask-position: 0% 0%;
mask-position: 0% 0%;
}
to {
-webkit-mask-position: 0% 100%;
mask-position: 0% 100%;
}
}

.roycss-visual-blend-mode-overlay {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #1e293b, #0f172a);
overflow: hidden;
}

.roycss-visual-blend-mode-overlay > div { display: none; }

.roycss-visual-blend-mode-overlay::before,
.roycss-visual-blend-mode-overlay::after {
content: '';
position: absolute;
width: 130px;
height: 130px;
border-radius: 50%;
filter: blur(22px);
mix-blend-mode: screen;
}

.roycss-visual-blend-mode-overlay::before {
top: -25px;
left: -25px;
background: #ec4899;
animation: roy-visual-blend-mode-1 5s ease-in-out infinite alternate;
}

.roycss-visual-blend-mode-overlay::after {
bottom: -25px;
right: -25px;
background: #06b6d4;
animation: roy-visual-blend-mode-2 5s ease-in-out infinite alternate;
}

@keyframes roy-visual-blend-mode-1 {
0%   { transform: translate(0, 0); }
100% { transform: translate(90px, 70px); }
}

@keyframes roy-visual-blend-mode-2 {
0%   { transform: translate(0, 0); }
100% { transform: translate(-90px, -70px); }
}

.roycss-visual-backdrop-blur-heavy {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
radial-gradient(circle at 20% 30%, #ec4899 0%, transparent 40%),
radial-gradient(circle at 80% 70%, #06b6d4 0%, transparent 40%),
radial-gradient(circle at 50% 50%, #f59e0b 0%, transparent 50%),
linear-gradient(135deg, #8b5cf6, #10b981);
overflow: hidden;
}

.roycss-visual-backdrop-blur-heavy > div { display: none; }

.roycss-visual-backdrop-blur-heavy::before {
content: '';
position: absolute;
inset: 15px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 10px;
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.roycss-visual-color-shift {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
animation: roy-hue-cycle 6s linear infinite;
}

.roycss-visual-color-shift > div { display: none; }

.roycss-visual-hue-rotate-loop {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: conic-gradient(
from 0deg,
#ef4444,
#f59e0b,
#eab308,
#22c55e,
#06b6d4,
#3b82f6,
#8b5cf6,
#ec4899,
#ef4444
);
animation: roy-hue-cycle 4s linear infinite;
}

.roycss-visual-hue-rotate-loop > div { display: none; }

.roycss-visual-saturation-pulse {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #f59e0b, #06b6d4);
animation: roy-visual-saturation-pulse 2.4s ease-in-out infinite;
}

.roycss-visual-saturation-pulse > div { display: none; }

@keyframes roy-visual-saturation-pulse {
0%, 100% { filter: saturate(0); }
50%      { filter: saturate(2.6); }
}

.roycss-visual-glass-reflection {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
radial-gradient(circle at 30% 30%, #ec4899 0%, transparent 50%),
radial-gradient(circle at 70% 70%, #06b6d4 0%, transparent 50%),
linear-gradient(135deg, #8b5cf6, #f59e0b);
overflow: hidden;
}

.roycss-visual-glass-reflection > div { display: none; }

.roycss-visual-glass-reflection::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: inherit;
}

.roycss-visual-glass-reflection::after {
content: '';
position: absolute;
top: -100%;
left: -50%;
width: 50%;
height: 300%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.7),
transparent
);
transform: rotate(25deg);
animation: roy-visual-glass-reflection 3.2s ease-in-out infinite;
}

@keyframes roy-visual-glass-reflection {
0%, 100% { left: -50%; }
50%      { left: 120%; }
}

.roycss-visual-noise-overlay {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #1e293b, #0f172a);
overflow: hidden;
}

.roycss-visual-noise-overlay > div { display: none; }

.roycss-visual-noise-overlay::before {
content: '';
position: absolute;
inset: -10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
opacity: 0.55;
mix-blend-mode: screen;
animation: roy-visual-noise-overlay 0.6s steps(4) infinite;
}

.roycss-visual-noise-overlay::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.25), transparent 60%);
mix-blend-mode: overlay;
}

@keyframes roy-visual-noise-overlay {
0%   { transform: translate(0, 0); }
25%  { transform: translate(-6px, 4px); }
50%  { transform: translate(5px, -5px); }
75%  { transform: translate(-4px, -4px); }
100% { transform: translate(0, 0); }
}

.roycss-visual-shimmer-sweep {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #1e293b, #334155);
overflow: hidden;
}

.roycss-visual-shimmer-sweep > div { display: none; }

.roycss-visual-shimmer-sweep::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 35%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.08) 65%,
transparent 100%
);
animation: roy-visual-shimmer-sweep 2.6s ease-in-out infinite;
}

.roycss-visual-shimmer-sweep::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 40%, rgba(16, 185, 129, 0.15) 50%, transparent 60%);
mix-blend-mode: overlay;
}

@keyframes roy-visual-shimmer-sweep {
0%   { left: -100%; }
100% { left: 100%; }
}

.roycss-visual-iridescent {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: conic-gradient(
from 0deg at 50% 50%,
#ff0080,
#ff8a00,
#ffe600,
#00ff96,
#00d4ff,
#6f00ff,
#ff00d4,
#ff0080
);
animation: roy-hue-cycle 8s linear infinite;
overflow: hidden;
}

.roycss-visual-iridescent > div { display: none; }

.roycss-visual-iridescent::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.12) 0px,
rgba(255, 255, 255, 0.12) 4px,
transparent 4px,
transparent 8px
);
mix-blend-mode: overlay;
}

.roycss-visual-iridescent::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
background-size: 200% 100%;
animation: roy-hue-cycle-shine 3s linear infinite;
}

.roycss-visual-neon-pulse {
width: 180px;
height: 120px;
border-radius: 14px;
background: #0a0a0f;
border: 2px solid #ec4899;
animation: roy-visual-neon-pulse 1.6s ease-in-out infinite;
}

.roycss-visual-neon-pulse > div { display: none; }

@keyframes roy-visual-neon-pulse {
0%, 100% {
box-shadow:
0 0 6px #ec4899,
0 0 12px #ec4899,
0 0 24px #ec4899,
inset 0 0 8px #ec4899,
inset 0 0 16px rgba(236, 72, 153, 0.5);
border-color: #ec4899;
}
50% {
box-shadow:
0 0 16px #ec4899,
0 0 36px #ec4899,
0 0 60px #ec4899,
inset 0 0 18px #ec4899,
inset 0 0 36px rgba(236, 72, 153, 0.75);
border-color: #f472b6;
}
}

.roycss-visual-glitch-distort {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
overflow: hidden;
}

.roycss-visual-glitch-distort > div { display: none; }

.roycss-visual-glitch-distort::before,
.roycss-visual-glitch-distort::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
mix-blend-mode: screen;
}

.roycss-visual-glitch-distort::before {
background: linear-gradient(135deg, #ff003c, #ff003c, #06b6d4);
animation: roy-visual-glitch-1 1.5s steps(2) infinite;
}

.roycss-visual-glitch-distort::after {
background: linear-gradient(135deg, #00fff0, #ec4899, #00fff0);
animation: roy-visual-glitch-2 1.7s steps(2) infinite;
}

@keyframes roy-visual-glitch-1 {
0%, 100% { clip-path: inset(0 0 95% 0);  transform: translate(0); }
20%      { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); }
40%      { clip-path: inset(50% 0 30% 0); transform: translate(4px, -2px); }
60%      { clip-path: inset(70% 0 10% 0); transform: translate(-3px, 1px); }
80%      { clip-path: inset(10% 0 80% 0); transform: translate(3px, -3px); }
}

@keyframes roy-visual-glitch-2 {
0%, 100% { clip-path: inset(95% 0 0 0);  transform: translate(0); }
25%      { clip-path: inset(40% 0 30% 0); transform: translate(4px, -2px); }
50%      { clip-path: inset(60% 0 10% 0); transform: translate(-4px, 2px); }
75%      { clip-path: inset(20% 0 60% 0); transform: translate(3px, -3px); }
}

.roycss-visual-prism {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0a0a0f 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.roycss-visual-prism > div { display: none; }

.roycss-visual-prism::before,
.roycss-visual-prism::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
background: conic-gradient(
from 0deg,
#ef4444,
#f59e0b,
#eab308,
#22c55e,
#06b6d4,
#3b82f6,
#8b5cf6,
#ec4899,
#ef4444
);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
transform-origin: 50% 60%;
}

.roycss-visual-prism::before {
filter: blur(2px);
animation: roy-visual-prism 4s linear infinite;
}

.roycss-visual-prism::after {
filter: blur(10px);
opacity: 0.55;
animation: roy-visual-prism 4s linear infinite reverse;
}

@keyframes roy-visual-prism {
from { transform: translate(-50%, -55%) rotate(0deg); }
to   { transform: translate(-50%, -55%) rotate(360deg); }
}

.roycss-visual-foil {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.12) 0px,
rgba(255, 255, 255, 0.12) 2px,
transparent 2px,
transparent 5px
),
repeating-linear-gradient(
-45deg,
rgba(0, 0, 0, 0.12) 0px,
rgba(0, 0, 0, 0.12) 2px,
transparent 2px,
transparent 5px
),
linear-gradient(
135deg,
#f0f0f5 0%,
#c0c0d0 25%,
#f8f8ff 50%,
#b0b0c0 75%,
#e8e8f0 100%
);
background-size: 8px 8px, 8px 8px, 100% 100%;
overflow: hidden;
animation: roy-visual-foil-hue 6s ease-in-out infinite;
box-shadow:
inset 0 2px 6px rgba(255, 255, 255, 0.7),
inset 0 -2px 6px rgba(0, 0, 0, 0.25);
}

.roycss-visual-foil > div { display: none; }

.roycss-visual-foil::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
60deg,
transparent 30%,
rgba(255, 255, 255, 0.7) 50%,
transparent 70%
);
background-size: 200% 100%;
animation: roy-shimmer-sweep 3s linear infinite;
}

@keyframes roy-visual-foil-hue {
0%, 100% { filter: hue-rotate(0deg); }
50%      { filter: hue-rotate(70deg); }
}

.roycss-material-spring-up {
animation: roy-mat-spring-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes roy-mat-spring-up {
0% { opacity: 0; transform: translateY(40px) scale(0.8); }
60% { opacity: 1; transform: translateY(-8px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}

.roycss-material-spring-down {
animation: roy-mat-spring-down 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes roy-mat-spring-down {
0% { opacity: 1; transform: translateY(0) scale(1); }
40% { opacity: 1; transform: translateY(12px) scale(1.04, 0.96); }
100% { opacity: 0; transform: translateY(80px) scale(0.7); }
}

.roycss-material-emphasized {
animation: roy-mat-emphasized 0.5s cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes roy-mat-emphasized {
0% { opacity: 0; transform: scale(0.85); }
100% { opacity: 1; transform: scale(1); }
}

.roycss-material-emphasized-decel {
animation: roy-mat-emph-decel 0.45s cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

@keyframes roy-mat-emph-decel {
0% { opacity: 0; transform: translateY(24px) scale(0.92); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}

.roycss-material-container-transform {
animation: roy-mat-container 0.6s cubic-bezier(0.2, 0, 0, 1) both;
transform-origin: center;
}

@keyframes roy-mat-container {
0% { opacity: 0; transform: scaleX(0.2) scaleY(0.1); border-radius: 32px; }
40% { opacity: 1; transform: scaleX(1.05) scaleY(0.7); border-radius: 18px; }
100% { opacity: 1; transform: scale(1); border-radius: 8px; }
}

.roycss-apple-squish-in {
animation: roy-apple-squish-in 0.7s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes roy-apple-squish-in {
0% { opacity: 0; transform: translateY(60px) scale(0.8, 0.85); }
55% { opacity: 1; transform: translateY(0) scale(1.06, 0.94); }
78% { transform: scale(0.98, 1.02); }
100% { transform: scale(1); }
}

.roycss-apple-squish-out {
animation: roy-apple-squish-out 0.55s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes roy-apple-squish-out {
0% { opacity: 1; transform: scale(1); }
40% { opacity: 1; transform: scale(0.94, 1.05) translateY(8px); }
100% { opacity: 0; transform: scale(0.85) translateY(60px); }
}

.roycss-apple-flip-spring {
perspective: 1000px;
animation: roy-apple-flip-spring 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
transform-style: preserve-3d;
}

@keyframes roy-apple-flip-spring {
0% { opacity: 0; transform: rotateY(-90deg) scale(0.85); }
60% { opacity: 1; transform: rotateY(12deg) scale(1.04); }
100% { transform: rotateY(0) scale(1); }
}

.roycss-apple-elastic-scale {
animation: roy-apple-elastic 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

@keyframes roy-apple-elastic {
0% { transform: scale(0); opacity: 0; }
35% { transform: scale(1.25); opacity: 1; }
55% { transform: scale(0.88); }
75% { transform: scale(1.08); }
100% { transform: scale(1); }
}

.roycss-apple-bounce-settle {
animation: roy-apple-bounce-settle 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) both;
}

@keyframes roy-apple-bounce-settle {
0% { transform: translateY(-120%); opacity: 0; }
15% { transform: translateY(0); opacity: 1; }
30% { transform: translateY(-22%); }
45% { transform: translateY(0); }
60% { transform: translateY(-8%); }
75% { transform: translateY(0); }
88% { transform: translateY(-2%); }
100% { transform: translateY(0); }
}

.roycss-natural-drop {
animation: roy-natural-drop 1s cubic-bezier(0.45, 0, 0.55, 1) both;
}

@keyframes roy-natural-drop {
0% { transform: translateY(-200%) scaleY(0.9); opacity: 0; }
45% { transform: translateY(0) scaleY(1.1); opacity: 1; }
55% { transform: translateY(0) scaleY(0.85); }
65% { transform: translateY(-30%) scaleY(1.05); }
80% { transform: translateY(0) scaleY(0.95); }
90% { transform: translateY(-8%) scaleY(1.02); }
100% { transform: translateY(0) scaleY(1); }
}

.roycss-pendulum-swing-spring {
transform-origin: top center;
animation: roy-pendulum-spring 1.6s cubic-bezier(0.4, 0, 0.6, 1) both;
}

@keyframes roy-pendulum-spring {
0% { transform: rotate(0deg); }
15% { transform: rotate(45deg); }
30% { transform: rotate(-32deg); }
45% { transform: rotate(22deg); }
60% { transform: rotate(-14deg); }
75% { transform: rotate(8deg); }
88% { transform: rotate(-3deg); }
100% { transform: rotate(0deg); }
}

.roycss-rubber-snap-back {
animation: roy-rubber-snap 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes roy-rubber-snap {
0% { transform: scaleX(1); }
25% { transform: scaleX(1.4) scaleY(0.7); }
45% { transform: scaleX(0.85) scaleY(1.15); }
65% { transform: scaleX(1.08) scaleY(0.95); }
85% { transform: scaleX(0.98) scaleY(1.01); }
100% { transform: scaleX(1) scaleY(1); }
}

.roycss-material-state-layer {
position: relative;
background: #6750A4;
color: #fff;
}
.roycss-material-state-layer::after {
content: "";
position: absolute;
inset: 0;
background: #ffffff;
opacity: 0;
animation: roy-mat-state-layer 1.6s ease-in-out infinite;
pointer-events: none;
}

@keyframes roy-mat-state-layer {
0%, 100% { opacity: 0; }
20% { opacity: 0.08; }
50% { opacity: 0.12; }
80% { opacity: 0.05; }
}

.roycss-material-fab-scale {
animation: roy-mat-fab-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
border-radius: 16px;
background: #6750A4;
color: #fff;
}

@keyframes roy-mat-fab-scale {
0% { opacity: 0; transform: scale(0) rotate(-45deg); }
60% { opacity: 1; transform: scale(1.1) rotate(5deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}

.roycss-linear-shimmer-hover {
position: relative;
background: #0f0f10;
color: #e4e4e7;
overflow: hidden;
border: 1px solid #27272a;
}
.roycss-linear-shimmer-hover::before {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 100%;
height: 100%;
background: linear-gradient(
100deg,
transparent 20%,
rgba(255, 255, 255, 0.12) 50%,
transparent 80%
);
transform: skewX(-20deg);
transition: left 0.7s ease;
}
.roycss-linear-shimmer-hover:hover::before {
left: 150%;
}

.roycss-linear-glow-border {
position: relative;
background: #111113;
color: #fafafa;
border-radius: 12px;
z-index: 0;
}
.roycss-linear-glow-border::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #5e6ad2, #8b5cf6, #ec4899, #5e6ad2);
background-size: 300% 300%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
animation: roy-linear-glow 3s linear infinite paused;
z-index: -1;
}
.roycss-linear-glow-border:hover::before {
opacity: 1;
animation-play-state: running;
}

@keyframes roy-linear-glow {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}

.roycss-linear-spotlight {
position: relative;
background: #0d0d0f;
color: #e4e4e7;
border: 1px solid #1f1f23;
border-radius: 12px;
overflow: hidden;
}
.roycss-linear-spotlight::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
300px circle at var(--mx, 50%) var(--my, 50%),
rgba(94, 106, 210, 0.18),
transparent 60%
);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.roycss-linear-spotlight:hover::before {
opacity: 1;
}
.roycss-linear-spotlight:hover {
border-color: #3f3f46;
transition: border-color 0.3s ease;
}

.roycss-linear-magnetic-pull {
background: #5e6ad2;
color: #fff;
border-radius: 8px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}
.roycss-linear-magnetic-pull:hover {
transform: translateX(6px) translateY(-4px);
}
.roycss-linear-magnetic-pull:active {
transform: translateX(3px) translateY(-2px) scale(0.96);
transition: transform 0.1s ease;
}

.roycss-linear-noise-overlay {
position: relative;
background: #0a0a0b;
color: #e4e4e7;
border: 1px solid #1a1a1d;
border-radius: 10px;
overflow: hidden;
}
.roycss-linear-noise-overlay::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
opacity: 0;
mix-blend-mode: overlay;
transition: opacity 0.4s ease;
pointer-events: none;
}
.roycss-linear-noise-overlay:hover::after {
opacity: 0.35;
}

.roycss-linear-gradient-sweep {
position: relative;
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 8px;
overflow: hidden;
z-index: 0;
}
.roycss-linear-gradient-sweep::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #5e6ad2, #8b5cf6 50%, #ec4899);
transform: translateY(100%);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.roycss-linear-gradient-sweep:hover::before {
transform: translateY(0);
}
.roycss-linear-gradient-sweep:hover {
border-color: transparent;
}

.roycss-linear-depth-shadow {
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.roycss-linear-depth-shadow:hover {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.3),
0 8px 16px rgba(0, 0, 0, 0.4),
0 16px 32px rgba(94, 106, 210, 0.15);
transform: translateY(-2px);
}

.roycss-linear-card-lift {
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 14px;
box-shadow: 0 0 0 0 rgba(94, 106, 210, 0);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.35s ease;
}
.roycss-linear-card-lift:hover {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 18px 40px -12px rgba(94, 106, 210, 0.4);
border-color: #3f3f46;
}

.roycss-linear-text-glow {
color: #a1a1aa;
font-weight: 600;
letter-spacing: 0.02em;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.roycss-linear-text-glow:hover {
color: #fafafa;
text-shadow:
0 0 14px rgba(94, 106, 210, 0.6),
0 0 30px rgba(139, 92, 246, 0.3);
}

.roycss-linear-icon-bounce {
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 8px;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.roycss-linear-icon-bounce::before {
content: "\2192";
display: inline-block;
margin-right: 6px;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.roycss-linear-icon-bounce:hover {
background: #27272a;
border-color: #3f3f46;
}
.roycss-linear-icon-bounce:hover::before {
transform: translateX(6px) scale(1.2);
}

.roycss-linear-aurora-glow {
position: relative;
background: #0a0a0b;
overflow: hidden;
}
.roycss-linear-aurora-glow::before,
.roycss-linear-aurora-glow::after {
content: "";
position: absolute;
width: 60%;
height: 60%;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
animation: roy-rotate-spin-float 10s ease-in-out infinite;
}
.roycss-linear-aurora-glow::before {
background: radial-gradient(circle, #5e6ad2, transparent 70%);
top: -20%;
left: -10%;
}
.roycss-linear-aurora-glow::after {
background: radial-gradient(circle, #8b5cf6, transparent 70%);
bottom: -20%;
right: -10%;
animation-delay: -5s;
}

@keyframes roy-aurora-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -30px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.95); }
}

.roycss-linear-gradient-mesh-bg {
background-color: #0a0a0b;
background-image:
radial-gradient(at 20% 20%, rgba(94, 106, 210, 0.35) 0px, transparent 50%),
radial-gradient(at 80% 10%, rgba(139, 92, 246, 0.3) 0px, transparent 50%),
radial-gradient(at 70% 80%, rgba(236, 72, 153, 0.25) 0px, transparent 50%),
radial-gradient(at 10% 90%, rgba(59, 130, 246, 0.25) 0px, transparent 50%);
background-size: 200% 200%;
animation: roy-mesh-drift 18s ease-in-out infinite;
}

@keyframes roy-mesh-drift {
0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
50% { background-position: 30% 30%, 70% 20%, 60% 70%, 20% 80%; }
}

.roycss-apple-frosted-vibrancy {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 10px 30px rgba(0, 0, 0, 0.15);
color: #1d1d1f;
}

.roycss-apple-material-thin {
background: rgba(250, 250, 252, 0.5);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
color: #1d1d1f;
}

.roycss-apple-material-thick {
background: rgba(245, 245, 247, 0.75);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 20px 50px rgba(0, 0, 0, 0.2);
color: #1d1d1f;
}

.roycss-material-elevation-1 {
background: #FFFBFE;
color: #1C1B1F;
border-radius: 12px;
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.30),
0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.roycss-material-elevation-3 {
background: #FFFBFE;
color: #1C1B1F;
border-radius: 16px;
box-shadow:
0px 1px 3px rgba(0, 0, 0, 0.30),
0px 4px 8px 3px rgba(0, 0, 0, 0.15);
}

.roycss-material-elevation-5 {
background: #FFFBFE;
color: #1C1B1F;
border-radius: 28px;
box-shadow:
0px 1px 3px rgba(0, 0, 0, 0.30),
0px 14px 28px 5px rgba(0, 0, 0, 0.25);
}

.roycss-material-state-layer-surface {
position: relative;
background: #1C1B1F;
color: #E6E1E5;
border-radius: 12px;
overflow: hidden;
}
.roycss-material-state-layer-surface::after {
content: "";
position: absolute;
inset: 0;
background: #D0BCFF;
opacity: 0.08;
pointer-events: none;
}

.roycss-linear-dark-surface {
background: linear-gradient(180deg, #18181b 0%, #0f0f10 100%);
color: #e4e4e7;
border: 1px solid #27272a;
border-radius: 12px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 4px 16px rgba(0, 0, 0, 0.5);
}

.roycss-scroll-driven-fade {
animation: roy-scroll-fade linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}

@keyframes roy-scroll-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}

@supports not (animation-timeline: view()) {
.roycss-scroll-driven-fade {
animation: roy-scroll-fade 2s ease-in-out infinite alternate;
}
}

.roycss-scroll-driven-scale {
animation: roy-scroll-scale linear both;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}

@keyframes roy-scroll-scale {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

@supports not (animation-timeline: view()) {
.roycss-scroll-driven-scale {
animation: roy-scroll-scale-fallback 2.4s ease-in-out infinite alternate;
}
@keyframes roy-scroll-scale-fallback {
0% { transform: scale(0.6); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
}

.roycss-scroll-driven-rotate {
animation: roy-scroll-rotate linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}

@keyframes roy-scroll-rotate {
0% { transform: rotate(-45deg); }
100% { transform: rotate(45deg); }
}

@supports not (animation-timeline: view()) {
.roycss-scroll-driven-rotate {
animation: roy-scroll-rotate 3s ease-in-out infinite alternate;
}
}

.roycss-scroll-driven-translate {
animation: roy-scroll-translate linear both;
animation-timeline: view();
animation-range: entry 0% cover 60%;
}

@keyframes roy-scroll-translate {
0% { transform: translateX(-80px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}

@supports not (animation-timeline: view()) {
.roycss-scroll-driven-translate {
animation: roy-scroll-translate-fallback 2.5s ease-in-out infinite alternate;
}
@keyframes roy-scroll-translate-fallback {
0% { transform: translateX(-80px); opacity: 0.4; }
100% { transform: translateX(0); opacity: 1; }
}
}

.roycss-scroll-driven-blur {
animation: roy-scroll-blur linear both;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}

@keyframes roy-scroll-blur {
0% { filter: blur(12px); opacity: 0; transform: scale(1.05); }
100% { filter: blur(0); opacity: 1; transform: scale(1); }
}

@supports not (animation-timeline: view()) {
.roycss-scroll-driven-blur {
animation: roy-scroll-blur-fallback 2.6s ease-in-out infinite alternate;
}
@keyframes roy-scroll-blur-fallback {
0% { filter: blur(12px); opacity: 0.4; transform: scale(1.05); }
100% { filter: blur(0); opacity: 1; transform: scale(1); }
}
}

.roycss-scroll-driven-color {
animation: roy-scroll-color linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}

@keyframes roy-scroll-color {
0% { background: #5e6ad2; color: #fff; }
50% { background: #8b5cf6; color: #fff; }
100% { background: #ec4899; color: #fff; }
}

@supports not (animation-timeline: view()) {
.roycss-scroll-driven-color {
animation: roy-scroll-color 4s ease-in-out infinite alternate;
}
}

.roycss-scroll-driven-sticky {
position: sticky;
top: 0;
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 8px;
animation: roy-scroll-sticky linear both;
animation-timeline: scroll(root);
animation-range: 0 100px;
}

@keyframes roy-scroll-sticky {
0% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); border-color: #3f3f46; }
}

@supports not (animation-timeline: scroll()) {
.roycss-scroll-driven-sticky {
animation: roy-scroll-sticky-fallback 2s ease-in-out infinite alternate;
}
@keyframes roy-scroll-sticky-fallback {
0% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); border-color: #27272a; }
100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); border-color: #3f3f46; }
}
}

.roycss-scroll-driven-progress-ring {
position: relative;
border-radius: 50%;
background:
conic-gradient(#5e6ad2 0deg, #5e6ad2 0deg, #27272a 0deg, #27272a 360deg);
animation: roy-scroll-ring linear both;
animation-timeline: scroll(root);
animation-range: 0 100%;
}
.roycss-scroll-driven-progress-ring::after {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
background: #0a0a0b;
}

@keyframes roy-scroll-ring {
0% {
background:
conic-gradient(#5e6ad2 0deg, #5e6ad2 0deg, #27272a 0deg, #27272a 360deg);
}
100% {
background:
conic-gradient(#5e6ad2 0deg, #5e6ad2 360deg, #27272a 360deg, #27272a 360deg);
}
}

@supports not (animation-timeline: scroll()) {
.roycss-scroll-driven-progress-ring {
animation: roy-scroll-ring 2s linear infinite alternate;
}
}

.roycss-apple-vibrancy-light {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 10px 30px rgba(0, 0, 0, 0.1);
color: #1d1d1f;
}

.roycss-apple-vibrancy-dark {
background: rgba(30, 30, 32, 0.55);
backdrop-filter: blur(24px) saturate(180%) brightness(0.95);
-webkit-backdrop-filter: blur(24px) saturate(180%) brightness(0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 10px 30px rgba(0, 0, 0, 0.4);
color: #f5f5f7;
}

.roycss-apple-sidebar-material {
background: linear-gradient(
180deg,
rgba(245, 245, 247, 0.7) 0%,
rgba(235, 235, 240, 0.6) 100%
);
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
box-shadow:
inset 1px 0 0 rgba(255, 255, 255, 0.5),
0 6px 20px rgba(0, 0, 0, 0.1);
color: #1d1d1f;
}

.roycss-material-surface-tint {
position: relative;
background: rgba(103, 80, 164, 0.08);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(103, 80, 164, 0.15);
border-radius: 16px;
color: #1C1B1F;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(103, 80, 164, 0.08);
}

.roycss-apple-ultra-thin {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px) saturate(110%);
-webkit-backdrop-filter: blur(8px) saturate(110%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 10px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 2px 8px rgba(0, 0, 0, 0.06);
color: #1d1d1f;
}

.roycss-glass-prism {
position: relative;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-radius: 16px;
color: #fff;
}
.roycss-glass-prism::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(
135deg,
#ff0080, #ff8c00, #ffe600, #00e676, #00b0ff, #651fff, #ff0080
);
background-size: 300% 300%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: roy-linear-glow 6s linear infinite;
opacity: 0.7;
pointer-events: none;
}

.roycss-glass-depth-layer {
position: relative;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 -1px 0 rgba(0, 0, 0, 0.05) inset,
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.12),
0 20px 40px rgba(0, 0, 0, 0.15);
color: #1d1d1f;
}

.roycss-anchor-tooltip {
position: relative;
width: 220px;
height: 140px;
border-radius: 14px;
background: linear-gradient(135deg, #0f172a, #1e293b);
display: grid;
place-items: center;
anchor-name: --roy-at-host;
}
.roycss-anchor-tooltip > span {
color: #e2e8f0;
font: 600 14px/1 system-ui, sans-serif;
padding: 8px 16px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
anchor-name: --roy-at-btn;
}
.roycss-anchor-tooltip::after {
content: "Anchored tooltip ✓";
position: absolute;
position-anchor: --roy-at-btn;
position-area: block-end span-inline-end;
margin-bottom: 8px;
padding: 6px 10px;
border-radius: 6px;
background: #10b981;
color: #022c22;
font: 600 12px/1.2 system-ui, sans-serif;
white-space: nowrap;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
}
.roycss-anchor-tooltip:hover::after,
.roycss-anchor-tooltip:focus-within::after {
opacity: 1;
transform: translateY(0);
}

@supports not (position-anchor: --x) {
.roycss-anchor-tooltip::after {
position: absolute;
bottom: 8px;
left: 50%;
transform: translate(-50%, 4px);
}
.roycss-anchor-tooltip:hover::after,
.roycss-anchor-tooltip:focus-within::after {
transform: translate(-50%, 0);
}
}

.roycss-has-parent-highlight {
width: 220px;
padding: 18px;
border-radius: 14px;
background: #1e293b;
border: 2px solid #334155;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.roycss-has-parent-highlight > span {
display: block;
width: 100%;
padding: 10px 12px;
border-radius: 8px;
background: #0f172a;
color: #cbd5e1;
font: 500 13px/1.4 system-ui, sans-serif;
outline: none;
border: 1px solid #475569;
transition: border-color 0.25s, color 0.25s;
}

.roycss-has-parent-highlight:has(> span:hover) {
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
background: #0f2a23;
}
.roycss-has-parent-highlight:has(> span:focus-visible) {
border-color: #f59e0b;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}
.roycss-has-parent-highlight:has(> span:hover) > span {
color: #34d399;
border-color: #10b981;
}

@supports not selector(:has(*)) {
.roycss-has-parent-highlight > span:focus-visible {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}
}

.roycss-container-query-card {
container-type: inline-size;
container-name: roycq;
width: 100%;
max-width: 360px;
height: 160px;
border-radius: 14px;
background: linear-gradient(135deg, #312e81, #4c1d95);
padding: 14px;
display: grid;
gap: 10px;
grid-template-columns: 1fr;
align-content: center;
color: #ede9fe;
font: 500 12px/1.4 system-ui, sans-serif;
transition: grid-template-columns 0.3s;
}
.roycss-container-query-card > span {
display: block;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.roycss-container-query-card::before {
content: "📐 narrow";
font-weight: 700;
color: #c4b5fd;
}

@container roycq (min-width: 240px) {
.roycss-container-query-card {
grid-template-columns: 1fr 1fr;
}
.roycss-container-query-card::before {
content: "📐 wide";
grid-column: 1 / -1;
color: #a7f3d0;
}
}
@container roycq (min-width: 320px) {
.roycss-container-query-card {
grid-template-columns: repeat(3, 1fr);
}
.roycss-container-query-card::before {
content: "📐 extra-wide";
color: #fde68a;
}
}

@supports not (container-type: inline-size) {
.roycss-container-query-card {
grid-template-columns: 1fr 1fr;
}
}

.roycss-starting-style-fade {
width: 200px;
height: 120px;
border-radius: 14px;
background: linear-gradient(135deg, #db2777, #9333ea);
display: grid;
place-items: center;
color: #fff;
font: 700 14px/1 system-ui, sans-serif;
letter-spacing: 0.15em;
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

animation: roy-b10-ss-restart 3s ease-in-out infinite;
}
@keyframes roy-b10-ss-restart {
0%, 40%   { opacity: 1; transform: translateY(0) scale(1); }
50%       { opacity: 0; transform: translateY(20px) scale(0.92); }
60%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@starting-style {
.roycss-starting-style-fade {
opacity: 0;
transform: translateY(24px) scale(0.9);
}
}

@supports not (animation-timeline: --fake) {
}

.roycss-auto-height-expand {
interpolate-size: allow-keywords;
width: 220px;
border-radius: 14px;
background: #0f172a;
padding: 12px 14px;
color: #e2e8f0;
font: 500 12px/1.4 system-ui, sans-serif;
overflow: hidden;
}
.roycss-auto-height-expand > span {
display: block;
font-weight: 700;
color: #34d399;
cursor: pointer;
padding-bottom: 6px;
}
.roycss-auto-height-expand::after {
content: "This hidden paragraph smoothly grows to its natural height: auto using the new interpolate-size property. No max-height hacks required — the browser can now interpolate to the auto keyword directly.";
display: block;
height: 0;
opacity: 0;
overflow: hidden;
transition: height 0.4s ease, opacity 0.4s ease;
color: #94a3b8;
font-size: 11px;
}
.roycss-auto-height-expand:hover::after {
height: auto;
opacity: 1;
}

@supports not (interpolate-size: allow-keywords) {
.roycss-auto-height-expand::after {
transition: max-height 0.4s ease, opacity 0.4s ease;
max-height: 0;
}
.roycss-auto-height-expand:hover::after {
max-height: 200px;
height: auto;
}
}

.roycss-view-transition-snapshot {
width: 200px;
height: 120px;
border-radius: 16px;
background: linear-gradient(135deg, #0ea5e9, #6366f1);
display: grid;
place-items: center;
color: #fff;
font: 700 14px/1 system-ui, sans-serif;
view-transition-name: roy-vt-card;
animation: roy-b10-vt-morph 4s ease-in-out infinite;
}

::view-transition-group(roy-vt-card) {
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(roy-vt-card) {
animation: roy-b10-vt-out 0.4s ease forwards;
}
::view-transition-new(roy-vt-card) {
animation: roy-b10-vt-in 0.4s ease forwards;
}
@keyframes roy-b10-vt-morph {
0%, 35%   { border-radius: 16px; background: linear-gradient(135deg, #0ea5e9, #6366f1); }
50%, 85%  { border-radius: 60px; background: linear-gradient(135deg, #f43f5e, #f59e0b); }
100%      { border-radius: 16px; background: linear-gradient(135deg, #0ea5e9, #6366f1); }
}
@keyframes roy-b10-vt-out {
to { opacity: 0; transform: scale(1.05); }
}
@keyframes roy-b10-vt-in {
from { opacity: 0; transform: scale(0.95); }
}

@supports not (view-transition-name: none) {
}

.roycss-balanced-text {
width: 240px;
padding: 16px 18px;
border-radius: 12px;
background: #fef3c7;
color: #78350f;
font: 600 14px/1.45 Georgia, serif;
}
.roycss-balanced-text > span {
display: block;
margin-bottom: 10px;
}
.roycss-balanced-text::before {
content: "Balance: RoyCSS brings modern CSS effects to your project, one elegant class at a time.";
display: block;
text-wrap: balance;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px dashed #d97706;
font-size: 13px;
color: #92400e;
}
.roycss-balanced-text::after {
content: "Pretty: This paragraph uses text-wrap: pretty to avoid widows and orphans on the final line, creating a more polished typographic appearance.";
display: block;
text-wrap: pretty;
font-size: 12px;
color: #b45309;
}

@supports not (text-wrap: balance) {
.roycss-balanced-text::before { text-wrap: normal; }
.roycss-balanced-text::after  { text-wrap: normal; }
}

.roycss-relative-color-hover {
--base: #10b981;
width: 200px;
height: 120px;
border-radius: 14px;
background: var(--base);
display: grid;
place-items: center;
color: rgb(from var(--base) calc(255 - r) calc(255 - g) calc(255 - b));
font: 700 13px/1 system-ui, sans-serif;
letter-spacing: 0.1em;
border: 2px solid rgb(from var(--base) r g b / 0.6);
transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.roycss-relative-color-hover:hover {

background: rgb(from var(--base) calc(r + 40) calc(g + 20) calc(b - 30));
color: rgb(from var(--base) calc(r * 0.2) calc(g * 0.2) calc(b * 0.2));
border-color: rgb(from var(--base) r g b / 0.95);
box-shadow: 0 8px 24px rgb(from var(--base) r g b / 0.45);
transform: translateY(-3px);
}

@supports not (background: rgb(from red r g b)) {
.roycss-relative-color-hover { color: #022c22; }
.roycss-relative-color-hover:hover {
background: #6ee7b7;
color: #064e3b;
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
}
}

.roycss-color-mix-gradient {
--c1: #f43f5e;
--c2: #06b6d4;
width: 220px;
height: 130px;
border-radius: 14px;
background: linear-gradient(
135deg,
var(--c1),
color-mix(in oklab, var(--c1) 50%, var(--c2)),
var(--c2)
);
display: grid;
place-items: center;
color: #fff;
font: 700 13px/1 system-ui, sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: filter 0.3s, transform 0.3s;
}
.roycss-color-mix-gradient::after {
content: "";
position: absolute;
inset: auto 0 -16px 0;
height: 14px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--c1) 80%, white),
color-mix(in srgb, var(--c2) 80%, white)
);
border-radius: 7px;
opacity: 0;
transition: opacity 0.3s;
}
.roycss-color-mix-gradient:hover {
filter: saturate(1.3) brightness(1.05);
transform: scale(1.04);
}
.roycss-color-mix-gradient:hover::after { opacity: 1; }

@supports not (background: color-mix(in oklab, red, blue)) {
.roycss-color-mix-gradient {
background: linear-gradient(135deg, #f43f5e, #7e2d8b, #06b6d4);
}
}

.roycss-light-dark-auto {
color-scheme: light dark;
width: 220px;
height: 130px;
border-radius: 14px;
background: light-dark(#f8fafc, #0f172a);
color: light-dark(#0f172a, #f1f5f9);
border: 2px solid light-dark(#cbd5e1, #334155);
display: grid;
place-items: center;
font: 700 13px/1 system-ui, sans-serif;
transition: background 0.4s, color 0.4s, border-color 0.4s;
animation: roy-b10-ld-cycle 4s steps(1, end) infinite;
}
@keyframes roy-b10-ld-cycle {
0%, 49%   { color-scheme: light; }
50%, 100% { color-scheme: dark; }
}
.roycss-light-dark-auto::after {
content: "☀ / ☾ auto theme";
color: light-dark(#ea580c, #38bdf8);
font-size: 12px;
letter-spacing: 0.1em;
}

@supports not (color: light-dark(red, blue)) {
.roycss-light-dark-auto {
background: #0f172a;
color: #f1f5f9;
border-color: #334155;
}
.roycss-light-dark-auto::after { color: #38bdf8; }
}

@property --roy-b10-par-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.roycss-property-angle-rotate {
width: 160px;
height: 160px;
border-radius: 50%;
background: conic-gradient(
from var(--roy-b10-par-angle),
#ec4899, #8b5cf6, #3b82f6, #10b981, #f59e0b, #ec4899
);
--roy-b10-par-angle: 0deg;
animation: roy-b10-par-spin 4s linear infinite;
position: relative;
}
.roycss-property-angle-rotate::after {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
background: #0f172a;
}
.roycss-property-angle-rotate > div { display: none; }
@keyframes roy-b10-par-spin {
to { --roy-b10-par-angle: 360deg; }
}

@property --roy-b10-pcs-hue {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.roycss-property-color-shift {
width: 160px;
height: 160px;
border-radius: 18px;
background: hsl(from hsl(var(--roy-b10-pcs-hue) 90% 55%) h s l);
--roy-b10-pcs-hue: 0deg;
animation: roy-b10-pcs-cycle 5s linear infinite;
box-shadow: 0 12px 30px hsl(var(--roy-b10-pcs-hue) 90% 55% / 0.4);
display: grid;
place-items: center;
color: #fff;
font: 700 12px/1 system-ui, sans-serif;
letter-spacing: 0.2em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.roycss-property-color-shift > div { display: none; }
@keyframes roy-b10-pcs-cycle {
to { --roy-b10-pcs-hue: 360deg; }
}

.roycss-svg-turbulence-distort {
width: 180px;
height: 120px;
border-radius: 14px;
background: linear-gradient(135deg, #f43f5e, #8b5cf6, #06b6d4);
display: grid;
place-items: center;
color: #fff;
font: 800 18px/1 system-ui, sans-serif;
letter-spacing: 0.25em;
filter: url(#roy-b10-turb-filter);
animation: roy-b10-turb-pulse 3s ease-in-out infinite;
}
.roycss-svg-turbulence-distort > div { display: none; }
@keyframes roy-b10-turb-pulse {
0%, 100% { filter: url(#roy-b10-turb-filter) brightness(1); }
50%      { filter: url(#roy-b10-turb-filter) brightness(1.15); }
}

.roycss-svg-turbulence-distort::before {
content: "";
position: absolute;
width: 0; height: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='0' height='0'><filter id='roy-b10-turb-filter'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.022' numOctaves='2' seed='3'/><feDisplacementMap in='SourceGraphic' scale='14'/></filter></svg>");
}

@supports not (filter: url(#fake)) {
.roycss-svg-turbulence-distort { filter: none; }
}

.roycss-svg-displacement-wave {
width: 180px;
height: 120px;
border-radius: 14px;
background:
radial-gradient(circle at 30% 30%, #22d3ee, transparent 50%),
radial-gradient(circle at 70% 70%, #a855f7, transparent 50%),
linear-gradient(135deg, #0ea5e9, #6366f1);
display: grid;
place-items: center;
color: #fff;
font: 800 16px/1 system-ui, sans-serif;
letter-spacing: 0.2em;
filter: url(#roy-b10-disp-filter);
animation: roy-b10-disp-wave 2.5s ease-in-out infinite alternate;
}
.roycss-svg-displacement-wave > div { display: none; }
@keyframes roy-b10-disp-wave {
from { transform: translateY(-2px); }
to   { transform: translateY(2px); }
}
.roycss-svg-displacement-wave::before {
content: "";
position: absolute;
width: 0; height: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='0' height='0'><filter id='roy-b10-disp-filter'><feTurbulence type='turbulence' baseFrequency='0.01 0.04' numOctaves='1' seed='7'><animate attributeName='baseFrequency' dur='6s' values='0.01 0.04;0.02 0.02;0.01 0.04' repeatCount='indefinite'/></feTurbulence><feDisplacementMap in='SourceGraphic' scale='22'/></filter></svg>");
}
@supports not (filter: url(#fake)) {
.roycss-svg-displacement-wave { filter: none; }
}

.roycss-svg-gooey-merge {
width: 180px;
height: 120px;
background: #0f172a;
border-radius: 14px;
filter: url(#roy-b10-gooey-filter);
position: relative;
overflow: hidden;
}
.roycss-svg-gooey-merge > div { display: none; }
.roycss-svg-gooey-merge::before,
.roycss-svg-gooey-merge::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: #10b981;
top: 35px;
}
.roycss-svg-gooey-merge::before {
left: 40px;
animation: roy-b10-gooey-a 2.4s ease-in-out infinite;
}
.roycss-svg-gooey-merge::after {
right: 40px;
background: #34d399;
animation: roy-b10-gooey-b 2.4s ease-in-out infinite;
}
@keyframes roy-b10-gooey-a {
0%, 100% { transform: translateX(0); }
50%      { transform: translateX(40px); }
}
@keyframes roy-b10-gooey-b {
0%, 100% { transform: translateX(0); }
50%      { transform: translateX(-40px); }
}
.roycss-svg-gooey-merge {

background-image:
linear-gradient(#0f172a, #0f172a),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='0' height='0'><filter id='roy-b10-gooey-filter'><feGaussianBlur in='SourceGraphic' stdDeviation='8'/><feColorMatrix mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7'/></filter></svg>");
background-repeat: no-repeat;
}
@supports not (filter: url(#fake)) {
.roycss-svg-gooey-merge { filter: none; }
}

.roycss-offset-path-orbit {
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, #1e293b 40%, #0f172a 41%);
position: relative;
display: grid;
place-items: center;
}
.roycss-offset-path-orbit > div { display: none; }
.roycss-offset-path-orbit::before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b);
box-shadow: 0 0 12px #f59e0b;
offset-path: circle(70px at center);
offset-rotate: 0deg;
animation: roy-b10-op-orbit 3s linear infinite;
}
.roycss-offset-path-orbit::after {
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fca5a5, #dc2626);
box-shadow: 0 0 20px #ef4444;
}
@keyframes roy-b10-op-orbit {
to { offset-distance: 100%; }
}
@supports not (offset-path: circle(40px)) {
.roycss-offset-path-orbit::before {
animation: roy-b10-op-fallback 3s linear infinite;
}
@keyframes roy-b10-op-fallback {
from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
to   { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}
}

.roycss-offset-path-wave {
width: 220px;
height: 120px;
border-radius: 14px;
background: linear-gradient(180deg, #0f172a, #1e293b);
position: relative;
overflow: hidden;
}
.roycss-offset-path-wave > div { display: none; }
.roycss-offset-path-wave::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #67e8f9, #06b6d4);
box-shadow: 0 0 14px #06b6d4;

offset-path: path("M 0 60 C 30 10, 50 110, 80 60 S 130 10, 160 60 S 210 110, 240 60");
offset-rotate: 0deg;
animation: roy-b10-op-orbit 2.5s linear infinite;
}
@supports not (offset-path: path("M0 0L1 1")) {
.roycss-offset-path-wave::before {
left: 0; top: 50%;
animation: roy-b10-op-orbit-fb 2.5s ease-in-out infinite;
}
@keyframes roy-b10-op-wave-fb {
0%   { left: 0;   top: 50%; }
25%  { left: 25%; top: 20%; }
50%  { left: 50%; top: 50%; }
75%  { left: 75%; top: 80%; }
100% { left: 100%; top: 50%; }
}
}

.roycss-mask-composite-reveal {
width: 180px;
height: 120px;
border-radius: 14px;
background: linear-gradient(135deg, #1e293b, #334155);
position: relative;
overflow: hidden;
display: grid;
place-items: center;
}
.roycss-mask-composite-reveal > div { display: none; }
.roycss-mask-composite-reveal::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle, #fff 1px, transparent 1.5px) 0 0 / 12px 12px,
linear-gradient(135deg, #ec4899, #8b5cf6);

-webkit-mask:
linear-gradient(#000, #000),
radial-gradient(circle 30px at var(--mx, 50%) var(--my, 50%), #000 100%, transparent 100%);
-webkit-mask-composite: source-out;
mask-composite: subtract;
animation: roy-b10-mcr-sweep 3s ease-in-out infinite;
}
@keyframes roy-b10-mcr-sweep {
0%   { --mx: 20%; --my: 30%; }
33%  { --mx: 70%; --my: 60%; }
66%  { --mx: 40%; --my: 75%; }
100% { --mx: 20%; --my: 30%; }
}
@property --mx { syntax: '<percentage>'; initial-value: 50%; inherits: false; }
@property --my { syntax: '<percentage>'; initial-value: 50%; inherits: false; }
@supports not (mask-composite: subtract) {
.roycss-mask-composite-reveal::before {
-webkit-mask: radial-gradient(circle 60px at 50% 50%, #000 80%, transparent);
}
}

.roycss-mix-blend-difference {
width: 180px;
height: 120px;
border-radius: 14px;
background: #0f172a;
position: relative;
overflow: hidden;
isolation: isolate;
}
.roycss-mix-blend-difference > div { display: none; }
.roycss-mix-blend-difference::before,
.roycss-mix-blend-difference::after {
content: "";
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
top: 15px;
}
.roycss-mix-blend-difference::before {
left: 18px;
background: #ef4444;
animation: roy-b10-mbd-a 3s ease-in-out infinite;
}
.roycss-mix-blend-difference::after {
right: 18px;
background: #22d3ee;
mix-blend-mode: difference;
animation: roy-b10-mbd-b 3s ease-in-out infinite;
}
@keyframes roy-b10-mbd-a {
0%, 100% { transform: translateX(0); }
50%      { transform: translateX(28px); }
}
@keyframes roy-b10-mbd-b {
0%, 100% { transform: translateX(0); }
50%      { transform: translateX(-28px); }
}

.roycss-mix-blend-exclusion {
width: 180px;
height: 120px;
border-radius: 14px;
background:
conic-gradient(from 0deg, #f59e0b, #ec4899, #8b5cf6, #06b6d4, #f59e0b);
position: relative;
overflow: hidden;
isolation: isolate;
}
.roycss-mix-blend-exclusion > div { display: none; }
.roycss-mix-blend-exclusion::before,
.roycss-mix-blend-exclusion::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
top: 20px;
background: #ffffff;
mix-blend-mode: exclusion;
}
.roycss-mix-blend-exclusion::before {
left: 25px;
border-radius: 50%;
animation: roy-b10-mbe-a 2.4s ease-in-out infinite;
}
.roycss-mix-blend-exclusion::after {
right: 25px;
border-radius: 12px;
animation: roy-b10-mbe-b 2.4s ease-in-out infinite;
}
@keyframes roy-b10-mbe-a {
0%, 100% { transform: translateY(0) rotate(0deg); }
50%      { transform: translateY(20px) rotate(180deg); }
}
@keyframes roy-b10-mbe-b {
0%, 100% { transform: translateY(20px) rotate(0deg); }
50%      { transform: translateY(0) rotate(180deg); }
}

.roycss-clip-path-hexagon {
width: 160px;
height: 160px;
background:
conic-gradient(from 30deg, #f59e0b, #ef4444, #ec4899, #8b5cf6, #f59e0b);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: grid;
place-items: center;
animation: roy-sunburst-rotate 6s linear infinite;
}
.roycss-clip-path-hexagon > div { display: none; }
.roycss-clip-path-hexagon::after {
content: "";
width: 70%;
height: 70%;
background: #0f172a;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.roycss-clip-path-star {
width: 170px;
height: 170px;
background: linear-gradient(135deg, #fbbf24, #f59e0b 40%, #b45309);
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
);
display: grid;
place-items: center;
animation: roy-b10-cps-twinkle 1.8s ease-in-out infinite;
}
.roycss-clip-path-star > div { display: none; }
.roycss-clip-path-star::after {
content: "★";
font-size: 40px;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}
@keyframes roy-b10-cps-twinkle {
0%, 100% { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5)); transform: scale(1); }
50%      { filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.95)); transform: scale(1.06); }
}

@property --roy-b10-ppb-progress {
syntax: '<number>';
initial-value: 0;
inherits: false;
}
.roycss-property-progress-bar {
width: 220px;
height: 36px;
border-radius: 18px;
background: #1e293b;
border: 1px solid #334155;
position: relative;
overflow: hidden;
--roy-b10-ppb-progress: 0;
animation: roy-b10-ppb-fill 3s ease-in-out infinite;
}
.roycss-property-progress-bar > div { display: none; }
.roycss-property-progress-bar::before {
content: "";
position: absolute;
inset: 4px 0 4px 4px;
width: calc(var(--roy-b10-ppb-progress) * 1% - 8px);
border-radius: 14px;
background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}
.roycss-property-progress-bar::after {
content: counter(progress) "%";
counter-reset: progress var(--roy-b10-ppb-progress);
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #e2e8f0;
font: 700 13px/1 system-ui, sans-serif;
letter-spacing: 0.05em;
}
@keyframes roy-b10-ppb-fill {
0%   { --roy-b10-ppb-progress: 0; }
60%  { --roy-b10-ppb-progress: 100; }
80%  { --roy-b10-ppb-progress: 100; }
100% { --roy-b10-ppb-progress: 0; }
}

@property --roy-b10-pcl-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.roycss-property-conic-loader {
width: 64px;
height: 64px;
border-radius: 50%;
background: conic-gradient(
from var(--roy-b10-pcl-angle),
transparent 0deg,
#06b6d4 60deg,
#6366f1 120deg,
transparent 180deg,
transparent 360deg
);
-webkit-mask: radial-gradient(circle, transparent 22px, #000 23px);
mask: radial-gradient(circle, transparent 22px, #000 23px);
--roy-b10-pcl-angle: 0deg;
animation: roy-b10-pcl-spin 1.2s linear infinite;
}
@keyframes roy-b10-pcl-spin {
to { --roy-b10-pcl-angle: 360deg; }
}

@property --roy-b10-pgf-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.roycss-property-gradient-flow {
width: 200px;
height: 120px;
border-radius: 14px;
background: linear-gradient(
var(--roy-b10-pgf-angle),
#ec4899, #8b5cf6, #3b82f6, #06b6d4, #10b981, #f59e0b, #ec4899
);
background-size: 300% 300%;
display: grid;
place-items: center;
color: #fff;
font: 800 16px/1 system-ui, sans-serif;
letter-spacing: 0.2em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
--roy-b10-pgf-angle: 0deg;
animation: roy-b10-pgf-spin 4s linear infinite;
}
.roycss-property-gradient-flow > div { display: none; }
@keyframes roy-b10-pgf-spin {
to { --roy-b10-pgf-angle: 360deg; }
}

@property --roy-b10-psb-blur {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
@property --roy-b10-psb-spread {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
.roycss-property-shadow-breathe {
width: 120px;
height: 120px;
border-radius: 24px;
background: linear-gradient(135deg, #0ea5e9, #6366f1);
display: grid;
place-items: center;
color: #fff;
font: 800 14px/1 system-ui, sans-serif;
letter-spacing: 0.15em;
--roy-b10-psb-blur: 0px;
--roy-b10-psb-spread: 0px;
box-shadow:
0 0 var(--roy-b10-psb-blur) var(--roy-b10-psb-spread) rgba(99, 102, 241, 0.7),
0 0 var(--roy-b10-psb-blur) var(--roy-b10-psb-spread) rgba(14, 165, 233, 0.5);
animation: roy-b10-psb-breathe 2.4s ease-in-out infinite;
}
.roycss-property-shadow-breathe > div { display: none; }
@keyframes roy-b10-psb-breathe {
0%, 100% { --roy-b10-psb-blur: 0px;   --roy-b10-psb-spread: 0px; }
50%      { --roy-b10-psb-blur: 40px;  --roy-b10-psb-spread: 8px; }
}

@property --roy-b10-phc-hue {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.roycss-property-hue-cycle {
width: 140px;
height: 140px;
border-radius: 24px;
background: hsl(from hsl(var(--roy-b10-phc-hue) 80% 60%) h s l);
display: grid;
place-items: center;
color: hsl(from hsl(calc(var(--roy-b10-phc-hue) + 180deg) 80% 20%) h s l);
font: 800 14px/1 system-ui, sans-serif;
letter-spacing: 0.18em;
--roy-b10-phc-hue: 0deg;
box-shadow: 0 12px 30px hsl(var(--roy-b10-phc-hue) 80% 60% / 0.5);
animation: roy-b10-phc-cycle 4s linear infinite;
}
.roycss-property-hue-cycle > div { display: none; }
@keyframes roy-b10-phc-cycle {
to { --roy-b10-phc-hue: 360deg; }
}
@supports not (background: hsl(from red h s l)) {
.roycss-property-hue-cycle {
background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
color: #0f172a;
animation: roy-conic-hue 4s linear infinite;
}
}

.roycss-offset-path-draw {
width: 220px;
height: 140px;
border-radius: 14px;
background: #0f172a;
position: relative;
overflow: hidden;
}
.roycss-offset-path-draw > div { display: none; }
.roycss-offset-path-draw::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 3px;
background: linear-gradient(135deg, #fde047, #f59e0b);
box-shadow: 0 0 12px #f59e0b;
offset-path: path("M 20 70 Q 60 10, 110 70 T 200 70");
offset-rotate: auto;
animation: roy-b10-op-orbit 2.5s linear infinite;
}
.roycss-offset-path-draw::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(transparent 49%, rgba(255, 255, 255, 0.06) 50%, transparent 51%);
}
@supports not (offset-path: path("M0 0L1 1")) {
.roycss-offset-path-draw::before {
left: 20px; top: 70px;
animation: roy-b10-opd-fb 2.5s ease-in-out infinite;
}
@keyframes roy-b10-opd-fb {
0%   { left: 20px;  top: 70px; }
25%  { left: 60px;  top: 10px; }
50%  { left: 110px; top: 70px; }
75%  { left: 160px; top: 130px; }
100% { left: 200px; top: 70px; }
}
}

.roycss-scroll-timeline-spin {
width: 140px;
height: 140px;
border-radius: 24px;
background:
conic-gradient(from 0deg, #ec4899, #8b5cf6, #06b6d4, #10b981, #ec4899);
display: grid;
place-items: center;
color: #fff;
font: 700 12px/1.2 system-ui, sans-serif;
letter-spacing: 0.15em;
text-align: center;
animation: roy-rotate-spin 1s linear;
animation-timeline: scroll(root block);
}
.roycss-scroll-timeline-spin > div { display: none; }
.roycss-scroll-timeline-spin::after {
content: "scroll the page";
font-size: 10px;
opacity: 0.7;
}

@supports not (animation-timeline: scroll(root block)) {
.roycss-scroll-timeline-spin {
animation: roy-rotate-spin 3s linear infinite;
}
}

.roycss-view-timeline-reveal {
width: 220px;
height: 120px;
border-radius: 14px;
background: linear-gradient(135deg, #7c3aed, #2563eb);
display: grid;
place-items: center;
color: #fff;
font: 700 13px/1.2 system-ui, sans-serif;
letter-spacing: 0.1em;
text-align: center;
animation: roy-b10-vtl-reveal linear both;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}
.roycss-view-timeline-reveal > div { display: none; }
.roycss-view-timeline-reveal::after {
content: "reveals on scroll into view";
display: block;
font-size: 10px;
opacity: 0.8;
margin-top: 6px;
}
@keyframes roy-b10-vtl-reveal {
from { opacity: 0; transform: translateY(60px) scale(0.8); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}

@supports not (animation-timeline: view()) {
.roycss-view-timeline-reveal {
animation: roy-b10-vtl-reveal 0.8s ease both;
}
}

.roycss-starting-style-drop-in {
position: relative;
width: 240px;
height: 140px;
border-radius: 14px;
background: linear-gradient(135deg, #1e293b, #0f172a);
overflow: hidden;
display: grid;
place-items: center;
}
.roycss-starting-style-drop-in > span {
display: none;
}
.roycss-starting-style-drop-in::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.35s ease, transition-behavior 0.35s;
transition-behavior: allow-discrete;
animation: roy-b10-ssdi-cycle 4s ease-in-out infinite;
}
.roycss-starting-style-drop-in::after {
content: "Dropped In ✓";
position: absolute;
padding: 14px 22px;
border-radius: 12px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
font: 700 14px/1 system-ui, sans-serif;
letter-spacing: 0.1em;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
transform: translateY(-80px) scale(0.9);
opacity: 0;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.45s ease,
display 0.45s allow-discrete;
animation: roy-b10-ssdi-cycle 4s ease-in-out infinite;
}
@keyframes roy-b10-ssdi-cycle {
0%, 35%   { opacity: 1; transform: translateY(0) scale(1); }
45%, 90%  { opacity: 0; transform: translateY(-80px) scale(0.9); }
100%      { opacity: 1; transform: translateY(0) scale(1); }
}

@starting-style {
.roycss-starting-style-drop-in::after {
opacity: 0;
transform: translateY(-80px) scale(0.9);
}
}

@supports not (animation-timeline: --fake) {
}

.roycss-interpolate-size-accordion {
interpolate-size: allow-keywords;
width: 220px;
border-radius: 14px;
background: linear-gradient(135deg, #f97316, #ef4444);
overflow: hidden;
display: grid;
place-items: center;
}
.roycss-interpolate-size-accordion > div { display: none; }
.roycss-interpolate-size-accordion::before {
content: "Hover to expand ▾";
display: block;
padding: 14px;
color: #fff;
font: 700 13px/1 system-ui, sans-serif;
letter-spacing: 0.05em;
}
.roycss-interpolate-size-accordion::after {
content: "Expanded panel content — height interpolates to auto without max-height hacks thanks to interpolate-size: allow-keywords.";
display: block;
height: 0;
opacity: 0;
padding: 0 14px;
color: #fef3c7;
font: 500 12px/1.4 system-ui, sans-serif;
overflow: hidden;
transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s, padding 0.45s;
}
.roycss-interpolate-size-accordion:hover::after {
height: auto;
opacity: 1;
padding: 0 14px 14px;
}
@supports not (interpolate-size: allow-keywords) {
.roycss-interpolate-size-accordion::after {
transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s, padding 0.45s;
max-height: 0;
}
.roycss-interpolate-size-accordion:hover::after {
max-height: 120px;
height: auto;
}
}

.roycss-color-mix-mesh {
--a: #f43f5e;
--b: #06b6d4;
--c: #8b5cf6;
width: 100%;
height: 100%;
min-height: 200px;
border-radius: 12px;
background:
radial-gradient(circle at 15% 25%, var(--a), transparent 40%),
radial-gradient(circle at 85% 15%, var(--b), transparent 40%),
radial-gradient(circle at 75% 80%, var(--c), transparent 45%),
radial-gradient(circle at 25% 75%, color-mix(in oklab, var(--a) 50%, var(--c)), transparent 45%),
radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--b) 50%, var(--c)), transparent 50%),
linear-gradient(135deg, #0f172a, #1e293b);
animation: roy-b10-cmm-shift 8s ease-in-out infinite;
}
@keyframes roy-b10-cmm-shift {
0%, 100% { filter: hue-rotate(0deg); }
50%      { filter: hue-rotate(40deg) saturate(1.2); }
}
@supports not (background: color-mix(in oklab, red, blue)) {
.roycss-color-mix-mesh {
background:
radial-gradient(circle at 15% 25%, #f43f5e, transparent 40%),
radial-gradient(circle at 85% 15%, #06b6d4, transparent 40%),
radial-gradient(circle at 75% 80%, #8b5cf6, transparent 45%),
linear-gradient(135deg, #0f172a, #1e293b);
}
}

.roycss-relative-color-tint {
--base: #6366f1;
width: 100%;
height: 100%;
min-height: 200px;
border-radius: 12px;
background:
radial-gradient(circle at 30% 30%,
rgb(from var(--base) calc(r + 80) calc(g + 80) calc(b + 80) / 0.6),
transparent 50%),
radial-gradient(circle at 70% 70%,
rgb(from var(--base) calc(r - 60) calc(g - 30) calc(b - 30) / 0.7),
transparent 55%),
linear-gradient(135deg,
rgb(from var(--base) r g b / 0.85),
rgb(from var(--base) calc(r * 0.3) calc(g * 0.3) calc(b * 0.3)));
animation: roy-b10-rct-pan 6s ease-in-out infinite alternate;
}
@keyframes roy-b10-rct-pan {
from { background-position: 0% 0%, 100% 100%, 0 0; }
to   { background-position: 20% 30%, 80% 70%, 0 0; }
}
@supports not (background: rgb(from red r g b)) {
.roycss-relative-color-tint {
background:
radial-gradient(circle at 30% 30%, rgba(165, 180, 252, 0.6), transparent 50%),
radial-gradient(circle at 70% 70%, rgba(67, 56, 202, 0.7), transparent 55%),
linear-gradient(135deg, #6366f1, #1e1b4b);
}
}

@property --roy-b10-cgc-sweep {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.roycss-conic-gradient-clock {
width: 100%;
height: 100%;
min-height: 220px;
border-radius: 12px;
display: grid;
place-items: center;
background: #0f172a;
position: relative;
}
.roycss-conic-gradient-clock::before {
content: "";
width: 180px;
height: 180px;
border-radius: 50%;
background:
conic-gradient(from var(--roy-b10-cgc-sweep),
rgba(16, 185, 129, 0.35) 0deg,
rgba(16, 185, 129, 0) 6deg,
rgba(16, 185, 129, 0) 360deg),
conic-gradient(from 0deg,
#1e293b 0deg, #1e293b 30deg,
#334155 30deg, #334155 60deg,
#1e293b 60deg, #1e293b 90deg,
#334155 90deg, #334155 120deg,
#1e293b 120deg, #1e293b 150deg,
#334155 150deg, #334155 180deg,
#1e293b 180deg, #1e293b 210deg,
#334155 210deg, #334155 240deg,
#1e293b 240deg, #1e293b 270deg,
#334155 270deg, #334155 300deg,
#1e293b 300deg, #1e293b 330deg,
#334155 330deg, #334155 360deg);
--roy-b10-cgc-sweep: 0deg;
animation: roy-b10-cgc-tick 6s linear infinite;
box-shadow: inset 0 0 0 4px #10b981, 0 12px 30px rgba(16, 185, 129, 0.3);
}
.roycss-conic-gradient-clock::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 12px #10b981;
}
@keyframes roy-b10-cgc-tick {
to { --roy-b10-cgc-sweep: 360deg; }
}

@property --roy-b10-dcs-a {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@property --roy-b10-dcs-b {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.roycss-double-conic-spinner {
width: 100%;
height: 100%;
min-height: 220px;
border-radius: 12px;
background: #0f172a;
display: grid;
place-items: center;
position: relative;
}
.roycss-double-conic-spinner::before {
content: "";
width: 180px;
height: 180px;
border-radius: 50%;
background:
conic-gradient(from var(--roy-b10-dcs-a),
transparent 0deg, #06b6d4 40deg, transparent 80deg,
transparent 180deg, #06b6d4 220deg, transparent 260deg,
transparent 360deg),
conic-gradient(from var(--roy-b10-dcs-b),
transparent 0deg, #ec4899 40deg, transparent 80deg,
transparent 180deg, #ec4899 220deg, transparent 260deg,
transparent 360deg),
radial-gradient(circle, #1e293b 40%, #0f172a 41%);
-webkit-mask: radial-gradient(circle, transparent 50px, #000 51px);
mask: radial-gradient(circle, transparent 50px, #000 51px);
--roy-b10-dcs-a: 0deg;
--roy-b10-dcs-b: 90deg;
animation: roy-b10-dcs-spin 3s linear infinite;
}
@keyframes roy-b10-dcs-spin {
to {
--roy-b10-dcs-a: 360deg;
--roy-b10-dcs-b: -270deg;
}
}

@property --roy-b10-mrr-radius {
syntax: '<percentage>';
initial-value: 0%;
inherits: false;
}
.roycss-mask-radial-reveal {
width: 100%;
height: 100%;
min-height: 220px;
border-radius: 12px;
background:
repeating-linear-gradient(45deg,
#ec4899 0 10px, #8b5cf6 10px 20px, #06b6d4 20px 30px),
#0f172a;
position: relative;
overflow: hidden;
display: grid;
place-items: center;
}
.roycss-mask-radial-reveal::before {
content: "";
position: absolute;
inset: 0;
background: #0f172a;
-webkit-mask: radial-gradient(circle at center,
transparent 0,
transparent var(--roy-b10-mrr-radius),
#000 calc(var(--roy-b10-mrr-radius) + 2px));
mask: radial-gradient(circle at center,
transparent 0,
transparent var(--roy-b10-mrr-radius),
#000 calc(var(--roy-b10-mrr-radius) + 2px));
--roy-b10-mrr-radius: 0%;
animation: roy-b10-mrr-grow 4s ease-in-out infinite;
}
@keyframes roy-b10-mrr-grow {
0%, 100% { --roy-b10-mrr-radius: 0%; }
60%      { --roy-b10-mrr-radius: 100%; }
80%      { --roy-b10-mrr-radius: 100%; }
}
@supports not (mask: radial-gradient(circle, transparent, black)) {
.roycss-mask-radial-reveal::before {
animation: roy-b10-mrr-fb 4s ease-in-out infinite;
}
@keyframes roy-b10-mrr-fb {
0%, 100% { opacity: 1; }
60%, 80% { opacity: 0; }
}
}

@property --roy-b10-mlw-pos {
syntax: '<percentage>';
initial-value: 0%;
inherits: false;
}
.roycss-mask-linear-wipe {
width: 100%;
height: 100%;
min-height: 220px;
border-radius: 12px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.roycss-mask-linear-wipe::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #06b6d4, #6366f1);
-webkit-mask: linear-gradient(110deg,
#000 0,
#000 var(--roy-b10-mlw-pos),
transparent calc(var(--roy-b10-mlw-pos) + 4px),
transparent 100%);
mask: linear-gradient(110deg,
#000 0,
#000 var(--roy-b10-mlw-pos),
transparent calc(var(--roy-b10-mlw-pos) + 4px),
transparent 100%);
--roy-b10-mlw-pos: 0%;
animation: roy-b10-mlw-sweep 4s ease-in-out infinite;
}
@keyframes roy-b10-mlw-sweep {
0%, 100% { --roy-b10-mlw-pos: -10%; }
50%      { --roy-b10-mlw-pos: 110%; }
}
@supports not (mask: linear-gradient(110deg, #000, transparent)) {
.roycss-mask-linear-wipe::before {
animation: roy-b10-mlw-fb 4s ease-in-out infinite;
}
@keyframes roy-b10-mlw-fb {
0%, 100% { clip-path: inset(0 100% 0 0); }
50%      { clip-path: inset(0 0 0 0); }
}
}

.roycss-backdrop-multi-filter {
width: 100%;
height: 100%;
min-height: 220px;
border-radius: 12px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 20% 20%, #f43f5e, transparent 40%),
radial-gradient(circle at 80% 30%, #22d3ee, transparent 40%),
radial-gradient(circle at 50% 80%, #a855f7, transparent 45%),
repeating-linear-gradient(45deg,
rgba(255, 255, 255, 0.05) 0 8px,
transparent 8px 16px),
#0f172a;
display: grid;
place-items: center;
}
.roycss-backdrop-multi-filter::before {
content: "Multi backdrop-filter";
padding: 26px 36px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font: 700 16px/1 system-ui, sans-serif;
letter-spacing: 0.05em;
backdrop-filter: blur(14px) saturate(180%) hue-rotate(30deg) brightness(1.1);
-webkit-backdrop-filter: blur(14px) saturate(180%) hue-rotate(30deg) brightness(1.1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
animation: roy-b10-bmf-rotate 6s linear infinite;
}
@keyframes roy-b10-bmf-rotate {
to { backdrop-filter: blur(14px) saturate(180%) hue-rotate(390deg) brightness(1.1); }
}
@supports not (backdrop-filter: blur(10px)) {
.roycss-backdrop-multi-filter::before {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: none;
animation: none;
}
}

.roycss-scrollbar-gutter-stable {
width: 100%;
height: 100%;
min-height: 220px;
border-radius: 12px;
background: linear-gradient(135deg, #1e293b, #0f172a);
scrollbar-gutter: stable;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
color: #e2e8f0;
font: 500 12px/1.4 system-ui, sans-serif;
}
.roycss-scrollbar-gutter-stable::before {
content: "Scrollbar gutter reserved → no layout shift when content grows.";
display: block;
padding: 10px 12px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.12);
border-left: 3px solid #10b981;
color: #6ee7b7;
font-weight: 600;
}
.roycss-scrollbar-gutter-stable::after {
content: "1. Stable layout block A\A2. Stable layout block B\A3. Stable layout block C\A4. Stable layout block D\A5. Stable layout block E";
white-space: pre;
display: block;
padding: 10px 12px;
border-radius: 8px;
background: #0f172a;
border: 1px solid #334155;
color: #94a3b8;
}
@supports not (scrollbar-gutter: stable) {
.roycss-scrollbar-gutter-stable {
padding-right: 22px;
}
}

.roycss-liquid-metal {
position: relative;
width: 200px;
height: 160px;
border-radius: 50% 50% 45% 55% / 60% 55% 45% 40%;
background:
radial-gradient(ellipse 60% 40% at 30% 25%, rgba(255,255,255,0.95), transparent 60%),
radial-gradient(ellipse 50% 35% at 70% 70%, rgba(120,130,145,0.6), transparent 65%),
linear-gradient(125deg,
#d6dbe2 0%,
#f4f6f9 12%,
#8a909a 26%,
#e9edf2 40%,
#5e6571 52%,
#c9ced6 66%,
#3e434c 78%,
#aab0ba 90%,
#6b7280 100%);
background-size: 200% 200%;
box-shadow:
inset -8px -10px 20px rgba(0,0,0,0.45),
inset 8px 10px 18px rgba(255,255,255,0.55),
0 14px 30px rgba(0,0,0,0.35);
filter: contrast(1.15) saturate(0.85);
animation: roy-b11-liquid-metal-flow 7s ease-in-out infinite;
}
.roycss-liquid-metal > div { display: none; }

.roycss-liquid-metal::before {
content: '';
position: absolute;
top: 12%; left: 18%;
width: 45%; height: 22%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,255,255,0.85), transparent 70%);
filter: blur(2px);
animation: roy-b11-liquid-metal-shine 5s ease-in-out infinite;
}

@keyframes roy-b11-liquid-metal-flow {
0%, 100% { background-position: 0% 0%; border-radius: 50% 50% 45% 55% / 60% 55% 45% 40%; }
33%      { background-position: 100% 50%; border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%; }
66%      { background-position: 50% 100%; border-radius: 45% 55% 60% 40% / 55% 45% 60% 40%; }
}
@keyframes roy-b11-liquid-metal-shine {
0%, 100% { transform: translate(0,0) scale(1); opacity: 0.85; }
50%      { transform: translate(60px, 30px) scale(1.3); opacity: 0.4; }
}

.roycss-oil-slick {
position: relative;
width: 220px;
height: 160px;
border-radius: 16px;
overflow: hidden;
background: radial-gradient(ellipse at 50% 60%, #0a0d12 0%, #02040a 100%);
}
.roycss-oil-slick > div { display: none; }

.roycss-oil-slick::before {
content: '';
position: absolute;
inset: -30%;
background:
radial-gradient(circle at 25% 35%, rgba(255,0,128,0.55), transparent 28%),
radial-gradient(circle at 65% 25%, rgba(0,200,255,0.55), transparent 30%),
radial-gradient(circle at 75% 65%, rgba(180,255,80,0.55), transparent 26%),
radial-gradient(circle at 35% 75%, rgba(255,200,0,0.55), transparent 30%),
radial-gradient(circle at 50% 50%, rgba(200,0,255,0.5), transparent 32%),
conic-gradient(from 0deg at 50% 50%,
#ff006e, #ffbe0b, #8338ec, #3a86ff, #06ffa5, #ff006e);
background-size: 180% 180%;
filter: blur(8px) saturate(1.4);
mix-blend-mode: screen;
animation: roy-b11-oil-slick-swirl 12s linear infinite;
}

.roycss-oil-slick::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 30% at 50% 15%, rgba(255,255,255,0.12), transparent 70%),
repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,0.08) 14px 15px);
pointer-events: none;
}

@keyframes roy-b11-oil-slick-swirl {
0%   { transform: rotate(0deg)   scale(1.2); background-position: 0% 0%; }
50%  { transform: rotate(180deg) scale(1.4); background-position: 100% 100%; }
100% { transform: rotate(360deg) scale(1.2); background-position: 0% 0%; }
}

.roycss-soap-bubble {
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.05) 18%, transparent 32%),
radial-gradient(circle at 70% 65%, rgba(255,0,200,0.35), transparent 40%),
radial-gradient(circle at 30% 75%, rgba(0,255,200,0.35), transparent 40%),
radial-gradient(circle at 75% 25%, rgba(255,220,0,0.3), transparent 40%),
conic-gradient(from 30deg,
rgba(255,80,180,0.35),
rgba(80,200,255,0.35),
rgba(180,255,120,0.35),
rgba(255,200,80,0.35),
rgba(180,80,255,0.35),
rgba(255,80,180,0.35));
box-shadow:
inset 0 0 40px rgba(255,255,255,0.25),
inset -20px -25px 50px rgba(80,0,120,0.25),
inset 15px 20px 40px rgba(0,180,255,0.25),
0 8px 30px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.4);
filter: saturate(1.2);
animation: roy-b11-soap-bubble-float 6s ease-in-out infinite;
}
.roycss-soap-bubble > div { display: none; }

.roycss-soap-bubble::before {
content: '';
position: absolute;
top: 14%; left: 22%;
width: 18%; height: 14%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,255,255,0.95), transparent 70%);
filter: blur(1px);
}

@keyframes roy-b11-soap-bubble-float {
0%, 100% { transform: translateY(0) rotate(0deg); filter: saturate(1.2) hue-rotate(0deg); }
50%      { transform: translateY(-12px) rotate(8deg); filter: saturate(1.4) hue-rotate(40deg); }
}

.roycss-molten-lava {
position: relative;
width: 220px;
height: 160px;
border-radius: 14px;
overflow: hidden;
background: #1a0805;
box-shadow: 0 0 30px rgba(255,80,0,0.45), inset 0 0 40px rgba(0,0,0,0.5);
}
.roycss-molten-lava > div { display: none; }

.roycss-molten-lava::before {
content: '';
position: absolute;
inset: -10%;
background:
radial-gradient(ellipse 30% 20% at 25% 30%, #fff0a0 0%, #ff8c00 18%, #ff3000 32%, transparent 50%),
radial-gradient(ellipse 40% 25% at 70% 60%, #ffec80 0%, #ff6b00 20%, #c81000 38%, transparent 55%),
radial-gradient(ellipse 25% 18% at 50% 80%, #ffe055 0%, #ff5500 22%, #8b0000 40%, transparent 55%),
radial-gradient(ellipse 20% 15% at 85% 30%, #ffd040 0%, #ff7000 25%, transparent 45%);
filter: blur(2px);
animation: roy-b11-molten-lava-flow 5s ease-in-out infinite alternate;
}

.roycss-molten-lava::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(20deg, transparent 0 24px, rgba(0,0,0,0.5) 24px 26px),
repeating-linear-gradient(-55deg, transparent 0 34px, rgba(0,0,0,0.4) 34px 36px),
radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.6) 100%);
mix-blend-mode: multiply;
opacity: 0.85;
}

@keyframes roy-b11-molten-lava-flow {
0%   { transform: translate(0,0) scale(1); filter: blur(2px) hue-rotate(-8deg) brightness(1); }
100% { transform: translate(-12px,8px) scale(1.08); filter: blur(2px) hue-rotate(8deg) brightness(1.25); }
}

.roycss-frozen-ice {
position: relative;
width: 200px;
height: 160px;
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(ellipse 50% 40% at 25% 20%, rgba(255,255,255,0.7), transparent 60%),
radial-gradient(ellipse 40% 30% at 75% 75%, rgba(150,210,255,0.5), transparent 60%),
linear-gradient(135deg, #d4ebf7 0%, #a8d4ec 35%, #6fa8c8 70%, #cfe8f5 100%);
box-shadow:
inset 8px 12px 25px rgba(255,255,255,0.6),
inset -8px -12px 25px rgba(40,90,140,0.4),
0 10px 30px rgba(80,140,180,0.4);
border: 1px solid rgba(255,255,255,0.7);
backdrop-filter: blur(2px);
}
.roycss-frozen-ice > div { display: none; }

.roycss-frozen-ice::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(115deg, transparent 49.6%, rgba(255,255,255,0.65) 49.8%, rgba(255,255,255,0.65) 50.2%, transparent 50.4%),
linear-gradient(75deg, transparent 49.6%, rgba(180,220,255,0.5) 49.8%, rgba(180,220,255,0.5) 50.2%, transparent 50.4%),
linear-gradient(160deg, transparent 49.6%, rgba(255,255,255,0.4) 49.8%, rgba(255,255,255,0.4) 50.2%, transparent 50.4%),
linear-gradient(20deg, transparent 39.6%, rgba(180,220,255,0.35) 39.8%, rgba(180,220,255,0.35) 40.2%, transparent 40.4%);
filter: drop-shadow(0 0 1px rgba(255,255,255,0.5));
animation: roy-b11-frozen-ice-sparkle 4s ease-in-out infinite;
}

.roycss-frozen-ice::after {
content: '';
position: absolute;
top: 8%; left: 12%;
width: 30%; height: 12%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,255,255,0.85), transparent 70%);
filter: blur(1px);
}

@keyframes roy-b11-frozen-ice-sparkle {
0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 1px rgba(255,255,255,0.5)); }
50%      { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,255,255,0.9)); }
}

.roycss-gold-leaf {
position: relative;
width: 200px;
height: 160px;
border-radius: 8px;
background:
radial-gradient(ellipse 30% 25% at 20% 25%, #fff7d0, transparent 55%),
radial-gradient(ellipse 25% 20% at 75% 70%, #c8951c, transparent 60%),
radial-gradient(ellipse 20% 18% at 65% 30%, #ffe98a, transparent 55%),
radial-gradient(ellipse 28% 22% at 30% 75%, #b8821a, transparent 60%),
linear-gradient(115deg,
#b8821a 0%,
#fff3b0 12%,
#d4a017 28%,
#ffe98a 42%,
#a87614 58%,
#fff3b0 72%,
#c8951c 88%,
#8b5a0f 100%);
background-size: 220% 220%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
box-shadow:
inset 0 0 20px rgba(0,0,0,0.25),
inset 6px 8px 14px rgba(255,245,200,0.4),
0 8px 22px rgba(80,50,0,0.4);
filter: contrast(1.1) saturate(1.2);
animation: roy-b11-gold-leaf-shimmer 6s ease-in-out infinite;
}
.roycss-gold-leaf > div { display: none; }

.roycss-gold-leaf::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(35deg, transparent 0 8px, rgba(0,0,0,0.12) 8px 9px),
repeating-linear-gradient(-50deg, transparent 0 14px, rgba(255,240,180,0.15) 14px 15px);
mix-blend-mode: overlay;
border-radius: inherit;
}

@keyframes roy-b11-gold-leaf-shimmer {
0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
50%      { background-position: 100% 100%, 50% 50%, 80% 30%, 30% 70%, 50% 50%; }
}

.roycss-velvet-fabric {
position: relative;
width: 200px;
height: 160px;
border-radius: 12px;
background:
radial-gradient(ellipse 70% 50% at 30% 30%, rgba(180,40,90,0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 75% 70%, rgba(60,0,30,0.85), transparent 65%),
linear-gradient(135deg, #7a0e3a 0%, #4a0520 50%, #6a0c30 100%);
box-shadow:
inset 0 0 30px rgba(0,0,0,0.6),
inset 8px 10px 18px rgba(255,120,170,0.25),
inset -8px -10px 18px rgba(0,0,0,0.5),
0 10px 25px rgba(40,0,15,0.5);
}
.roycss-velvet-fabric > div { display: none; }

.roycss-velvet-fabric::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(135deg,
transparent 0 1px,
rgba(255,150,200,0.18) 1px 2px,
transparent 2px 3px,
rgba(0,0,0,0.25) 3px 4px);
mix-blend-mode: overlay;
border-radius: inherit;
animation: roy-b11-velvet-sheen 5s ease-in-out infinite;
}

.roycss-velvet-fabric::after {
content: '';
position: absolute;
top: 20%; left: 15%;
width: 60%; height: 30%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,180,210,0.45), transparent 70%);
filter: blur(8px);
animation: roy-b11-velvet-sheen 5s ease-in-out infinite reverse;
}

@keyframes roy-b11-velvet-sheen {
0%, 100% { transform: translateX(-10%); opacity: 0.55; }
50%      { transform: translateX(20%); opacity: 0.9; }
}

.roycss-stained-glass {
position: relative;
width: 200px;
height: 180px;
border-radius: 8px;
overflow: hidden;
background:
linear-gradient(115deg, #1a1a1a 0 8%, transparent 8% 9%, #1a1a1a 9% 17%, transparent 17% 18%, #1a1a1a 18% 26%, transparent 26% 27%, #1a1a1a 27% 35%, transparent 35% 36%, #1a1a1a 36% 44%, transparent 44% 45%, #1a1a1a 45% 53%, transparent 53% 54%, #1a1a1a 54% 62%, transparent 62% 63%, #1a1a1a 63% 71%, transparent 71% 72%, #1a1a1a 72% 80%, transparent 80% 81%, #1a1a1a 81% 89%, transparent 89% 90%, #1a1a1a 90% 100%),
linear-gradient(25deg, #1a1a1a 0 9%, transparent 9% 10%, #1a1a1a 10% 19%, transparent 19% 20%, #1a1a1a 20% 29%, transparent 29% 30%, #1a1a1a 30% 39%, transparent 39% 40%, #1a1a1a 40% 49%, transparent 49% 50%, #1a1a1a 50% 59%, transparent 59% 60%, #1a1a1a 60% 69%, transparent 69% 70%, #1a1a1a 70% 79%, transparent 79% 80%, #1a1a1a 80% 89%, transparent 89% 90%, #1a1a1a 90% 100%),
radial-gradient(circle at 20% 25%, #c8102e 0 22%, transparent 22%),
radial-gradient(circle at 75% 20%, #ffd700 0 18%, transparent 18%),
radial-gradient(circle at 30% 70%, #1e90ff 0 24%, transparent 24%),
radial-gradient(circle at 80% 75%, #9400d3 0 20%, transparent 20%),
radial-gradient(circle at 55% 45%, #ff8c00 0 18%, transparent 18%),
radial-gradient(circle at 50% 90%, #2ecc71 0 16%, transparent 16%),
linear-gradient(45deg, #4a0e6b, #8b1a3a, #1a4a8b, #6b8b1a);
background-blend-mode: normal, normal, screen, screen, screen, screen, screen, screen, normal;
filter: saturate(1.3) brightness(1.05);
box-shadow: 0 0 25px rgba(255,200,100,0.3), inset 0 0 0 2px #1a1a1a;
}
.roycss-stained-glass > div { display: none; }

.roycss-stained-glass::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255,240,180,0.4), transparent 70%);
mix-blend-mode: screen;
animation: roy-b11-stained-glass-light 8s ease-in-out infinite;
}

@keyframes roy-b11-stained-glass-light {
0%, 100% { opacity: 0.7; transform: translateY(0); }
50%      { opacity: 1; transform: translateY(-8%); }
}

.roycss-neon-sign {
position: relative;
width: 200px;
height: 160px;
border-radius: 12px;
background: radial-gradient(ellipse at 50% 50%, #1a0833 0%, #050010 100%);
display: grid;
place-items: center;
overflow: hidden;
}
.roycss-neon-sign > div { display: none; }

.roycss-neon-sign::before {
content: 'NEON';
position: absolute;
font: 900 56px/1 'Arial Black', sans-serif;
letter-spacing: 0.1em;
color: #fff;
text-shadow:
0 0 4px #fff,
0 0 12px #ff00de,
0 0 24px #ff00de,
0 0 44px #ff00de,
0 0 80px #ff00de;
animation: roy-b11-neon-flicker 3.5s linear infinite;
}

.roycss-neon-sign::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 30% at 50% 50%, rgba(255,0,222,0.35), transparent 70%);
pointer-events: none;
animation: roy-b11-neon-glow 3.5s linear infinite;
}

@keyframes roy-b11-neon-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 64%, 100% {
opacity: 1;
text-shadow: 0 0 4px #fff, 0 0 12px #ff00de, 0 0 24px #ff00de, 0 0 44px #ff00de, 0 0 80px #ff00de;
}
20%, 24%, 55%, 65% {
opacity: 0.4;
text-shadow: 0 0 2px #fff, 0 0 4px #ff00de;
}
}
@keyframes roy-b11-neon-glow {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 64%, 100% { opacity: 0.85; }
20%, 24%, 55%, 65% { opacity: 0.2; }
}

.roycss-origami-fold {
position: relative;
width: 200px;
height: 180px;
background: #fafafa;
clip-path: polygon(
50% 0%, 100% 35%, 75% 100%, 25% 100%, 0% 35%);
}
.roycss-origami-fold > div { display: none; }

.roycss-origami-fold::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(135deg, transparent 49.5%, #c8102e 49.5% 50.5%, transparent 50.5%),
linear-gradient(45deg,  transparent 49.5%, #1a1a1a 49.5% 50.5%, transparent 50.5%),
linear-gradient(90deg,  transparent 49.5%, #c8102e 49.5% 50.5%, transparent 50.5%),
linear-gradient(0deg,   transparent 49.5%, #1a1a1a 49.5% 50.5%, transparent 50.5%),
conic-gradient(from 0deg at 50% 50%,
#ff6b6b 0deg 72deg,
#ffa94d 72deg 144deg,
#ffd43b 144deg 216deg,
#69db7c 216deg 288deg,
#74c0fc 288deg 360deg);
clip-path: inherit;
filter: saturate(1.1);
}

.roycss-origami-fold::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(115deg, rgba(255,255,255,0.4) 0%, transparent 50%),
linear-gradient(295deg, rgba(0,0,0,0.25) 0%, transparent 50%);
clip-path: inherit;
mix-blend-mode: overlay;
animation: roy-b11-origami-fold-rotate 8s ease-in-out infinite;
}

@keyframes roy-b11-origami-fold-rotate {
0%, 100% { filter: hue-rotate(0deg) brightness(1); }
50%      { filter: hue-rotate(40deg) brightness(1.1); }
}

.roycss-water-ripple {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, #4fb3d9 0%, #1d6a8c 70%, #0d3f56 100%);
overflow: hidden;
}
.roycss-water-ripple > div { display: none; }

.roycss-water-ripple::before,
.roycss-water-ripple::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 20px; height: 20px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.7);
transform: translate(-50%, -50%);
animation: roy-b11-water-ripple 3s ease-out infinite;
}

.roycss-water-ripple::after {
animation-delay: 1.5s;
}

@keyframes roy-b11-water-ripple {
0%   { width: 20px; height: 20px; opacity: 1; border-width: 2px; }
100% { width: 220px; height: 220px; opacity: 0; border-width: 0.5px; }
}

.roycss-prism-rainbow {
position: relative;
width: 220px;
height: 160px;
background: #0a0a14;
overflow: hidden;
border-radius: 8px;
}
.roycss-prism-rainbow > div { display: none; }

.roycss-prism-rainbow::before {
content: '';
position: absolute;
top: 50%; left: 8%;
width: 0; height: 0;
border-left: 30px solid rgba(255,255,255,0.85);
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
transform: translateY(-50%) skewY(-12deg);
filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
}

.roycss-prism-rainbow::after {
content: '';
position: absolute;
top: 0; left: 28%;
width: 60%; height: 100%;
background: linear-gradient(90deg,
#ff0000 0%, #ff7f00 14%, #ffff00 28%,
#00ff00 42%, #0000ff 57%, #4b0082 71%, #9400d3 85%, transparent 100%);
filter: blur(6px);
mix-blend-mode: screen;
opacity: 0.85;
transform: skewX(-18deg) translateX(-10%);
animation: roy-b11-prism-rainbow-shift 5s ease-in-out infinite;
}

@keyframes roy-b11-prism-rainbow-shift {
0%, 100% { transform: skewX(-18deg) translateX(-10%); filter: blur(6px) brightness(1); }
50%      { transform: skewX(-22deg) translateX(8%); filter: blur(8px) brightness(1.2); }
}

.roycss-heat-haze {
position: relative;
width: 220px;
height: 180px;
border-radius: 8px;
overflow: hidden;
background:
linear-gradient(180deg, #87ceeb 0%, #ffd89b 60%, #ff6b35 100%);
}
.roycss-heat-haze > div { display: none; }

.roycss-heat-haze::before {
content: '';
position: absolute;
inset: -10% -10% 0 -10%;
background:
repeating-linear-gradient(0deg,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.08) 4px,
transparent 4px,
transparent 12px);
filter: blur(3px);
mix-blend-mode: overlay;
animation: roy-b11-heat-haze-warp 3s ease-in-out infinite;
}

.roycss-heat-haze::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 30%;
background: linear-gradient(0deg, rgba(255,80,0,0.4), transparent);
mix-blend-mode: multiply;
}

@keyframes roy-b11-heat-haze-warp {
0%, 100% { transform: translateX(0) skewX(0deg); filter: blur(3px); }
25%      { transform: translateX(-6px) skewX(3deg); filter: blur(4px); }
50%      { transform: translateX(4px) skewX(-3deg); filter: blur(2px); }
75%      { transform: translateX(-3px) skewX(2deg); filter: blur(3px); }
}

.roycss-deep-sea {
position: relative;
width: 220px;
height: 180px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(180deg, #1a5f7a 0%, #0d3f56 40%, #061f2e 80%, #02101a 100%);
}
.roycss-deep-sea > div { display: none; }

.roycss-deep-sea::before {
content: '';
position: absolute;
top: -20%; left: 0;
width: 100%; height: 80%;
background:
linear-gradient(165deg, rgba(180,230,255,0.25) 0%, transparent 35%),
linear-gradient(195deg, rgba(180,230,255,0.2) 0%, transparent 40%),
linear-gradient(175deg, rgba(180,230,255,0.18) 0%, transparent 30%);
filter: blur(8px);
mix-blend-mode: screen;
animation: roy-b11-deep-sea-rays 7s ease-in-out infinite;
}

.roycss-deep-sea::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 2px at 20% 30%, rgba(255,255,255,0.7), transparent),
radial-gradient(circle 1.5px at 60% 70%, rgba(255,255,255,0.5), transparent),
radial-gradient(circle 2.5px at 80% 20%, rgba(255,255,255,0.6), transparent),
radial-gradient(circle 1px at 35% 85%, rgba(255,255,255,0.5), transparent),
radial-gradient(circle 1.5px at 75% 55%, rgba(255,255,255,0.55), transparent),
radial-gradient(circle 1px at 15% 65%, rgba(255,255,255,0.4), transparent);
animation: roy-b11-deep-sea-bubbles 6s linear infinite;
}

@keyframes roy-b11-deep-sea-rays {
0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.7; }
50%      { transform: translateX(8px) skewX(-3deg); opacity: 1; }
}
@keyframes roy-b11-deep-sea-bubbles {
0%   { transform: translateY(0); opacity: 0.8; }
100% { transform: translateY(-30px); opacity: 0; }
}

.roycss-northern-lights {
position: relative;
width: 240px;
height: 180px;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(180deg, #0a0f24 0%, #061226 60%, #02060f 100%);
}
.roycss-northern-lights > div { display: none; }

.roycss-northern-lights::before {
content: '';
position: absolute;
top: -30%; left: -20%;
width: 140%; height: 100%;
background:
radial-gradient(ellipse 60% 40% at 30% 50%, rgba(80,255,180,0.55), transparent 60%),
radial-gradient(ellipse 50% 35% at 60% 40%, rgba(120,200,255,0.45), transparent 60%),
radial-gradient(ellipse 55% 30% at 75% 55%, rgba(180,80,255,0.45), transparent 60%),
radial-gradient(ellipse 40% 25% at 20% 60%, rgba(80,255,200,0.4), transparent 60%);
filter: blur(20px);
mix-blend-mode: screen;
animation: roy-b11-aurora-wave 8s ease-in-out infinite;
}

.roycss-northern-lights::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 35%;
background:
radial-gradient(circle 1px at 10% 50%, #fff, transparent),
radial-gradient(circle 1px at 25% 30%, #fff, transparent),
radial-gradient(circle 1px at 40% 70%, #fff, transparent),
radial-gradient(circle 1px at 60% 40%, #fff, transparent),
radial-gradient(circle 1px at 75% 60%, #fff, transparent),
radial-gradient(circle 1px at 90% 35%, #fff, transparent),
linear-gradient(0deg, #0a1428 30%, transparent 100%);
}

@keyframes roy-b11-aurora-wave {
0%, 100% { transform: translateX(-10%) translateY(0) skewX(0deg); opacity: 0.85; }
33%      { transform: translateX(5%) translateY(-8%) skewX(-6deg); opacity: 1; }
66%      { transform: translateX(-5%) translateY(5%) skewX(4deg); opacity: 0.95; }
}

.roycss-painting-oil {
width: 100%;
min-height: 240px;
background:
repeating-linear-gradient(35deg,
#8b1a1a 0 20px, #c84040 20px 38px, #5a0808 38px 60px,
#d4604a 60px 80px, #6b1414 80px 102px),
repeating-linear-gradient(-25deg,
#2a4d8a 0 24px, #4a7bc8 24px 48px, #1a2d55 48px 72px),
linear-gradient(135deg, #c84040 0%, #2a4d8a 50%, #8b1a1a 100%);
background-blend-mode: overlay, overlay, normal;
filter: contrast(1.2) saturate(1.3);
position: relative;
border-radius: 8px;
}

.roycss-painting-oil::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,200,80,0.35), transparent 30%),
radial-gradient(circle at 75% 70%, rgba(255,255,180,0.25), transparent 35%),
radial-gradient(circle at 50% 50%, rgba(0,0,0,0.3), transparent 60%);
mix-blend-mode: overlay;
border-radius: inherit;
}

.roycss-painting-oil::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,0.08) 3px 4px),
repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.06) 3px 4px);
mix-blend-mode: overlay;
border-radius: inherit;
}

.roycss-watercolor {
width: 100%;
min-height: 240px;
background:
radial-gradient(ellipse 50% 40% at 25% 35%, rgba(255,150,180,0.7), transparent 60%),
radial-gradient(ellipse 45% 35% at 70% 30%, rgba(150,200,255,0.65), transparent 65%),
radial-gradient(ellipse 55% 40% at 60% 75%, rgba(255,220,120,0.6), transparent 60%),
radial-gradient(ellipse 35% 30% at 30% 80%, rgba(180,255,180,0.55), transparent 65%),
radial-gradient(ellipse 30% 25% at 85% 65%, rgba(220,150,255,0.55), transparent 65%),
linear-gradient(135deg, #faf6ee 0%, #f0e8d8 100%);
background-blend-mode: multiply, multiply, multiply, multiply, multiply, normal;
filter: blur(0.5px) contrast(0.95);
position: relative;
border-radius: 8px;
overflow: hidden;
}

.roycss-watercolor::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-radial-gradient(circle at 30% 40%, transparent 0 3px, rgba(180,120,80,0.05) 3px 4px),
repeating-radial-gradient(circle at 70% 60%, transparent 0 4px, rgba(80,40,20,0.04) 4px 5px);
mix-blend-mode: multiply;
}

.roycss-watercolor::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 20% 8% at 50% 50%, rgba(80,40,20,0.15), transparent 70%);
mix-blend-mode: multiply;
}

.roycss-pencil-sketch {
width: 100%;
min-height: 240px;
background:
repeating-linear-gradient(45deg,
transparent 0 2px,
rgba(40,40,40,0.35) 2px 2.4px,
transparent 2.4px 5px),
repeating-linear-gradient(-45deg,
transparent 0 2px,
rgba(40,40,40,0.25) 2px 2.4px,
transparent 2.4px 5px),
repeating-linear-gradient(90deg,
transparent 0 3px,
rgba(40,40,40,0.12) 3px 3.4px,
transparent 3.4px 7px),
linear-gradient(180deg, #f5f0e6 0%, #ebe5d5 100%);
background-blend-mode: multiply, multiply, multiply, normal;
position: relative;
border-radius: 8px;
overflow: hidden;
}

.roycss-pencil-sketch::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(40,40,40,0.18), transparent 65%),
radial-gradient(circle at 25% 30%, rgba(40,40,40,0.25), transparent 8%),
radial-gradient(circle at 75% 60%, rgba(40,40,40,0.2), transparent 10%);
mix-blend-mode: multiply;
}

.roycss-pencil-sketch::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.04) 1px 2px);
mix-blend-mode: overlay;
}

.roycss-vintage-tv {
width: 100%;
min-height: 240px;
background:
radial-gradient(ellipse 90% 70% at 50% 50%, #1a3a5c 0%, #0a1a2c 70%, #000 100%);
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow:
inset 0 0 60px rgba(0,0,0,0.8),
inset 0 0 120px rgba(80,140,200,0.3);
}

.roycss-vintage-tv::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg,
transparent 0 2px,
rgba(0,0,0,0.35) 2px 3px),
radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(0,0,0,0.6) 100%);
mix-blend-mode: multiply;
}

.roycss-vintage-tv::after {
content: '';
position: absolute;
top: -20%; left: -20%;
width: 140%; height: 140%;
background:
radial-gradient(ellipse 30% 20% at 30% 30%, rgba(255,255,255,0.15), transparent 70%),
repeating-linear-gradient(0deg,
transparent 0 1px,
rgba(255,255,255,0.04) 1px 2px);
animation: roy-b11-vintage-tv-static 0.15s steps(2) infinite;
}

@keyframes roy-b11-vintage-tv-static {
0%   { transform: translate(0, 0); }
50%  { transform: translate(-2px, 1px); }
100% { transform: translate(1px, -1px); }
}

.roycss-film-grain {
width: 100%;
min-height: 240px;
background:
radial-gradient(ellipse 60% 50% at 30% 30%, #f4a261 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 70% 70%, #e76f51 0%, transparent 60%),
linear-gradient(135deg, #264653 0%, #2a9d8f 50%, #e9c46a 100%);
position: relative;
border-radius: 8px;
overflow: hidden;
filter: contrast(1.1) saturate(0.9);
}

.roycss-film-grain::before {
content: '';
position: absolute;
inset: -50%;
background-image:
radial-gradient(circle 1px at 10% 20%, rgba(255,255,255,0.5), transparent),
radial-gradient(circle 1px at 30% 60%, rgba(0,0,0,0.5), transparent),
radial-gradient(circle 1px at 50% 30%, rgba(255,255,255,0.4), transparent),
radial-gradient(circle 1px at 70% 80%, rgba(0,0,0,0.4), transparent),
radial-gradient(circle 1px at 85% 25%, rgba(255,255,255,0.6), transparent),
radial-gradient(circle 1px at 15% 75%, rgba(0,0,0,0.5), transparent),
radial-gradient(circle 1px at 90% 60%, rgba(255,255,255,0.4), transparent),
radial-gradient(circle 1px at 45% 90%, rgba(0,0,0,0.4), transparent),
radial-gradient(circle 1px at 60% 15%, rgba(255,255,255,0.5), transparent),
radial-gradient(circle 1px at 25% 45%, rgba(0,0,0,0.3), transparent);
background-size: 80px 80px, 90px 90px, 100px 100px, 70px 70px, 110px 110px, 85px 85px, 95px 95px, 75px 75px, 105px 105px, 80px 80px;
mix-blend-mode: overlay;
opacity: 0.7;
animation: roy-b11-film-grain-shift 0.4s steps(4) infinite;
}

.roycss-film-grain::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.5) 100%);
pointer-events: none;
}

@keyframes roy-b11-film-grain-shift {
0%   { transform: translate(0, 0); }
25%  { transform: translate(-15px, 10px); }
50%  { transform: translate(10px, -12px); }
75%  { transform: translate(-8px, -8px); }
100% { transform: translate(0, 0); }
}

.roycss-vhs-glitch {
width: 100%;
min-height: 240px;
background:
linear-gradient(180deg, #1a0033 0%, #4a0080 50%, #001a4a 100%);
position: relative;
border-radius: 8px;
overflow: hidden;
filter: contrast(1.2) saturate(1.3);
}

.roycss-vhs-glitch::before {
content: 'PLAY ▶';
position: absolute;
top: 12px; left: 16px;
color: rgba(255,80,80,0.8);
font: 700 16px/1 'Courier New', monospace;
text-shadow: 2px 0 0 rgba(80,255,255,0.8), -2px 0 0 rgba(255,255,80,0.8);
letter-spacing: 0.2em;
animation: roy-b11-vhs-glitch-text 2s steps(20) infinite;
}

.roycss-vhs-glitch::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg,
transparent 0 3px,
rgba(255,255,255,0.04) 3px 4px),
linear-gradient(0deg,
transparent 0 30%,
rgba(255,0,0,0.15) 30% 32%,
transparent 32% 50%,
rgba(0,255,255,0.15) 50% 51%,
transparent 51% 70%,
rgba(255,0,255,0.12) 70% 71%,
transparent 71%);
mix-blend-mode: screen;
animation: roy-b11-vhs-glitch-track 1.5s steps(6) infinite;
}

@keyframes roy-b11-vhs-glitch-track {
0%   { transform: translateY(0); }
20%  { transform: translateY(-10px); }
40%  { transform: translateY(15px); }
60%  { transform: translateY(-5px); }
80%  { transform: translateY(8px); }
100% { transform: translateY(0); }
}
@keyframes roy-b11-vhs-glitch-text {
0%, 90%, 100% { transform: translate(0); }
92%           { transform: translate(-3px, 1px); }
94%           { transform: translate(2px, -1px); }
96%           { transform: translate(-1px, 0); }
}

.roycss-pixel-art {
width: 100%;
min-height: 240px;
background:
conic-gradient(from 0deg at 50% 50%,
#ff004d 0deg 45deg,
#ffa300 45deg 90deg,
#ffec27 90deg 135deg,
#00e436 135deg 180deg,
#29adff 180deg 225deg,
#83769c 225deg 270deg,
#ff77a8 270deg 315deg,
#ff004d 315deg 360deg);
background-size: 32px 32px;
image-rendering: pixelated;
position: relative;
border-radius: 0;
filter: contrast(1.1) saturate(1.3);
}

.roycss-pixel-art::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, transparent 0 15px, rgba(0,0,0,0.25) 15px 16px),
repeating-linear-gradient(90deg, transparent 0 15px, rgba(0,0,0,0.25) 15px 16px);
mix-blend-mode: multiply;
}

.roycss-pixel-art::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 8px at 25% 25%, #000 0 6px, transparent 6px 8px),
radial-gradient(circle 8px at 75% 25%, #000 0 6px, transparent 6px 8px),
radial-gradient(ellipse 30px 12px at 50% 70%, #000 0 28px, transparent 28px 30px);
}

.roycss-ascii-rain {
width: 100%;
min-height: 240px;
background:
radial-gradient(ellipse at 50% 0%, #001a0a 0%, #000305 100%);
position: relative;
border-radius: 8px;
overflow: hidden;
}

.roycss-ascii-rain::before {
content: '0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 1 0 0 1 0\A 1 0 1 0 0 1 0 1 1 0 1 0 0 1 0 1 1 0 0 1\A 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0\A 1 0 0 1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 0 1\A 0 1 0 1 1 0 1 0 0 1 1 0 1 0 1 1 0 0 1 0\A 1 0 1 0 0 1 0 1 1 0 1 0 0 1 0 1 1 0 0 1\A 0 1 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0\A 1 0 0 1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 0 1';
white-space: pre;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
color: #00ff66;
font: 12px/1.4 'Courier New', monospace;
letter-spacing: 0.2em;
text-shadow: 0 0 6px rgba(0,255,100,0.8);
opacity: 0.85;
animation: roy-b11-ascii-rain-fall 4s linear infinite;
overflow: hidden;
}

.roycss-ascii-rain::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,30,10,0.3) 0%, transparent 40%, transparent 60%, rgba(0,30,10,0.6) 100%),
repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.3) 2px 3px);
mix-blend-mode: multiply;
pointer-events: none;
}

@keyframes roy-b11-ascii-rain-fall {
0%   { transform: translateY(-30%); }
100% { transform: translateY(30%); }
}

.roycss-blueprint {
width: 100%;
min-height: 240px;
background:
linear-gradient(0deg,
transparent 0 calc(100% - 1px), rgba(180,220,255,0.4) calc(100% - 1px) 100%),
linear-gradient(90deg,
transparent 0 calc(100% - 1px), rgba(180,220,255,0.4) calc(100% - 1px) 100%),
repeating-linear-gradient(0deg, transparent 0 19px, rgba(180,220,255,0.18) 19px 20px),
repeating-linear-gradient(90deg, transparent 0 19px, rgba(180,220,255,0.18) 19px 20px),
repeating-linear-gradient(0deg, transparent 0 99px, rgba(180,220,255,0.35) 99px 100px),
repeating-linear-gradient(90deg, transparent 0 99px, rgba(180,220,255,0.35) 99px 100px),
#0a3d7a;
background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100px 100px, 100px 100px, 100% 100%;
position: relative;
border-radius: 4px;
overflow: hidden;
color: #cfe8ff;
}

.roycss-blueprint::before {
content: '';
position: absolute;
top: 30px; left: 30px;
width: 140px; height: 100px;
border: 1.5px solid #cfe8ff;
background:
linear-gradient(45deg, transparent 49%, rgba(207,232,255,0.4) 49% 51%, transparent 51%);
box-shadow:
0 0 0 8px rgba(0,0,0,0.1),
inset 0 0 0 5px rgba(0,0,0,0.2);
}

.roycss-blueprint::after {
content: 'DWG-001\A SCALE 1:50\A REV. A';
white-space: pre;
position: absolute;
bottom: 16px; right: 20px;
color: #cfe8ff;
font: 11px/1.5 'Courier New', monospace;
letter-spacing: 0.15em;
text-align: right;
text-shadow: 0 0 4px rgba(0,100,200,0.6);
border: 1px solid #cfe8ff;
padding: 6px 10px;
}

.roycss-topographic {
width: 100%;
min-height: 240px;
background:
repeating-radial-gradient(circle at 30% 40%,
transparent 0,
transparent 14px,
rgba(120,80,30,0.5) 14px,
rgba(120,80,30,0.5) 15px),
repeating-radial-gradient(circle at 70% 60%,
transparent 0,
transparent 18px,
rgba(100,60,20,0.45) 18px,
rgba(100,60,20,0.45) 19px),
repeating-radial-gradient(circle at 50% 80%,
transparent 0,
transparent 12px,
rgba(80,40,10,0.4) 12px,
rgba(80,40,10,0.4) 13px),
radial-gradient(ellipse at 30% 40%, #f4e4c1 0%, #d4b888 50%, #8b6b3a 100%);
position: relative;
border-radius: 8px;
overflow: hidden;
}

.roycss-topographic::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-radial-gradient(circle at 80% 20%,
transparent 0 22px,
rgba(60,30,0,0.3) 22px 23px),
repeating-linear-gradient(45deg,
transparent 0 80px,
rgba(60,30,0,0.05) 80px 81px);
mix-blend-mode: multiply;
}

.roycss-topographic::after {
content: '▲ 1245m';
position: absolute;
top: 30%; left: 28%;
color: #5a3010;
font: 700 11px/1 'Courier New', monospace;
letter-spacing: 0.1em;
text-shadow: 0 0 2px rgba(255,240,200,0.7);
}

.roycss-morph-blob {
position: relative;
width: 180px;
height: 180px;
background:
radial-gradient(circle at 30% 30%, #ff6ec4, #7873f5 70%);
box-shadow: 0 12px 40px rgba(120,80,255,0.5);
animation: roy-b11-morph-blob 8s ease-in-out infinite;
}
.roycss-morph-blob > div { display: none; }

@keyframes roy-b11-morph-blob {
0%, 100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
transform: rotate(0deg) scale(1);
background: radial-gradient(circle at 30% 30%, #ff6ec4, #7873f5 70%);
}
25% {
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
transform: rotate(90deg) scale(1.05);
background: radial-gradient(circle at 70% 30%, #7873f5, #4ade80 70%);
}
50% {
border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
transform: rotate(180deg) scale(0.95);
background: radial-gradient(circle at 50% 70%, #4ade80, #fbbf24 70%);
}
75% {
border-radius: 70% 30% 50% 50% / 30% 50% 50% 70%;
transform: rotate(270deg) scale(1.05);
background: radial-gradient(circle at 30% 70%, #fbbf24, #ff6ec4 70%);
}
}

.roycss-liquid-drop {
position: relative;
width: 180px;
height: 200px;
background: linear-gradient(180deg, #1d6a8c 0%, #0d3f56 100%);
overflow: hidden;
border-radius: 8px;
}
.roycss-liquid-drop > div { display: none; }

.roycss-liquid-drop::before {
content: '';
position: absolute;
top: -10%;
left: 50%;
width: 24px;
height: 32px;
background: linear-gradient(180deg, #88e0ff, #4fb3d9);
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
transform: translateX(-50%);
box-shadow: inset -3px -3px 6px rgba(0,0,0,0.2), inset 3px 3px 6px rgba(255,255,255,0.5);
animation: roy-b11-liquid-drop-fall 2.4s ease-in infinite;
}

.roycss-liquid-drop::after {
content: '';
position: absolute;
bottom: 30%;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: transparent;
transform: translateX(-50%);
animation: roy-b11-liquid-drop-splash 2.4s ease-out infinite;
}

@keyframes roy-b11-liquid-drop-fall {
0%   { top: -15%; transform: translateX(-50%) scaleY(1); }
60%  { top: 65%; transform: translateX(-50%) scaleY(1.4); }
70%  { top: 70%; transform: translateX(-50%) scaleY(0.4) scaleX(1.6); opacity: 1; }
75%  { top: 72%; transform: translateX(-50%) scaleY(0.1) scaleX(2); opacity: 0.4; }
100% { top: 72%; transform: translateX(-50%) scaleY(0.1) scaleX(2); opacity: 0; }
}

@keyframes roy-b11-liquid-drop-splash {
0%, 68% { width: 4px; height: 4px; opacity: 0; border: 0 solid rgba(136,224,255,0.8); background: transparent; }
72%     { width: 30px; height: 30px; opacity: 1; border: 2px solid rgba(136,224,255,0.9); border-radius: 50%; background: transparent; }
100%    { width: 120px; height: 120px; opacity: 0; border: 0.5px solid rgba(136,224,255,0.2); border-radius: 50%; background: transparent; }
}

.roycss-paper-flip {
position: relative;
width: 180px;
height: 220px;
perspective: 1200px;
background: transparent;
}
.roycss-paper-flip > div { display: none; }

.roycss-paper-flip::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #fafafa 0%, #e8e8e8 100%);
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
transform-origin: left center;
transform-style: preserve-3d;
backface-visibility: visible;
}

.roycss-paper-flip::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,0.15) 0%, transparent 10%),
repeating-linear-gradient(0deg, transparent 0 24px, rgba(100,100,100,0.15) 24px 25px, transparent 25px 48px),
linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
border: 1px solid #ccc;
border-radius: 4px;
transform-origin: left center;
transform-style: preserve-3d;
backface-visibility: visible;
animation: roy-b11-paper-flip 3.5s ease-in-out infinite;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes roy-b11-paper-flip {
0%, 20%   { transform: rotateY(0deg); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
50%       { transform: rotateY(-160deg); box-shadow: -12px 8px 24px rgba(0,0,0,0.3); }
80%, 100% { transform: rotateY(-360deg); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
}

.roycss-card-shuffle {
position: relative;
width: 200px;
height: 220px;
perspective: 1000px;
}
.roycss-card-shuffle > div { display: none; }

.roycss-card-shuffle::before,
.roycss-card-shuffle::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 70px;
height: 100px;
border-radius: 6px;
background:
linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
border: 1.5px solid #ccc;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
transform: translate(-50%, -50%);
}

.roycss-card-shuffle::before {
background:
radial-gradient(circle at 50% 50%, #c8102e 0 20%, transparent 20%),
linear-gradient(45deg, transparent 48%, #1a1a1a 48% 52%, transparent 52%),
linear-gradient(-45deg, transparent 48%, #1a1a1a 48% 52%, transparent 52%),
#fff;
background-size: 30px 30px, 100% 100%, 100% 100%, 100% 100%;
animation: roy-b11-card-shuffle-a 2.4s ease-in-out infinite;
z-index: 2;
}

.roycss-card-shuffle::after {
background:
radial-gradient(circle at 50% 50%, #1a1a1a 0 20%, transparent 20%),
#fff;
animation: roy-b11-card-shuffle-b 2.4s ease-in-out infinite;
z-index: 1;
}

@keyframes roy-b11-card-shuffle-a {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg) translateX(0); }
25%      { transform: translate(-50%, -50%) rotate(-18deg) translateX(10px); }
50%      { transform: translate(-50%, -50%) rotate(-12deg) translateX(-30px); }
75%      { transform: translate(-50%, -50%) rotate(-22deg) translateX(20px); }
}
@keyframes roy-b11-card-shuffle-b {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg) translateX(0); }
25%      { transform: translate(-50%, -50%) rotate(14deg) translateX(-10px); }
50%      { transform: translate(-50%, -50%) rotate(8deg) translateX(30px); }
75%      { transform: translate(-50%, -50%) rotate(18deg) translateX(-20px); }
}

.roycss-roulette-spin {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background:
repeating-conic-gradient(from 0deg,
#c8102e 0deg 15deg,
#1a1a1a 15deg 30deg,
#c8102e 30deg 45deg,
#1a1a1a 45deg 60deg,
#c8102e 60deg 75deg,
#1a1a1a 75deg 90deg,
#c8102e 90deg 105deg,
#1a1a1a 105deg 120deg,
#c8102e 120deg 135deg,
#1a1a1a 135deg 150deg,
#c8102e 150deg 165deg,
#1a1a1a 165deg 180deg,
#c8102e 180deg 195deg,
#1a1a1a 195deg 210deg,
#c8102e 210deg 225deg,
#1a1a1a 225deg 240deg,
#c8102e 240deg 255deg,
#1a1a1a 255deg 270deg,
#c8102e 270deg 285deg,
#1a1a1a 285deg 300deg,
#c8102e 300deg 315deg,
#1a1a1a 315deg 330deg,
#c8102e 330deg 345deg,
#1a1a1a 345deg 360deg);
border: 8px solid #8b6914;
box-shadow: 0 0 0 4px #f4d03f, 0 12px 30px rgba(0,0,0,0.5);
animation: roy-b11-roulette-spin 4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.roycss-roulette-spin > div { display: none; }

.roycss-roulette-spin::before {
content: '';
position: absolute;
inset: 32%;
border-radius: 50%;
background: radial-gradient(circle, #f4d03f 0%, #8b6914 70%, #5a3d0a 100%);
box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}

.roycss-roulette-spin::after {
content: '▲';
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
color: #f4d03f;
font-size: 22px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

@keyframes roy-b11-roulette-spin {
0%   { transform: rotate(0deg); }
100% { transform: rotate(720deg); }
}

.roycss-slot-machine {
position: relative;
width: 200px;
height: 160px;
background: linear-gradient(180deg, #b8860b 0%, #8b6914 50%, #5a3d0a 100%);
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 10px 25px rgba(0,0,0,0.4), inset 0 2px 6px rgba(255,220,100,0.4);
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.roycss-slot-machine > div { display: none; }

.roycss-slot-machine::before,
.roycss-slot-machine::after {
content: '';
width: 48px;
height: 100px;
border-radius: 6px;
background:
repeating-linear-gradient(0deg,
#1a1a1a 0 28px,
#fff 28px 56px,
#c8102e 56px 84px,
#ffd700 84px 112px,
#1a1a1a 112px 140px,
#fff 140px 168px,
#c8102e 168px 196px);
background-size: 100% 196px;
border: 2px solid #f4d03f;
box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
overflow: hidden;
animation: roy-b11-slot-machine-spin 1.2s linear infinite;
}

.roycss-slot-machine::after {
animation-duration: 1.6s;
animation-delay: -0.4s;
}

@keyframes roy-b11-slot-machine-spin {
0%   { background-position: 0 0; }
100% { background-position: 0 -196px; }
}

.roycss-fortune-teller {
position: relative;
width: 200px;
height: 200px;
background: transparent;
}
.roycss-fortune-teller > div { display: none; }

.roycss-fortune-teller::before,
.roycss-fortune-teller::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 140px;
height: 140px;
transform: translate(-50%, -50%) rotate(45deg);
background:
conic-gradient(from 0deg,
#ff6b6b 0deg 90deg,
#4ecdc4 90deg 180deg,
#ffe66d 180deg 270deg,
#a78bfa 270deg 360deg);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
}

.roycss-fortune-teller::before {
animation: roy-b11-fortune-teller-a 3s ease-in-out infinite;
}

.roycss-fortune-teller::after {
background:
conic-gradient(from 45deg,
#ff6b6b 0deg 90deg,
#a78bfa 90deg 180deg,
#ffe66d 180deg 270deg,
#4ecdc4 270deg 360deg);
animation: roy-b11-fortune-teller-b 3s ease-in-out infinite;
z-index: -1;
}

@keyframes roy-b11-fortune-teller-a {
0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); opacity: 1; }
50%      { transform: translate(-50%, -50%) rotate(45deg) scale(0.7); opacity: 0.7; }
}
@keyframes roy-b11-fortune-teller-b {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(0.8); opacity: 0.5; }
50%      { transform: translate(-50%, -50%) rotate(0deg) scale(1.1); opacity: 1; }
}

.roycss-kaleidoscope {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background: #000;
box-shadow: 0 0 0 6px #8b6914, 0 12px 30px rgba(0,0,0,0.5);
}
.roycss-kaleidoscope > div { display: none; }

.roycss-kaleidoscope::before {
content: '';
position: absolute;
inset: -25%;
background:
conic-gradient(from 0deg at 50% 50%,
#ff006e 0deg 60deg,
#fb5607 60deg 120deg,
#ffbe0b 120deg 180deg,
#8338ec 180deg 240deg,
#3a86ff 240deg 300deg,
#06ffa5 300deg 360deg);
mix-blend-mode: screen;
filter: blur(4px) saturate(1.5);
animation: roy-origin-spin 8s linear infinite;
}

.roycss-kaleidoscope::after {
content: '';
position: absolute;
inset: -25%;
background:
conic-gradient(from 60deg at 50% 50%,
transparent 0deg 30deg,
rgba(255,255,255,0.5) 30deg 33deg,
transparent 33deg 90deg,
rgba(255,255,255,0.5) 90deg 93deg,
transparent 93deg 150deg,
rgba(255,255,255,0.5) 150deg 153deg,
transparent 153deg 210deg,
rgba(255,255,255,0.5) 210deg 213deg,
transparent 213deg 270deg,
rgba(255,255,255,0.5) 270deg 273deg,
transparent 273deg 330deg,
rgba(255,255,255,0.5) 330deg 333deg,
transparent 333deg 360deg);
animation: roy-origin-spin 6s linear infinite reverse;
mix-blend-mode: overlay;
}

.roycss-infinity-loop {
position: relative;
width: 220px;
height: 160px;
}
.roycss-infinity-loop > div { display: none; }

.roycss-infinity-loop::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 200px;
height: 90px;
transform: translate(-50%, -50%);
border: 4px solid rgba(120,200,255,0.25);
border-radius: 50%;
box-shadow:
0 0 12px rgba(120,200,255,0.3),
inset 0 0 12px rgba(120,200,255,0.2);
}

.roycss-infinity-loop::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
background: radial-gradient(circle, #fff, #4fb3ff 60%, transparent);
box-shadow: 0 0 20px #4fb3ff, 0 0 40px #4fb3ff;
offset-path: path('M 100 80 C 100 20, 20 20, 100 80 C 180 140, 100 140, 100 80');
offset-rotate: 0deg;
animation: roy-b11-infinity-loop-trace 3s linear infinite;
}

@keyframes roy-b11-infinity-loop-trace {
0%   { offset-distance: 0%; }
100% { offset-distance: 100%; }
}

.roycss-spiral-galaxy {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, #1a0033 0%, #050010 70%, #000 100%);
box-shadow: 0 0 40px rgba(120,80,255,0.4);
}
.roycss-spiral-galaxy > div { display: none; }

.roycss-spiral-galaxy::before {
content: '';
position: absolute;
inset: -25%;
background:
conic-gradient(from 0deg at 50% 50%,
transparent 0deg 20deg,
rgba(180,140,255,0.55) 25deg 40deg,
transparent 40deg 110deg,
rgba(255,200,255,0.45) 115deg 135deg,
transparent 135deg 200deg,
rgba(180,140,255,0.5) 205deg 225deg,
transparent 225deg 290deg,
rgba(255,200,255,0.4) 295deg 315deg,
transparent 315deg 360deg);
filter: blur(6px);
mix-blend-mode: screen;
animation: roy-b11-spiral-galaxy-spin 12s linear infinite;
}

.roycss-spiral-galaxy::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 30px; height: 30px;
margin: -15px 0 0 -15px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #fff8e0 30%, #ffcf66 60%, transparent 80%);
box-shadow: 0 0 20px #fff, 0 0 40px #ffcf66, 0 0 80px rgba(255,200,100,0.5);
}

@keyframes roy-b11-spiral-galaxy-spin {
0%   { transform: rotate(0deg) scale(1); }
100% { transform: rotate(360deg) scale(1); }
}

.roycss-text-neon-sign {
display: inline-block;
font: 900 72px/1 'Arial Black', sans-serif;
letter-spacing: 0.08em;
color: #fff;
text-shadow:
0 0 4px #fff,
0 0 10px #ff00de,
0 0 22px #ff00de,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 100px #ff00de;
padding: 20px 30px;
background: radial-gradient(ellipse at 50% 50%, #1a0833 0%, #050010 100%);
border-radius: 12px;
animation: roy-b11-text-neon-flicker 4s linear infinite;
}

@keyframes roy-b11-text-neon-flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
opacity: 1;
text-shadow:
0 0 4px #fff,
0 0 10px #ff00de,
0 0 22px #ff00de,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 100px #ff00de;
}
20%, 24%, 55% {
opacity: 0.6;
text-shadow: 0 0 2px #fff, 0 0 4px #ff00de;
}
}

.roycss-text-emboss {
display: inline-block;
font: 900 64px/1 'Georgia', serif;
letter-spacing: 0.05em;
color: #6e5a44;
padding: 24px 36px;
background:
radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255,240,210,0.3), transparent 60%),
linear-gradient(135deg, #b8a586 0%, #8a7a5e 50%, #a8946c 100%);
border-radius: 8px;
box-shadow:
inset 4px 4px 8px rgba(255,250,230,0.4),
inset -4px -4px 8px rgba(40,30,15,0.4),
0 6px 20px rgba(40,30,15,0.4);
text-shadow:
1px 1px 1px rgba(255,245,220,0.7),
-1px -1px 1px rgba(30,20,10,0.8),
0 4px 6px rgba(30,20,10,0.4);
background-clip: border-box;
}

.roycss-text-emboss::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(45deg, transparent 0 2px, rgba(60,40,20,0.06) 2px 3px);
pointer-events: none;
}

.roycss-text-water {
display: inline-block;
position: relative;
font: 900 72px/1 'Arial Black', sans-serif;
letter-spacing: 0.08em;
color: transparent;
background:
linear-gradient(180deg,
rgba(255,255,255,0.9) 0%,
rgba(180,230,255,0.7) 30%,
rgba(80,180,230,0.6) 55%,
rgba(30,100,180,0.8) 80%,
rgba(10,40,90,0.9) 100%);
-webkit-background-clip: text;
background-clip: text;
padding: 18px 30px;
text-shadow:
0 1px 0 rgba(255,255,255,0.5),
0 -1px 0 rgba(0,30,60,0.6);
filter: drop-shadow(0 4px 6px rgba(0,80,140,0.5));
animation: roy-b11-text-water-ripple 3s ease-in-out infinite;
}

.roycss-text-water::before {
content: 'WATER';
position: absolute;
top: 4px; left: 30px;
font: inherit;
letter-spacing: inherit;
color: transparent;
background:
linear-gradient(180deg,
rgba(255,255,255,0.5) 0%,
rgba(180,230,255,0.2) 50%,
transparent 100%);
-webkit-background-clip: text;
background-clip: text;
transform: scaleY(-1) translateY(-100%);
opacity: 0.4;
filter: blur(1px);
pointer-events: none;
}

@keyframes roy-b11-text-water-ripple {
0%, 100% { filter: drop-shadow(0 4px 6px rgba(0,80,140,0.5)) hue-rotate(0deg); }
50%      { filter: drop-shadow(0 4px 8px rgba(0,80,140,0.7)) hue-rotate(15deg); }
}

.roycss-text-fire-flame {
display: inline-block;
position: relative;
font: 900 80px/1 'Arial Black', sans-serif;
letter-spacing: 0.05em;
color: #fff;
padding: 30px 36px;
background: #0a0500;
border-radius: 8px;
text-shadow:
0 -2px 4px #fff,
0 -4px 8px #ffe055,
0 -8px 14px #ff8c00,
0 -14px 22px #ff3000,
0 -22px 32px #c81000,
0 2px 4px rgba(200,16,0,0.8);
animation: roy-b11-text-fire-flame 0.6s ease-in-out infinite alternate;
filter: drop-shadow(0 0 12px rgba(255,80,0,0.7));
}

.roycss-text-fire-flame::before {
content: 'FIRE';
position: absolute;
top: -10px; left: 36px;
font: inherit;
letter-spacing: inherit;
color: transparent;
background: linear-gradient(0deg, #ff3000 0%, #ffe055 50%, #fff 100%);
-webkit-background-clip: text;
background-clip: text;
opacity: 0.6;
filter: blur(4px);
animation: roy-b11-text-fire-flame-flicker 0.4s ease-in-out infinite alternate;
}

@keyframes roy-b11-text-fire-flame {
0%   { text-shadow: 0 -2px 4px #fff, 0 -4px 8px #ffe055, 0 -8px 14px #ff8c00, 0 -14px 22px #ff3000, 0 -22px 32px #c81000, 0 2px 4px rgba(200,16,0,0.8); transform: translateY(0); }
100% { text-shadow: 0 -2px 6px #fff, 0 -6px 10px #ffe055, 0 -12px 18px #ff8c00, 0 -20px 28px #ff3000, 0 -30px 42px #c81000, 0 2px 6px rgba(200,16,0,0.9); transform: translateY(-2px); }
}
@keyframes roy-b11-text-fire-flame-flicker {
0%   { transform: scaleY(1) translateY(0); opacity: 0.5; }
100% { transform: scaleY(1.15) translateY(-4px); opacity: 0.75; }
}

.roycss-text-3d-cinema {
display: inline-block;
position: relative;
font: 900 72px/1 'Arial Black', sans-serif;
letter-spacing: 0.06em;
color: #fff7d0;
padding: 30px 40px;
background: linear-gradient(180deg, #1a0f00 0%, #000 100%);
border-radius: 10px;
text-shadow:
1px 1px 0 #8b6914,
2px 2px 0 #8b6914,
3px 3px 0 #75590f,
4px 4px 0 #75590f,
5px 5px 0 #5e470c,
6px 6px 0 #5e470c,
7px 7px 0 #473608,
8px 8px 0 #473608,
9px 9px 0 #2f2406,
10px 10px 0 #2f2406,
11px 11px 8px rgba(0,0,0,0.6),
14px 14px 20px rgba(0,0,0,0.8);
background-clip: border-box;
filter: drop-shadow(0 0 12px rgba(255,200,80,0.4));
animation: roy-b11-text-3d-cinema-light 4s ease-in-out infinite;
}

.roycss-text-3d-cinema::before {
content: 'CINEMA';
position: absolute;
top: 30px; left: 40px;
font: inherit;
letter-spacing: inherit;
color: transparent;
background: linear-gradient(180deg, #fff 0%, #ffe98a 40%, #d4a017 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: 1px rgba(255,200,80,0.3);
pointer-events: none;
}

@keyframes roy-b11-text-3d-cinema-light {
0%, 100% { filter: drop-shadow(0 0 12px rgba(255,200,80,0.4)) brightness(1); }
50%      { filter: drop-shadow(0 0 24px rgba(255,200,80,0.7)) brightness(1.15); }
}

@keyframes rc-slide-in-up {
from { transform: translateY(100%); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}

@keyframes rc-slide-in-down {
from { transform: translateY(-100%); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}

@keyframes rc-slide-in-left {
from { transform: translateX(-100%); opacity: 0; }
to   { transform: translateX(0);    opacity: 1; }
}

@keyframes rc-slide-in-right {
from { transform: translateX(100%); opacity: 0; }
to   { transform: translateX(0);   opacity: 1; }
}

@keyframes rc-zoom-in {
from { transform: scale(0);   opacity: 0; }
to   { transform: scale(1);   opacity: 1; }
}

@keyframes rc-bounce-in {
0%   { transform: scale(0.3); opacity: 0; }
50%  { transform: scale(1.05); }
70%  { transform: scale(0.95); }
100% { transform: scale(1);    opacity: 1; }
}

@keyframes rc-flip-in-x {
from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
40%  { transform: perspective(400px) rotateX(-10deg); }
70%  { transform: perspective(400px) rotateX(10deg);  }
to   { transform: perspective(400px) rotateX(0deg);   opacity: 1; }
}

@keyframes rc-flip-in-y {
from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
40%  { transform: perspective(400px) rotateY(-10deg); }
70%  { transform: perspective(400px) rotateY(10deg);  }
to   { transform: perspective(400px) rotateY(0deg);   opacity: 1; }
}

@keyframes rc-fade-in-up {
from { transform: translateY(30px); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}

@keyframes rc-fade-in-down {
from { transform: translateY(-30px); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}

@keyframes rc-fade-in-left {
from { transform: translateX(-30px); opacity: 0; }
to   { transform: translateX(0);    opacity: 1; }
}

@keyframes rc-roll-in {
from { transform: rotateX(90deg) translateZ(-100px); opacity: 0; }
to   { transform: rotateX(0deg)   translateZ(0);      opacity: 1; }
}

@keyframes rc-light-speed-in {
0%   { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60%  { transform: skewX(20deg);                    opacity: 1; }
80%  { transform: skewX(-5deg); }
100% { transform: translateX(0) skewX(0deg);      opacity: 1; }
}

@keyframes rc-rotate-in {
from { transform: rotate(-200deg) scale(0); opacity: 0; }
to   { transform: rotate(0deg)     scale(1); opacity: 1; }
}

@keyframes rc-rotate-in-down-left {
from { transform: rotate(-45deg) translateY(-100%); opacity: 0; }
to   { transform: rotate(0deg)   translateY(0);      opacity: 1; }
}

@keyframes rc-rotate-in-up-right {
from { transform: rotate(45deg) translateY(100%); opacity: 0; }
to   { transform: rotate(0deg)  translateY(0);     opacity: 1; }
}

@keyframes rc-fade-in-scale {
from { transform: scale(0.8); filter: blur(4px); opacity: 0; }
to   { transform: scale(1);   filter: blur(0);   opacity: 1; }
}

@keyframes rc-drop-in {
0%   { transform: translateY(-300px); opacity: 0; }
60%  { transform: translateY(20px);   opacity: 1; }
80%  { transform: translateY(-10px); }
100% { transform: translateY(0);     opacity: 1; }
}

@keyframes rc-expand-in {
from { transform: scaleX(0) scaleY(0); opacity: 0; }
to   { transform: scaleX(1) scaleY(1); opacity: 1; }
}

@keyframes rc-slide-out-up {
from { transform: translateY(0);    opacity: 1; }
to   { transform: translateY(-100%); opacity: 0; }
}

@keyframes rc-slide-out-down {
from { transform: translateY(0);    opacity: 1; }
to   { transform: translateY(100%); opacity: 0; }
}

@keyframes rc-slide-out-left {
from { transform: translateX(0);    opacity: 1; }
to   { transform: translateX(-100%); opacity: 0; }
}

@keyframes rc-slide-out-right {
from { transform: translateX(0);    opacity: 1; }
to   { transform: translateX(100%); opacity: 0; }
}

@keyframes rc-zoom-out {
from { transform: scale(1);   opacity: 1; }
to   { transform: scale(0);   opacity: 0; }
}

@keyframes rc-flip-out-x {
from { transform: perspective(400px) rotateX(0deg);   opacity: 1; }
to   { transform: perspective(400px) rotateX(90deg);  opacity: 0; }
}

@keyframes rc-flip-out-y {
from { transform: perspective(400px) rotateY(0deg);   opacity: 1; }
to   { transform: perspective(400px) rotateY(90deg);  opacity: 0; }
}

@keyframes rc-light-speed-out {
0%   { transform: translateX(0) skewX(0deg);   opacity: 1; }
100% { transform: translateX(100%) skewX(30deg); opacity: 0; }
}

@keyframes rc-roll-out {
from { transform: rotateX(0deg)   translateZ(0);      opacity: 1; }
to   { transform: rotateX(90deg)  translateZ(-100px); opacity: 0; }
}

@keyframes rc-rotate-out {
from { transform: rotate(0deg)  scale(1); opacity: 1; }
to   { transform: rotate(200deg) scale(0); opacity: 0; }
}

@keyframes rc-fade-out-scale {
from { transform: scale(1);   filter: blur(0);   opacity: 1; }
to   { transform: scale(1.2); filter: blur(4px); opacity: 0; }
}

@keyframes rc-fly-out-up {
from { transform: translateY(0);     opacity: 1; }
to   { transform: translateY(-200%); opacity: 0; }
}

@keyframes rc-bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40%  { transform: translateY(-20px); }
60%  { transform: translateY(-10px); }
}

@keyframes rc-pulse {
0%   { transform: scale(1); }
50%  { transform: scale(1.05); }
100% { transform: scale(1); }
}

@keyframes rc-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
20%, 40%, 60%, 80%     { transform: translateX(6px); }
}

@keyframes rc-swing {
20%  { transform: rotate(15deg); }
40%  { transform: rotate(-10deg); }
60%  { transform: rotate(5deg); }
80%  { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

@keyframes rc-tada {
0%   { transform: scale(1) rotate(0deg); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80%     { transform: scale(1.1) rotate(-3deg); }
100% { transform: scale(1) rotate(0deg); }
}

@keyframes rc-wobble {
0%   { transform: translateX(0) rotate(0deg); }
15%  { transform: translateX(-15px) rotate(-5deg); }
30%  { transform: translateX(12px)  rotate(3deg); }
45%  { transform: translateX(-8px)  rotate(-3deg); }
60%  { transform: translateX(5px)   rotate(2deg); }
75%  { transform: translateX(-3px)  rotate(-1deg); }
100% { transform: translateX(0)    rotate(0deg); }
}

@keyframes rc-heartbeat {
0%   { transform: scale(1); }
14%  { transform: scale(1.15); }
28%  { transform: scale(1); }
42%  { transform: scale(1.15); }
70%  { transform: scale(1); }
}

@keyframes rc-shake-x {
0%, 100% { transform: translateX(0); }
10%, 50%, 90% { transform: translateX(-8px); }
30%, 70%     { transform: translateX(8px); }
}

@keyframes rc-shake-y {
0%, 100% { transform: translateY(0); }
10%, 50%, 90% { transform: translateY(-8px); }
30%, 70%     { transform: translateY(8px); }
}

@keyframes rc-jelly {
0%   { transform: scale(1, 1); }
25%  { transform: scale(1.25, 0.75); }
50%  { transform: scale(0.9, 1.1); }
75%  { transform: scale(1.05, 0.95); }
100% { transform: scale(1, 1); }
}

@keyframes rc-rubber-band {
0%   { transform: scaleX(1); }
20%  { transform: scaleX(1.25) scaleY(0.75); }
40%  { transform: scaleX(0.75) scaleY(1.25); }
60%  { transform: scaleX(1.15) scaleY(0.85); }
80%  { transform: scaleX(0.95) scaleY(1.05); }
100% { transform: scaleX(1)    scaleY(1); }
}

@keyframes rc-pulse-glow {
0%, 100% {
box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.5);
}
50% {
box-shadow: 0 0 20px 10px rgba(147, 51, 234, 0.2);
}
}

@keyframes rc-wiggle {
0%, 100% { transform: rotate(0deg); }
25%      { transform: rotate(5deg); }
75%      { transform: rotate(-5deg); }
}

@keyframes rc-jello {
0%, 100% { transform: skewX(0deg)    skewY(0deg); }
15%      { transform: skewX(-12deg)   skewY(-12deg); }
30%      { transform: skewX(8deg)     skewY(8deg); }
45%      { transform: skewX(-5deg)    skewY(-5deg); }
60%      { transform: skewX(3deg)     skewY(3deg); }
75%      { transform: skewX(-1deg)    skewY(-1deg); }
}

@keyframes rc-sonar {
0%   {
transform: scale(1);
opacity: 0.8;
box-shadow: 0 0 0 0 rgba(100, 100, 255, 0.6);
}
70%  {
transform: scale(1.1);
opacity: 0;
box-shadow: 0 0 0 20px rgba(100, 100, 255, 0);
}
100% {
transform: scale(1);
opacity: 0;
box-shadow: 0 0 0 0 rgba(100, 100, 255, 0);
}
}

@keyframes rc-flash {
0%, 100% { opacity: 1; }
25%      { opacity: 0; }
50%      { opacity: 1; }
75%      { opacity: 0; }
}

@keyframes rc-text-shadow-pop-anim {
0% {
text-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
transform: scale(1);
}
50% {
text-shadow: 4px 4px 0 rgba(102, 126, 234, 0.4);
transform: scale(1.06);
}
100% {
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
transform: scale(1);
}
}

@keyframes rc-text-glow-anim {
0% { text-shadow: 0 0 5px #667eea, 0 0 10px #667eea; }
100% { text-shadow: 0 0 10px #667eea, 0 0 20px #667eea, 0 0 40px #764ba2; }
}

@keyframes rc-text-typewriter-type {
0% { width: 0; }
100% { width: 100%; }
}

@keyframes rc-text-blur-in-anim {
0% { filter: blur(12px); opacity: 0; }
100% { filter: blur(0); opacity: 1; }
}

@keyframes rc-text-highlight-anim {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}

@keyframes rc-text-underline-slide-anim {
0% { transform: scaleX(0); transform-origin: right; }
100% { transform: scaleX(1); transform-origin: left; }
}

@keyframes rc-text-blink-anim {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

@keyframes rc-text-scramble-anim {
0%   { opacity: 0; transform: translateY(-8px); }
25%  { opacity: 0.6; transform: translateY(2px); }
50%  { opacity: 0.2; transform: translateY(-4px); }
75%  { opacity: 0.8; transform: translateY(1px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes rc-text-neon-flicker-anim {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 4px #ff0,
0 0 11px #ff0,
0 0 19px #ff0,
0 0 40px #ff00de,
0 0 80px #ff00de;
}
20%, 24%, 55% {
text-shadow: none;
}
}

@keyframes rc-text-rainbow-anim {
0%   { background-position: 0% center; }
100% { background-position: 200% center; }
}

@keyframes rc-text-slide-up-anim {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes rc-text-glitch-1 {
0%   { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); }
20%  { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
40%  { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 0); }
60%  { clip-path: inset(70% 0 5% 0);  transform: translate(2px, 0); }
80%  { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 0); }
100% { clip-path: inset(50% 0 20% 0); transform: translate(3px, 0); }
}

@keyframes rc-text-glitch-2 {
0%   { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); }
20%  { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 0); }
40%  { clip-path: inset(50% 0 20% 0); transform: translate(2px, 0); }
60%  { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 0); }
80%  { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
100% { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 0); }
}

@keyframes rc-text-reveal-anim {
0% {
transform: translateY(110%);
}
100% {
transform: translateY(0);
}
}

@keyframes rc-text-bounce-anim {
0%   { transform: translateY(0); }
25%  { transform: translateY(-16px); }
50%  { transform: translateY(0); }
70%  { transform: translateY(-6px); }
100% { transform: translateY(0); }
}

@keyframes rc-mesh-bg {
0% { background-position: 0% 0%, 100% 0%, 0% 50%, 100% 50%, 0% 100%, 100% 100%; }
50% { background-position: 100% 0%, 0% 50%, 100% 50%, 0% 100%, 100% 100%, 0% 0%; }
100% { background-position: 0% 0%, 100% 0%, 0% 50%, 100% 50%, 0% 100%, 100% 100%; }
}

@keyframes rc-bg-stripes-move {
0% { background-position: 0 0; }
100% { background-position: 28.28px 0; }
}

@keyframes rc-bg-radial-pulse {
0%, 100% { background-size: 100% 100%; }
50% { background-size: 150% 150%; }
}

@keyframes rc-aurora-bg {
0% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(30px, -30px) rotate(5deg); }
66% { transform: translate(-20px, 20px) rotate(-3deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes rc-bg-liquid {
0% { background-position: 0% 0%; }
25% { background-position: 100% 0%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
}

@keyframes rc-bg-waves {
0%, 100% { background-position: 50% 0%, 20% 50%, 80% 50%, 50% 0%, center; }
50% { background-position: 50% 10%, 30% 40%, 70% 60%, 50% 15%, center; }
}

@keyframes rc-bg-plasma {
0% { filter: hue-rotate(0deg); background-position: 0% 0%, 100% 0%, 50% 100%, center; }
33% { filter: hue-rotate(120deg); background-position: 100% 100%, 0% 100%, 0% 0%, center; }
66% { filter: hue-rotate(240deg); background-position: 100% 0%, 0% 0%, 100% 100%, center; }
100% { filter: hue-rotate(360deg); background-position: 0% 0%, 100% 0%, 50% 100%, center; }
}

@keyframes rc-matrix-scroll {
0% { transform: translateY(0); }
100% { transform: translateY(4px); }
}

@keyframes rc-starfield-move {
0% { transform: translateY(0); }
100% { transform: translateY(-100px); }
}

@keyframes rc-smoke-drift1 {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(60px, 30px) scale(1.2); }
50% { transform: translate(20px, 60px) scale(1); }
75% { transform: translate(80px, 20px) scale(1.1); }
}

@keyframes rc-smoke-drift2 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-50px, -40px) scale(1.15); }
66% { transform: translate(-30px, -60px) scale(0.95); }
}

@keyframes rc-circuit-scan {
0% { transform: translateY(0); }
100% { transform: translateY(20px); }
}

@keyframes rc-circuit-nodes {
0% { opacity: 0.5; }
100% { opacity: 1; }
}

@keyframes rc-lava-rise1 {
0% { transform: translateY(0) scaleX(1) scaleY(1); opacity: 0.8; }
25% { transform: translateY(-80px) scaleX(1.3) scaleY(0.8); opacity: 1; }
50% { transform: translateY(-160px) scaleX(0.7) scaleY(1.2); opacity: 0.6; }
75% { transform: translateY(-120px) scaleX(1.2) scaleY(0.9); opacity: 0.4; }
100% { transform: translateY(0) scaleX(1) scaleY(1); opacity: 0.8; }
}

@keyframes rc-lava-rise2 {
0% { transform: translateY(0) scaleX(1) scaleY(1); opacity: 0.7; }
30% { transform: translateY(-100px) scaleX(1.4) scaleY(0.7); opacity: 1; }
60% { transform: translateY(-180px) scaleX(0.6) scaleY(1.3); opacity: 0.5; }
80% { transform: translateY(-80px) scaleX(1.1) scaleY(1); opacity: 0.3; }
100% { transform: translateY(0) scaleX(1) scaleY(1); opacity: 0.7; }
}

@keyframes rc-dots-bounce {
0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
40% { transform: scale(1); opacity: 1; }
}

@keyframes rc-bars {
0%, 100% { height: 10px; }
50% { height: 35px; }
}

@keyframes rc-loader-pulse {
0%, 100% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.6); }
50% { transform: scale(1); opacity: 1; box-shadow: 0 0 20px 10px rgba(168, 85, 247, 0); }
}

@keyframes rc-wave {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-15px); }
}

@keyframes rc-dna {
0%, 100% { transform: translateY(0) scale(0.6); opacity: 0.4; }
50% { transform: translateY(-15px) scale(1); opacity: 1; }
}

@keyframes rc-circle-fade {
0% { transform: rotate(0deg); opacity: 1; }
50% { opacity: 0.5; }
100% { transform: rotate(360deg); opacity: 1; }
}

@keyframes rc-square-spin {
0% { transform: rotate(0deg); border-radius: 0; }
25% { transform: rotate(90deg); border-radius: 50% 0 0 0; }
50% { transform: rotate(180deg); border-radius: 50%; }
75% { transform: rotate(270deg); border-radius: 0 0 50% 0; }
100% { transform: rotate(360deg); border-radius: 0; }
}

@keyframes rc-hourglass-flip {
0%, 40% { transform: rotate(0deg) scale(1); }
50%, 90% { transform: rotate(180deg) scale(1); }
100% { transform: rotate(360deg) scale(1); }
}

@keyframes rc-grid-pop {
0%, 70%, 100% { transform: scale(0.3); opacity: 0.2; }
35% { transform: scale(1); opacity: 1; }
}

@keyframes rc-ripple-expand {
0% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}

@keyframes rc-typing-bounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-8px); }
}

@keyframes rc-pencil-rotate {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(30deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-30deg); }
}

@keyframes rc-atom-orbit-1 {
0% { transform: rotateX(60deg) rotateY(0deg); }
100% { transform: rotateX(60deg) rotateY(360deg); }
}

@keyframes rc-atom-orbit-2 {
0% { transform: rotateX(60deg) rotateY(120deg); }
100% { transform: rotateX(60deg) rotateY(480deg); }
}

@keyframes rc-atom-orbit-3 {
0% { transform: rotateX(60deg) rotateY(240deg); }
100% { transform: rotateX(60deg) rotateY(600deg); }
}

@keyframes rc-bar-progress {
0% { transform: translateX(-100%); background-position: 0% 0; }
50% { background-position: 100% 0; }
100% { transform: translateX(100%); background-position: 0% 0; }
}

@keyframes rc-bounce-squash {
0% { transform: translateY(0) scaleX(1) scaleY(1); }
30% { transform: translateY(-30px) scaleX(0.95) scaleY(1.05); }
50% { transform: translateY(-32px) scaleX(1) scaleY(1); }
80% { transform: translateY(0) scaleX(1.15) scaleY(0.85); }
100% { transform: translateY(0) scaleX(1.1) scaleY(0.9); }
}

@keyframes rc-moon-rotate {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}

@keyframes rc-moon-shadow {
0%, 100% { transform: translateX(-40%); }
50% { transform: translateX(40%); }
}

@keyframes rc-heartbeat-pulse {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.2); }
28% { transform: scale(1); }
42% { transform: scale(1.2); }
56% { transform: scale(1); }
}

@keyframes royCube {
0%   { transform: rotateX(0deg)   rotateY(0deg); }
25%  { transform: rotateX(90deg)  rotateY(90deg); }
50%  { transform: rotateX(180deg) rotateY(180deg); }
75%  { transform: rotateX(270deg) rotateY(270deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}

@keyframes royPrism {
0%   { transform: rotateY(0deg)   rotateX(15deg); }
33%  { transform: rotateY(120deg) rotateX(-15deg); }
66%  { transform: rotateY(240deg) rotateX(15deg); }
100% { transform: rotateY(360deg) rotateX(-15deg); }
}

@keyframes royCarousel {
0%   { transform: rotateY(0deg)   translateZ(60px); }
25%  { transform: rotateY(90deg)  translateZ(60px); }
50%  { transform: rotateY(180deg) translateZ(60px); }
75%  { transform: rotateY(270deg) translateZ(60px); }
100% { transform: rotateY(360deg) translateZ(60px); }
}

@keyframes royCardTilt {
0%   { transform: rotateX(0deg)    rotateY(0deg); }
25%  { transform: rotateX(15deg)   rotateY(-10deg); }
50%  { transform: rotateX(0deg)    rotateY(0deg); }
75%  { transform: rotateX(-15deg)  rotateY(10deg); }
100% { transform: rotateX(0deg)    rotateY(0deg); }
}

@keyframes royPerspective {
0%   { transform: translateZ(0px); }
50%  { transform: translateZ(80px) rotateX(10deg); }
100% { transform: translateZ(0px); }
}

@keyframes royDepthFloat {
0%   { transform: translateZ(0px)   translateY(0px); }
50%  { transform: translateZ(50px)  translateY(-20px); }
100% { transform: translateZ(0px)   translateY(0px); }
}

@keyframes royRotate3D {
0%   { transform: rotate3d(1, 1, 0, 0deg); }
100% { transform: rotate3d(1, 1, 0, 360deg); }
}

@keyframes royBookOpen {
0%   { transform: rotateY(0deg); }
15%  { transform: rotateY(0deg); }
50%  { transform: rotateY(-160deg); }
85%  { transform: rotateY(-160deg); }
100% { transform: rotateY(0deg); }
}

@keyframes royDoorOpen {
0%   { transform: perspective(600px) rotateY(0deg); }
30%  { transform: perspective(600px) rotateY(-75deg); }
70%  { transform: perspective(600px) rotateY(-75deg); }
100% { transform: perspective(600px) rotateY(0deg); }
}

@keyframes royCoinFlip {
0%   { transform: rotateY(0deg)    scaleX(1); }
25%  { transform: rotateY(90deg)   scaleX(0.15); }
50%  { transform: rotateY(180deg)  scaleX(1); }
75%  { transform: rotateY(270deg)  scaleX(0.15); }
100% { transform: rotateY(360deg)  scaleX(1); }
}

@keyframes roySwing {
0%   { transform: rotateY(0deg); }
20%  { transform: rotateY(30deg); }
40%  { transform: rotateY(-25deg); }
60%  { transform: rotateY(15deg); }
80%  { transform: rotateY(-10deg); }
100% { transform: rotateY(0deg); }
}

@keyframes royHelix {
0%   { transform: rotateY(0deg)   translateZ(0px)   translateY(0px); }
25%  { transform: rotateY(90deg)  translateZ(40px)  translateY(-30px); }
50%  { transform: rotateY(180deg) translateZ(0px)   translateY(0px); }
75%  { transform: rotateY(270deg) translateZ(-40px) translateY(-30px); }
100% { transform: rotateY(360deg) translateZ(0px)   translateY(0px); }
}

@keyframes royMorphingCube {
0%   { transform: rotateX(0deg)   rotateY(0deg)   scaleX(1)   scaleY(1); }
25%  { transform: rotateX(90deg)  rotateY(45deg)  scaleX(1.5) scaleY(0.7); }
50%  { transform: rotateX(180deg) rotateY(180deg) scaleX(0.6) scaleY(1.4); }
75%  { transform: rotateX(270deg) rotateY(270deg) scaleX(1.3) scaleY(0.8); }
100% { transform: rotateX(360deg) rotateY(360deg) scaleX(1)   scaleY(1); }
}

@keyframes royOrbit {
0%   { transform: rotate(0deg)   translateX(50px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes royTumble {
0%   { transform: rotate3d(1, 0, 0, 0deg)    rotate3d(0, 1, 0, 0deg); }
25%  { transform: rotate3d(1, 0, 0, 90deg)   rotate3d(0, 1, 0, 90deg); }
50%  { transform: rotate3d(1, 0, 0, 180deg)  rotate3d(0, 1, 0, 180deg); }
75%  { transform: rotate3d(1, 0, 0, 270deg)  rotate3d(0, 1, 0, 270deg); }
100% { transform: rotate3d(1, 0, 0, 360deg)  rotate3d(0, 1, 0, 360deg); }
}

@keyframes royMorphCircle {
0%, 100% { border-radius: 0; }
50%      { border-radius: 50%; }
}

@keyframes royMorphDiamond {
0%, 100% { transform: rotate(0deg)   scale(1, 1); }
50%      { transform: rotate(45deg)  scale(0.85, 0.85); }
}

@keyframes royRotate90 {
0%, 100% { transform: rotate(0deg); }
50%      { transform: rotate(90deg); }
}

@keyframes roySkewX {
0%, 100% { transform: skewX(0deg); }
25%      { transform: skewX(20deg); }
75%      { transform: skewX(-20deg); }
}

@keyframes roySkewY {
0%, 100% { transform: skewY(0deg); }
25%      { transform: skewY(15deg); }
75%      { transform: skewY(-15deg); }
}

@keyframes royScaleRotate {
0%, 100% { transform: scale(1)    rotate(0deg); }
50%      { transform: scale(1.2)  rotate(180deg); }
}

@keyframes royAccordion {
0%, 100% { transform: scaleY(1); }
20%      { transform: scaleY(0.05); }
40%      { transform: scaleY(1.05); }
60%      { transform: scaleY(0.95); }
80%      { transform: scaleY(1.02); }
}

@keyframes royFan {
0%   { transform: rotate(0deg); }
25%  { transform: rotate(-40deg); }
50%  { transform: rotate(40deg); }
75%  { transform: rotate(-20deg); }
100% { transform: rotate(0deg); }
}

@keyframes royStretch {
0%, 100% { transform: scaleX(1)    scaleY(1); }
30%      { transform: scaleX(1.6)  scaleY(0.75); }
60%      { transform: scaleX(0.9)  scaleY(1.1); }
}

@keyframes royCompress {
0%, 100% { transform: scaleY(1); }
15%      { transform: scaleY(0.4); }
30%      { transform: scaleY(1.15); }
45%      { transform: scaleY(0.85); }
60%      { transform: scaleY(1.05); }
75%      { transform: scaleY(0.97); }
}

@keyframes royWobble {
0%   { transform: translateX(0)     rotate(0deg); }
15%  { transform: translateX(-12px)  rotate(-5deg); }
30%  { transform: translateX(10px)   rotate(3deg); }
45%  { transform: translateX(-8px)   rotate(-3deg); }
60%  { transform: translateX(6px)    rotate(2deg); }
75%  { transform: translateX(-3px)   rotate(-1deg); }
100% { transform: translateX(0)      rotate(0deg); }
}

@keyframes royTwist {
0%, 100% { transform: rotateZ(0deg)   scaleX(1); }
25%      { transform: rotateZ(10deg)  scaleX(0.7); }
50%      { transform: rotateZ(0deg)   scaleX(1.1); }
75%      { transform: rotateZ(-10deg) scaleX(0.7); }
}

@keyframes royFold {
0%, 100% { transform: rotateX(0deg); }
40%      { transform: rotateX(-120deg); }
60%      { transform: rotateX(-120deg); }
}

@keyframes royUnfold {
0%   { transform: rotateX(-120deg); }
40%  { transform: rotateX(-120deg); }
100% { transform: rotateX(0deg); }
}

@keyframes royLiquidFill {
0%, 100% { --fill: 20%; }
50%      { --fill: 80%; }
}

@keyframes roySmoke {
0%   { opacity: 0.7; transform: translateY(0)     scale(1);   filter: blur(2px); }
100% { opacity: 0;   transform: translateY(-60px) scale(2.5); filter: blur(10px); }
}

@keyframes royElectric {
0%, 100% { box-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff, 0 0 20px #00b8d4; }
50%      { box-shadow: 0 0 10px #76ff03, 0 0 25px #76ff03, 0 0 50px #64dd17; }
}

@keyframes royBreathing {
0%, 100% { transform: scale(1);    opacity: 0.6; }
50%      { transform: scale(1.08); opacity: 1; }
}

@keyframes royPaperUnfold {
0%   { transform: rotateY(-180deg); opacity: 0.5; }
50%  { transform: rotateY(0deg);    opacity: 1; }
100% { transform: rotateY(-180deg); opacity: 0.5; }
}

@keyframes royRippleSpread {
0%   { box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.5); }
100% { box-shadow: 0 0 0 30px rgba(0, 150, 255, 0); }
}

@keyframes royConfettiBurst {
0%   { transform: scale(0) rotate(0deg);   opacity: 1; }
60%  { transform: scale(1.2) rotate(200deg); opacity: 1; }
100% { transform: scale(1) rotate(360deg); opacity: 0.6; }
}

@keyframes royMagneticPull {
0%, 100% { transform: translateX(0)    translateY(0);   filter: drop-shadow(0 0 8px rgba(100, 100, 255, 0.6)); }
30%      { transform: translateX(15px) translateY(5px); filter: drop-shadow(0 0 15px rgba(100, 100, 255, 0.9)); }
60%      { transform: translateX(-5px) translateY(-2px); }
}

@keyframes royGlassShatter {
0%   { clip-path: inset(0 0 0 0); opacity: 1; }
10%  { clip-path: polygon(0 0, 60% 0, 40% 40%, 0 50%); opacity: 1; }
30%  { clip-path: polygon(60% 0, 100% 0, 100% 50%, 40% 40%); opacity: 0.9; transform: translate(10px, -5px); }
50%  { clip-path: polygon(0 50%, 40% 40%, 60% 100%, 0 100%); opacity: 0.9; transform: translate(-8px, 5px); }
70%  { clip-path: polygon(40% 40%, 100% 50%, 100% 100%, 60% 100%); opacity: 0.9; transform: translate(6px, 8px); }
80%  { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
100% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
}

@keyframes royNeonOutline {
0% {
box-shadow:
0 0 5px  #ff00de,
0 0 10px #ff00de,
inset 0 0 5px #ff00de;
}
100% {
box-shadow:
0 0 15px #ff00de,
0 0 30px #ff00de,
0 0 50px #ff00de,
inset 0 0 10px #ff00de;
}
}

@keyframes royGradBorderSpin {
0%   { background-position: 0 0, 0% 50%; }
100% { background-position: 0 0, 100% 50%; }
}

@keyframes royAuroraText {
0%   { background-position: 0% 50%; }
100% { background-position: 400% 50%; }
}

@keyframes royFire {
0%, 100% { background-position: 0% 100%; }
50%      { background-position: 0% 0%; }
}

@keyframes royIce {
0%, 100% { box-shadow: 0 0 15px rgba(174, 214, 241, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.15); }
50%      { box-shadow: 0 0 25px rgba(174, 214, 241, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.3); }
}

@keyframes roySand {
0%   {
box-shadow:
0 0 0 0 rgba(212, 167, 106, 0.8),
0 0 0 0 rgba(194, 148, 90, 0.6),
0 0 0 0 rgba(222, 184, 135, 0.4);
opacity: 1;
}
100% {
box-shadow:
30px -15px 8px -5px rgba(212, 167, 106, 0),
-25px -20px 6px -4px rgba(194, 148, 90, 0),
10px -30px 10px -3px rgba(222, 184, 135, 0),
-15px 10px 5px -6px rgba(210, 180, 140, 0),
20px 5px 7px -5px rgba(188, 143, 93, 0);
opacity: 0.3;
}
}

@keyframes royWaterDrop {
0%   {
box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.5);
transform: scale(1);
}
50%  {
box-shadow:
0 0 0 15px rgba(0, 150, 255, 0.2),
0 0 0 30px rgba(0, 150, 255, 0.1);
transform: scale(0.95);
}
100% {
box-shadow:
0 0 0 30px rgba(0, 150, 255, 0),
0 0 0 60px rgba(0, 150, 255, 0);
transform: scale(1);
}
}

@keyframes royGlitchMorph {
0%, 100% {
transform: skewX(0deg) scale(1, 1);
border-radius: 0;
box-shadow: none;
}
10% {
transform: skewX(5deg) scale(1.02, 0.98);
border-radius: 10% 0 10% 0;
box-shadow: -3px 0 #ff0040, 3px 0 #00ffff;
}
20% {
transform: skewX(-3deg) scale(0.98, 1.02);
border-radius: 0 15% 0 15%;
box-shadow: 3px 0 #ff0040, -3px 0 #00ffff;
}
30% {
transform: skewX(0deg) scale(1.05, 0.95);
border-radius: 25% 10% 25% 10%;
box-shadow: 0;
}
40% {
transform: skewX(8deg) scale(0.95, 1.05);
border-radius: 10% 25% 10% 25%;
box-shadow: -5px 0 #ff0040, 5px 0 #00ffff;
}
50% {
transform: skewX(0deg) scale(1, 1);
border-radius: 0;
box-shadow: none;
}
}

@keyframes royPixelate {
0%   { box-shadow: 10px 0 0 0 #e94560, 20px 0 0 0 #0f3460, 0 10px 0 0 #16213e, 10px 10px 0 0 #e94560, 20px 10px 0 0 #0f3460; }
12%  { box-shadow: 0 0 0 0 #e94560, 10px 0 0 0 #16213e, 20px 0 0 0 #e94560, 0 10px 0 0 #0f3460, 10px 10px 0 0 #e94560, 20px 10px 0 0 #16213e; }
25%  { box-shadow: 0 0 0 0 #0f3460, 10px 0 0 0 #e94560, 20px 0 0 0 #16213e, 0 10px 0 0 #e94560, 10px 10px 0 0 #0f3460, 20px 10px 0 0 #e94560; }
37%  { box-shadow: 0 0 0 0 #16213e, 10px 0 0 0 #0f3460, 20px 0 0 0 #e94560, 0 10px 0 0 #16213e, 10px 10px 0 0 #e94560, 20px 10px 0 0 #0f3460; }
50%  { box-shadow: 10px 0 0 0 #e94560, 20px 0 0 0 #0f3460, 0 10px 0 0 #16213e, 10px 10px 0 0 #e94560, 20px 10px 0 0 #0f3460; }
62%  { box-shadow: 0 0 0 0 #e94560, 10px 0 0 0 #16213e, 20px 0 0 0 #e94560, 0 10px 0 0 #0f3460, 10px 10px 0 0 #e94560, 20px 10px 0 0 #16213e; }
75%  { box-shadow: 0 0 0 0 #0f3460, 10px 0 0 0 #e94560, 20px 0 0 0 #16213e, 0 10px 0 0 #e94560, 10px 10px 0 0 #0f3460, 20px 10px 0 0 #e94560; }
87%  { box-shadow: 0 0 0 0 #16213e, 10px 0 0 0 #0f3460, 20px 0 0 0 #e94560, 0 10px 0 0 #16213e, 10px 10px 0 0 #e94560, 20px 10px 0 0 #0f3460; }
100% { box-shadow: 10px 0 0 0 #e94560, 20px 0 0 0 #0f3460, 0 10px 0 0 #16213e, 10px 10px 0 0 #e94560, 20px 10px 0 0 #0f3460; }
}

@keyframes royCyberGrid {
0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
100% { background-position: 40px 40px, 40px 40px, 10px 10px, 10px 10px; }
}

@keyframes royMorphingBlob {
0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
50%  { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
75%  { border-radius: 60% 30% 60% 50% / 70% 40% 50% 60%; }
100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes royTextShadowStack {
0%, 100% {
text-shadow:
0 1px 0 #cccccc,
0 2px 0 #bbbbbb,
0 3px 0 #aaaaaa,
0 4px 0 #999999,
0 5px 8px rgba(0, 0, 0, 0.4);
}
50% {
text-shadow:
0 -1px 0 #cccccc,
0 -2px 0 #bbbbbb,
0 -3px 0 #aaaaaa,
0 -4px 0 #999999,
0 -5px 8px rgba(0, 0, 0, 0.4);
}
}

@keyframes royTypingCursor {
0%, 100% { border-color: currentColor; }
50%      { border-color: transparent; }
}

@keyframes btn-shine-sweep {
to { left: 125%; }
}

@keyframes btn-glow-pulse-anim {
0%   { box-shadow: 0 0 5px rgba(124, 58, 237, 0.4), 0 0 10px rgba(99, 102, 241, 0.2); }
50%  { box-shadow: 0 0 20px rgba(124, 58, 237, 0.7), 0 0 40px rgba(99, 102, 241, 0.4); }
100% { box-shadow: 0 0 5px rgba(124, 58, 237, 0.4), 0 0 10px rgba(99, 102, 241, 0.2); }
}

@keyframes btn-bounce-key {
0%   { transform: scale(1); }
30%  { transform: scale(1.05); }
50%  { transform: scale(1.0); }
70%  { transform: scale(1.08); }
100% { transform: scale(1.06); }
}

@keyframes card-pulse-border-anim {
0%   { border-color: #7c3aed; box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3); }
50%  { border-color: #a78bfa; box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
100% { border-color: #7c3aed; box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3); }
}

@keyframes rcCircleRevealIn {
0%   { clip-path: circle(0% at 50% 50%); }
100% { clip-path: circle(75% at 50% 50%); }
}

@keyframes rcCircleRevealOut {
0%   { clip-path: circle(75% at 50% 50%); }
100% { clip-path: circle(0% at 50% 50%); }
}

@keyframes rcDiamondReveal {
0%   { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
40%  { clip-path: polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%); }
100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
}

@keyframes rcTriangleReveal {
0%   { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); }
50%  { clip-path: polygon(50% 15%, 85% 85%, 15% 85%); }
100% { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
}

@keyframes rcCrossReveal {
0%   { clip-path: polygon(
40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%,
60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%,
0% 40%, 40% 40%
); opacity: 0; }
50%  { clip-path: polygon(
35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%,
65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%,
0% 35%, 35% 35%
); opacity: 1; }
100% { clip-path: polygon(
0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%,
100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%,
0% 0%, 0% 0%
); opacity: 1; }
}

@keyframes rcHexagonReveal {
0%   { clip-path: polygon(50% 50%, 50% 50%, 50% 50%,
50% 50%, 50% 50%, 50% 50%); }
60%  { clip-path: polygon(50% 15%, 93% 35%, 93% 65%,
50% 85%, 7% 65%, 7% 35%); }
100% { clip-path: polygon(50% 0%, 100% 25%, 100% 75%,
50% 100%, 0% 75%, 0% 25%); }
}

@keyframes rcStarReveal {
0%   { clip-path: polygon(50% 50%, 50% 50%, 50% 50%,
50% 50%, 50% 50%, 50% 50%,
50% 50%, 50% 50%, 50% 50%); }
50%  { clip-path: polygon(50% 20%, 61% 40%, 80% 40%, 65% 55%,
75% 75%, 55% 65%, 50% 85%, 45% 65%,
25% 75%, 35% 55%, 20% 40%, 39% 40%); }
100% { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%); }
}

@keyframes rcSlideLeftReveal {
0%   { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0 0% 0 0); }
}

@keyframes rcSlideDownReveal {
0%   { clip-path: inset(100% 0 0 0); }
100% { clip-path: inset(0% 0 0 0); }
}

@keyframes rcWipeReveal {
0%   { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
50%  { clip-path: polygon(0% 0%, 60% 0%, 40% 100%, 0% 100%); }
100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

@keyframes rcSkeletonPulse {
0%, 100% { opacity: 1; }
50%      { opacity: 0.4; }
}

@keyframes rcSkeletonBlink {
0%, 100% { opacity: 1; }
50%      { opacity: 0.2; }
}

@keyframes rcSkeletonFade {
0%, 100% { opacity: 1; background-color: #e0e0e0; }
50%      { opacity: 0.3; background-color: #d0d0d0; }
}

@keyframes rcCheckboxPop {
0%   { transform: scale(1); }
50%  { transform: scale(1.15); }
100% { transform: scale(1); }
}

@keyframes rcRadioPulseRing {
0%   { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4); }
70%  { box-shadow: 0 0 0 8px rgba(33, 150, 243, 0); }
100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

@keyframes rcNotificationSlideIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes rcNotificationSlideOut {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100%);
}
}

@keyframes rcProgressStripe {
0%   { background-position: -200% 0; }
100% { background-position: 200% 0; }
}

@keyframes rc-blur-in {
0% { filter: blur(12px); }
100% { filter: blur(0px); }
}

@keyframes rc-blur-out {
0% { filter: blur(0px); }
100% { filter: blur(14px); }
}

@keyframes rc-grayscale-in {
0% { filter: grayscale(1); }
100% { filter: grayscale(0); }
}

@keyframes rc-grayscale-out {
0% { filter: grayscale(0); }
100% { filter: grayscale(1); }
}

@keyframes rc-sepia-in {
0% { filter: sepia(1); }
100% { filter: sepia(0); }
}

@keyframes rc-sepia-out {
0% { filter: sepia(0); }
100% { filter: sepia(1); }
}

@keyframes rc-saturate-pulse {
0%, 100% { filter: saturate(1); }
50% { filter: saturate(2.5); }
}

@keyframes rc-hue-rotate {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}

@keyframes rc-invert-flash {
0%, 40%, 60%, 100% { filter: invert(0); }
45%, 55% { filter: invert(1); }
}

@keyframes rc-brightness-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.4); }
}

@keyframes rc-contrast-switch {
0%, 45%, 55%, 100% { filter: contrast(1); }
50% { filter: contrast(1.8); }
}

@keyframes rc-vintage {
0%, 100% {
filter: sepia(0.5) contrast(1.1) brightness(0.95);
}
50% {
filter: sepia(0.7) contrast(1.15) brightness(0.85);
}
}

@keyframes rc-rain-fall {
0% { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}

@keyframes rc-snow-fall {
0% { transform: translateY(-10%) translateX(0); opacity: 1; }
50% { transform: translateY(50vh) translateX(20px); opacity: 0.8; }
100% { transform: translateY(100vh) translateX(-10px); opacity: 0; }
}

@keyframes rc-lightning-flash {
0%, 88%, 92%, 96%, 100% { opacity: 0; }
89% { opacity: 0.8; }
91% { opacity: 0.1; }
93% { opacity: 0.6; }
95% { opacity: 0; }
}

@keyframes rc-cloud-drift-1 {
0% { transform: translateX(-120%); }
100% { transform: translateX(calc(100vw + 50%)); }
}

@keyframes rc-cloud-drift-2 {
0% { transform: translateX(calc(100vw + 30%)); }
100% { transform: translateX(-150%); }
}

@keyframes rc-firefly-1 {
0%, 100% { transform: translate(0, 0); opacity: 0.2; }
20% { transform: translate(30px, -40px); opacity: 1; }
40% { transform: translate(-20px, -60px); opacity: 0.3; }
60% { transform: translate(40px, -20px); opacity: 0.9; }
80% { transform: translate(-10px, -50px); opacity: 0.4; }
}

@keyframes rc-firefly-2 {
0%, 100% { transform: translate(0, 0); opacity: 0.5; }
25% { transform: translate(-35px, -25px); opacity: 0.2; }
50% { transform: translate(20px, -55px); opacity: 1; }
75% { transform: translate(-15px, -35px); opacity: 0.3; }
}

@keyframes rc-wave-1 {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-25%) translateY(5px); }
}

@keyframes rc-wave-2 {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(25%) translateY(-5px); }
}

@keyframes rc-sunset-glow {
0%, 100% {
background: linear-gradient(to bottom,
#1a0533 0%, #4a1942 20%, #c94b4b 45%,
#f09819 65%, #ff512f 80%, #dd2476 100%);
}
50% {
background: linear-gradient(to bottom,
#0d0221 0%, #2a0845 20%, #6441a5 35%,
#e85d75 55%, #f5af19 75%, #f12711 100%);
}
}

@keyframes rc-aurora-shift {
0%, 100% {
background: linear-gradient(135deg,
rgba(0,20,40,1) 0%,
rgba(0,100,80,0.4) 20%,
rgba(0,200,150,0.3) 35%,
rgba(100,0,200,0.2) 50%,
rgba(0,150,100,0.3) 65%,
rgba(0,20,40,1) 100%);
}
33% {
background: linear-gradient(120deg,
rgba(0,20,40,1) 0%,
rgba(50,0,150,0.3) 25%,
rgba(0,220,180,0.4) 40%,
rgba(0,100,200,0.3) 55%,
rgba(80,0,180,0.2) 70%,
rgba(0,20,40,1) 100%);
}
66% {
background: linear-gradient(150deg,
rgba(0,20,40,1) 0%,
rgba(0,180,120,0.3) 15%,
rgba(120,0,220,0.3) 30%,
rgba(0,200,160,0.4) 50%,
rgba(0,80,180,0.3) 70%,
rgba(0,20,40,1) 100%);
}
}

@keyframes rc-fog-drift-1 {
0%, 100% { transform: translateX(-5%); opacity: 0.5; }
50% { transform: translateX(5%); opacity: 0.8; }
}

@keyframes rc-fog-drift-2 {
0%, 100% { transform: translateX(5%); opacity: 0.4; }
50% { transform: translateX(-8%); opacity: 0.7; }
}

@keyframes rc-twinkle-1 {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}

@keyframes rc-twinkle-2 {
0%, 100% { opacity: 0.6; }
30% { opacity: 0.2; }
70% { opacity: 1; }
}

@keyframes rc-pulse-ring-green {
0% { transform: scale(0.8); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}

@keyframes rc-breathe-blue {
0%, 100% {
box-shadow: 0 0 4px 1px rgba(59,130,246,0.3);
background: #3b82f6;
}
50% {
box-shadow: 0 0 16px 6px rgba(59,130,246,0.5), 0 0 32px 12px rgba(59,130,246,0.15);
background: #60a5fa;
}
}

@keyframes rc-loading-slide {
0% { transform: translateX(-100%); }
50% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}

@keyframes rc-loading-bg-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.5; }
}

@keyframes rc-badge-bounce {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.25); }
50% { transform: scale(0.95); }
70% { transform: scale(1.1); }
}

@keyframes rc-badge-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(2); opacity: 0; }
}

@keyframes rc-dot-bounce {
0%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
}

@keyframes rc-signal-expand {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}

@keyframes rc-heart-beat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.2); }
56% { transform: scale(1); }
}

@keyframes rc-scroll-fade-up {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes rc-scroll-fade-left {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes rc-scroll-fade-right {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes rc-scroll-zoom-in {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes rc-scroll-slide-stagger {
from {
opacity: 0;
transform: translateY(30px);
}
60% {
opacity: 0.8;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes rc-scroll-flip-in {
from {
opacity: 0;
transform: perspective(400px) rotateY(90deg);
}
to {
opacity: 1;
transform: perspective(400px) rotateY(0deg);
}
}

@keyframes rc-scroll-rotate-in {
from {
opacity: 0;
transform: rotate(-200deg) scale(0.6);
}
to {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}

@keyframes rc-scroll-blur-clear {
from {
opacity: 0;
filter: blur(10px);
transform: scale(1.05);
}
to {
opacity: 1;
filter: blur(0px);
transform: scale(1);
}
}

@keyframes rc-scroll-clip-reveal {
from {
opacity: 0;
clip-path: circle(0% at 50% 50%);
}
to {
opacity: 1;
clip-path: circle(75% at 50% 50%);
}
}

@keyframes rc-ease-linear-move {
from { opacity: 0; transform: translateX(0); }
to { opacity: 1; transform: translateX(60px); }
}

@keyframes rc-ease-elastic-out-move {
0% {
opacity: 0;
transform: translateX(0) scaleX(1);
}
40% {
opacity: 1;
transform: translateX(60px) scaleX(1.1);
}
55% {
transform: translateX(60px) scaleX(0.95);
}
70% {
transform: translateX(60px) scaleX(1.02);
}
85% {
transform: translateX(60px) scaleX(0.99);
}
100% {
opacity: 1;
transform: translateX(60px) scaleX(1);
}
}

@keyframes rc-ease-bounce-out-move {
0% {
opacity: 0;
transform: translateX(0) translateY(0);
}
20% {
opacity: 1;
transform: translateX(60px) translateY(0);
}
40% {
transform: translateX(60px) translateY(-20px);
}
55% {
transform: translateX(60px) translateY(0);
}
68% {
transform: translateX(60px) translateY(-10px);
}
78% {
transform: translateX(60px) translateY(0);
}
88% {
transform: translateX(60px) translateY(-4px);
}
100% {
opacity: 1;
transform: translateX(60px) translateY(0);
}
}

@keyframes rcFadeThrough {
0% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes rcSlideOverLeft {
0% { transform: translateX(100%); }
100% { transform: translateX(0); }
}

@keyframes rcSlideOverRight {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}

@keyframes rcSlideOverUp {
0% { transform: translateY(100%); }
100% { transform: translateY(0); }
}

@keyframes rcZoomFade {
0% { opacity: 0; transform: scale(0.92); }
100% { opacity: 1; transform: scale(1); }
}

@keyframes rcFlipTransition {
0% { transform: perspective(1200px) rotateY(-90deg); }
100% { transform: perspective(1200px) rotateY(0deg); }
}

@keyframes rcDissolve {
0% { opacity: 0; filter: blur(20px); }
100% { opacity: 1; filter: blur(0px); }
}

@keyframes rcCurtainLeft {
0% { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 50% 0 0); }
}

@keyframes rcCurtainRight {
0% { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 0 0 50%); }
}

@keyframes rcRmSlide {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}

@keyframes rcMsBounce {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-15px); }
50% { transform: translateY(-8px); }
70% { transform: translateY(-3px); }
}

@keyframes rcMsPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes rcIconBounce {
0%, 100% { transform: translateY(0); }
20% { transform: translateY(-30%); }
40% { transform: translateY(0); }
55% { transform: translateY(-15%); }
70% { transform: translateY(0); }
82% { transform: translateY(-6%); }
}

@keyframes rcIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}

@keyframes rcIconShake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-25%); }
30% { transform: translateX(20%); }
45% { transform: translateX(-15%); }
60% { transform: translateX(10%); }
75% { transform: translateX(-5%); }
}

@keyframes rcIconFlip {
0% { transform: perspective(400px) rotateY(0); }
100% { transform: perspective(400px) rotateY(360deg); }
}

@keyframes rcIconSwing {
0% { transform: rotate(0deg); }
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}

@keyframes rcIconTada {
0% { transform: scale(1) rotate(0deg); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.15) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.15) rotate(-3deg); }
100% { transform: scale(1) rotate(0deg); }
}

@keyframes rcIconWobble {
0% { transform: translateX(0) rotate(0deg); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0) rotate(0deg); }
}

@keyframes rcIconDropIn {
0% { opacity: 0; transform: translateY(-40px); }
60% { opacity: 1; transform: translateY(5px); }
80% { transform: translateY(-3px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes rcIconRubberBand {
0% { transform: scaleX(1) scaleY(1); }
30% { transform: scaleX(1.25) scaleY(0.75); }
40% { transform: scaleX(0.75) scaleY(1.25); }
50% { transform: scaleX(1.15) scaleY(0.85); }
65% { transform: scaleX(0.95) scaleY(1.05); }
75% { transform: scaleX(1.05) scaleY(0.95); }
100% { transform: scaleX(1) scaleY(1); }
}

@keyframes rcIconBeat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.2); }
28% { transform: scale(1); }
42% { transform: scale(1.2); }
70% { transform: scale(1); }
}

.rc-fade-in { animation: roy-fade-in 0.6s ease-out both; }

.rc-slide-in-up { animation: rc-slide-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.rc-slide-in-down { animation: rc-slide-in-down 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.rc-slide-in-left { animation: rc-slide-in-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.rc-slide-in-right { animation: rc-slide-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.rc-zoom-in { animation: rc-zoom-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.rc-bounce-in { animation: rc-bounce-in 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.rc-flip-in-x {
backface-visibility: hidden;
animation: rc-flip-in-x 0.6s ease-in both;
}

.rc-flip-in-y {
backface-visibility: hidden;
animation: rc-flip-in-y 0.6s ease-in both;
}

.rc-fade-in-up { animation: roy-fade-in-up 0.5s ease-out both; }

.rc-fade-in-down { animation: roy-fade-in-down 0.5s ease-out both; }

.rc-fade-in-left { animation: roy-fade-in-left 0.5s ease-out both; }

.rc-roll-in { animation: rc-roll-in 0.65s ease-out both; }

.rc-light-speed-in { animation: rc-light-speed-in 0.6s ease-out both; }

.rc-rotate-in { animation: rc-rotate-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

.rc-rotate-in-down-left {
transform-origin: left bottom;
animation: rc-rotate-in-down-left 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rc-rotate-in-up-right {
transform-origin: right bottom;
animation: rc-rotate-in-up-right 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rc-fade-in-scale { animation: rc-fade-in-scale 0.6s ease-out both; }

.rc-drop-in { animation: rc-drop-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.rc-expand-in { animation: rc-expand-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.rc-fade-out { animation: roy-fade-out 0.6s ease-in both; }

.rc-slide-out-up { animation: rc-slide-out-up 0.5s cubic-bezier(0.55, 0, 1, 0.45) both; }

.rc-slide-out-down { animation: rc-slide-out-down 0.5s cubic-bezier(0.55, 0, 1, 0.45) both; }

.rc-slide-out-left { animation: rc-slide-out-left 0.5s cubic-bezier(0.55, 0, 1, 0.45) both; }

.rc-slide-out-right { animation: rc-slide-out-right 0.5s cubic-bezier(0.55, 0, 1, 0.45) both; }

.rc-zoom-out { animation: rc-zoom-out 0.5s cubic-bezier(0.55, 0, 1, 0.45) both; }

.rc-flip-out-x {
backface-visibility: hidden;
animation: rc-flip-out-x 0.6s ease-in both;
}

.rc-flip-out-y {
backface-visibility: hidden;
animation: rc-flip-out-y 0.6s ease-in both;
}

.rc-light-speed-out { animation: rc-light-speed-out 0.5s ease-in both; }

.rc-roll-out { animation: rc-roll-out 0.65s ease-in both; }

.rc-rotate-out { animation: rc-rotate-out 0.7s ease-in both; }

.rc-fade-out-scale { animation: rc-fade-out-scale 0.5s ease-in both; }

.rc-shrink-out { animation: rc-zoom-out 0.5s ease-in both; }

.rc-fold-out {
transform-origin: left center;
animation: rc-flip-out-y 0.55s ease-in both;
}

.rc-fly-out-up { animation: rc-fly-out-up 0.4s ease-in both; }

.rc-bounce { animation: rc-bounce 1s ease infinite; }

.rc-pulse { animation: rc-pulse 1.2s ease-in-out infinite; }

.rc-shake { animation: rc-shake 0.6s ease-in-out infinite; }

.rc-swing {
transform-origin: top center;
animation: rc-swing 1s ease-in-out infinite;
}

.rc-tada { animation: rc-tada 1s ease-in-out infinite; }

.rc-wobble { animation: rc-wobble 0.8s ease-in-out infinite; }

.rc-heartbeat { animation: rc-heartbeat 1.3s ease-in-out infinite; }

.rc-shake-x { animation: rc-shake-x 0.5s ease-in-out infinite; }

.rc-shake-y { animation: rc-shake-y 0.5s ease-in-out infinite; }

.rc-jelly { animation: rc-jelly 0.9s ease-in-out infinite; }

.rc-rubber-band { animation: rc-rubber-band 1s ease-in-out infinite; }

.rc-pulse-glow { animation: rc-pulse-glow 1.5s ease-in-out infinite; }

.rc-wiggle { animation: rc-wiggle 0.4s ease-in-out infinite; }

.rc-jello { animation: rc-jello 1s ease-in-out infinite; }

.rc-sonar { animation: rc-sonar 1.6s ease-out infinite; }

.rc-flash { animation: rc-flash 1.2s ease-in-out infinite; }

.rc-strobe { animation: rc-flash 0.6s step-end infinite; }

.rc-hover-glow {
transition: box-shadow 0.3s ease;
}
.rc-hover-glow:hover {
box-shadow: 0 0 15px rgba(0, 255, 136, 0.6), 0 0 30px rgba(0, 255, 136, 0.3), 0 0 45px rgba(0, 255, 136, 0.15);
}

.rc-hover-scale-up {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rc-hover-scale-up:hover {
transform: scale(1.1);
}

.rc-hover-scale-down {
transition: transform 0.3s ease;
}
.rc-hover-scale-down:hover {
transform: scale(0.9);
}

.rc-hover-rotate {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rc-hover-rotate:hover {
transform: rotate(10deg);
}

.rc-hover-skew {
transition: transform 0.3s ease;
}
.rc-hover-skew:hover {
transform: skewX(-5deg);
}

.rc-hover-border-glow {
border: 2px solid transparent;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.rc-hover-border-glow:hover {
border-color: #0ff;
box-shadow: 0 0 12px rgba(0, 255, 255, 0.5), inset 0 0 12px rgba(0, 255, 255, 0.1);
}

.rc-hover-shadow-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rc-hover-shadow-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.rc-hover-float {
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.rc-hover-float:hover {
transform: translateY(-8px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.rc-hover-tilt {
transition: transform 0.3s ease;
transform-style: preserve-3d;
}
.rc-hover-tilt:hover {
transform: perspective(600px) rotateX(5deg) rotateY(-5deg);
}

.rc-hover-ripple {
position: relative;
overflow: hidden;
}
.rc-hover-ripple::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
z-index: 1;
}
.rc-hover-ripple:hover::before {
width: 300%;
height: 300%;
opacity: 0;
}

.rc-hover-underline-grow {
position: relative;
}
.rc-hover-underline-grow::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.35s ease, left 0.35s ease;
}
.rc-hover-underline-grow:hover::after {
width: 100%;
left: 0;
}

.rc-hover-overlay-slide {
position: relative;
overflow: hidden;
}
.rc-hover-overlay-slide::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
transition: left 0.4s ease;
z-index: 1;
}
.rc-hover-overlay-slide:hover::before {
left: 0;
}

.rc-hover-bg-slide {
position: relative;
overflow: hidden;
z-index: 1;
}
.rc-hover-bg-slide::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(to top, #667eea, #764ba2);
transition: height 0.4s ease;
z-index: -1;
}
.rc-hover-bg-slide:hover::before {
height: 100%;
}

.rc-hover-shrink-border {
box-shadow: 0 0 0 3px #667eea;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.rc-hover-shrink-border:hover {
box-shadow: 0 0 0 1px #667eea;
transform: scale(1.02);
}

.rc-hover-expand {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rc-hover-expand:hover {
transform: scale(1.05);
box-shadow: 0 0 0 5px rgba(102, 126, 234, 0.25);
}

.rc-hover-neon-pulse {
border: 2px solid transparent;
transition: border-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
}
.rc-hover-neon-pulse:hover {
border-color: #0f0;
box-shadow: 0 0 8px #0f0, 0 0 20px #0f0, 0 0 40px #0f0, 0 0 80px rgba(0, 255, 0, 0.4);
text-shadow: 0 0 8px #0f0, 0 0 20px #0f0;
}

.rc-hover-fill {
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.35s ease;
}
.rc-hover-fill::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #667eea;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
z-index: -1;
}
.rc-hover-fill:hover::before {
transform: scaleX(1);
}
.rc-hover-fill:hover {
color: #fff;
}

.rc-hover-swipe {
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.35s ease;
}
.rc-hover-swipe::before {
content: '';
position: absolute;
top: 0;
left: -110%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f093fb, #f5576c);
transform: skewX(-15deg);
transition: left 0.5s cubic-bezier(0.65, 0, 0.35, 1);
z-index: -1;
}
.rc-hover-swipe:hover::before {
left: 0;
}
.rc-hover-swipe:hover {
color: #fff;
}

.rc-hover-shadow {
transition: box-shadow 0.4s ease;
}
.rc-hover-shadow:hover {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07),
0 16px 32px rgba(0, 0, 0, 0.07),
0 32px 64px rgba(0, 0, 0, 0.07);
}

.rc-hover-blur {
transition: filter 0.3s ease;
}
.rc-hover-blur:hover {
filter: blur(2px) brightness(1.2) contrast(1.1);
}

.rc-hover-skew-reverse {
transform: skewX(10deg);
transition: transform 0.35s ease;
}
.rc-hover-skew-reverse:hover {
transform: skewX(-10deg);
}

.rc-hover-flip {
perspective: 800px;
transform-style: preserve-3d;
backface-visibility: hidden;
transition: transform 0.6s ease;
}
.rc-hover-flip:hover {
transform: rotateY(180deg);
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
}

.rc-hover-slide-right {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rc-hover-slide-right:hover {
transform: translateX(8px);
box-shadow: -4px 2px 12px rgba(0, 0, 0, 0.18);
}

.rc-hover-slide-up {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rc-hover-slide-up:hover {
transform: translateY(-4px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.rc-hover-morph {
border-radius: 8px;
transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s ease;
}
.rc-hover-morph:hover {
border-radius: 50%;
transform: scale(0.95);
}

.rc-hover-shake:hover {
animation: roy-shake 0.5s ease;
}

.rc-hover-glow-text {
transition: text-shadow 0.3s ease, color 0.3s ease;
}
.rc-hover-glow-text:hover {
text-shadow: 0 0 8px #0ff, 0 0 16px #0ff, 0 0 32px #0ff, 0 0 64px rgba(0, 255, 255, 0.4);
color: #fff;
}

.rc-hover-3d-lift {
transition: transform 0.4s ease, box-shadow 0.4s ease;
transform-style: preserve-3d;
}
.rc-hover-3d-lift:hover {
transform: perspective(800px) rotateX(3deg) translateY(-8px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.2),
0 0 12px rgba(102, 126, 234, 0.15);
}

.rc-text-gradient {
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.rc-text-shadow-pop {
animation: rc-text-shadow-pop-anim 0.5s ease both;
}

.rc-text-stroke {
-webkit-text-stroke: 2px #667eea;
-webkit-text-fill-color: transparent;
}

.rc-text-glow {
animation: rc-text-glow-anim 2s ease-in-out infinite alternate;
}

.rc-text-typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #667eea;
width: 0;
animation:
rc-text-typewriter-type 3s steps(24) forwards,
rc-text-typewriter-cursor 0.75s step-end infinite;
}

.rc-text-wave span {
display: inline-block;
animation: roy-wave 1.4s ease-in-out infinite;
}
.rc-text-wave span:nth-child(2)  { animation-delay: 0.1s; }
.rc-text-wave span:nth-child(3)  { animation-delay: 0.2s; }
.rc-text-wave span:nth-child(4)  { animation-delay: 0.3s; }
.rc-text-wave span:nth-child(5)  { animation-delay: 0.4s; }
.rc-text-wave span:nth-child(6)  { animation-delay: 0.5s; }
.rc-text-wave span:nth-child(7)  { animation-delay: 0.6s; }
.rc-text-wave span:nth-child(8)  { animation-delay: 0.7s; }
.rc-text-wave span:nth-child(9)  { animation-delay: 0.8s; }
.rc-text-wave span:nth-child(10) { animation-delay: 0.9s; }
.rc-text-wave span:nth-child(11) { animation-delay: 1.0s; }
.rc-text-wave span:nth-child(12) { animation-delay: 1.1s; }

.rc-text-blur-in {
animation: rc-text-blur-in-anim 1.2s ease forwards;
}

.rc-text-highlight {
background: linear-gradient(to right, rgba(102, 126, 234, 0.3) 50%, transparent 50%);
background-size: 200% 100%;
background-position: 100% 0;
display: inline;
animation: rc-text-highlight-anim 1.5s ease forwards;
}

.rc-text-underline-slide {
position: relative;
display: inline-block;
}
.rc-text-underline-slide::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: #667eea;
transform: scaleX(0);
transform-origin: right;
animation: rc-text-underline-slide-anim 0.8s ease forwards 0.3s;
}

.rc-text-blink {
animation: rc-text-blink-anim 1s step-end infinite;
}

.rc-text-scramble span {
display: inline-block;
opacity: 0;
animation: rc-text-scramble-anim 0.35s ease forwards;
}
.rc-text-scramble span:nth-child(1)  { animation-delay: 0.04s; }
.rc-text-scramble span:nth-child(2)  { animation-delay: 0.08s; }
.rc-text-scramble span:nth-child(3)  { animation-delay: 0.12s; }
.rc-text-scramble span:nth-child(4)  { animation-delay: 0.16s; }
.rc-text-scramble span:nth-child(5)  { animation-delay: 0.20s; }
.rc-text-scramble span:nth-child(6)  { animation-delay: 0.24s; }
.rc-text-scramble span:nth-child(7)  { animation-delay: 0.28s; }
.rc-text-scramble span:nth-child(8)  { animation-delay: 0.32s; }
.rc-text-scramble span:nth-child(9)  { animation-delay: 0.36s; }
.rc-text-scramble span:nth-child(10) { animation-delay: 0.40s; }
.rc-text-scramble span:nth-child(11) { animation-delay: 0.44s; }
.rc-text-scramble span:nth-child(12) { animation-delay: 0.48s; }
.rc-text-scramble span:nth-child(13) { animation-delay: 0.52s; }
.rc-text-scramble span:nth-child(14) { animation-delay: 0.56s; }
.rc-text-scramble span:nth-child(15) { animation-delay: 0.60s; }
.rc-text-scramble span:nth-child(16) { animation-delay: 0.64s; }

.rc-text-3d {
color: #444;
text-shadow:
1px 1px 0 #e0e0e0,
2px 2px 0 #d0d0d0,
3px 3px 0 #c0c0c0,
4px 4px 0 #b0b0b0,
5px 5px 0 #a0a0a0,
6px 6px 0 #909090,
7px 7px 5px rgba(0, 0, 0, 0.25);
}

.rc-text-neon-flicker {
color: #fff;
animation: rc-text-neon-flicker-anim 4s infinite alternate;
}

.rc-text-rainbow {
background: linear-gradient(
90deg,
#ff0000, #ff8800, #ffff00,
#00ff00, #0088ff, #8800ff,
#ff0088, #ff0000
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: rc-text-rainbow-anim 3s linear infinite;
}

.rc-text-slide-up span {
display: inline-block;
opacity: 0;
transform: translateY(100%);
animation: rc-text-slide-up-anim 0.5s ease forwards;
}
.rc-text-slide-up span:nth-child(1)  { animation-delay: 0.05s; }
.rc-text-slide-up span:nth-child(2)  { animation-delay: 0.10s; }
.rc-text-slide-up span:nth-child(3)  { animation-delay: 0.15s; }
.rc-text-slide-up span:nth-child(4)  { animation-delay: 0.20s; }
.rc-text-slide-up span:nth-child(5)  { animation-delay: 0.25s; }
.rc-text-slide-up span:nth-child(6)  { animation-delay: 0.30s; }
.rc-text-slide-up span:nth-child(7)  { animation-delay: 0.35s; }
.rc-text-slide-up span:nth-child(8)  { animation-delay: 0.40s; }
.rc-text-slide-up span:nth-child(9)  { animation-delay: 0.45s; }
.rc-text-slide-up span:nth-child(10) { animation-delay: 0.50s; }
.rc-text-slide-up span:nth-child(11) { animation-delay: 0.55s; }
.rc-text-slide-up span:nth-child(12) { animation-delay: 0.60s; }

.rc-text-glitch {
position: relative;
display: inline-block;
}
.rc-text-glitch::before,
.rc-text-glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.rc-text-glitch::before {
color: #ff0;
animation: rc-text-glitch-1 2s infinite linear alternate-reverse;
}
.rc-text-glitch::after {
color: #0ff;
animation: rc-text-glitch-2 2s infinite linear alternate-reverse;
}

.rc-text-reveal {
overflow: hidden;
display: inline-block;
}
.rc-text-reveal span {
display: inline-block;
transform: translateY(110%);
animation: rc-text-reveal-anim 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rc-text-reveal span:nth-child(1)  { animation-delay: 0.05s; }
.rc-text-reveal span:nth-child(2)  { animation-delay: 0.10s; }
.rc-text-reveal span:nth-child(3)  { animation-delay: 0.15s; }
.rc-text-reveal span:nth-child(4)  { animation-delay: 0.20s; }
.rc-text-reveal span:nth-child(5)  { animation-delay: 0.25s; }
.rc-text-reveal span:nth-child(6)  { animation-delay: 0.30s; }
.rc-text-reveal span:nth-child(7)  { animation-delay: 0.35s; }
.rc-text-reveal span:nth-child(8)  { animation-delay: 0.40s; }
.rc-text-reveal span:nth-child(9)  { animation-delay: 0.45s; }
.rc-text-reveal span:nth-child(10) { animation-delay: 0.50s; }

.rc-text-bounce span {
display: inline-block;
animation: rc-text-bounce-anim 0.6s ease;
animation-fill-mode: both;
}
.rc-text-bounce span:nth-child(1)  { animation-delay: 0.00s; }
.rc-text-bounce span:nth-child(2)  { animation-delay: 0.06s; }
.rc-text-bounce span:nth-child(3)  { animation-delay: 0.12s; }
.rc-text-bounce span:nth-child(4)  { animation-delay: 0.18s; }
.rc-text-bounce span:nth-child(5)  { animation-delay: 0.24s; }
.rc-text-bounce span:nth-child(6)  { animation-delay: 0.30s; }
.rc-text-bounce span:nth-child(7)  { animation-delay: 0.36s; }
.rc-text-bounce span:nth-child(8)  { animation-delay: 0.42s; }
.rc-text-bounce span:nth-child(9)  { animation-delay: 0.48s; }
.rc-text-bounce span:nth-child(10) { animation-delay: 0.54s; }
.rc-text-bounce span:nth-child(11) { animation-delay: 0.60s; }
.rc-text-bounce span:nth-child(12) { animation-delay: 0.66s; }

.rc-bg-gradient-shift {
background: linear-gradient(-45deg, #a855f7, #ec4899, #f97316, #06b6d4);
background-size: 400% 400%;
animation: roy-gradient-shift 8s ease infinite;
}

.rc-bg-mesh {
background:
radial-gradient(at 40% 20%, #a855f7 0px, transparent 50%),
radial-gradient(at 80% 0%, #ec4899 0px, transparent 50%),
radial-gradient(at 0% 50%, #06b6d4 0px, transparent 50%),
radial-gradient(at 80% 50%, #f97316 0px, transparent 50%),
radial-gradient(at 0% 100%, #10b981 0px, transparent 50%),
radial-gradient(at 80% 100%, #ef4444 0px, transparent 50%);
background-color: #1a1a2e;
background-size: 200% 200%;
animation: rc-mesh-bg 10s ease infinite;
}

.rc-bg-dots {
background-color: #1a1a2e;
background-image: radial-gradient(#a855f7 1.5px, transparent 1.5px);
background-size: 20px 20px;
}

.rc-bg-striped {
background: repeating-linear-gradient(
-45deg,
#1a1a2e,
#1a1a2e 10px,
#2a1a4e 10px,
#2a1a4e 20px
);
background-size: 28.28px 28.28px;
animation: rc-bg-stripes-move 1s linear infinite;
}

.rc-bg-checkerboard {
background-color: #1a1a2e;
background-image:
linear-gradient(45deg, #2a1a4e 25%, transparent 25%, transparent 75%, #2a1a4e 75%),
linear-gradient(45deg, #2a1a4e 25%, transparent 25%, transparent 75%, #2a1a4e 75%);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}

.rc-bg-radial-pulse {
background: radial-gradient(circle at center, #a855f7 0%, #302b63 50%, #0f0c29 100%);
background-size: 100% 100%;
animation: rc-bg-radial-pulse 3s ease-in-out infinite;
}

.rc-bg-noise-texture {
background-color: #1a1a2e;
position: relative;
}
.rc-bg-noise-texture::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
pointer-events: none;
}

.rc-bg-aurora {
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
position: relative;
overflow: hidden;
}
.rc-bg-aurora::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background:
radial-gradient(ellipse at center, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
radial-gradient(ellipse at 30% 50%, rgba(6, 182, 212, 0.2) 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, rgba(236, 72, 153, 0.2) 0%, transparent 50%);
animation: rc-aurora-bg 8s ease infinite;
}

.rc-bg-liquid {
background: linear-gradient(135deg, #a855f7, #06b6d4, #ec4899, #a855f7);
background-size: 200% 200%;
animation: rc-bg-liquid 6s ease infinite;
}

.rc-bg-waves {
background:
radial-gradient(ellipse at 50% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 30% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 50% 90%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
linear-gradient(180deg, #0f0c29 0%, #1a1a4e 100%);
background-size: 100% 200%, 80% 150%, 80% 150%, 100% 200%, 100% 100%;
animation: rc-bg-waves 5s ease-in-out infinite;
}

.rc-bg-plasma {
background:
radial-gradient(circle at 20% 50%, #a855f7 0%, transparent 50%),
radial-gradient(circle at 80% 20%, #ec4899 0%, transparent 50%),
radial-gradient(circle at 50% 80%, #06b6d4 0%, transparent 50%),
linear-gradient(135deg, #1a1a2e, #0f0c29);
background-size: 100% 100%;
animation: rc-bg-plasma 4s linear infinite;
filter: hue-rotate(0deg);
}

.rc-bg-matrix {
background-color: #0a0a0a;
position: relative;
overflow: hidden;
}
.rc-bg-matrix::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(16, 185, 129, 0.03) 2px,
rgba(16, 185, 129, 0.03) 4px
);
animation: rc-matrix-scroll 20s linear infinite;
}
.rc-bg-matrix::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 24px,
rgba(16, 185, 129, 0.06) 24px,
rgba(16, 185, 129, 0.06) 25px
),
repeating-linear-gradient(
0deg,
transparent,
transparent 24px,
rgba(16, 185, 129, 0.06) 24px,
rgba(16, 185, 129, 0.06) 25px
);
}

.rc-bg-starfield {
background: #0a0a1a;
position: relative;
overflow: hidden;
}
.rc-bg-starfield::before {
content: '';
position: absolute;
width: 2px; height: 2px;
background: transparent;
box-shadow:
25px 15px 0 0 rgba(255,255,255,0.8),
80px 40px 0 0 rgba(255,255,255,0.5),
150px 10px 0 0 rgba(168,85,247,0.7),
200px 60px 0 0 rgba(255,255,255,0.6),
50px 90px 0 0 rgba(6,182,212,0.7),
120px 70px 0 0 rgba(255,255,255,0.4),
180px 30px 0 0 rgba(236,72,153,0.6),
30px 50px 0 0 rgba(255,255,255,0.9),
90px 85px 0 0 rgba(255,255,255,0.5),
160px 95px 0 0 rgba(168,85,247,0.8),
70px 25px 0 0 rgba(255,255,255,0.6),
220px 50px 0 0 rgba(6,182,212,0.5),
10px 70px 0 0 rgba(255,255,255,0.7),
140px 45px 0 0 rgba(236,72,153,0.6),
190px 80px 0 0 rgba(255,255,255,0.4),
60px 100px 0 0 rgba(255,255,255,0.8);
animation: rc-starfield-move 8s linear infinite;
}

.rc-bg-smoke {
background: linear-gradient(135deg, #1a1a2e, #0f0c29);
position: relative;
overflow: hidden;
}
.rc-bg-smoke::before,
.rc-bg-smoke::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
}
.rc-bg-smoke::before {
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, transparent 70%);
top: -50px; left: -50px;
animation: rc-smoke-drift1 10s ease-in-out infinite;
}
.rc-bg-smoke::after {
width: 250px; height: 250px;
background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%);
bottom: -70px; right: -70px;
animation: rc-smoke-drift2 12s ease-in-out infinite;
}

.rc-bg-circuit {
background-color: #0a0f1a;
position: relative;
overflow: hidden;
}
.rc-bg-circuit::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 19px,
rgba(6, 182, 212, 0.12) 19px,
rgba(6, 182, 212, 0.12) 20px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 39px,
rgba(6, 182, 212, 0.12) 39px,
rgba(6, 182, 212, 0.12) 40px
);
animation: rc-circuit-scan 3s linear infinite;
}
.rc-bg-circuit::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 40px 20px, rgba(6, 182, 212, 0.25) 3px, transparent 3px),
radial-gradient(circle at 120px 60px, rgba(168, 85, 247, 0.25) 3px, transparent 3px),
radial-gradient(circle at 200px 40px, rgba(6, 182, 212, 0.25) 3px, transparent 3px),
radial-gradient(circle at 80px 80px, rgba(168, 85, 247, 0.25) 3px, transparent 3px),
radial-gradient(circle at 160px 100px, rgba(6, 182, 212, 0.25) 3px, transparent 3px);
animation: rc-circuit-nodes 4s ease-in-out infinite alternate;
}

.rc-bg-lava {
background: linear-gradient(180deg, #1a0a2e, #0f0c29);
position: relative;
overflow: hidden;
}
.rc-bg-lava::before,
.rc-bg-lava::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(40px);
}
.rc-bg-lava::before {
width: 80px; height: 120px;
background: radial-gradient(ellipse, rgba(236, 72, 153, 0.6) 0%, rgba(168, 85, 247, 0.2) 60%, transparent 100%);
left: 30%; bottom: -20%;
animation: rc-lava-rise1 5s ease-in-out infinite;
}
.rc-bg-lava::after {
width: 60px; height: 100px;
background: radial-gradient(ellipse, rgba(249, 115, 22, 0.5) 0%, rgba(236, 72, 153, 0.2) 60%, transparent 100%);
left: 60%; bottom: -20%;
animation: rc-lava-rise2 6s ease-in-out infinite;
animation-delay: -2s;
}

.rc-loader-spinner {
width: 40px; height: 40px;
border: 4px solid rgba(168, 85, 247, 0.2);
border-top-color: #a855f7;
border-radius: 50%;
animation: roy-sunburst-rotate 0.8s linear infinite;
}

.rc-loader-dots {
display: flex; gap: 6px;
}
.rc-loader-dots span {
width: 12px; height: 12px;
border-radius: 50%;
background: #a855f7;
animation: rc-dots-bounce 1.2s ease-in-out infinite;
}
.rc-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.rc-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

.rc-loader-bars {
display: flex; gap: 4px; align-items: end; height: 40px;
}
.rc-loader-bars span {
width: 6px;
background: linear-gradient(to top, #a855f7, #ec4899);
border-radius: 3px;
animation: rc-bars 1s ease-in-out infinite;
}
.rc-loader-bars span:nth-child(1) { animation-delay: 0s; }
.rc-loader-bars span:nth-child(2) { animation-delay: 0.1s; }
.rc-loader-bars span:nth-child(3) { animation-delay: 0.2s; }
.rc-loader-bars span:nth-child(4) { animation-delay: 0.3s; }
.rc-loader-bars span:nth-child(5) { animation-delay: 0.4s; }

.rc-loader-pulse {
width: 40px; height: 40px;
border-radius: 50%;
background: #a855f7;
animation: rc-loader-pulse 1.2s ease-in-out infinite;
}

.rc-loader-orbit {
width: 40px; height: 40px;
position: relative;
animation: roy-sunburst-rotate 2s linear infinite;
}
.rc-loader-orbit::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 10px; height: 10px;
margin-left: -5px;
border-radius: 50%;
background: #a855f7;
box-shadow: 0 0 10px #a855f7, 0 0 20px rgba(168, 85, 247, 0.5);
}
.rc-loader-orbit::after {
content: '';
position: absolute;
inset: 3px;
border: 2px dashed rgba(168, 85, 247, 0.3);
border-radius: 50%;
}

.rc-loader-wave {
display: flex; gap: 4px; align-items: center; height: 40px;
}
.rc-loader-wave span {
width: 8px; height: 8px;
border-radius: 50%;
background: #06b6d4;
animation: rc-wave 1.4s ease-in-out infinite;
}
.rc-loader-wave span:nth-child(1) { animation-delay: 0s; }
.rc-loader-wave span:nth-child(2) { animation-delay: 0.1s; }
.rc-loader-wave span:nth-child(3) { animation-delay: 0.2s; }
.rc-loader-wave span:nth-child(4) { animation-delay: 0.3s; }
.rc-loader-wave span:nth-child(5) { animation-delay: 0.4s; }

.rc-loader-dna {
display: flex; gap: 2px; align-items: center; height: 50px;
}
.rc-loader-dna span {
width: 8px; height: 8px;
border-radius: 50%;
animation: rc-dna 1.5s ease-in-out infinite;
}
.rc-loader-dna span:nth-child(odd) { background: #a855f7; }
.rc-loader-dna span:nth-child(even) { background: #ec4899; }
.rc-loader-dna span:nth-child(1) { animation-delay: 0s; }
.rc-loader-dna span:nth-child(2) { animation-delay: 0.1s; }
.rc-loader-dna span:nth-child(3) { animation-delay: 0.2s; }
.rc-loader-dna span:nth-child(4) { animation-delay: 0.3s; }
.rc-loader-dna span:nth-child(5) { animation-delay: 0.4s; }
.rc-loader-dna span:nth-child(6) { animation-delay: 0.5s; }
.rc-loader-dna span:nth-child(7) { animation-delay: 0.6s; }

.rc-loader-circle-fade {
width: 40px; height: 40px;
position: relative;
}
.rc-loader-circle-fade span {
position: absolute;
width: 100%; height: 100%;
border: 3px solid transparent;
border-top-color: #a855f7;
border-radius: 50%;
animation: rc-circle-fade 1.2s linear infinite;
}
.rc-loader-circle-fade span:nth-child(2) {
width: 70%; height: 70%;
top: 15%; left: 15%;
border-top-color: #ec4899;
animation-delay: 0.15s;
animation-direction: reverse;
}

.rc-loader-square-spin {
width: 30px; height: 30px;
border: 3px solid #a855f7;
animation: rc-square-spin 1.5s ease-in-out infinite;
}

.rc-loader-ring {
width: 40px; height: 40px;
position: relative;
}
.rc-loader-ring span {
position: absolute;
inset: 0;
border: 3px solid transparent;
border-radius: 50%;
animation: roy-origin-spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
.rc-loader-ring span:nth-child(1) {
border-top-color: #a855f7;
border-bottom-color: #a855f7;
}
.rc-loader-ring span:nth-child(2) {
border-left-color: #ec4899;
border-right-color: #ec4899;
animation-direction: reverse;
}

.rc-loader-cube {
width: 40px; height: 40px;
position: relative;
transform-style: preserve-3d;
animation: roy-cube-rotate 2s linear infinite;
}
.rc-loader-cube span {
position: absolute;
width: 100%; height: 100%;
border: 2px solid rgba(168, 85, 247, 0.6);
background: rgba(168, 85, 247, 0.1);
border-radius: 4px;
}
.rc-loader-cube span:nth-child(1) { transform: rotateY(0deg) translateZ(20px); }
.rc-loader-cube span:nth-child(2) { transform: rotateY(90deg) translateZ(20px); }
.rc-loader-cube span:nth-child(3) { transform: rotateY(180deg) translateZ(20px); }
.rc-loader-cube span:nth-child(4) { transform: rotateY(270deg) translateZ(20px); }
.rc-loader-cube span:nth-child(5) { transform: rotateX(90deg) translateZ(20px); }
.rc-loader-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(20px); }

.rc-loader-hourglass {
width: 40px; height: 40px;
position: relative;
animation: rc-hourglass-flip 2s ease-in-out infinite;
}
.rc-loader-hourglass span {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
transform: translate(-50%, -50%);
}
.rc-loader-hourglass span:nth-child(1) {
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 20px solid #a855f7;
transform: translate(-50%, -50%) translateY(4px);
}
.rc-loader-hourglass span:nth-child(2) {
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 20px solid #ec4899;
transform: translate(-50%, -50%) translateY(-4px);
}

.rc-loader-grid {
display: grid;
grid-template-columns: repeat(3, 12px);
grid-template-rows: repeat(3, 12px);
gap: 4px;
}
.rc-loader-grid span {
width: 12px; height: 12px;
border-radius: 50%;
background: #a855f7;
animation: rc-grid-pop 1.4s ease-in-out infinite;
}
.rc-loader-grid span:nth-child(1) { animation-delay: 0s; }
.rc-loader-grid span:nth-child(2) { animation-delay: 0.1s; }
.rc-loader-grid span:nth-child(3) { animation-delay: 0.2s; }
.rc-loader-grid span:nth-child(4) { animation-delay: 0.3s; }
.rc-loader-grid span:nth-child(5) { animation-delay: 0.4s; }
.rc-loader-grid span:nth-child(6) { animation-delay: 0.5s; }
.rc-loader-grid span:nth-child(7) { animation-delay: 0.6s; }
.rc-loader-grid span:nth-child(8) { animation-delay: 0.7s; }
.rc-loader-grid span:nth-child(9) { animation-delay: 0.8s; }

.rc-loader-ripple {
width: 40px; height: 40px;
position: relative;
}
.rc-loader-ripple span {
position: absolute;
inset: 0;
border: 2px solid #a855f7;
border-radius: 50%;
animation: rc-ripple-expand 1.5s ease-out infinite;
}
.rc-loader-ripple span:nth-child(2) { animation-delay: 0.5s; }
.rc-loader-ripple span:nth-child(3) { animation-delay: 1s; }

.rc-loader-typing {
display: flex; gap: 4px; align-items: center; height: 30px;
}
.rc-loader-typing span {
width: 6px;
border-radius: 3px;
background: #a855f7;
animation: rc-typing-bounce 1.2s ease-in-out infinite;
}
.rc-loader-typing span:nth-child(1) { height: 10px; animation-delay: 0s; }
.rc-loader-typing span:nth-child(2) { height: 20px; animation-delay: 0.15s; }
.rc-loader-typing span:nth-child(3) { height: 14px; animation-delay: 0.3s; }

.rc-loader-pencil {
width: 8px; height: 40px;
position: relative;
animation: rc-pencil-rotate 1.2s ease-in-out infinite;
transform-origin: bottom center;
}
.rc-loader-pencil span {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.rc-loader-pencil span:nth-child(1) {
width: 8px; height: 28px;
background: linear-gradient(to top, #f59e0b, #fbbf24);
border-radius: 2px 2px 0 0;
}
.rc-loader-pencil span:nth-child(2) {
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #a855f7;
bottom: -2px;
}

.rc-loader-atom {
width: 60px; height: 60px;
position: relative;
}
.rc-loader-atom span {
position: absolute;
width: 100%; height: 100%;
border: 1.5px solid rgba(168, 85, 247, 0.4);
border-radius: 50%;
}
.rc-loader-atom span::after {
content: '';
position: absolute;
top: -4px; left: 50%;
margin-left: -4px;
width: 8px; height: 8px;
border-radius: 50%;
background: #a855f7;
}
.rc-loader-atom span:nth-child(1) {
animation: rc-atom-orbit-1 1.5s linear infinite;
}
.rc-loader-atom span:nth-child(2) {
animation: rc-atom-orbit-2 1.5s linear infinite;
}
.rc-loader-atom span:nth-child(3) {
animation: rc-atom-orbit-3 1.5s linear infinite;
}
.rc-loader-atom::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 10px; height: 10px;
margin: -5px 0 0 -5px;
border-radius: 50%;
background: #ec4899;
}

.rc-loader-bar-progress {
width: 80px; height: 6px;
background: rgba(168, 85, 247, 0.15);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.rc-loader-bar-progress span {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
background: linear-gradient(90deg, #a855f7, #ec4899, #a855f7);
background-size: 200% 100%;
border-radius: 3px;
animation: rc-bar-progress 1.5s ease-in-out infinite;
}

.rc-loader-clock {
width: 40px; height: 40px;
border: 3px solid rgba(168, 85, 247, 0.3);
border-radius: 50%;
position: relative;
}
.rc-loader-clock span {
position: absolute;
bottom: 50%; left: 50%;
width: 2px; height: 14px;
margin-left: -1px;
background: #a855f7;
border-radius: 1px;
transform-origin: bottom center;
animation: roy-origin-spin 1.5s steps(12, end) infinite;
}
.rc-loader-clock::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 6px; height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: #ec4899;
}

.rc-loader-bounce {
width: 24px; height: 40px;
position: relative;
}
.rc-loader-bounce span {
position: absolute;
bottom: 0;
left: 50%;
width: 24px; height: 24px;
margin-left: -12px;
border-radius: 50%;
background: linear-gradient(135deg, #a855f7, #ec4899);
animation: rc-bounce-squash 0.6s ease-in-out infinite alternate;
box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

.rc-loader-moon {
width: 30px; height: 30px;
position: relative;
animation: rc-moon-rotate 2s ease-in-out infinite;
}
.rc-loader-moon span {
position: absolute;
width: 100%; height: 100%;
border-radius: 50%;
background: #a855f7;
}
.rc-loader-moon span:nth-child(2) {
background: #0f0c29;
animation: rc-moon-shadow 2s ease-in-out infinite;
}

.rc-loader-heartbeat {
width: 30px; height: 30px;
position: relative;
animation: rc-heartbeat-pulse 1.2s ease-in-out infinite;
}
.rc-loader-heartbeat span {
position: absolute;
width: 30px; height: 30px;
transform: rotate(45deg);
}
.rc-loader-heartbeat span::before,
.rc-loader-heartbeat span::after {
content: '';
position: absolute;
width: 30px; height: 30px;
border-radius: 50%;
background: #ec4899;
}
.rc-loader-heartbeat span::before {
top: -15px; left: 0;
}
.rc-loader-heartbeat span::after {
left: -15px; top: 0;
}

perspective: 800px;
animation: roy-3d-gallery-rotate 1.2s ease-in-out infinite;

perspective: 600px;
animation: royCube 2.4s ease-in-out infinite;

perspective: 700px;
animation: royPrism 3s linear infinite;

perspective: 1000px;
animation: royCarousel 4s ease-in-out infinite;

perspective: 600px;
animation: royCardTilt 2s ease-in-out infinite;

perspective: 500px;
animation: royPerspective 2.5s ease-in-out infinite;

perspective: 600px;
animation: royDepthFloat 3s ease-in-out infinite;

perspective: 800px;
animation: royRotate3D 3s linear infinite;

perspective: 800px;
transform-style: preserve-3d;
animation: royBookOpen 3s ease-in-out infinite;

perspective: 600px;
transform-origin: left center;
animation: royDoorOpen 2.8s ease-in-out infinite;

perspective: 600px;
animation: royCoinFlip 2s ease-in-out infinite;

perspective: 500px;
transform-origin: top center;
animation: roySwing 2s ease-in-out infinite;

perspective: 800px;
animation: royHelix 3s linear infinite;

perspective: 700px;
animation: royMorphingCube 4s ease-in-out infinite;

perspective: 600px;
animation: royOrbit 3s linear infinite;

perspective: 700px;
animation: royTumble 2.5s ease-in-out infinite;

animation: royMorphCircle 2s ease-in-out infinite;

animation: royMorphDiamond 2.5s ease-in-out infinite;

animation: royRotate90 2s ease-in-out infinite;

animation: rc-moon-rotate 2s ease-in-out infinite;

animation: roy-origin-spin 2s linear infinite;

animation: roySkewX 2s ease-in-out infinite;

animation: roySkewY 2s ease-in-out infinite;

animation: royScaleRotate 2s ease-in-out infinite;

animation: royAccordion 2.5s ease-in-out infinite;

transform-origin: bottom center;
animation: royFan 2.5s ease-in-out infinite;

animation: royStretch 2s ease-in-out infinite;

animation: royCompress 2s ease-in-out infinite;

animation: royWobble 1.5s ease-in-out infinite;

animation: royTwist 2s ease-in-out infinite;

perspective: 500px;
transform-origin: top center;
animation: royFold 3s ease-in-out infinite;

perspective: 500px;
transform-origin: top center;
animation: royUnfold 3s ease-in-out infinite;

background: linear-gradient(to top, #00d2ff 0%, #00d2ff var(--fill, 50%), transparent var(--fill, 50%));
animation: royLiquidFill 3s ease-in-out infinite;

animation: roySmoke 3s ease-out infinite;
filter: blur(2px);

animation: royElectric 0.15s linear infinite;
box-shadow:
0 0 5px  #00e5ff,
0 0 10px #00e5ff,
0 0 20px #00b8d4,
0 0 40px #00b8d4;

background: linear-gradient(
135deg,
#ff0080 0%, #ff8c00 16%, #40e0d0 33%,
#7b68ee 50%, #ff0080 66%, #ff8c00 83%,
#40e0d0 100%
);
background-size: 400% 400%;
animation: roy-gradient-shift 4s ease-in-out infinite;

animation: royBreathing 4s ease-in-out infinite;

perspective: 600px;
transform-origin: top left;
animation: royPaperUnfold 3s ease-in-out infinite;

animation: royRippleSpread 2s ease-out infinite;

animation: royConfettiBurst 1.5s ease-out infinite;

animation: royMagneticPull 2.5s ease-in-out infinite;
filter: drop-shadow(0 0 8px rgba(100, 100, 255, 0.6));

animation: royGlassShatter 2s ease-in-out infinite;

animation: royNeonOutline 1.5s ease-in-out infinite alternate;

border: 3px solid transparent;
background-image: linear-gradient(#1a1a2e, #1a1a2e),
linear-gradient(135deg, #f093fb, #f5576c, #4facfe, #00f2fe);
background-origin: border-box;
background-clip: padding-box, border-box;
background-size: 100% 100%, 300% 300%;
animation: royGradBorderSpin 3s linear infinite;

background: linear-gradient(
90deg,
#00c9ff, #92fe9d, #f7ff00, #ff6b6b, #c471f5, #00c9ff
);
background-size: 400% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: royAuroraText 5s linear infinite;

background: linear-gradient(
to top,
#ff4500 0%, #ff6a00 25%, #ffa500 50%, #ffdd00 75%, transparent 100%
);
background-size: 100% 250%;
animation: royFire 1.5s ease-in-out infinite;
filter: blur(1px) brightness(1.1);
box-shadow: 0 0 20px 5px rgba(255, 69, 0, 0.4), 0 0 60px 10px rgba(255, 106, 0, 0.2);

background: linear-gradient(
135deg,
rgba(174, 214, 241, 0.4) 0%,
rgba(224, 247, 250, 0.3) 30%,
rgba(179, 229, 252, 0.5) 60%,
rgba(200, 230, 251, 0.3) 100%
);
backdrop-filter: blur(8px) saturate(1.8);
-webkit-backdrop-filter: blur(8px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow:
0 0 15px rgba(174, 214, 241, 0.3),
inset 0 0 30px rgba(255, 255, 255, 0.15);
animation: royIce 3s ease-in-out infinite;

background: #d4a76a;
border-radius: 4px;
animation: roySand 2.5s ease-out infinite;

border-radius: 50%;
animation: royWaterDrop 2s ease-out infinite;

animation: royGlitchMorph 3s step-end infinite;
position: relative;

background-color: #1a1a2e;
animation: royPixelate 3s steps(8) infinite;
image-rendering: pixelated;

background-color: #0a0a1a;
background-image:
linear-gradient(rgba(0, 255, 255, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 255, 0.12) 1px, transparent 1px),
linear-gradient(rgba(255, 0, 255, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 255, 0.06) 1px, transparent 1px);
background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
animation: royCyberGrid 4s linear infinite;

animation: royMorphingBlob 8s ease-in-out infinite;

color: #ffffff;
animation: royTextShadowStack 3s ease-in-out infinite;

background: linear-gradient(
120deg,
rgba(255, 0, 0, 0.6) 0%,
rgba(255, 127, 0, 0.6) 17%,
rgba(255, 255, 0, 0.6) 33%,
rgba(0, 255, 0, 0.6) 50%,
rgba(0, 0, 255, 0.6) 67%,
rgba(75, 0, 130, 0.6) 83%,
rgba(148, 0, 211, 0.6) 100%
);
background-size: 300% 300%;
animation: roy-text-grad-shift 4s ease-in-out infinite;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);

border-right: 3px solid currentColor;
padding-right: 4px;
animation: royTypingCursor 1s step-end infinite;

.btn-shine {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-shine::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
transform: skewX(-20deg);
transition: none;
}
.btn-shine:hover::before {
animation: btn-shine-sweep 0.6s ease forwards;
}
.btn-shine:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-ripple {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
transform: translate(-50%, -50%);
transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
opacity: 0;
}
.btn-ripple:active::after {
width: 300px;
height: 300px;
opacity: 1;
transition: width 0s, height 0s, opacity 0s;
}
.btn-ripple:hover {
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
transform: translateY(-1px);
}

.btn-fill-left {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: 2px solid #7c3aed;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
z-index: 1;
transition: color 0.3s ease, transform 0.2s ease;
}
.btn-fill-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #7c3aed, #6366f1);
transform: translateX(-101%);
transition: transform 0.3s ease;
z-index: -1;
}
.btn-fill-left:hover::before {
transform: translateX(0);
}
.btn-fill-left:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-fill-right {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: 2px solid #7c3aed;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
z-index: 1;
transition: color 0.3s ease, transform 0.2s ease;
}
.btn-fill-right::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #6366f1, #7c3aed);
transform: translateX(101%);
transition: transform 0.3s ease;
z-index: -1;
}
.btn-fill-right:hover::before {
transform: translateX(0);
}
.btn-fill-right:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-fill-top {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: 2px solid #7c3aed;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
z-index: 1;
transition: color 0.3s ease, transform 0.2s ease;
}
.btn-fill-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #7c3aed, #6366f1);
transform: translateY(-101%);
transition: transform 0.3s ease;
z-index: -1;
}
.btn-fill-top:hover::before {
transform: translateY(0);
}
.btn-fill-top:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-fill-bottom {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: 2px solid #7c3aed;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
z-index: 1;
transition: color 0.3s ease, transform 0.2s ease;
}
.btn-fill-bottom::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #6366f1, #7c3aed);
transform: translateY(101%);
transition: transform 0.3s ease;
z-index: -1;
}
.btn-fill-bottom:hover::before {
transform: translateY(0);
}
.btn-fill-bottom:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-outline-draw {
position: relative;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
z-index: 1;
transition: color 0.4s ease;
}
.btn-outline-draw::before,
.btn-outline-draw::after {
content: '';
position: absolute;
border-radius: 8px;
transition: transform 0.4s ease;
}

.btn-outline-draw::before {
top: 0;
left: 0;
right: 0;
height: 100%;
border-top: 2px solid #7c3aed;
border-bottom: 2px solid #7c3aed;
transform: scaleX(0);
transition: transform 0.4s ease, border-color 0.3s ease;
}

.btn-outline-draw::after {
top: 0;
left: 0;
right: 0;
height: 100%;
border-left: 2px solid #7c3aed;
border-right: 2px solid #7c3aed;
transform: scaleY(0);
transition: transform 0.4s ease 0.15s, border-color 0.3s ease 0.15s;
}
.btn-outline-draw:hover::before {
transform: scaleX(1);
border-color: #6366f1;
}
.btn-outline-draw:hover::after {
transform: scaleY(1);
border-color: #6366f1;
}
.btn-outline-draw:hover {
color: #6366f1;
}

.btn-glow-pulse {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1);
cursor: pointer;
box-shadow: 0 0 0 rgba(124, 58, 237, 0);
transition: transform 0.2s ease;
}
.btn-glow-pulse:hover {
animation: btn-glow-pulse-anim 1.2s ease-in-out infinite;
}

.btn-skew-fill {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
z-index: 1;
transition: color 0.35s ease, transform 0.2s ease;
}
.btn-skew-fill::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 100%;
background: linear-gradient(135deg, #7c3aed, #6366f1);
transform: translateX(-110%) skewX(-15deg);
transition: transform 0.45s ease;
z-index: -1;
}
.btn-skew-fill:hover::before {
transform: translateX(-20%) skewX(-15deg);
}
.btn-skew-fill:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-slide-icon {
position: relative;
overflow: hidden;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1);
cursor: pointer;
padding-right: 48px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-slide-icon::after {
content: '\2192';
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%) translateX(24px);
opacity: 0;
font-size: 16px;
transition: transform 0.3s ease, opacity 0.3s ease;
color: #fff;
}
.btn-slide-icon:hover::after {
transform: translateY(-50%) translateX(0);
opacity: 1;
}
.btn-slide-icon:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-bounce {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1);
cursor: pointer;
transition: box-shadow 0.2s ease;
}
.btn-bounce:hover {
animation: btn-bounce-key 0.5s ease;
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.btn-press {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1);
cursor: pointer;
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.15s ease;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.btn-press:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}
.btn-press:active {
transform: scale(0.95) translateY(0);
box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
}

.btn-border-sweep {
position: relative;
padding: 10px 24px;
border: 2px solid #c4b5fd;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}
.btn-border-sweep::before {
content: '';
position: absolute;
top: -2px;
left: -100%;
width: 100%;
height: calc(100% + 4px);
background: linear-gradient(90deg, #7c3aed, #6366f1, #818cf8);
z-index: -2;
transition: left 0.5s ease;
}
.btn-border-sweep::after {
content: '';
position: absolute;
top: 2px;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: transparent;
border-radius: 6px;
z-index: -1;
transition: background 0.4s ease;
}
.btn-border-sweep:hover::before {
left: 0;
}
.btn-border-sweep:hover::after {
background: #fff;
}
.btn-border-sweep:hover {
color: #7c3aed;
}

.btn-neon-border {
padding: 10px 24px;
border: 2px solid #7c3aed;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
transition: color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
.btn-neon-border:hover {
color: #fff;
border-color: #a78bfa;
background: rgba(124, 58, 237, 0.1);
box-shadow:
0 0 5px rgba(124, 58, 237, 0.5),
0 0 15px rgba(124, 58, 237, 0.3),
0 0 30px rgba(99, 102, 241, 0.2),
inset 0 0 10px rgba(124, 58, 237, 0.15);
}

.btn-gradient-shift {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1, #8b5cf6);
background-size: 200% 200%;
background-position: 0% 50%;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-gradient-shift:hover {
background-position: 100% 50%;
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
}

.btn-underline-center {
position: relative;
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: rgba(124, 58, 237, 0.06);
cursor: pointer;
transition: color 0.3s ease, background 0.3s ease;
}
.btn-underline-center::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #7c3aed, #6366f1);
border-radius: 2px;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.btn-underline-center:hover::after {
width: 70%;
}
.btn-underline-center:hover {
color: #6366f1;
background: rgba(124, 58, 237, 0.1);
}

.btn-shadow-lift {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #6366f1);
cursor: pointer;
box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-shadow-lift:hover {
transform: translateY(-4px);
box-shadow:
0 4px 8px rgba(99, 102, 241, 0.25),
0 8px 24px rgba(124, 58, 237, 0.25),
0 16px 40px rgba(99, 102, 241, 0.15);
}

.btn-ghost-fill {
padding: 10px 24px;
border: 2px solid #7c3aed;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #7c3aed;
background: transparent;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease,
border-color 0.3s ease, transform 0.2s ease,
box-shadow 0.3s ease;
}
.btn-ghost-fill:hover {
background: linear-gradient(135deg, #7c3aed, #6366f1);
color: #fff;
border-color: transparent;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.card-lift {
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift:hover {
transform: translateY(-8px);
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.06);
}

.card-tilt-3d {
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.4s ease, box-shadow 0.4s ease;
transform-style: preserve-3d;
perspective: 800px;
}
.card-tilt-3d:hover {
transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-4px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

.card-flip {
perspective: 1000px;
background: transparent;
border-radius: 12px;
padding: 0;
border: none;
box-shadow: none;
min-height: 200px;
}
.card-flip .card-flip-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 200px;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.card-flip:hover .card-flip-inner {
transform: rotateY(180deg);
}
.card-flip .card-flip-front,
.card-flip .card-flip-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 12px;
padding: 24px;
box-sizing: border-box;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card-flip .card-flip-front {
background: #fff;
}
.card-flip .card-flip-back {
background: linear-gradient(135deg, #7c3aed, #6366f1);
color: #fff;
transform: rotateY(180deg);
}

.card-spotlight {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-spotlight::before {
content: '';
position: absolute;
top: var(--spot-y, 50%);
left: var(--spot-x, 50%);
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.card-spotlight:hover::before {
opacity: 1;
}
.card-spotlight:hover {
border-color: #c4b5fd;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.1);
}
.card-spotlight > * {
position: relative;
z-index: 2;
}

.card-reveal {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.card-reveal .card-reveal-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(124, 58, 237, 0.95) 0%, rgba(99, 102, 241, 0.85) 100%);
color: #fff;
padding: 24px;
box-sizing: border-box;
transform: translateY(101%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-reveal:hover .card-reveal-overlay {
transform: translateY(0);
}
.card-reveal:hover {
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.card-border-glow {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
border: 2px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
background-clip: padding-box;
}
.card-border-glow::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 14px;
background: linear-gradient(135deg, #7c3aed, #6366f1, #818cf8, #a78bfa, #7c3aed);
background-size: 300% 300%;
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
animation: roy-gradient-shift 3s linear infinite;
}
.card-border-glow:hover::before {
opacity: 1;
}
.card-border-glow:hover {
border-color: transparent;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.card-split {
position: relative;
background: transparent;
border-radius: 12px;
padding: 0;
border: none;
box-shadow: none;
min-height: 200px;
}
.card-split .card-split-top,
.card-split .card-split-bottom {
position: relative;
width: 100%;
background: #fff;
border: 1px solid #e5e7eb;
box-sizing: border-box;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.card-split .card-split-top {
border-radius: 12px 12px 0 0;
padding: 24px 24px 12px;
z-index: 2;
}
.card-split .card-split-bottom {
border-radius: 0 0 12px 12px;
padding: 12px 24px 24px;
z-index: 2;
}
.card-split .card-split-hidden {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #7c3aed, #6366f1);
border-radius: 12px;
color: #fff;
padding: 24px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.card-split:hover .card-split-top {
transform: translateY(-20px) rotateX(8deg);
transform-origin: bottom center;
}
.card-split:hover .card-split-bottom {
transform: translateY(20px) rotateX(-8deg);
transform-origin: top center;
}

.card-fold-corner {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
padding-top: 40px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
}
.card-fold-corner::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 40px 0;
border-color: transparent #e5e7eb transparent transparent;
border-top-right-radius: 12px;
transition: border-width 0.4s ease, border-color 0.4s ease;
}
.card-fold-corner::after {
content: '';
position: absolute;
top: 0;
right: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 40px 0 0;
border-color: #f3f0ff transparent transparent transparent;
transition: right 0.4s ease, border-width 0.4s ease;
z-index: 1;
}
.card-fold-corner:hover::before {
border-width: 0 60px 60px 0;
border-color: transparent #c4b5fd transparent transparent;
}
.card-fold-corner:hover::after {
right: 60px;
border-width: 60px 60px 0 0;
}
.card-fold-corner:hover {
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
}

.card-slide-up {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.card-slide-up .card-slide-up-content {
transform: translateY(30px);
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.card-slide-up:hover .card-slide-up-content {
transform: translateY(0);
opacity: 1;
}
.card-slide-up:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-glass {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: background 0.4s ease, border-color 0.4s ease,
box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
.card-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.card-glass:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.card-glass:hover::before {
opacity: 1;
}
.card-glass > * {
position: relative;
z-index: 1;
}

.card-expand {
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card-expand .card-expand-extra {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
margin-top: 0;
}
.card-expand:hover .card-expand-extra {
max-height: 200px;
opacity: 1;
margin-top: 16px;
}
.card-expand:hover {
transform: scale(1.02);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.card-skew-reveal {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.card-skew-reveal .card-skew-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(99, 102, 241, 0.88));
color: #fff;
padding: 24px;
box-sizing: border-box;
transform: translateX(-110%) skewX(-12deg);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 12px;
}
.card-skew-reveal:hover .card-skew-overlay {
transform: translateX(0) skewX(0);
}
.card-skew-reveal:hover {
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.card-holographic {
position: relative;
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-holographic::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
125deg,
rgba(255, 0, 128, 0.2),
rgba(255, 165, 0, 0.2),
rgba(255, 255, 0, 0.2),
rgba(0, 200, 83, 0.2),
rgba(0, 176, 255, 0.2),
rgba(124, 58, 237, 0.2),
rgba(255, 0, 128, 0.2)
);
background-size: 400% 400%;
border-radius: 12px;
opacity: 0;
transition: opacity 0.4s ease;
animation: roy-gradient-shift 4s ease infinite;
pointer-events: none;
z-index: 0;
mix-blend-mode: overlay;
}
.card-holographic:hover::before {
opacity: 1;
}
.card-holographic:hover {
box-shadow: 0 8px 28px rgba(124, 58, 237, 0.18);
transform: translateY(-4px);
}
.card-holographic > * {
position: relative;
z-index: 1;
}

.card-pulse-border {
background: #fff;
border-radius: 12px;
padding: 24px;
border: 2px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: border-color 0.3s ease;
}
.card-pulse-border:hover {
animation: card-pulse-border-anim 1.5s ease-in-out infinite;
}

.rc-img-zoom-in {
overflow: hidden;
position: relative;
}
.rc-img-zoom-in img {
transition: transform 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-img-zoom-in:hover img {
transform: scale(1.1);
}

.rc-img-zoom-out {
overflow: hidden;
position: relative;
}
.rc-img-zoom-out img {
transition: transform 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.1);
}
.rc-img-zoom-out:hover img {
transform: scale(1);
}

.rc-img-pan-right {
overflow: hidden;
position: relative;
}
.rc-img-pan-right img {
transition: transform 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.15) translateX(-5%);
}
.rc-img-pan-right:hover img {
transform: scale(1.15) translateX(5%);
}

.rc-img-pan-left {
overflow: hidden;
position: relative;
}
.rc-img-pan-left img {
transition: transform 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.15) translateX(5%);
}
.rc-img-pan-left:hover img {
transform: scale(1.15) translateX(-5%);
}

.rc-img-blur-reveal {
overflow: hidden;
position: relative;
}
.rc-img-blur-reveal img {
transition: filter 0.5s ease, transform 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(5px);
transform: scale(1.05);
}
.rc-img-blur-reveal:hover img {
filter: blur(0);
transform: scale(1);
}

.rc-img-grayscale {
overflow: hidden;
position: relative;
}
.rc-img-grayscale img {
transition: filter 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
}
.rc-img-grayscale:hover img {
filter: grayscale(0%);
}

.rc-img-sepia {
overflow: hidden;
position: relative;
}
.rc-img-sepia img {
transition: filter 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(100%);
}
.rc-img-sepia:hover img {
filter: sepia(0%);
}

.rc-img-brightness {
overflow: hidden;
position: relative;
}
.rc-img-brightness img {
transition: filter 0.4s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
}
.rc-img-brightness:hover img {
filter: brightness(1.2);
}

.rc-img-contrast {
overflow: hidden;
position: relative;
}
.rc-img-contrast img {
transition: filter 0.4s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(0.7) brightness(0.9);
}
.rc-img-contrast:hover img {
filter: contrast(1.2) brightness(1);
}

.rc-img-rotate-zoom {
overflow: hidden;
position: relative;
}
.rc-img-rotate-zoom img {
transition: transform 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-img-rotate-zoom:hover img {
transform: scale(1.1) rotate(3deg);
}

.rc-img-overlay-up {
overflow: hidden;
position: relative;
}
.rc-img-overlay-up img {
transition: transform 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-img-overlay-up:hover img {
transform: scale(1.05);
}
.rc-img-overlay-up::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%);
opacity: 0;
transform: translateY(100%);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.rc-img-overlay-up:hover::after {
opacity: 1;
transform: translateY(0);
}

.rc-img-overlay-fade {
overflow: hidden;
position: relative;
}
.rc-img-overlay-fade img {
transition: filter 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rc-img-overlay-fade:hover img {
filter: brightness(0.7);
}
.rc-img-overlay-fade::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
}
.rc-img-overlay-fade:hover::after {
opacity: 1;
}

.rc-img-split-reveal {
overflow: hidden;
position: relative;
}
.rc-img-split-reveal img {
transition: clip-path 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: inset(0 0 0 0);
}
.rc-img-split-reveal:hover img {
clip-path: inset(0 50% 0 50%);
}
.rc-img-split-reveal::after {
content: attr(data-label);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.4s ease 0.15s;
}
.rc-img-split-reveal:hover::after {
opacity: 1;
}

.rc-img-shutter {
overflow: hidden;
position: relative;
}
.rc-img-shutter img {
transition: clip-path 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
clip-path: inset(0 0 0 0);
}
.rc-img-shutter:hover img {
clip-path: inset(48% 48% 48% 48%);
}
.rc-img-shutter::before,
.rc-img-shutter::after {
content: '';
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 1;
transition: transform 0.5s ease;
}
.rc-img-shutter::before {
left: 0;
transform: translateX(-100%);
}
.rc-img-shutter::after {
content: '';
right: 0;
left: auto;
transform: translateX(100%);
}
.rc-img-shutter:hover::before {
transform: translateX(0);
}
.rc-img-shutter:hover::after {
transform: translateX(0);
}

.rc-img-circle-reveal {
overflow: hidden;
position: relative;
}
.rc-img-circle-reveal img {
transition: clip-path 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
clip-path: circle(0% at 50% 50%);
}
.rc-img-circle-reveal:hover img {
clip-path: circle(75% at 50% 50%);
filter: grayscale(0%) contrast(1);
}
.rc-img-circle-reveal::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
transition: opacity 0.4s ease;
pointer-events: none;
}
.rc-img-circle-reveal:hover::after {
opacity: 0;
}

.rc-img-tilt-3d {
overflow: hidden;
position: relative;
perspective: 800px;
}
.rc-img-tilt-3d img {
transition: transform 0.5s ease, box-shadow 0.5s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: rotateX(0) rotateY(0);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.rc-img-tilt-3d:hover img {
transform: rotateX(-3deg) rotateY(3deg) scale(1.03);
box-shadow: 8px 12px 28px rgba(0, 0, 0, 0.35);
}

.rc-circle-reveal-in {
animation: rcCircleRevealIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-circle-reveal-out {
animation: rcCircleRevealOut 0.8s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.rc-diamond-reveal {
animation: rcDiamondReveal 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-triangle-reveal {
animation: rcTriangleReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-cross-reveal {
animation: rcCrossReveal 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-hexagon-reveal {
animation: rcHexagonReveal 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-star-reveal {
animation: rcStarReveal 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-slide-left-reveal {
animation: rcSlideLeftReveal 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-slide-down-reveal {
animation: rcSlideDownReveal 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-wipe-reveal {
animation: rcWipeReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rc-skeleton-pulse {
background-color: #e0e0e0;
animation: rcSkeletonPulse 1.5s ease-in-out infinite;
border-radius: 4px;
}

.rc-skeleton-shimmer {
background-color: #e0e0e0;
background-image: linear-gradient(
90deg,
#e0e0e0 0%,
#f0f0f0 20%,
#f8f8f8 50%,
#f0f0f0 80%,
#e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.8s ease-in-out infinite;
border-radius: 4px;
}

.rc-skeleton-wave {
background-color: #e0e0e0;
position: relative;
overflow: hidden;
border-radius: 4px;
}
.rc-skeleton-wave::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 25%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0.3) 75%,
transparent 100%
);
animation: roy-visual-shimmer-sweep 2s ease-in-out infinite;
}

.rc-skeleton-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.rc-skeleton-text::before,
.rc-skeleton-text::after {
content: '';
display: block;
background-color: #e0e0e0;
border-radius: 4px;
height: 14px;
background-image: linear-gradient(
90deg,
#e0e0e0 0%,
#f5f5f5 50%,
#e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.6s ease-in-out infinite;
}
.rc-skeleton-text::before { width: 100%; }
.rc-skeleton-text::after  { width: 65%; animation-delay: 0.15s; }
.rc-skeleton-text > * {
background-color: #e0e0e0;
border-radius: 4px;
height: 14px;
background-image: linear-gradient(
90deg,
#e0e0e0 0%,
#f5f5f5 50%,
#e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.6s ease-in-out infinite;
}

.rc-skeleton-card {
background-color: #f5f5f5;
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
border: 1px solid #e8e8e8;
}
.rc-skeleton-card-header {
display: flex;
align-items: center;
gap: 12px;
}
.rc-skeleton-card-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #e0e0e0;
background-image: linear-gradient(
90deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.6s ease-in-out infinite;
flex-shrink: 0;
}
.rc-skeleton-card-lines {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.rc-skeleton-card-line {
height: 12px;
border-radius: 4px;
background-color: #e0e0e0;
background-image: linear-gradient(
90deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.6s ease-in-out infinite;
}
.rc-skeleton-card-body {
height: 80px;
border-radius: 4px;
background-color: #e0e0e0;
background-image: linear-gradient(
90deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.6s ease-in-out infinite;
animation-delay: 0.1s;
}

.rc-skeleton-circle {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #e0e0e0;
position: relative;
overflow: hidden;
}
.rc-skeleton-circle::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
animation: roy-visual-shimmer-sweep 1.5s ease-in-out infinite;
}

.rc-skeleton-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.rc-skeleton-grid-item {
display: flex;
flex-direction: column;
gap: 10px;
}
.rc-skeleton-grid-img {
width: 100%;
aspect-ratio: 1;
border-radius: 6px;
background-color: #e0e0e0;
background-image: linear-gradient(
90deg, #e0e0e0 0%, #f0f0f0 40%, #f8f8f8 50%, #f0f0f0 60%, #e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.8s ease-in-out infinite;
}
.rc-skeleton-grid-line {
height: 12px;
border-radius: 4px;
background-color: #e0e0e0;
background-image: linear-gradient(
90deg, #e0e0e0 0%, #f0f0f0 40%, #f8f8f8 50%, #f0f0f0 60%, #e0e0e0 100%
);
background-size: 200% 100%;
animation: roy-form-shimmer 1.8s ease-in-out infinite;
}
.rc-skeleton-grid-item:nth-child(2) .rc-skeleton-grid-img,
.rc-skeleton-grid-item:nth-child(2) .rc-skeleton-grid-line { animation-delay: 0.15s; }
.rc-skeleton-grid-item:nth-child(3) .rc-skeleton-grid-img,
.rc-skeleton-grid-item:nth-child(3) .rc-skeleton-grid-line { animation-delay: 0.3s; }
.rc-skeleton-grid-item:nth-child(4) .rc-skeleton-grid-img,
.rc-skeleton-grid-item:nth-child(4) .rc-skeleton-grid-line { animation-delay: 0.1s; }
.rc-skeleton-grid-item:nth-child(5) .rc-skeleton-grid-img,
.rc-skeleton-grid-item:nth-child(5) .rc-skeleton-grid-line { animation-delay: 0.25s; }
.rc-skeleton-grid-item:nth-child(6) .rc-skeleton-grid-img,
.rc-skeleton-grid-item:nth-child(6) .rc-skeleton-grid-line { animation-delay: 0.4s; }

.rc-skeleton-gradient {
background: linear-gradient(135deg, #d0d0d0 0%, #e8e8e8 50%, #d0d0d0 100%);
background-size: 200% 200%;
animation: roy-text-grad-shift 2s ease-in-out infinite;
border-radius: 4px;
}

.rc-skeleton-blink {
background-color: #e0e0e0;
animation: rcSkeletonBlink 1s step-end infinite;
border-radius: 4px;
}

.rc-skeleton-fade {
background-color: #e0e0e0;
animation: rcSkeletonFade 2s ease-in-out infinite;
border-radius: 4px;
}

.rc-toggle-switch {
position: relative;
width: 52px;
height: 28px;
appearance: none;
-webkit-appearance: none;
background-color: #ccc;
border-radius: 28px;
cursor: pointer;
transition: background-color 0.3s ease;
outline: none;
border: none;
}
.rc-toggle-switch::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.rc-toggle-switch:checked {
background-color: #4caf50;
}
.rc-toggle-switch:checked::before {
transform: translateX(24px);
box-shadow: 0 1px 5px rgba(0,0,0,0.25);
}
.rc-toggle-switch:focus-visible {
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

.rc-checkbox-anim {
position: relative;
width: 22px;
height: 22px;
appearance: none;
-webkit-appearance: none;
background-color: #fff;
border: 2px solid #bbb;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
outline: none;
}
.rc-checkbox-anim:checked {
background-color: #2196f3;
border-color: #2196f3;
animation: rcCheckboxPop 0.3s ease;
}
.rc-checkbox-anim::before {
content: '';
position: absolute;
top: 3px;
left: 6px;
width: 6px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.rc-checkbox-anim:checked::before {
transform: rotate(45deg) scale(1);
}
.rc-checkbox-anim:focus-visible {
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

.rc-radio-pulse {
position: relative;
width: 22px;
height: 22px;
appearance: none;
-webkit-appearance: none;
background-color: #fff;
border: 2px solid #bbb;
border-radius: 50%;
cursor: pointer;
transition: border-color 0.2s ease;
outline: none;
}
.rc-radio-pulse::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: #2196f3;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-radio-pulse:checked {
border-color: #2196f3;
animation: rcRadioPulseRing 0.4s ease;
}
.rc-radio-pulse:checked::after {
transform: translate(-50%, -50%) scale(1);
}
.rc-radio-pulse:focus-visible {
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

.rc-input-focus-glow {
padding: 10px 14px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background-color: #fff;
}
.rc-input-focus-glow:focus {
border-color: #7c4dff;
box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.2),
0 0 12px rgba(124, 77, 255, 0.15);
}
.rc-input-focus-glow::placeholder {
color: #aaa;
transition: color 0.3s ease;
}
.rc-input-focus-glow:focus::placeholder {
color: #ccc;
}

.rc-input-float-label-wrapper {
position: relative;
}
.rc-input-float-label {
padding: 18px 14px 6px 14px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background-color: transparent;
width: 100%;
box-sizing: border-box;
}
.rc-input-float-label::placeholder {
color: transparent;
}
.rc-input-float-label-label {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
font-size: 14px;
color: #999;
pointer-events: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background-color: #fff;
padding: 0 4px;
}
.rc-input-float-label:focus ~ .rc-input-float-label-label,
.rc-input-float-label:not(:placeholder-shown) ~ .rc-input-float-label-label {
top: 0;
font-size: 11px;
color: #7c4dff;
transform: translateY(-50%);
}
.rc-input-float-label:focus {
border-color: #7c4dff;
box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.15);
}

.rc-tooltip-fade-wrapper {
position: relative;
display: inline-block;
}
.rc-tooltip-fade {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background-color: #333;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
pointer-events: none;
z-index: 10;
}
.rc-tooltip-fade::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #333;
}
.rc-tooltip-fade-wrapper:hover .rc-tooltip-fade {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}

.rc-accordion-slide {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease,
padding 0.3s ease;
padding: 0 16px;
}
.rc-accordion-trigger:checked ~ .rc-accordion-slide,
.rc-accordion-slide.rc-open {
max-height: 500px;
opacity: 1;
padding: 16px;
}
.rc-accordion-trigger {
display: none;
}
.rc-accordion-trigger-label {
display: block;
padding: 14px 16px;
cursor: pointer;
font-weight: 600;
background-color: #f5f5f5;
border-radius: 8px;
transition: background-color 0.2s ease;
user-select: none;
}
.rc-accordion-trigger-label:hover {
background-color: #eee;
}
.rc-accordion-trigger:checked ~ .rc-accordion-trigger-label {
border-radius: 8px 8px 0 0;
background-color: #e8e8e8;
}
.rc-accordion-trigger-label::after {
content: '+';
float: right;
font-size: 18px;
line-height: 1;
transition: transform 0.3s ease;
}
.rc-accordion-trigger:checked ~ .rc-accordion-trigger-label::after {
content: '\2212';
transform: rotate(180deg);
}

.rc-tab-underline-group {
position: relative;
display: flex;
gap: 0;
border-bottom: 2px solid #e0e0e0;
}
.rc-tab-underline {
padding: 10px 20px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #777;
background: none;
border: none;
outline: none;
position: relative;
transition: color 0.3s ease;
}
.rc-tab-underline::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background-color: #2196f3;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-tab-underline:hover {
color: #333;
}
.rc-tab-underline:hover::after {
width: 100%;
left: 0;
}
.rc-tab-underline.rc-active,
.rc-tab-underline:active {
color: #2196f3;
}
.rc-tab-underline.rc-active::after,
.rc-tab-underline:active::after {
width: 100%;
left: 0;
}

.rc-dropdown-slide-wrapper {
position: relative;
display: inline-block;
}
.rc-dropdown-slide {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 180px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.25s ease,
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.25s;
z-index: 20;
}
.rc-dropdown-slide-wrapper:focus-within .rc-dropdown-slide,
.rc-dropdown-slide-wrapper:hover .rc-dropdown-slide {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rc-dropdown-slide-item {
display: block;
width: 100%;
padding: 8px 16px;
border: none;
background: none;
text-align: left;
font-size: 14px;
cursor: pointer;
color: #333;
transition: background-color 0.15s ease;
}
.rc-dropdown-slide-item:hover {
background-color: #f0f4ff;
}
.rc-dropdown-slide-item:first-child {
border-radius: 8px 8px 0 0;
}
.rc-dropdown-slide-item:last-child {
border-radius: 0 0 8px 8px;
}

.rc-notification-slide-in {
position: relative;
padding: 14px 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
border-left: 4px solid #4caf50;
animation: rcNotificationSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
max-width: 360px;
}
.rc-notification-slide-in.rc-exit {
animation: rcNotificationSlideOut 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.rc-progress-bar-fill-track {
width: 100%;
height: 10px;
background-color: #e8e8e8;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.rc-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #4caf50, #66bb6a);
border-radius: 10px;
width: 0%;
transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.rc-progress-bar-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: rcProgressStripe 1s linear infinite;
}
.rc-progress-bar-fill.rc-animated {
width: 75%;
}

.rc-ripple-click {
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.rc-ripple-click::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.35);
transform: translate(-50%, -50%) scale(0);
transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
opacity: 0;
pointer-events: none;
}
.rc-ripple-click:active::after {
width: 300px;
height: 300px;
opacity: 1;
transition: width 0s, height 0s, opacity 0s;
}
.rc-ripple-click:not(:active)::after {
transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
}

.rc-blur-in {
animation: rc-blur-in 0.8s ease-out both;
}

.rc-blur-out {
animation: rc-blur-out 0.8s ease-in both;
}

.rc-grayscale-in {
animation: rc-grayscale-in 1s ease-out both;
}

.rc-grayscale-out {
animation: rc-grayscale-out 1s ease-in both;
}

.rc-sepia-in {
animation: rc-sepia-in 1.2s ease-out both;
}

.rc-sepia-out {
animation: rc-sepia-out 1.2s ease-in both;
}

.rc-saturate-pulse {
animation: rc-saturate-pulse 2s ease-in-out infinite;
}

.rc-hue-rotate {
animation: rc-hue-rotate 4s linear infinite;
}

.rc-invert-flash {
animation: rc-invert-flash 2s ease-in-out infinite;
}

.rc-brightness-pulse {
animation: rc-brightness-pulse 2.5s ease-in-out infinite;
}

.rc-contrast-switch {
animation: rc-contrast-switch 3s ease-in-out infinite;
}

.rc-vintage {
animation: rc-vintage 4s ease-in-out infinite;
}

.rc-rain {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.rc-rain::before,
.rc-rain::after {
content: '';
position: absolute;
top: -100%;
width: 2px;
height: 80px;
background: linear-gradient(to bottom, transparent, rgba(174, 194, 224, 0.5), transparent);
border-radius: 0 0 2px 2px;
}
.rc-rain::before {
left: 15%;
box-shadow:
80px 0 rgba(174, 194, 224, 0.4),
160px 0 rgba(174, 194, 224, 0.3),
240px 0 rgba(174, 194, 224, 0.5),
320px 0 rgba(174, 194, 224, 0.2),
400px 0 rgba(174, 194, 224, 0.4),
480px 0 rgba(174, 194, 224, 0.3),
560px 0 rgba(174, 194, 224, 0.5),
640px 0 rgba(174, 194, 224, 0.2),
720px 0 rgba(174, 194, 224, 0.4),
800px 0 rgba(174, 194, 224, 0.3);
animation: rc-rain-fall 0.7s linear infinite;
}
.rc-rain::after {
left: 45%;
box-shadow:
60px 0 rgba(174, 194, 224, 0.3),
140px 0 rgba(174, 194, 224, 0.5),
220px 0 rgba(174, 194, 224, 0.2),
300px 0 rgba(174, 194, 224, 0.4),
380px 0 rgba(174, 194, 224, 0.3),
460px 0 rgba(174, 194, 224, 0.5),
540px 0 rgba(174, 194, 224, 0.2),
620px 0 rgba(174, 194, 224, 0.4),
700px 0 rgba(174, 194, 224, 0.3),
780px 0 rgba(174, 194, 224, 0.5);
animation: rc-rain-fall 0.9s linear infinite;
animation-delay: -0.3s;
}

.rc-snow {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #2c3e6b 0%, #4a6fa1 40%, #6b8cae 100%);
}
.rc-snow::before,
.rc-snow::after {
content: '';
position: absolute;
top: -5%;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
opacity: 0.9;
box-shadow:
30px 15px 0 1px rgba(255,255,255,0.7),
70px 40px 0 2px rgba(255,255,255,0.5),
120px 10px 0 0px rgba(255,255,255,0.8),
180px 60px 0 1px rgba(255,255,255,0.4),
240px 25px 0 2px rgba(255,255,255,0.6),
300px 50px 0 0px rgba(255,255,255,0.7),
370px 5px 0 1px rgba(255,255,255,0.5),
440px 35px 0 2px rgba(255,255,255,0.3),
520px 55px 0 0px rgba(255,255,255,0.6),
600px 20px 0 1px rgba(255,255,255,0.8);
}
.rc-snow::before {
left: 10%;
animation: rc-snow-fall 4s linear infinite;
}
.rc-snow::after {
left: 55%;
box-shadow:
40px 30px 0 1px rgba(255,255,255,0.6),
90px 10px 0 2px rgba(255,255,255,0.4),
150px 45px 0 0px rgba(255,255,255,0.7),
210px 20px 0 1px rgba(255,255,255,0.5),
280px 55px 0 2px rgba(255,255,255,0.3),
350px 15px 0 0px rgba(255,255,255,0.8),
420px 40px 0 1px rgba(255,255,255,0.6),
500px 8px 0 2px rgba(255,255,255,0.4),
570px 50px 0 0px rgba(255,255,255,0.7),
650px 28px 0 1px rgba(255,255,255,0.5);
animation: rc-snow-fall 5s linear infinite;
animation-delay: -2s;
}

.rc-lightning {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #1a1a2e 0%, #2d2d44 100%);
}
.rc-lightning::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.9) 0%, rgba(200,200,255,0.4) 30%, transparent 70%);
opacity: 0;
animation: rc-lightning-flash 6s ease-in-out infinite;
}
.rc-lightning::after {
content: '';
position: absolute;
top: 0;
left: 48%;
width: 4%;
height: 100%;
background: linear-gradient(to bottom,
transparent 5%,
rgba(180,180,255,0.9) 10%,
transparent 12%,
rgba(200,200,255,0.7) 20%,
transparent 22%,
rgba(180,180,255,0.8) 35%,
transparent 37%,
rgba(200,200,255,0.6) 50%,
transparent 52%,
rgba(180,180,255,0.7) 65%,
transparent 67%,
rgba(200,200,255,0.5) 80%,
transparent 82%
);
opacity: 0;
animation: rc-lightning-flash 6s ease-in-out infinite;
animation-delay: 0.05s;
}

.rc-clouds {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #87CEEB 0%, #b0d4e8 60%, #d4e8f0 100%);
}
.rc-clouds::before {
content: '';
position: absolute;
top: 15%;
left: -150px;
width: 180px;
height: 60px;
background: rgba(255,255,255,0.9);
border-radius: 50px;
box-shadow:
-25px -20px 0 10px rgba(255,255,255,0.9),
30px -15px 0 15px rgba(255,255,255,0.85),
70px -10px 0 5px rgba(255,255,255,0.9),
-60px -5px 0 8px rgba(255,255,255,0.8);
animation: rc-cloud-drift-1 20s linear infinite;
}
.rc-clouds::after {
content: '';
position: absolute;
top: 35%;
left: -120px;
width: 140px;
height: 45px;
background: rgba(255,255,255,0.75);
border-radius: 40px;
box-shadow:
-20px -18px 0 8px rgba(255,255,255,0.75),
25px -12px 0 12px rgba(255,255,255,0.7),
60px -8px 0 4px rgba(255,255,255,0.75);
animation: rc-cloud-drift-2 25s linear infinite;
}

.rc-fireflies {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #0d1b0e 0%, #1a2f1a 50%, #0d1b0e 100%);
}
.rc-fireflies::before,
.rc-fireflies::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: #e8ff6b;
border-radius: 50%;
box-shadow:
0 0 6px 2px rgba(232,255,107,0.6),
0 0 12px 4px rgba(232,255,107,0.3);
}
.rc-fireflies::before {
top: 30%;
left: 20%;
box-shadow:
0 0 6px 2px rgba(232,255,107,0.6),
0 0 12px 4px rgba(232,255,107,0.3),
120px 40px 0 1px rgba(232,255,107,0.8),
120px 40px 6px 3px rgba(232,255,107,0.4),
250px -30px 0 0px rgba(232,255,107,0.6),
250px -30px 6px 2px rgba(232,255,107,0.3),
400px 60px 0 1px rgba(232,255,107,0.7),
400px 60px 6px 3px rgba(232,255,107,0.35),
550px -10px 0 0px rgba(232,255,107,0.5),
550px -10px 6px 2px rgba(232,255,107,0.25);
animation: rc-firefly-1 6s ease-in-out infinite;
}
.rc-fireflies::after {
top: 55%;
left: 40%;
box-shadow:
0 0 6px 2px rgba(232,255,107,0.5),
0 0 12px 4px rgba(232,255,107,0.25),
100px -50px 0 1px rgba(232,255,107,0.7),
100px -50px 6px 3px rgba(232,255,107,0.35),
220px 30px 0 0px rgba(232,255,107,0.6),
220px 30px 6px 2px rgba(232,255,107,0.3),
380px -40px 0 1px rgba(232,255,107,0.8),
380px -40px 6px 3px rgba(232,255,107,0.4),
500px 50px 0 0px rgba(232,255,107,0.5),
500px 50px 6px 2px rgba(232,255,107,0.25);
animation: rc-firefly-2 8s ease-in-out infinite;
}

.rc-ocean-waves {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #1a3a5c 0%, #2a6496 40%, #3a8fd4 100%);
}
.rc-ocean-waves::before {
content: '';
position: absolute;
bottom: 0;
left: -50%;
width: 200%;
height: 50%;
background: radial-gradient(ellipse at 25% 100%, rgba(58,143,212,0.6) 0%, transparent 50%),
radial-gradient(ellipse at 75% 100%, rgba(58,143,212,0.4) 0%, transparent 50%);
border-radius: 40% 40% 0 0 / 30% 30% 0 0;
animation: rc-wave-1 5s ease-in-out infinite;
}
.rc-ocean-waves::after {
content: '';
position: absolute;
bottom: -5%;
left: -50%;
width: 200%;
height: 45%;
background: radial-gradient(ellipse at 30% 100%, rgba(42,100,150,0.7) 0%, transparent 50%),
radial-gradient(ellipse at 70% 100%, rgba(42,100,150,0.5) 0%, transparent 50%);
border-radius: 45% 45% 0 0 / 25% 25% 0 0;
animation: rc-wave-2 6s ease-in-out infinite;
}

.rc-sunset {
position: relative;
overflow: hidden;
animation: rc-sunset-glow 8s ease-in-out infinite;
background: linear-gradient(to bottom,
#1a0533 0%, #4a1942 20%, #c94b4b 45%,
#f09819 65%, #ff512f 80%, #dd2476 100%);
}
.rc-sunset::before {
content: '';
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, #fff6a0 0%, #f5af19 40%, rgba(245,175,25,0) 70%);
border-radius: 50%;
box-shadow: 0 0 60px 30px rgba(245,175,25,0.3), 0 0 120px 60px rgba(255,81,47,0.15);
}
.rc-sunset::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20%;
background: linear-gradient(to bottom, rgba(13,2,33,0) 0%, rgba(13,2,33,0.7) 100%);
}

.rc-northern-lights {
position: relative;
overflow: hidden;
animation: rc-aurora-shift 10s ease-in-out infinite;
background: #001428;
}
.rc-northern-lights::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 120% 40% at 30% 30%, rgba(0,200,150,0.15) 0%, transparent 100%),
radial-gradient(ellipse 100% 30% at 70% 25%, rgba(100,0,200,0.1) 0%, transparent 100%),
radial-gradient(ellipse 80% 35% at 50% 40%, rgba(0,150,200,0.12) 0%, transparent 100%);
animation: rc-aurora-shift 10s ease-in-out infinite;
animation-delay: -3s;
}

.rc-fog {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #8e9eab 0%, #b8c6d0 50%, #a8b8c2 100%);
}
.rc-fog::before {
content: '';
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 60%;
background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.5) 0%, transparent 60%),
radial-gradient(ellipse at 60% 60%, rgba(255,255,255,0.4) 0%, transparent 50%),
radial-gradient(ellipse at 90% 40%, rgba(255,255,255,0.35) 0%, transparent 55%);
animation: rc-fog-drift-1 8s ease-in-out infinite;
}
.rc-fog::after {
content: '';
position: absolute;
bottom: 0;
left: -10%;
width: 120%;
height: 55%;
background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.45) 0%, transparent 55%),
radial-gradient(ellipse at 70% 40%, rgba(255,255,255,0.5) 0%, transparent 60%),
radial-gradient(ellipse at 50% 70%, rgba(255,255,255,0.3) 0%, transparent 50%);
animation: rc-fog-drift-2 10s ease-in-out infinite;
}

.rc-stars-twinkle {
position: relative;
overflow: hidden;
background: #0a0a1a;
}
.rc-stars-twinkle::before,
.rc-stars-twinkle::after {
content: '';
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
box-shadow:
40px 20px 0 0 rgba(255,255,255,0.8),
100px 60px 0 1px rgba(255,255,255,0.6),
170px 15px 0 0 rgba(255,255,255,0.9),
230px 80px 0 0px rgba(255,255,255,0.5),
300px 30px 0 1px rgba(255,255,255,0.7),
380px 70px 0 0px rgba(255,255,255,0.8),
450px 10px 0 0px rgba(255,255,255,0.6),
520px 55px 0 1px rgba(255,255,255,0.9),
590px 40px 0 0px rgba(255,255,255,0.5),
670px 25px 0 1px rgba(255,255,255,0.7),
740px 65px 0 0px rgba(255,255,255,0.8),
810px 45px 0 0px rgba(255,255,255,0.6),
880px 5px 0 1px rgba(255,255,255,0.9),
950px 75px 0 0px rgba(255,255,255,0.5),
1020px 35px 0 0px rgba(255,255,255,0.7);
}
.rc-stars-twinkle::before {
top: 10%;
left: 5%;
animation: rc-twinkle-1 3s ease-in-out infinite;
}
.rc-stars-twinkle::after {
top: 40%;
left: 8%;
box-shadow:
50px 40px 0 1px rgba(255,255,255,0.7),
120px 10px 0 0px rgba(255,255,255,0.9),
190px 55px 0 0px rgba(255,255,255,0.5),
260px 25px 0 1px rgba(255,255,255,0.8),
330px 65px 0 0px rgba(255,255,255,0.6),
410px 5px 0 0px rgba(255,255,255,0.9),
480px 50px 0 1px rgba(255,255,255,0.7),
560px 20px 0 0px rgba(255,255,255,0.8),
630px 70px 0 0px rgba(255,255,255,0.5),
700px 35px 0 1px rgba(255,255,255,0.9),
780px 15px 0 0px rgba(255,255,255,0.6),
850px 60px 0 0px rgba(255,255,255,0.8),
930px 30px 0 1px rgba(255,255,255,0.7),
1000px 50px 0 0px rgba(255,255,255,0.5),
1070px 10px 0 0px rgba(255,255,255,0.9);
animation: rc-twinkle-2 4s ease-in-out infinite;
}

.rc-status-pulse-green {
position: relative;
width: 14px;
height: 14px;
}
.rc-status-pulse-green::before {
content: '';
position: absolute;
inset: 0;
background: #22c55e;
border-radius: 50%;
z-index: 1;
}
.rc-status-pulse-green::after {
content: '';
position: absolute;
inset: 0;
background: #22c55e;
border-radius: 50%;
animation: rc-pulse-ring-green 1.5s ease-out infinite;
}

.rc-status-pulse-red {
position: relative;
width: 14px;
height: 14px;
}
.rc-status-pulse-red::before {
content: '';
position: absolute;
inset: 0;
background: #ef4444;
border-radius: 50%;
z-index: 1;
}
.rc-status-pulse-red::after {
content: '';
position: absolute;
inset: 0;
background: #ef4444;
border-radius: 50%;
animation: rc-pulse-ring-green 1.5s ease-out infinite;
}

.rc-status-pulse-yellow {
position: relative;
width: 14px;
height: 14px;
}
.rc-status-pulse-yellow::before {
content: '';
position: absolute;
inset: 0;
background: #eab308;
border-radius: 50%;
z-index: 1;
}
.rc-status-pulse-yellow::after {
content: '';
position: absolute;
inset: 0;
background: #eab308;
border-radius: 50%;
animation: rc-pulse-ring-green 1.5s ease-out infinite;
}

.rc-status-breathing-blue {
width: 14px;
height: 14px;
border-radius: 50%;
background: #3b82f6;
animation: rc-breathe-blue 3s ease-in-out infinite;
}

.rc-status-progress-ring {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
background: conic-gradient(
#3b82f6 0deg,
#3b82f6 270deg,
rgba(59,130,246,0.15) 270deg,
rgba(59,130,246,0.15) 360deg
);
animation: roy-origin-spin 2s linear infinite;
}
.rc-status-progress-ring::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: #1e293b;
}

.rc-status-loading-bar {
position: relative;
width: 120px;
height: 4px;
background: rgba(59,130,246,0.2);
border-radius: 4px;
overflow: hidden;
animation: rc-loading-bg-pulse 2s ease-in-out infinite;
}
.rc-status-loading-bar::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
border-radius: 4px;
animation: rc-loading-slide 1.5s ease-in-out infinite;
}

.rc-status-notification-badge {
position: relative;
width: 20px;
height: 20px;
background: #ef4444;
border-radius: 50%;
animation: rc-badge-bounce 1.5s ease-in-out infinite;
}
.rc-status-notification-badge::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid #ef4444;
border-radius: 50%;
animation: rc-badge-ring 1.5s ease-out infinite;
}

.rc-status-dot-bounce {
position: relative;
width: 40px;
height: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.rc-status-dot-bounce::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #3b82f6;
border-radius: 50%;
box-shadow:
14px 0 0 0 #3b82f6,
28px 0 0 0 #3b82f6;
animation: rc-dot-bounce 1.4s ease-in-out infinite;
}

.rc-status-signal-wave {
position: relative;
width: 24px;
height: 24px;
}
.rc-status-signal-wave::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
background: #22c55e;
border-radius: 50%;
z-index: 1;
}
.rc-status-signal-wave::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border: 2px solid #22c55e;
border-radius: 50%;
animation: rc-signal-expand 2s ease-out infinite;
}

.rc-status-heartbeat {
position: relative;
width: 20px;
height: 18px;
}
.rc-status-heartbeat::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 10px;
height: 16px;
background: #ef4444;
border-radius: 10px 10px 0 0;
transform: translateX(-50%) rotate(-45deg);
transform-origin: 0 100%;
animation: rc-heart-beat 1.5s ease-in-out infinite;
}
.rc-status-heartbeat::after {
content: '';
position: absolute;
top: 0;
right: 50%;
width: 10px;
height: 16px;
background: #ef4444;
border-radius: 10px 10px 0 0;
transform: translateX(50%) rotate(45deg);
transform-origin: 100% 100%;
animation: rc-heart-beat 1.5s ease-in-out infinite;
}

.rc-scroll-fade-up {
animation: rc-scroll-fade-up 0.7s ease-out both;
}

.rc-scroll-fade-left {
animation: rc-scroll-fade-left 0.7s ease-out both;
}

.rc-scroll-fade-right {
animation: rc-scroll-fade-right 0.7s ease-out both;
}

.rc-scroll-zoom-in {
animation: rc-scroll-zoom-in 0.6s ease-out both;
}

.rc-scroll-slide-stagger {
animation: rc-scroll-slide-stagger 0.8s ease-out both;
animation-delay: 0.1s;
}

.rc-scroll-flip-in {
animation: rc-scroll-flip-in 0.7s ease-out both;
backface-visibility: visible;
}

.rc-scroll-rotate-in {
animation: rc-scroll-rotate-in 0.8s ease-out both;
}

.rc-scroll-scale-bounce {
animation: roy-bounce-in 0.8s ease-out both;
}

.rc-scroll-blur-clear {
animation: rc-scroll-blur-clear 0.7s ease-out both;
}

.rc-scroll-clip-reveal {
animation: rc-scroll-clip-reveal 0.7s ease-out both;
}

.rc-ease-linear {
animation: rc-ease-linear-move 1s linear both;
}

.rc-ease-in-quad {
animation: rc-ease-linear-move 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.rc-ease-out-quad {
animation: rc-ease-linear-move 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.rc-ease-in-out-quad {
animation: rc-ease-linear-move 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

.rc-ease-in-cubic {
animation: rc-ease-linear-move 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

.rc-ease-out-cubic {
animation: rc-ease-linear-move 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.rc-ease-in-out-cubic {
animation: rc-ease-linear-move 1s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

.rc-ease-in-back {
animation: rc-ease-linear-move 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}

.rc-ease-out-back {
animation: rc-ease-linear-move 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.rc-ease-in-out-back {
animation: rc-ease-linear-move 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

.rc-ease-elastic-out {
animation: rc-ease-elastic-out-move 1s ease-out both;
}

.rc-ease-bounce-out {
animation: rc-ease-bounce-out-move 1s ease-out both;
}

.rc-preset-glassmorphism {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.rc-preset-neumorphism {
background: #e0e5ec;
border-radius: 16px;
border: none;
box-shadow:
8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
}

.rc-preset-claymorphism {
background: #f08080;
border-radius: 32px;
border: none;
box-shadow:
inset -6px -6px 12px rgba(0, 0, 0, 0.15),
inset 6px 6px 12px rgba(255, 255, 255, 0.35),
8px 8px 20px rgba(0, 0, 0, 0.2);
}

.rc-preset-brutalism {
background: #ffff00;
border: 4px solid #000000;
border-radius: 0;
box-shadow: 8px 8px 0 #000000;
font-weight: 900;
text-transform: uppercase;
}

.rc-preset-retro-pixel {
background: #2c2c54;
border: none;
border-radius: 0;
color: #ffdd59;
font-family: 'Courier New', Courier, monospace;
box-shadow:
4px 0 0 0 #2c2c54, -4px 0 0 0 #2c2c54,
0 4px 0 0 #2c2c54, 0 -4px 0 0 #2c2c54,
4px 4px 0 0 #2c2c54, -4px 4px 0 0 #2c2c54,
4px -4px 0 0 #2c2c54, -4px -4px 0 0 #2c2c54;
outline: 4px solid #ffdd59;
}

.rc-preset-cyberpunk {
background: #0a0a12;
border: 2px solid #00f0ff;
border-radius: 4px;
box-shadow:
0 0 8px rgba(0, 240, 255, 0.4),
0 0 20px rgba(0, 240, 255, 0.15),
inset 0 0 12px rgba(0, 240, 255, 0.05);
color: #00f0ff;
}

.rc-preset-minimalism {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
color: #374151;
}

.rc-preset-elevation {
background: #ffffff;
border: none;
border-radius: 12px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.05),
0 12px 24px rgba(0, 0, 0, 0.04),
0 20px 40px rgba(0, 0, 0, 0.03);
}

.rc-preset-gradient-border {
position: relative;
background: #ffffff;
border-radius: 12px;
border: none;
}
.rc-preset-gradient-border::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
z-index: -1;
}

.rc-preset-dark-glass {
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
color: #f3f4f6;
}

.rc-preset-soft-ui {
--soft-bg: #e8ecf1;
--soft-shadow-dark: #c8ccd2;
--soft-shadow-light: #ffffff;
background: var(--soft-bg);
border: none;
border-radius: 20px;
box-shadow:
6px 6px 14px var(--soft-shadow-dark),
-6px -6px 14px var(--soft-shadow-light),
inset 2px 2px 4px rgba(255, 255, 255, 0.6),
inset -2px -2px 4px rgba(0, 0, 0, 0.04);
}

.rc-preset-neobrutalism {
background: #fef3c7;
border: 3px solid #1e293b;
border-radius: 8px;
box-shadow: 6px 6px 0 #1e293b;
color: #1e293b;
font-weight: 700;
}

.rc-fade-through {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
animation: rcFadeThrough 0.6s ease-in-out;
pointer-events: all;
}

.rc-slide-over-left {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
transform: translateX(100%);
animation: rcSlideOverLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: all;
}

.rc-slide-over-right {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
transform: translateX(-100%);
animation: rcSlideOverRight 0.6s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: all;
}

.rc-slide-over-up {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
transform: translateY(100%);
animation: rcSlideOverUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: all;
}

.rc-zoom-fade {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
opacity: 0;
transform: scale(0.92);
animation: rcZoomFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: all;
}

.rc-flip-transition {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
transform: perspective(1200px) rotateY(-90deg);
transform-origin: left center;
animation: rcFlipTransition 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: all;
backface-visibility: hidden;
}

.rc-dissolve {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
opacity: 0;
filter: blur(20px);
animation: rcDissolve 0.65s ease-out forwards;
pointer-events: all;
}

.rc-curtain-in {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
pointer-events: all;
}

.rc-curtain-in::before,
.rc-curtain-in::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: #fff;
animation: rcCurtainLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.rc-curtain-in::before {
left: 0;
clip-path: inset(0 50% 0 0);
animation-name: rcCurtainLeft;
}

.rc-curtain-in::after {
right: 0;
clip-path: inset(0 0 0 50%);
animation-name: rcCurtainRight;
}

.rc-focus-visible-ring:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
border-radius: 4px;
transition: outline-color 0.15s ease;
}

.rc-focus-visible-ring:focus:not(:focus-visible) {
outline: none;
}

@media (prefers-reduced-motion: reduce) {
.rc-focus-visible-ring:focus-visible {
transition: none;
}
}

.rc-skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 99999;
background: #1d4ed8;
color: #fff;
padding: 8px 16px;
font-size: 1rem;
font-weight: 600;
border-radius: 0 0 8px 0;
text-decoration: none;
transition: none;
}

.rc-skip-link:focus {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: auto;
padding: 12px 24px;
}

@media (prefers-reduced-motion: reduce) {
.rc-skip-link {
transition: none;
}
}

.rc-reduced-motion-fade {
opacity: 0;
animation: roy-scroll-fade 0.5s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
.rc-reduced-motion-fade {
animation: none;
opacity: 1;
}
}

.rc-reduced-motion-slide {
transform: translateY(20px);
opacity: 0;
animation: rcRmSlide 0.5s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
.rc-reduced-motion-slide {
animation: none;
transform: none;
opacity: 1;
}
}

.rc-high-contrast-border {
border: 3px solid #000;
min-height: 1px;
min-width: 1px;
}

@media (prefers-contrast: high) {
.rc-high-contrast-border {
border-width: 4px;
border-color: #fff;
outline: 3px solid #000;
outline-offset: -1px;
}
}

@media (prefers-reduced-motion: reduce) {
.rc-high-contrast-border {
transition: none;
}
}

.rc-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.rc-sr-only.focusable:focus {
position: static;
width: auto;
height: auto;
padding: inherit;
margin: inherit;
overflow: visible;
clip: auto;
white-space: normal;
}

.rc-motion-safe-bounce {
animation: rcMsBounce 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
.rc-motion-safe-bounce {
animation: none;
transform: none;
}
}

.rc-motion-safe-pulse {
animation: rcMsPulse 1s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
.rc-motion-safe-pulse {
animation: none;
transform: none;
}
}

.rc-icon-spin {
animation: roy-origin-spin 1s linear infinite;
}

.rc-icon-bounce {
animation: rcIconBounce 0.8s ease infinite;
}

.rc-icon-pulse {
animation: rcIconPulse 1s ease-in-out infinite;
}

.rc-icon-shake {
animation: rcIconShake 0.6s ease-in-out;
}

.rc-icon-flip {
animation: rcIconFlip 0.6s ease-in-out;
backface-visibility: hidden;
}

.rc-icon-swing {
animation: rcIconSwing 0.8s ease-in-out;
transform-origin: top center;
}

.rc-icon-tada {
animation: rcIconTada 1s ease;
}

.rc-icon-wobble {
animation: rcIconWobble 0.8s ease;
}

.rc-icon-fade-in {
animation: roy-scroll-fade 0.5s ease forwards;
}

.rc-icon-drop-in {
animation: rcIconDropIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rc-icon-rubber-band {
animation: rcIconRubberBand 0.8s ease;
}

.rc-icon-beat {
animation: rcIconBeat 1s ease-in-out infinite;
}

.rc-3d-book {
perspective: 800px;
width: 60px;
height: 80px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-25deg);
transition: transform 0.6s ease;
}

.rc-3d-gallery {
perspective: 1000px;
width: 80px;
height: 60px;
position: relative;
transform-style: preserve-3d;
animation: roy-3d-gallery-rotate 8s linear infinite;
}

.rc-3d-poster {
perspective: 1000px;
width: 80px;
height: 100px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent),
linear-gradient(135deg, #8b5cf6, #ec4899);
border-radius: 6px;
box-shadow:
0 10px 30px rgba(139, 92, 246, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1);
transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
transition: transform 0.5s ease;
}

.rc-accordion-3d {
perspective: 800px;
width: 80px;
height: 60px;
position: relative;
transform-style: preserve-3d;
}

.rc-apple-bounce-settle {
animation: roy-apple-bounce-settle 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) both;
}

.rc-apple-elastic-scale {
animation: roy-apple-elastic 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

.rc-apple-flip-spring {
perspective: 1000px;
animation: roy-apple-flip-spring 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
transform-style: preserve-3d;
}

.rc-apple-frosted-vibrancy {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 10px 30px rgba(0, 0, 0, 0.15);
color: #1d1d1f;
}

.rc-apple-material-thick {
background: rgba(245, 245, 247, 0.75);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 20px 50px rgba(0, 0, 0, 0.2);
color: #1d1d1f;
}

.rc-apple-material-thin {
background: rgba(250, 250, 252, 0.5);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
color: #1d1d1f;
}

.rc-apple-sidebar-material {
background: linear-gradient(
180deg,
rgba(245, 245, 247, 0.7) 0%,
rgba(235, 235, 240, 0.6) 100%
);
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
box-shadow:
inset 1px 0 0 rgba(255, 255, 255, 0.5),
0 6px 20px rgba(0, 0, 0, 0.1);
color: #1d1d1f;
}

.rc-apple-squish-in {
animation: roy-apple-squish-in 0.7s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.rc-apple-squish-out {
animation: roy-apple-squish-out 0.55s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.rc-apple-ultra-thin {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px) saturate(110%);
-webkit-backdrop-filter: blur(8px) saturate(110%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 10px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 2px 8px rgba(0, 0, 0, 0.06);
color: #1d1d1f;
}

.rc-apple-vibrancy-dark {
background: rgba(30, 30, 32, 0.55);
backdrop-filter: blur(24px) saturate(180%) brightness(0.95);
-webkit-backdrop-filter: blur(24px) saturate(180%) brightness(0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 10px 30px rgba(0, 0, 0, 0.4);
color: #f5f5f7;
}

.rc-apple-vibrancy-light {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 10px 30px rgba(0, 0, 0, 0.1);
color: #1d1d1f;
}

.rc-ascii-rain {
width: 100%;
min-height: 240px;
background:
radial-gradient(ellipse at 50% 0%, #001a0a 0%, #000305 100%);
position: relative;
border-radius: 8px;
overflow: hidden;
}

.rc-bg-animated-gradient {
background: linear-gradient(-45deg, #065f46, #10b981, #06b6d4, #8b5cf6);
background-size: 400% 400%;
animation: roy-gradient-shift 8s ease infinite;
}

.rc-bg-concentric {
background: repeating-radial-gradient(
circle at center,
#10b981 0,
#10b981 8px,
#0f172a 8px,
#0f172a 16px
);
}

.rc-bg-conic-gradient {
background: conic-gradient(
from 0deg at 50% 50%,
#10b981,
#06b6d4,
#8b5cf6,
#ec4899,
#f59e0b,
#10b981
);
animation: roy-conic-hue 6s linear infinite;
}

.rc-bg-diagonal-stripes {
background-color: #0f172a;
background-image: repeating-linear-gradient(
-60deg,
#06b6d4 0,
#06b6d4 12px,
#0e7490 12px,
#0e7490 24px
);
background-size: 200% 200%;
animation: roy-diagonal-shift 6s linear infinite;
}

.rc-bg-dot-pattern {
background-color: #0f172a;
background-image: radial-gradient(circle, #10b981 1px, transparent 1px);
background-size: 24px 24px;
}

.rc-bg-gradient-pulse {
background-color: #0f172a;
background-image:
radial-gradient(circle at 50% 50%, #10b981 0%, rgba(16, 185, 129, 0) 40%),
radial-gradient(circle at 30% 70%, #06b6d4 0%, rgba(6, 182, 212, 0) 40%),
radial-gradient(circle at 70% 30%, #8b5cf6 0%, rgba(139, 92, 246, 0) 40%);
animation: roy-gradient-pulse 4s ease-in-out infinite;
}

.rc-bg-gradient-sweep {
background: linear-gradient(
90deg,
#0f172a 0%,
#10b981 25%,
#06b6d4 50%,
#10b981 75%,
#0f172a 100%
);
background-size: 200% 100%;
animation: roy-shimmer-sweep 4s linear infinite;
}

.rc-bg-grid-lines {
background-color: #0f172a;
background-image:
linear-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 185, 129, 0.06) 1px, transparent 1px);
background-size: 48px 48px;
}

.rc-bg-hexagon {
background-color: #0f172a;
background-image: url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16.18V50.5L28 66.68L0 50.5V16.18L28 0z' fill='none' stroke='%2310b981' stroke-width='1' opacity='0.5'/%3E%3Cpath d='M28 33.32L56 49.5V83.82L28 100L0 83.82V49.5L28 33.32z' fill='none' stroke='%2310b981' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
background-size: 56px 100px;
}

.rc-bg-lava-lamp {
background-color: #1a0b2e;
position: relative;
overflow: hidden;
}

.rc-bg-mesh-gradient {
background-color: #0f172a;
position: relative;
overflow: hidden;
}

.rc-bg-noise {
position: relative;
background-color: #0f172a;
}

.rc-bg-plaid {
background-color: #0f172a;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(16, 185, 129, 0.4) 18px, rgba(16, 185, 129, 0.4) 20px),
repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(16, 185, 129, 0.4) 18px, rgba(16, 185, 129, 0.4) 20px),
repeating-linear-gradient(45deg, transparent, transparent 24px, rgba(6, 182, 212, 0.3) 24px, rgba(6, 182, 212, 0.3) 26px),
repeating-linear-gradient(-45deg, transparent, transparent 24px, rgba(6, 182, 212, 0.3) 24px, rgba(6, 182, 212, 0.3) 26px);
}

.rc-bg-radial-rays {
background-color: #0f172a;
background-image: repeating-conic-gradient(
from 0deg at 50% 50%,
#10b981 0deg 4deg,
transparent 4deg 12deg
);
}

.rc-bg-stripes {
background: repeating-linear-gradient(
45deg,
#10b981,
#10b981 10px,
#0f172a 10px,
#0f172a 20px
);
}

.rc-bg-sunburst {
background-color: #1a1205;
position: relative;
overflow: hidden;
}

.rc-bg-sunset {
background: linear-gradient(
180deg,
#0c1e2e 0%,
#5b2c6f 25%,
#c2185b 50%,
#f59e0b 75%,
#fde68a 100%
);
background-size: 100% 200%;
animation: roy-sunset-shift 8s ease-in-out infinite;
}

.rc-bg-triangles {
background-color: #0f172a;
background-image:
linear-gradient(45deg, #10b981 25%, transparent 25%),
linear-gradient(-45deg, #06b6d4 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #06b6d4 75%),
linear-gradient(-45deg, transparent 75%, #10b981 75%);
background-size: 40px 40px;
background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}

.rc-bg-zigzag {
background-color: #0f172a;
background-image:
linear-gradient(135deg, #10b981 25%, transparent 25%) -10px 0,
linear-gradient(225deg, #10b981 25%, transparent 25%) -10px 0,
linear-gradient(315deg, #10b981 25%, transparent 25%),
linear-gradient(45deg, #10b981 25%, transparent 25%);
background-size: 20px 20px;
}

.rc-blink {
animation: roy-blink 1.4s steps(2, start) infinite;
}

.rc-blueprint {
width: 100%;
min-height: 240px;
background:
linear-gradient(0deg,
transparent 0 calc(100% - 1px), rgba(180,220,255,0.4) calc(100% - 1px) 100%),
linear-gradient(90deg,
transparent 0 calc(100% - 1px), rgba(180,220,255,0.4) calc(100% - 1px) 100%),
repeating-linear-gradient(0deg, transparent 0 19px, rgba(180,220,255,0.18) 19px 20px),
repeating-linear-gradient(90deg, transparent 0 19px, rgba(180,220,255,0.18) 19px 20px),
repeating-linear-gradient(0deg, transparent 0 99px, rgba(180,220,255,0.35) 99px 100px),
repeating-linear-gradient(90deg, transparent 0 99px, rgba(180,220,255,0.35) 99px 100px),
#0a3d7a;
background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100px 100px, 100px 100px, 100% 100%;
position: relative;
border-radius: 4px;
overflow: hidden;
color: #cfe8ff;
}

.rc-blur-in-up {
animation: roy-blur-in-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rc-blur-out-down {
animation: roy-blur-out-down 0.85s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

.rc-book-open {
perspective: 1000px;
width: 80px;
height: 60px;
position: relative;
transform-style: preserve-3d;
background: transparent;
}

.rc-border-animated-dash {
width: 140px;
height: 80px;
background: #0f172a;
border: 3px dashed #10b981;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #d1fae5;
font-size: 12px;
font-weight: 600;
animation: roy-border-dash-glow 1.6s ease-in-out infinite;
}

.rc-border-banner {
width: 140px;
height: 80px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
padding-right: 16px;
box-sizing: border-box;
}

.rc-border-clip-path {
position: relative;
width: 140px;
height: 80px;
background: linear-gradient(135deg, #10b981, #06b6d4);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 600;
}

.rc-border-corner-brackets {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
background-image:
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4),
linear-gradient(#06b6d4, #06b6d4);
background-position:
top left, top left,
top right, top right,
bottom left, bottom left,
bottom right, bottom right;
background-size:
22px 3px, 3px 22px,
22px 3px, 3px 22px,
22px 3px, 3px 22px,
22px 3px, 3px 22px;
background-repeat: no-repeat;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #67e8f9;
font-size: 12px;
font-weight: 600;
}

.rc-border-dashed-draw {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #a78bfa;
font-size: 12px;
font-weight: 600;
}

.rc-border-double-glow {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
border: 1px solid #10b981;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #6ee7b7;
font-size: 12px;
font-weight: 600;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), 0 0 24px rgba(16, 185, 129, 0.3), inset 0 0 12px rgba(16, 185, 129, 0.2);
}

.rc-border-frame {
position: relative;
width: 140px;
height: 80px;
background: #1e293b;
border: 3px double #f59e0b;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fde68a;
font-size: 12px;
font-weight: 600;
outline: 1px solid #f59e0b;
outline-offset: 4px;
}

.rc-border-gradient-animated {
position: relative;
width: 140px;
height: 80px;
background: #0f172a;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #e2e8f0;
font-size: 12px;
font-weight: 600;
}

.rc-border-inset-glow {
width: 140px;
height: 80px;
background: #0a0a0a;
border: 1px solid rgba(6, 182, 212, 0.5);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #67e8f9;
font-size: 12px;
font-weight: 600;
box-shadow:
inset 0 0 22px rgba(6, 182, 212, 0.4),
inset 0 0 4px rgba(6, 182, 212, 0.7);
}

.rc-border-marching-ants {
width: 140px;
height: 80px;
background-color: #0f172a;
background-image:
repeating-linear-gradient(90deg, #f59e0b 0 6px, transparent 6px 12px),
repeating-linear-gradient(90deg, #f59e0b 0 6px, transparent 6px 12px),
repeating-linear-gradient(0deg, #f59e0b 0 6px, transparent 6px 12px),
repeating-linear-gradient(0deg, #f59e0b 0 6px, transparent 6px 12px);
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fde68a;
font-size: 12px;
font-weight: 600;
animation: roy-border-march 0.7s linear infinite;
}

.rc-border-neon-pulse {
width: 140px;
height: 80px;
background: #0a0a0a;
border: 2px solid #ec4899;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #f9a8d4;
font-size: 12px;
font-weight: 600;
animation: roy-border-neon 1.5s ease-in-out infinite;
}

.rc-border-polaroid {
width: 140px;
height: 110px;
background: #fff;
padding: 8px 8px 30px;
box-sizing: border-box;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-4deg);
}

.rc-border-ribbon {
width: 140px;
height: 90px;
background: #ef4444;
clip-path: polygon(0 0, 100% 0, 100% 100%, 52% 78%, 0 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
padding-bottom: 14px;
box-sizing: border-box;
}

.rc-border-sticker {
width: 140px;
height: 80px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border: 6px solid #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 700;
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
transform: rotate(-3deg);
}

.rc-border-torn-paper {
width: 140px;
height: 80px;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
clip-path: polygon(
0% 6%, 5% 0%, 12% 6%, 20% 1%, 28% 5%, 35% 0%, 42% 4%, 50% 1%, 58% 5%, 65% 0%, 72% 4%, 80% 1%, 88% 5%, 95% 0%, 100% 6%,
100% 94%, 95% 100%, 88% 94%, 80% 99%, 72% 95%, 65% 100%, 58% 96%, 50% 99%, 42% 95%, 35% 100%, 28% 96%, 20% 99%, 12% 95%, 5% 100%, 0% 94%
);
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
}

.rc-bounce-in-down {
animation: roy-bounce-in-down 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.rc-bounce-in-left {
animation: roy-bounce-in-left 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.rc-bounce-in-right {
animation: roy-bounce-in-right 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.rc-bounce-in-up {
animation: roy-bounce-in-up 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.rc-bounce-out {
animation: roy-bounce-out 1s ease-in both;
}

.rc-bounce-rotate {
animation: roy-bounce-rotate 1.1s cubic-bezier(0.28, 1.42, 0.55, 1) both;
}

.rc-breathe {
animation: roy-breathe 4s ease-in-out infinite;
}

.rc-btn-3d-push {
position: relative;
background: #84cc16;
color: #1a2e05;
border: none;
padding: 10px 24px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
box-shadow: 0 5px 0 #65a30d, 0 7px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rc-btn-arrow-slide {
background: #f97316;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.3s ease, background 0.3s ease;
}

.rc-btn-border-draw {
position: relative;
background: transparent;
color: #10b981;
border: 2px solid transparent;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
z-index: 1;
}

.rc-btn-border-glow {
background: #1e293b;
color: #14b8a6;
border: 2px solid rgba(20, 184, 166, 0.35);
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}

.rc-btn-bounce {
background: #f59e0b;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}

.rc-btn-expand {
background: #10b981;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
letter-spacing: 0;
transition: all 0.4s ease;
}

.rc-btn-fill-slide {
position: relative;
overflow: hidden;
z-index: 1;
background: transparent;
color: #10b981;
border: 2px solid #10b981;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: color 0.4s ease;
}

.rc-btn-flip {
background: #ec4899;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transform-style: preserve-3d;
transition: transform 0.6s ease, background 0.3s ease;
}

.rc-btn-glow {
background: #10b981;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}

.rc-btn-gradient {
background: linear-gradient(45deg, #10b981, #06b6d4, #8b5cf6, #ec4899, #10b981);
background-size: 300% 300%;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
animation: roy-gradient-shift 5s ease infinite;
transition: transform 0.3s ease;
}

.rc-btn-icon-slide {
background: #d946ef;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 0;
transition: padding 0.3s ease, gap 0.3s ease;
}

.rc-btn-lift {
background: #14b8a6;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
box-shadow: 0 4px 10px rgba(20, 184, 166, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rc-btn-liquid {
background: #06b6d4;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: border-radius 0.4s ease, background 0.4s ease;
}

.rc-btn-morph {
background: #8b5cf6;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rc-btn-neon {
background: #0a0a0a;
color: #06b6d4;
border: 2px solid #06b6d4;
padding: 10px 24px;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 0 5px #06b6d4, inset 0 0 5px rgba(6, 182, 212, 0.4);
text-shadow: 0 0 5px #06b6d4;
transition: all 0.3s ease;
}

.rc-btn-outline-fill {
position: relative;
background: transparent;
color: #f43f5e;
border: 2px solid #f43f5e;
padding: 10px 24px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}

.rc-btn-press {
background: #8b5cf6;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
box-shadow: 0 6px 0 #6d28d9, 0 8px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.rc-btn-pulse {
background: #ef4444;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: background 0.3s ease;
}

.rc-btn-ripple {
position: relative;
overflow: hidden;
background: #10b981;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}

.rc-btn-rotate {
background: #f59e0b;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: transform 0.3s ease, background 0.3s ease;
}

.rc-btn-shadow-push {
background: #ef4444;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
box-shadow: 5px 5px 0 #7f1d1d;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rc-btn-shine-sweep {
position: relative;
overflow: hidden;
background: #10b981;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}

.rc-btn-skew {
background: #ec4899;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: transform 0.3s ease, background 0.3s ease;
}

.rc-btn-slide-bg {
position: relative;
overflow: hidden;
background: #0f172a;
color: #f59e0b;
border: 2px solid #f59e0b;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
z-index: 1;
transition: color 0.4s ease;
}

.rc-btn-sparkle {
position: relative;
background: #1e293b;
color: #fde68a;
border: 1px solid #f59e0b;
padding: 10px 24px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: color 0.3s ease, box-shadow 0.3s ease;
}

.rc-card-flip {
perspective: 1000px;
width: 200px;
height: 120px;
}

.rc-card-flip-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}

.rc-card-flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}

.rc-card-glassmorphism {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
color: #f1f5f9;
}

.rc-card-gradient-border {
position: relative;
background: #0f172a;
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
}

.rc-card-hover-border {
position: relative;
background: #1e293b;
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
}

.rc-card-hover-color {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

.rc-card-hover-fade {
position: relative;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
overflow: hidden;
}

.rc-card-hover-flip {
background: #1e293b;
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transform-style: preserve-3d;
transition: transform 0.7s ease, background 0.4s ease, color 0.4s ease;
}

.rc-card-hover-glow {
background: #0f172a;
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.rc-card-hover-lift {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.rc-card-hover-press {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.rc-card-hover-push {
position: relative;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transform-style: preserve-3d;
transition: transform 0.35s ease;
}

.rc-card-hover-reveal {
position: relative;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
overflow: hidden;
}

.rc-card-hover-rotate {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
perspective: 800px;
transform-style: preserve-3d;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.rc-card-hover-skew {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.rc-card-hover-slide {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.rc-card-hover-swing {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transform-origin: top center;
transition: transform 0.3s ease;
}

.rc-card-hover-tada {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.3s ease;
}

.rc-card-hover-wobble {
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
transition: transform 0.3s ease;
}

.rc-card-hover-zoom {
background: linear-gradient(135deg, #134e4a, #1e293b);
border: 1px solid rgba(20, 184, 166, 0.25);
border-radius: 16px;
padding: 24px;
color: #ccfbf1;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.rc-card-neon {
background: #0f172a;
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 16px;
padding: 24px;
color: #d1fae5;
animation: roy-card-neon 2s ease-in-out infinite alternate;
}

.rc-card-shuffle {
position: relative;
width: 200px;
height: 220px;
perspective: 1000px;
}

.rc-card-spotlight {
position: relative;
overflow: hidden;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
}

.rc-clip-path-hexagon {
width: 160px;
height: 160px;
background:
conic-gradient(from 30deg, #f59e0b, #ef4444, #ec4899, #8b5cf6, #f59e0b);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: grid;
place-items: center;
animation: roy-sunburst-rotate 6s linear infinite;
}

.rc-clip-path-star {
width: 170px;
height: 170px;
background: linear-gradient(135deg, #fbbf24, #f59e0b 40%, #b45309);
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
);
display: grid;
place-items: center;
animation: roy-b10-cps-twinkle 1.8s ease-in-out infinite;
}

.rc-cube-face {
position: absolute;
width: 60px;
height: 60px;
border: 2px solid rgba(16, 185, 129, 0.5);
background: rgba(16, 185, 129, 0.08);
border-radius: 4px;
}

.rc-cube-rotate {
width: 60px;
height: 60px;
transform-style: preserve-3d;
animation: roy-cube-rotate 6s linear infinite;
}

.rc-cursor-arrow-bounce {
position: relative;
background: radial-gradient(circle at 50% 50%, #2a1a08, #0b1020);
overflow: hidden;
}

.rc-cursor-blob {
position: relative;
background: radial-gradient(circle at 50% 50%, #111827, #0b1020);
overflow: hidden;
}

.rc-cursor-crosshair {
position: relative;
background:
linear-gradient(0deg, transparent 49.5%, rgba(148, 163, 184, 0.08) 49.5% 50.5%, transparent 50.5%),
linear-gradient(90deg, transparent 49.5%, rgba(148, 163, 184, 0.08) 49.5% 50.5%, transparent 50.5%),
radial-gradient(circle at 50% 50%, #1a0f1f, #0b1020);
overflow: hidden;
}

.rc-cursor-firefly {
position: relative;
background: linear-gradient(135deg, #0a0f1f, #1a0f2e);
overflow: hidden;
}

.rc-cursor-glow-dot {
position: relative;
background: radial-gradient(circle at 50% 50%, #111827, #0b1020);
overflow: hidden;
}

.rc-cursor-gradient-trail {
position: relative;
background: radial-gradient(circle at 50% 50%, #1a0f2e, #0b1020);
overflow: hidden;
}

.rc-cursor-magnetic {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0b1020, #111827);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 10px;
cursor: pointer;
transition:
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}

.rc-cursor-pulse-ring {
position: relative;
background: radial-gradient(circle at 50% 50%, #1f0f2e, #0b1020);
overflow: hidden;
}

.rc-cursor-ring {
position: relative;
background: radial-gradient(circle at 50% 50%, #0c1426, #0b1020);
overflow: hidden;
}

.rc-cursor-ripple {
position: relative;
background: radial-gradient(circle at 50% 50%, #0c2a1f, #0b1020);
overflow: hidden;
}

.rc-cursor-spotlight {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e1b4b);
overflow: hidden;
}

.rc-cursor-trail {
position: relative;
background: radial-gradient(circle at 50% 50%, #1a0f2e, #0b1020);
overflow: hidden;
}

.rc-deep-sea {
position: relative;
width: 220px;
height: 180px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(180deg, #1a5f7a 0%, #0d3f56 40%, #061f2e 80%, #02101a 100%);
}

.rc-depth-shadow {
box-shadow:
1px 1px 0 #065f46,
2px 2px 0 #059669,
3px 3px 0 #047857,
4px 4px 0 #10b981,
5px 5px 0 rgba(16, 185, 129, 0.6),
6px 6px 0 rgba(16, 185, 129, 0.4),
7px 7px 0 rgba(16, 185, 129, 0.2),
8px 8px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}

.rc-door-open {
perspective: 800px;
width: 60px;
height: 80px;
position: relative;
background: rgba(16, 185, 129, 0.1);
border: 2px solid rgba(16, 185, 129, 0.3);
border-radius: 4px;
}

.rc-drawer-slide {
perspective: 800px;
width: 80px;
height: 60px;
position: relative;
background: rgba(16, 185, 129, 0.08);
border: 2px solid rgba(16, 185, 129, 0.25);
border-radius: 6px;
}

.rc-fade-in-bl {
animation: roy-fade-in-bl 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rc-fade-in-br {
animation: roy-fade-in-br 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rc-fade-in-right {
animation: roy-fade-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rc-fade-out-down {
animation: roy-fade-out-down 0.7s ease-in both;
}

.rc-fade-out-left {
animation: roy-fade-out-left 0.7s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

.rc-fade-out-right {
animation: roy-fade-out-right 0.7s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

.rc-fade-out-up {
animation: roy-fade-out-up 0.7s cubic-bezier(0.55, 0, 0.68, 0.53) both;
}

.rc-filter-blur-focus {
background: linear-gradient(135deg, #f7797d 0%, #fbd786 50%, #c6ffdd 100%);
filter: blur(8px) saturate(1.2);
animation: roy-filter-blur-focus 3s ease-in-out infinite;
}

.rc-filter-cinematic {
background: linear-gradient(135deg, #f12711 0%, #f5af19 40%, #2193b0 80%, #6dd5ed 100%);
filter: contrast(1.25) saturate(1.3) brightness(0.92) hue-rotate(-8deg) sepia(0.18);
}

.rc-filter-contrast {
background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 50%, #bdc3c7 100%);
filter: contrast(2.4) brightness(1.05);
}

.rc-filter-dramatic {
background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 30%, #ff758c 60%, #ff7e5f 100%);
filter: contrast(1.6) saturate(1.5) brightness(0.82);
}

.rc-filter-dreamy {
background: linear-gradient(135deg, #c471f5 0%, #fa71cd 40%, #89f7fe 100%);
filter: blur(1.2px) brightness(1.18) saturate(1.4) contrast(0.92);
}

.rc-filter-duotone {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 50%, #fbc2eb 100%);
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(3) contrast(1.3);
}

.rc-filter-emboss {
background: linear-gradient(135deg, #414d0b 0%, #727a17 50%, #d7e850 100%);
filter: grayscale(1) brightness(1.1) contrast(1.4)
drop-shadow(2px 2px 1px rgba(255,255,255,0.5))
drop-shadow(-2px -2px 1px rgba(0,0,0,0.6));
}

.rc-filter-glitch {
background: linear-gradient(135deg, #00f260 0%, #0575e6 50%, #f7971e 100%);
animation: roy-filter-glitch 1.2s steps(2, end) infinite;
}

.rc-filter-grayscale-hover {
background: linear-gradient(135deg, #fc466b 0%, #3f5efb 50%, #fc466b 100%);
filter: grayscale(1) brightness(0.85);
transition: filter 0.5s ease;
}

.rc-filter-halftone {
background:
radial-gradient(circle, rgba(0,0,0,0.85) 1px, transparent 1.6px) 0 0 / 5px 5px,
linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #ffe66d 100%);
filter: contrast(1.4) saturate(1.3);
}

.rc-filter-hue-rotate {
background: linear-gradient(135deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%);
animation: roy-filter-hue-rotate 4s linear infinite;
}

.rc-filter-invert {
background: linear-gradient(135deg, #ff6a00 0%, #ee0979 50%, #ff6a00 100%);
filter: invert(1) hue-rotate(180deg);
}

.rc-filter-saturate {
background: linear-gradient(135deg, #c94b4b 0%, #4b134f 50%, #c94b4b 100%);
filter: saturate(3.2) contrast(1.1);
}

.rc-filter-sepia {
background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 50%, #fef9d7 100%);
filter: sepia(0.85) contrast(1.1) brightness(1.05);
}

.rc-filter-vintage {
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 40%, #ff9ff3 80%, #48dbfb 100%);
filter: sepia(0.55) saturate(0.8) contrast(0.9) brightness(0.95) hue-rotate(-10deg);
}

.rc-flip-x {
perspective: 800px;
transition: transform 0.6s ease;
transform-style: preserve-3d;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 12px;
}

.rc-flip-y {
perspective: 800px;
transition: transform 0.6s ease;
transform-style: preserve-3d;
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
border-radius: 12px;
}

.rc-float {
animation: roy-float 3s ease-in-out infinite;
}

.rc-fold {
perspective: 800px;
width: 80px;
height: 60px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 6px;
transition: transform 0.8s ease;
transform-origin: top center;
}

.rc-form-checkbox-custom {
position: relative;
width: 32px;
height: 32px;
background: transparent;
border: 2px solid #10b981;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
}

.rc-form-error-shake {
position: relative;
width: 160px;
height: 40px;
padding: 0 14px;
background: rgba(239,68,68,0.08);
border: 1px solid #ef4444;
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
color: #fca5a5;
animation: roy-form-error-shake 0.5s ease-in-out infinite;
}

.rc-form-focus-glow {
position: relative;
width: 170px;
height: 40px;
padding: 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.55);
transition: all 0.3s ease;
}

.rc-form-label-float {
position: relative;
width: 170px;
height: 48px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px;
transition: all 0.3s ease;
}

.rc-form-placeholder-shimmer {
position: relative;
width: 180px;
height: 40px;
padding: 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
overflow: hidden;
}

.rc-form-radio-custom {
position: relative;
width: 32px;
height: 32px;
background: transparent;
border: 2px solid #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.rc-form-search-expand {
position: relative;
width: 56px;
height: 40px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 20px;
display: flex;
align-items: center;
padding: 0 14px;
font: 12px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.6);
overflow: hidden;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s ease;
}

.rc-form-success-check {
position: relative;
width: 160px;
height: 40px;
padding: 0 14px 0 38px;
background: rgba(16,185,129,0.1);
border: 1px solid #10b981;
border-radius: 10px;
display: flex;
align-items: center;
font: 12px/1 system-ui, sans-serif;
color: #6ee7b7;
}

.rc-form-toggle-switch {
position: relative;
width: 54px;
height: 28px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 14px;
transition: background 0.3s ease, border-color 0.3s ease;
}

.rc-form-underline-draw {
position: relative;
width: 180px;
height: 40px;
padding: 0 4px;
background: transparent;
border: none;
border-bottom: 2px solid rgba(255,255,255,0.18);
display: flex;
align-items: center;
font: 13px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
}

.rc-fortune-teller {
position: relative;
width: 200px;
height: 200px;
background: transparent;
}

.rc-frozen-ice {
position: relative;
width: 200px;
height: 160px;
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(ellipse 50% 40% at 25% 20%, rgba(255,255,255,0.7), transparent 60%),
radial-gradient(ellipse 40% 30% at 75% 75%, rgba(150,210,255,0.5), transparent 60%),
linear-gradient(135deg, #d4ebf7 0%, #a8d4ec 35%, #6fa8c8 70%, #cfe8f5 100%);
box-shadow:
inset 8px 12px 25px rgba(255,255,255,0.6),
inset -8px -12px 25px rgba(40,90,140,0.4),
0 10px 30px rgba(80,140,180,0.4);
border: 1px solid rgba(255,255,255,0.7);
backdrop-filter: blur(2px);
}

.rc-glass-acrylic {
background: rgba(245, 247, 250, 0.65);
backdrop-filter: blur(30px) saturate(140%);
-webkit-backdrop-filter: blur(30px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.rc-glass-border-glow {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
animation: roy-glass-border-pulse 3s ease-in-out infinite alternate;
}

.rc-glass-claymorphism {
background: linear-gradient(145deg, #fef3f8, #fbcfe8);
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
8px 8px 16px rgba(190, 24, 93, 0.18),
-4px -4px 12px rgba(255, 255, 255, 0.9),
inset 2px 2px 4px rgba(255, 255, 255, 0.7),
inset -2px -2px 6px rgba(190, 24, 93, 0.12);
}

.rc-glass-depth-layer {
position: relative;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 -1px 0 rgba(0, 0, 0, 0.05) inset,
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.12),
0 20px 40px rgba(0, 0, 0, 0.15);
color: #1d1d1f;
}

.rc-glass-frosted {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.rc-glass-frosted-dark {
background: rgba(20, 20, 35, 0.55);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rc-glass-liquid {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px) brightness(1.1) contrast(1.05) hue-rotate(15deg);
-webkit-backdrop-filter: blur(8px) brightness(1.1) contrast(1.05) hue-rotate(15deg);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px;
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.4),
inset 0 -2px 6px rgba(0, 0, 0, 0.1),
0 10px 30px rgba(0, 0, 0, 0.15);
animation: roy-glass-liquid-refract 6s ease-in-out infinite alternate;
}

.rc-glass-neumorphism {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 8px 8px 16px #b8bcc2, -8px -8px 16px #ffffff;
}

.rc-glass-neumorphism-inset {
background: #e0e5ec;
border-radius: 16px;
box-shadow: inset 6px 6px 12px #b8bcc2, inset -6px -6px 12px #ffffff;
}

.rc-glass-noise-overlay {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.rc-glass-prism {
position: relative;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-radius: 16px;
color: #fff;
}

.rc-glass-reflection {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.rc-glass-transparent-blur {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.rc-glass-vibrant {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(236, 72, 153, 0.28));
backdrop-filter: blur(16px) saturate(220%) brightness(1.1);
-webkit-backdrop-filter: blur(16px) saturate(220%) brightness(1.1);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rc-gold-leaf {
position: relative;
width: 200px;
height: 160px;
border-radius: 8px;
background:
radial-gradient(ellipse 30% 25% at 20% 25%, #fff7d0, transparent 55%),
radial-gradient(ellipse 25% 20% at 75% 70%, #c8951c, transparent 60%),
radial-gradient(ellipse 20% 18% at 65% 30%, #ffe98a, transparent 55%),
radial-gradient(ellipse 28% 22% at 30% 75%, #b8821a, transparent 60%),
linear-gradient(115deg,
#b8821a 0%,
#fff3b0 12%,
#d4a017 28%,
#ffe98a 42%,
#a87614 58%,
#fff3b0 72%,
#c8951c 88%,
#8b5a0f 100%);
background-size: 220% 220%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
box-shadow:
inset 0 0 20px rgba(0,0,0,0.25),
inset 6px 8px 14px rgba(255,245,200,0.4),
0 8px 22px rgba(80,50,0,0.4);
filter: contrast(1.1) saturate(1.2);
animation: roy-b11-gold-leaf-shimmer 6s ease-in-out infinite;
}

.rc-head-shake {
animation: roy-head-shake 1s ease-in-out;
}

.rc-heat-haze {
position: relative;
width: 220px;
height: 180px;
border-radius: 8px;
overflow: hidden;
background:
linear-gradient(180deg, #87ceeb 0%, #ffd89b 60%, #ff6b35 100%);
}

.rc-hover-border-draw {
position: relative;
box-sizing: border-box;
}

.rc-hover-color-shift {
background: linear-gradient(135deg, #10b981, #059669);
transition: all 0.4s ease;
background-size: 200% 200%;
background-position: 0% 50%;
}

.rc-hover-depth {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.06);
}

.rc-hover-drop-shadow {
transition: filter 0.35s ease, transform 0.35s ease;
}

.rc-hover-fade-overlay {
position: relative;
isolation: isolate;
}

.rc-hover-glow-border {
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
transition: all 0.3s ease;
}

.rc-hover-grayscale-to-color {
filter: grayscale(100%);
transition: filter 0.5s ease;
}

.rc-hover-hue-rotate {
transition: filter 0.3s ease;
}

.rc-hover-neon-flicker {
transition: box-shadow 0.2s ease;
}

.rc-hover-opacity {
transition: opacity 0.3s ease;
}

.rc-hover-overlay-reveal {
position: relative;
overflow: hidden;
transition: color 0.3s ease;
}

.rc-hover-press {
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 6px 0 #047857, 0 8px 14px rgba(0, 0, 0, 0.3);
}

.rc-hover-push-up {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}

.rc-hover-scale {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}

.rc-hover-shadow-grow {
transition: transform 0.3s ease,
box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.rc-hover-slide-overlay {
position: relative;
overflow: hidden;
transition: color 0.3s ease;
}

.rc-hover-tilt-rotate {
transition: transform 0.3s ease;
transform-style: preserve-3d;
perspective: 1000px;
}

.rc-hover-underline-slide {
position: relative;
display: inline-block;
text-decoration: none;
}

.rc-hover-zoom-blur {
transition: transform 0.4s ease, filter 0.4s ease;
}

.rc-jack-in-box {
animation: roy-jack-in-box 1s ease both;
}

.rc-jiggle {
animation: roy-jiggle 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
transform-origin: center;
}

.rc-kaleidoscope {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background: #000;
box-shadow: 0 0 0 6px #8b6914, 0 12px 30px rgba(0,0,0,0.5);
}

.rc-linear-aurora-glow {
position: relative;
background: #0a0a0b;
overflow: hidden;
}

.rc-linear-card-lift {
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 14px;
box-shadow: 0 0 0 0 rgba(94, 106, 210, 0);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.35s ease;
}

.rc-linear-dark-surface {
background: linear-gradient(180deg, #18181b 0%, #0f0f10 100%);
color: #e4e4e7;
border: 1px solid #27272a;
border-radius: 12px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 4px 16px rgba(0, 0, 0, 0.5);
}

.rc-linear-depth-shadow {
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.rc-linear-glow-border {
position: relative;
background: #111113;
color: #fafafa;
border-radius: 12px;
z-index: 0;
}

.rc-linear-gradient-mesh-bg {
background-color: #0a0a0b;
background-image:
radial-gradient(at 20% 20%, rgba(94, 106, 210, 0.35) 0px, transparent 50%),
radial-gradient(at 80% 10%, rgba(139, 92, 246, 0.3) 0px, transparent 50%),
radial-gradient(at 70% 80%, rgba(236, 72, 153, 0.25) 0px, transparent 50%),
radial-gradient(at 10% 90%, rgba(59, 130, 246, 0.25) 0px, transparent 50%);
background-size: 200% 200%;
animation: roy-mesh-drift 18s ease-in-out infinite;
}

.rc-linear-gradient-sweep {
position: relative;
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 8px;
overflow: hidden;
z-index: 0;
}

.rc-linear-icon-bounce {
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 8px;
transition: background-color 0.25s ease, border-color 0.25s ease;
}

.rc-linear-magnetic-pull {
background: #5e6ad2;
color: #fff;
border-radius: 8px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change: transform;
}

.rc-linear-noise-overlay {
position: relative;
background: #0a0a0b;
color: #e4e4e7;
border: 1px solid #1a1a1d;
border-radius: 10px;
overflow: hidden;
}

.rc-linear-shimmer-hover {
position: relative;
background: #0f0f10;
color: #e4e4e7;
overflow: hidden;
border: 1px solid #27272a;
}

.rc-linear-spotlight {
position: relative;
background: #0d0d0f;
color: #e4e4e7;
border: 1px solid #1f1f23;
border-radius: 12px;
overflow: hidden;
}

.rc-linear-text-glow {
color: #a1a1aa;
font-weight: 600;
letter-spacing: 0.02em;
transition: color 0.3s ease, text-shadow 0.3s ease;
}

.rc-liquid-drop {
position: relative;
width: 180px;
height: 200px;
background: linear-gradient(180deg, #1d6a8c 0%, #0d3f56 100%);
overflow: hidden;
border-radius: 8px;
}

.rc-liquid-metal {
position: relative;
width: 200px;
height: 160px;
border-radius: 50% 50% 45% 55% / 60% 55% 45% 40%;
background:
radial-gradient(ellipse 60% 40% at 30% 25%, rgba(255,255,255,0.95), transparent 60%),
radial-gradient(ellipse 50% 35% at 70% 70%, rgba(120,130,145,0.6), transparent 65%),
linear-gradient(125deg,
#d6dbe2 0%,
#f4f6f9 12%,
#8a909a 26%,
#e9edf2 40%,
#5e6571 52%,
#c9ced6 66%,
#3e434c 78%,
#aab0ba 90%,
#6b7280 100%);
background-size: 200% 200%;
box-shadow:
inset -8px -10px 20px rgba(0,0,0,0.45),
inset 8px 10px 18px rgba(255,255,255,0.55),
0 14px 30px rgba(0,0,0,0.35);
filter: contrast(1.15) saturate(0.85);
animation: roy-b11-liquid-metal-flow 7s ease-in-out infinite;
}

.rc-loader-bouncing-grid {
width: 42px;
height: 42px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 3px;
}

.rc-loader-chasing-dots {
width: 40px;
height: 40px;
position: relative;
animation: roy-chasing-rotate 2s infinite linear;
}

.rc-loader-circle-notch {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #10b981;
border-top-color: transparent;
border-left-color: transparent;
animation: roy-circle-notch 0.9s linear infinite;
}

.rc-loader-dual-ring {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid rgba(16, 185, 129, 0.15);
border-top-color: #10b981;
border-bottom-color: #06b6d4;
animation: roy-sunburst-rotate 1.2s linear infinite;
}

.rc-loader-fading-dots {
width: 80px;
text-align: center;
}

.rc-loader-folding-cube {
width: 40px;
height: 40px;
position: relative;
transform: rotateZ(45deg);
}

.rc-loader-indeterminate {
width: 200px;
height: 4px;
background-color: rgba(16, 185, 129, 0.15);
border-radius: 2px;
position: relative;
overflow: hidden;
}

.rc-loader-line-scale {
display: flex;
gap: 4px;
align-items: center;
height: 40px;
}

.rc-loader-pacman {
position: relative;
width: 60px;
height: 40px;
}

.rc-loader-progress-bar {
width: 200px;
height: 8px;
background-color: rgba(16, 185, 129, 0.15);
border-radius: 4px;
position: relative;
overflow: hidden;
}

.rc-loader-pulse-ring {
width: 40px;
height: 40px;
position: relative;
}

.rc-loader-skeleton {
width: 200px;
height: 12px;
background-color: rgba(255, 255, 255, 0.06);
border-radius: 4px;
position: relative;
overflow: hidden;
}

.rc-loader-three-bounce {
width: 80px;
text-align: center;
}

.rc-loader-whale {
width: 50px;
height: 40px;
position: relative;
}

.rc-material-container-transform {
animation: roy-mat-container 0.6s cubic-bezier(0.2, 0, 0, 1) both;
transform-origin: center;
}

.rc-material-elevation-1 {
background: #FFFBFE;
color: #1C1B1F;
border-radius: 12px;
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.30),
0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.rc-material-elevation-3 {
background: #FFFBFE;
color: #1C1B1F;
border-radius: 16px;
box-shadow:
0px 1px 3px rgba(0, 0, 0, 0.30),
0px 4px 8px 3px rgba(0, 0, 0, 0.15);
}

.rc-material-elevation-5 {
background: #FFFBFE;
color: #1C1B1F;
border-radius: 28px;
box-shadow:
0px 1px 3px rgba(0, 0, 0, 0.30),
0px 14px 28px 5px rgba(0, 0, 0, 0.25);
}

.rc-material-emphasized {
animation: roy-mat-emphasized 0.5s cubic-bezier(0.2, 0, 0, 1) both;
}

.rc-material-emphasized-decel {
animation: roy-mat-emph-decel 0.45s cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

.rc-material-fab-scale {
animation: roy-mat-fab-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
border-radius: 16px;
background: #6750A4;
color: #fff;
}

.rc-material-spring-down {
animation: roy-mat-spring-down 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rc-material-spring-up {
animation: roy-mat-spring-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rc-material-state-layer {
position: relative;
background: #6750A4;
color: #fff;
}

.rc-material-state-layer-surface {
position: relative;
background: #1C1B1F;
color: #E6E1E5;
border-radius: 12px;
overflow: hidden;
}

.rc-material-surface-tint {
position: relative;
background: rgba(103, 80, 164, 0.08);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(103, 80, 164, 0.15);
border-radius: 16px;
color: #1C1B1F;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(103, 80, 164, 0.08);
}

.rc-micro-accordion-expand {
position: relative;
width: 140px;
height: 90px;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rc-micro-badge-bounce {
position: relative;
width: 64px;
height: 64px;
background: #f1f5f9;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.rc-micro-checkbox-check {
position: relative;
width: 38px;
height: 38px;
background: #ffffff;
border: 2px solid #10b981;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.rc-micro-dropdown-reveal {
position: relative;
width: 120px;
height: 90px;
}

.rc-micro-fab-expand {
position: relative;
width: 150px;
height: 90px;
}

.rc-micro-modal-scale {
position: relative;
width: 150px;
height: 90px;
overflow: hidden;
border-radius: 8px;
background: #f1f5f9;
}

.rc-micro-progress-fill {
position: relative;
width: 140px;
height: 14px;
background: #e2e8f0;
border-radius: 7px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.rc-micro-radio-select {
position: relative;
width: 38px;
height: 38px;
background: #ffffff;
border: 2px solid #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.rc-micro-tab-indicator {
position: relative;
width: 150px;
height: 50px;
}

.rc-micro-toast-slide {
position: relative;
width: 150px;
height: 80px;
overflow: hidden;
border-radius: 8px;
}

.rc-micro-toggle-switch {
position: relative;
width: 56px;
height: 30px;
background: #cbd5e1;
border-radius: 15px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
animation: roy-micro-toggle-bg 3s ease-in-out infinite;
}

.rc-micro-tooltip-appear {
position: relative;
width: 130px;
height: 70px;
}

.rc-misc-bubbles {
background:
radial-gradient(circle at 20% 100%, rgba(255,255,255,0.7) 0 4px, transparent 5px) 0 0 / 60px 60px,
radial-gradient(circle at 50% 100%, rgba(255,255,255,0.5) 0 6px, transparent 7px) 0 0 / 80px 80px,
radial-gradient(circle at 80% 100%, rgba(255,255,255,0.6) 0 3px, transparent 4px) 0 0 / 50px 50px,
linear-gradient(180deg, #2193b0, #6dd5ed);
background-repeat: repeat;
animation: roy-misc-bubbles 4s linear infinite;
}

.rc-misc-confetti {
background:
radial-gradient(circle at 15% 0%, #ff6b6b 0 3px, transparent 4px) 0 0 / 40px 40px,
radial-gradient(circle at 45% 0%, #feca57 0 3px, transparent 4px) 0 0 / 55px 55px,
radial-gradient(circle at 75% 0%, #48dbfb 0 3px, transparent 4px) 0 0 / 45px 45px,
radial-gradient(circle at 30% 0%, #1dd1a1 0 3px, transparent 4px) 0 0 / 60px 60px,
radial-gradient(circle at 90% 0%, #ff9ff3 0 3px, transparent 4px) 0 0 / 50px 50px,
linear-gradient(135deg, #1a1a2e, #16213e);
background-repeat: repeat;
animation: roy-misc-confetti 2.5s linear infinite;
}

.rc-misc-fireflies {
background:
radial-gradient(circle at 20% 30%, rgba(212,255,127,0.9) 0 2px, transparent 5px) 0 0 / 100px 100px,
radial-gradient(circle at 70% 60%, rgba(212,255,127,0.7) 0 2.5px, transparent 6px) 0 0 / 130px 130px,
radial-gradient(circle at 40% 80%, rgba(212,255,127,0.8) 0 1.5px, transparent 4px) 0 0 / 90px 90px,
linear-gradient(180deg, #0f0c29, #302b63, #24243e);
background-repeat: repeat;
animation: roy-misc-fireflies 5s ease-in-out infinite alternate;
}

.rc-misc-fireworks {
position: relative;
background: linear-gradient(180deg, #0a0a23, #1a1a4e);
overflow: hidden;
}

.rc-misc-hologram {
position: relative;
width: 80px;
height: 80px;
background: linear-gradient(115deg,
#ff006e 0%, #8338ec 25%, #3a86ff 50%, #06ffa5 75%, #ffbe0b 100%);
background-size: 400% 100%;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 0 22px rgba(131,56,236,0.45);
animation: roy-misc-hologram 4s linear infinite;
}

.rc-misc-pulse-ring-expand {
position: relative;
width: 80px;
height: 80px;
background: transparent;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.rc-misc-rain {
background:
linear-gradient(105deg, transparent 0 48%, rgba(174,194,224,0.6) 48% 50%, transparent 50% 100%) 0 0 / 15px 30px,
linear-gradient(105deg, transparent 0 49%, rgba(174,194,224,0.35) 49% 50%, transparent 50% 100%) 0 0 / 25px 40px,
linear-gradient(180deg, #1a2a3a, #2c3e50);
background-repeat: repeat;
animation: roy-misc-rain 0.6s linear infinite;
}

.rc-misc-ripple-click {
position: relative;
width: 80px;
height: 80px;
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.3);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
}

.rc-misc-scan-line {
position: relative;
background:
repeating-linear-gradient(0deg, rgba(16,185,129,0.06) 0 2px, transparent 2px 4px),
linear-gradient(180deg, #0a1a14, #142822);
overflow: hidden;
}

.rc-misc-shimmer-overlay {
position: relative;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #10b981, #34d399);
border-radius: 16px;
overflow: hidden;
}

.rc-misc-snow {
background:
radial-gradient(circle at 10% 0%, #fff 0 2px, transparent 3px) 0 0 / 30px 30px,
radial-gradient(circle at 60% 0%, #fff 0 1.5px, transparent 2px) 0 0 / 45px 45px,
radial-gradient(circle at 80% 0%, #fff 0 2.5px, transparent 3px) 0 0 / 35px 35px,
radial-gradient(circle at 30% 0%, rgba(255,255,255,0.7) 0 1px, transparent 2px) 0 0 / 25px 25px,
linear-gradient(180deg, #0f2027, #203a43, #2c5364);
background-repeat: repeat;
animation: roy-misc-snow 3s linear infinite;
}

.rc-misc-sparkles {
background:
radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 2px) 0 0 / 50px 50px,
radial-gradient(circle at 65% 75%, #fff 0 1.5px, transparent 2.5px) 0 0 / 70px 70px,
radial-gradient(circle at 85% 15%, #fff 0 1px, transparent 2px) 0 0 / 40px 40px,
radial-gradient(circle at 35% 85%, #fff 0 2px, transparent 3px) 0 0 / 60px 60px,
linear-gradient(135deg, #0a0a23, #1a1a4e);
background-repeat: repeat;
animation: roy-misc-sparkles 1.8s ease-in-out infinite alternate;
}

.rc-misc-typewriter {
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
color: #10b981;
overflow: hidden;
white-space: nowrap;
border-right: 3px solid #10b981;
width: 0;
animation:
roy-misc-typewriter-type 2.5s steps(6) infinite,
roy-misc-typewriter-cursor 0.6s step-end infinite;
}

.rc-misc-vhs-effect {
position: relative;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 4px),
linear-gradient(135deg, #2a0845, #6441a5);
overflow: hidden;
}

.rc-misc-wave {
background:
linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.6) 50%, transparent 100%) 0 30% / 40px 4px repeat-x,
linear-gradient(90deg, transparent 0%, rgba(20,184,166,0.5) 50%, transparent 100%) 0 50% / 30px 3px repeat-x,
linear-gradient(90deg, transparent 0%, rgba(52,211,153,0.5) 50%, transparent 100%) 0 70% / 50px 4px repeat-x,
linear-gradient(180deg, #04293a, #063b52);
animation: roy-misc-wave 1.5s linear infinite;
}

.rc-molten-lava {
position: relative;
width: 220px;
height: 160px;
border-radius: 14px;
overflow: hidden;
background: #1a0805;
box-shadow: 0 0 30px rgba(255,80,0,0.45), inset 0 0 40px rgba(0,0,0,0.5);
}

.rc-morph-blob {
position: relative;
width: 180px;
height: 180px;
background:
radial-gradient(circle at 30% 30%, #ff6ec4, #7873f5 70%);
box-shadow: 0 12px 40px rgba(120,80,255,0.5);
animation: roy-b11-morph-blob 8s ease-in-out infinite;
}

.rc-natural-drop {
animation: roy-natural-drop 1s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.rc-nav-accordion {
position: relative;
width: 180px;
height: 34px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.8);
overflow: hidden;
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s ease;
}

.rc-nav-breadcrumb {
position: relative;
width: 240px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font: 11px/1 system-ui, sans-serif;
letter-spacing: 0.05em;
}

.rc-nav-dropdown {
position: relative;
width: 180px;
height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.8);
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s ease;
}

.rc-nav-menu-fade {
position: relative;
width: 220px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
overflow: hidden;
letter-spacing: 0.15em;
}

.rc-nav-menu-scale {
position: relative;
width: 220px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
letter-spacing: 0.15em;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rc-nav-menu-slide {
position: relative;
width: 220px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.7);
overflow: hidden;
letter-spacing: 0.15em;
}

.rc-nav-pagination {
position: relative;
width: 200px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.6);
letter-spacing: 0.3em;
}

.rc-nav-progress-indicator {
position: relative;
width: 120px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.rc-nav-stepper {
position: relative;
width: 220px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}

.rc-nav-tabs-underline {
position: relative;
width: 200px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font: 11px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.6);
letter-spacing: 0.12em;
}

.rc-neon-sign {
position: relative;
width: 200px;
height: 160px;
border-radius: 12px;
background: radial-gradient(ellipse at 50% 50%, #1a0833 0%, #050010 100%);
display: grid;
place-items: center;
overflow: hidden;
}

.rc-oil-slick {
position: relative;
width: 220px;
height: 160px;
border-radius: 16px;
overflow: hidden;
background: radial-gradient(ellipse at 50% 60%, #0a0d12 0%, #02040a 100%);
}

.rc-origami-fold {
position: relative;
width: 200px;
height: 180px;
background: #fafafa;
clip-path: polygon(
50% 0%, 100% 35%, 75% 100%, 25% 100%, 0% 35%);
}

.rc-page-circle-reveal {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-page-cube {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
perspective: 700px;
}

.rc-page-curtain {
position: relative;
background: linear-gradient(135deg, #7c3aed, #db2777);
overflow: hidden;
}

.rc-page-dissolve {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-page-fade {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-page-flip {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
perspective: 800px;
}

.rc-page-liquid {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-page-mask-reveal {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-page-shutter {
position: relative;
background: linear-gradient(135deg, #f59e0b, #ef4444);
overflow: hidden;
}

.rc-page-slide-left {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-page-slide-up {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-page-zoom {
position: relative;
background: linear-gradient(135deg, #0f172a, #1e293b);
overflow: hidden;
}

.rc-paper-flip {
position: relative;
width: 180px;
height: 220px;
perspective: 1200px;
background: transparent;
}

.rc-particles-bubbles {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #0e7490 0%, #06b6d4 50%, #0891b2 100%);
}

.rc-particles-confetti-burst {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: radial-gradient(circle at center, #1a1a3e 0%, #0f0f1e 100%);
}

.rc-particles-dust {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(135deg, #4a3520 0%, #6b4e2e 40%, #8b6b3a 70%, #5a3f25 100%);
}

.rc-particles-fire {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #2d0a00 0%, #4a1500 40%, #1a0500 100%);
}

.rc-particles-fireflies {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #0a1f0a 0%, #14281a 50%, #0a1f12 100%);
}

.rc-particles-floating-dots {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.rc-particles-orbiting {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: radial-gradient(circle at center, #1e1b4b 0%, #0f0a2e 60%, #050314 100%);
}

.rc-particles-rain {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1a2533 0%, #243447 50%, #161e2a 100%);
}

.rc-particles-smoke {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #0f0f0f 100%);
}

.rc-particles-snow-fall {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1e2a4a 0%, #2c3e6b 50%, #1a2540 100%);
}

.rc-particles-sparks {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: linear-gradient(180deg, #1a0a00 0%, #2d1100 50%, #1a0a00 100%);
}

.rc-particles-stars-twinkle {
position: relative;
overflow: hidden;
display: block;
padding: 0;
background: radial-gradient(ellipse at top, #1a1a4e 0%, #0a0a23 60%, #050511 100%);
}

.rc-pendulum {
animation: roy-pendulum 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
transform-origin: top center;
}

.rc-pendulum-swing-spring {
transform-origin: top center;
animation: roy-pendulum-spring 1.6s cubic-bezier(0.4, 0, 0.6, 1) both;
}

.rc-perspective-tilt {
transform-style: preserve-3d;
transform: perspective(800px) rotateX(5deg) rotateY(-5deg);
transition: transform 0.4s ease;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}

.rc-pixel-art {
width: 100%;
min-height: 240px;
background:
conic-gradient(from 0deg at 50% 50%,
#ff004d 0deg 45deg,
#ffa300 45deg 90deg,
#ffec27 90deg 135deg,
#00e436 135deg 180deg,
#29adff 180deg 225deg,
#83769c 225deg 270deg,
#ff77a8 270deg 315deg,
#ff004d 315deg 360deg);
background-size: 32px 32px;
image-rendering: pixelated;
position: relative;
border-radius: 0;
filter: contrast(1.1) saturate(1.3);
}

.rc-pop-in {
animation: roy-pop-in 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}

.rc-pop-out {
animation: roy-pop-out 0.5s cubic-bezier(0.32, -0.28, 0.82, 0.11) both;
}

.rc-prism-rainbow {
position: relative;
width: 220px;
height: 160px;
background: #0a0a14;
overflow: hidden;
border-radius: 8px;
}

.rc-pulse-soft {
animation: roy-pulse-soft 2.5s ease-in-out infinite;
}

.rc-rotate-3d {
transform-style: preserve-3d;
background: linear-gradient(135deg, #10b981, #8b5cf6);
border-radius: 12px;
animation: roy-rotate-3d 4s linear infinite;
}

.rc-rotate-spin {
animation: roy-rotate-spin 2s linear infinite;
}

.rc-rotate-x {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 8px;
transform-style: preserve-3d;
animation: roy-rotate-x 3s linear infinite;
}

.rc-rotate-y {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
border-radius: 8px;
transform-style: preserve-3d;
animation: roy-rotate-y 3s linear infinite;
}

.rc-roulette-spin {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background:
repeating-conic-gradient(from 0deg,
#c8102e 0deg 15deg,
#1a1a1a 15deg 30deg,
#c8102e 30deg 45deg,
#1a1a1a 45deg 60deg,
#c8102e 60deg 75deg,
#1a1a1a 75deg 90deg,
#c8102e 90deg 105deg,
#1a1a1a 105deg 120deg,
#c8102e 120deg 135deg,
#1a1a1a 135deg 150deg,
#c8102e 150deg 165deg,
#1a1a1a 165deg 180deg,
#c8102e 180deg 195deg,
#1a1a1a 195deg 210deg,
#c8102e 210deg 225deg,
#1a1a1a 225deg 240deg,
#c8102e 240deg 255deg,
#1a1a1a 255deg 270deg,
#c8102e 270deg 285deg,
#1a1a1a 285deg 300deg,
#c8102e 300deg 315deg,
#1a1a1a 315deg 330deg,
#c8102e 330deg 345deg,
#1a1a1a 345deg 360deg);
border: 8px solid #8b6914;
box-shadow: 0 0 0 4px #f4d03f, 0 12px 30px rgba(0,0,0,0.5);
animation: roy-b11-roulette-spin 4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.rc-rubber-snap-back {
animation: roy-rubber-snap 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rc-scale-3d {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #10b981, #065f46);
border-radius: 8px;
transform-style: preserve-3d;
transition: transform 0.5s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.rc-scale-compress {
animation: roy-scale-compress 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
transform-origin: center;
}

.rc-scale-expand {
animation: roy-scale-expand 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center;
}

.rc-scale-grow {
animation: roy-scale-grow 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rc-scale-shrink {
animation: roy-scale-shrink 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rc-scroll-driven-blur {
animation: roy-scroll-blur linear both;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}

.rc-scroll-driven-color {
animation: roy-scroll-color linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}

.rc-scroll-driven-fade {
animation: roy-scroll-fade linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}

.rc-scroll-driven-progress-ring {
position: relative;
border-radius: 50%;
background:
conic-gradient(#5e6ad2 0deg, #5e6ad2 0deg, #27272a 0deg, #27272a 360deg);
animation: roy-scroll-ring linear both;
animation-timeline: scroll(root);
animation-range: 0 100%;
}

.rc-scroll-driven-rotate {
animation: roy-scroll-rotate linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}

.rc-scroll-driven-scale {
animation: roy-scroll-scale linear both;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}

.rc-scroll-driven-sticky {
position: sticky;
top: 0;
background: #18181b;
color: #fafafa;
border: 1px solid #27272a;
border-radius: 8px;
animation: roy-scroll-sticky linear both;
animation-timeline: scroll(root);
animation-range: 0 100px;
}

.rc-scroll-driven-translate {
animation: roy-scroll-translate linear both;
animation-timeline: view();
animation-range: entry 0% cover 60%;
}

.rc-scroll-fade-out {
animation: roy-scroll-fade-out 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

.rc-scroll-horizontal {
position: relative;
width: 100%;
height: 6px;
background: rgba(148, 163, 184, 0.25);
border-radius: 999px;
overflow: hidden;
}

.rc-scroll-indicator {
position: relative;
width: 28px;
height: 46px;
border: 2px solid rgba(16, 185, 129, 0.65);
border-radius: 14px;
background: transparent;
}

.rc-scroll-parallax-slow {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0f172a, #1e293b);
}

.rc-scroll-progress-bar {
position: relative;
width: 100%;
height: 8px;
background: rgba(148, 163, 184, 0.25);
border-radius: 999px;
overflow: hidden;
}

.rc-scroll-reveal-left {
animation: roy-scroll-reveal-left 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

.rc-scroll-reveal-right {
animation: roy-scroll-reveal-right 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

.rc-scroll-reveal-rotate {
animation: roy-scroll-reveal-rotate 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

.rc-scroll-reveal-scale {
animation: roy-scroll-reveal-scale 2.6s ease-in-out infinite;
will-change: opacity, transform;
}

.rc-scroll-reveal-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}

.rc-scroll-sticky-header {
display: flex;
align-items: center;
height: 64px;
padding: 0 22px;
background: linear-gradient(90deg, #0f172a, #1e293b);
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 10px;
color: #e2e8f0;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 6px 20px rgba(2, 6, 23, 0.4);
animation: roy-scroll-sticky-shrink 3.2s ease-in-out infinite;
}

.rc-scroll-timeline-spin {
width: 140px;
height: 140px;
border-radius: 24px;
background:
conic-gradient(from 0deg, #ec4899, #8b5cf6, #06b6d4, #10b981, #ec4899);
display: grid;
place-items: center;
color: #fff;
font: 700 12px/1.2 system-ui, sans-serif;
letter-spacing: 0.15em;
text-align: center;
animation: roy-rotate-spin 1s linear;
animation-timeline: scroll(root block);
}

.rc-skew-3d {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
border-radius: 8px;
transform: perspective(800px) skew(-15deg, 5deg);
transition: transform 0.5s ease;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3);
}

.rc-slide-diagonal {
animation: roy-slide-diagonal 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.rc-slide-in-bottom {
animation: roy-slide-in-bottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.rc-slide-in-top {
animation: roy-slide-in-top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.rc-slide-out-bottom {
animation: roy-slide-out-bottom 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.rc-slide-out-top {
animation: roy-slide-out-top 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.rc-slide-rotate-in {
animation: roy-slide-rotate-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rc-slot-machine {
position: relative;
width: 200px;
height: 160px;
background: linear-gradient(180deg, #b8860b 0%, #8b6914 50%, #5a3d0a 100%);
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 10px 25px rgba(0,0,0,0.4), inset 0 2px 6px rgba(255,220,100,0.4);
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}

.rc-snap-in {
animation: roy-snap-in 0.55s cubic-bezier(0.16, 1.32, 0.5, 1) both;
transform-origin: center;
}

.rc-soap-bubble {
position: relative;
width: 180px;
height: 180px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.05) 18%, transparent 32%),
radial-gradient(circle at 70% 65%, rgba(255,0,200,0.35), transparent 40%),
radial-gradient(circle at 30% 75%, rgba(0,255,200,0.35), transparent 40%),
radial-gradient(circle at 75% 25%, rgba(255,220,0,0.3), transparent 40%),
conic-gradient(from 30deg,
rgba(255,80,180,0.35),
rgba(80,200,255,0.35),
rgba(180,255,120,0.35),
rgba(255,200,80,0.35),
rgba(180,80,255,0.35),
rgba(255,80,180,0.35));
box-shadow:
inset 0 0 40px rgba(255,255,255,0.25),
inset -20px -25px 50px rgba(80,0,120,0.25),
inset 15px 20px 40px rgba(0,180,255,0.25),
0 8px 30px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.4);
filter: saturate(1.2);
animation: roy-b11-soap-bubble-float 6s ease-in-out infinite;
}

.rc-spiral-galaxy {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, #1a0033 0%, #050010 70%, #000 100%);
box-shadow: 0 0 40px rgba(120,80,255,0.4);
}

.rc-spring-in {
animation: roy-spring-in 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
transform-origin: center bottom;
}

.rc-stained-glass {
position: relative;
width: 200px;
height: 180px;
border-radius: 8px;
overflow: hidden;
background:
linear-gradient(115deg, #1a1a1a 0 8%, transparent 8% 9%, #1a1a1a 9% 17%, transparent 17% 18%, #1a1a1a 18% 26%, transparent 26% 27%, #1a1a1a 27% 35%, transparent 35% 36%, #1a1a1a 36% 44%, transparent 44% 45%, #1a1a1a 45% 53%, transparent 53% 54%, #1a1a1a 54% 62%, transparent 62% 63%, #1a1a1a 63% 71%, transparent 71% 72%, #1a1a1a 72% 80%, transparent 80% 81%, #1a1a1a 81% 89%, transparent 89% 90%, #1a1a1a 90% 100%),
linear-gradient(25deg, #1a1a1a 0 9%, transparent 9% 10%, #1a1a1a 10% 19%, transparent 19% 20%, #1a1a1a 20% 29%, transparent 29% 30%, #1a1a1a 30% 39%, transparent 39% 40%, #1a1a1a 40% 49%, transparent 49% 50%, #1a1a1a 50% 59%, transparent 59% 60%, #1a1a1a 60% 69%, transparent 69% 70%, #1a1a1a 70% 79%, transparent 79% 80%, #1a1a1a 80% 89%, transparent 89% 90%, #1a1a1a 90% 100%),
radial-gradient(circle at 20% 25%, #c8102e 0 22%, transparent 22%),
radial-gradient(circle at 75% 20%, #ffd700 0 18%, transparent 18%),
radial-gradient(circle at 30% 70%, #1e90ff 0 24%, transparent 24%),
radial-gradient(circle at 80% 75%, #9400d3 0 20%, transparent 20%),
radial-gradient(circle at 55% 45%, #ff8c00 0 18%, transparent 18%),
radial-gradient(circle at 50% 90%, #2ecc71 0 16%, transparent 16%),
linear-gradient(45deg, #4a0e6b, #8b1a3a, #1a4a8b, #6b8b1a);
background-blend-mode: normal, normal, screen, screen, screen, screen, screen, screen, normal;
filter: saturate(1.3) brightness(1.05);
box-shadow: 0 0 25px rgba(255,200,100,0.3), inset 0 0 0 2px #1a1a1a;
}

.rc-stretch {
animation: roy-stretch 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
transform-origin: center;
}

.rc-sway {
animation: roy-sway 4s ease-in-out infinite;
transform-origin: top center;
}

.rc-swing-in {
animation: roy-swing-in 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
transform-origin: top center;
}

.rc-text-3d-cinema {
display: inline-block;
position: relative;
font: 900 72px/1 'Arial Black', sans-serif;
letter-spacing: 0.06em;
color: #fff7d0;
padding: 30px 40px;
background: linear-gradient(180deg, #1a0f00 0%, #000 100%);
border-radius: 10px;
text-shadow:
1px 1px 0 #8b6914,
2px 2px 0 #8b6914,
3px 3px 0 #75590f,
4px 4px 0 #75590f,
5px 5px 0 #5e470c,
6px 6px 0 #5e470c,
7px 7px 0 #473608,
8px 8px 0 #473608,
9px 9px 0 #2f2406,
10px 10px 0 #2f2406,
11px 11px 8px rgba(0,0,0,0.6),
14px 14px 20px rgba(0,0,0,0.8);
background-clip: border-box;
filter: drop-shadow(0 0 12px rgba(255,200,80,0.4));
animation: roy-b11-text-3d-cinema-light 4s ease-in-out infinite;
}

.rc-text-3d-shadow {
color: #f0fdf4;
text-shadow:
1px 1px 0 #065f46,
2px 2px 0 #047857,
3px 3px 0 #059669,
4px 4px 0 #10b981,
5px 5px 0 rgba(16, 185, 129, 0.4),
6px 6px 10px rgba(0, 0, 0, 0.3);
font-weight: 700;
}

.rc-text-blur-reveal {
color: #10b981;
font-weight: 700;
animation: roy-blur-reveal 4s ease-in-out infinite;
}

.rc-text-bounce-letters {
display: inline-flex;
font-weight: 700;
color: #06b6d4;
}

.rc-text-chrome {
background: linear-gradient(
180deg,
#fef3c7 0%,
#f8fafc 25%,
#94a3b8 50%,
#f8fafc 75%,
#cbd5e1 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 800;
letter-spacing: 1px;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

.rc-text-emboss {
display: inline-block;
font: 900 64px/1 'Georgia', serif;
letter-spacing: 0.05em;
color: #6e5a44;
padding: 24px 36px;
background:
radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255,240,210,0.3), transparent 60%),
linear-gradient(135deg, #b8a586 0%, #8a7a5e 50%, #a8946c 100%);
border-radius: 8px;
box-shadow:
inset 4px 4px 8px rgba(255,250,230,0.4),
inset -4px -4px 8px rgba(40,30,15,0.4),
0 6px 20px rgba(40,30,15,0.4);
text-shadow:
1px 1px 1px rgba(255,245,220,0.7),
-1px -1px 1px rgba(30,20,10,0.8),
0 4px 6px rgba(30,20,10,0.4);
background-clip: border-box;
}

.rc-text-fire {
font-weight: 800;
color: #fde047;
text-shadow:
0 -2px 4px #fef08a,
0 -3px 6px #fde047,
0 -6px 10px #facc15,
0 -10px 16px #f59e0b,
0 -16px 24px #ea580c,
0 -22px 32px #dc2626;
animation: roy-fire-flicker 0.4s ease-in-out infinite alternate;
}

.rc-text-fire-flame {
display: inline-block;
position: relative;
font: 900 80px/1 'Arial Black', sans-serif;
letter-spacing: 0.05em;
color: #fff;
padding: 30px 36px;
background: #0a0500;
border-radius: 8px;
text-shadow:
0 -2px 4px #fff,
0 -4px 8px #ffe055,
0 -8px 14px #ff8c00,
0 -14px 22px #ff3000,
0 -22px 32px #c81000,
0 2px 4px rgba(200,16,0,0.8);
animation: roy-b11-text-fire-flame 0.6s ease-in-out infinite alternate;
filter: drop-shadow(0 0 12px rgba(255,80,0,0.7));
}

.rc-text-flip {
display: inline-block;
font-weight: 700;
color: #8b5cf6;
transform-style: preserve-3d;
perspective: 400px;
animation: roy-text-flip 3s ease-in-out infinite;
}

.rc-text-gradient-shift {
background: linear-gradient(45deg, #10b981, #06b6d4, #8b5cf6, #ec4899, #10b981);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
animation: roy-text-grad-shift 6s ease infinite;
}

.rc-text-highlight-marker {
font-weight: 700;
color: #0f172a;
background: linear-gradient(180deg, transparent 50%, #fde047 50%);
padding: 0 4px;
}

.rc-text-holographic {
background: conic-gradient(
from 0deg,
#ff6ec7, #ffd93d, #6bcf7f, #4ecdc4, #a78bfa, #ff6ec7
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
filter: drop-shadow(0 0 6px rgba(255, 110, 199, 0.5));
animation: roy-holo-shift 5s linear infinite;
}

.rc-text-mirror {
display: inline-flex;
font-weight: 700;
color: #8b5cf6;
}

.rc-text-neon-glow {
color: #10b981;
text-shadow:
0 0 7px rgba(16, 185, 129, 0.8),
0 0 10px rgba(16, 185, 129, 0.6),
0 0 21px rgba(16, 185, 129, 0.4),
0 0 42px rgba(16, 185, 129, 0.2),
0 0 82px rgba(16, 185, 129, 0.1);
}

.rc-text-neon-sign {
display: inline-block;
font: 900 72px/1 'Arial Black', sans-serif;
letter-spacing: 0.08em;
color: #fff;
text-shadow:
0 0 4px #fff,
0 0 10px #ff00de,
0 0 22px #ff00de,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 100px #ff00de;
padding: 20px 30px;
background: radial-gradient(ellipse at 50% 50%, #1a0833 0%, #050010 100%);
border-radius: 12px;
animation: roy-b11-text-neon-flicker 4s linear infinite;
}

.rc-text-outline-offset {
font-weight: 700;
color: #10b981;
-webkit-text-stroke: 2px rgba(16, 185, 129, 0.5);
text-shadow:
4px 4px 0 rgba(6, 182, 212, 0.5),
8px 8px 0 rgba(139, 92, 246, 0.4);
}

.rc-text-reflection {
position: relative;
display: inline-block;
font-weight: 700;
color: #06b6d4;
}

.rc-text-shadow-long {
color: #f0fdf4;
font-weight: 700;
text-shadow:
1px 1px 0 #10b981,
2px 2px 0 #0d9668,
3px 3px 0 #059669,
4px 4px 0 #047857,
5px 5px 0 #065f46,
6px 6px 0 #064e3b,
7px 7px 0 #053b30,
8px 8px 0 #042f24,
9px 9px 0 #03241c,
10px 10px 12px rgba(0, 0, 0, 0.4);
}

.rc-text-shadow-soft {
color: #f8fafc;
font-weight: 600;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.18),
0 4px 12px rgba(16, 185, 129, 0.25),
0 8px 24px rgba(16, 185, 129, 0.15);
}

.rc-text-shimmer {
background: linear-gradient(
110deg,
#475569 0%,
#475569 35%,
#f1f5f9 50%,
#475569 65%,
#475569 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
animation: roy-shimmer-sweep 3s linear infinite;
}

.rc-text-skew {
display: inline-block;
font-weight: 800;
font-style: italic;
color: #f8fafc;
background: linear-gradient(135deg, #10b981, #06b6d4);
padding: 4px 14px;
transform: skew(-10deg);
letter-spacing: 2px;
text-transform: uppercase;
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.rc-text-stretch {
font-weight: 700;
color: #f59e0b;
animation: roy-text-stretch 3s ease-in-out infinite;
}

.rc-text-typing-cursor {
border-right: 3px solid #10b981;
animation: roy-text-blink-cursor 1s step-end infinite;
padding-right: 4px;
}

.rc-text-underline-draw {
position: relative;
display: inline-block;
font-weight: 700;
color: #10b981;
}

.rc-text-water {
display: inline-block;
position: relative;
font: 900 72px/1 'Arial Black', sans-serif;
letter-spacing: 0.08em;
color: transparent;
background:
linear-gradient(180deg,
rgba(255,255,255,0.9) 0%,
rgba(180,230,255,0.7) 30%,
rgba(80,180,230,0.6) 55%,
rgba(30,100,180,0.8) 80%,
rgba(10,40,90,0.9) 100%);
-webkit-background-clip: text;
background-clip: text;
padding: 18px 30px;
text-shadow:
0 1px 0 rgba(255,255,255,0.5),
0 -1px 0 rgba(0,30,60,0.6);
filter: drop-shadow(0 4px 6px rgba(0,80,140,0.5));
animation: roy-b11-text-water-ripple 3s ease-in-out infinite;
}

.rc-topographic {
width: 100%;
min-height: 240px;
background:
repeating-radial-gradient(circle at 30% 40%,
transparent 0,
transparent 14px,
rgba(120,80,30,0.5) 14px,
rgba(120,80,30,0.5) 15px),
repeating-radial-gradient(circle at 70% 60%,
transparent 0,
transparent 18px,
rgba(100,60,20,0.45) 18px,
rgba(100,60,20,0.45) 19px),
repeating-radial-gradient(circle at 50% 80%,
transparent 0,
transparent 12px,
rgba(80,40,10,0.4) 12px,
rgba(80,40,10,0.4) 13px),
radial-gradient(ellipse at 30% 40%, #f4e4c1 0%, #d4b888 50%, #8b6b3a 100%);
position: relative;
border-radius: 8px;
overflow: hidden;
}

.rc-transform-origin-spin {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 8px;
transform-origin: 0% 0%;
animation: roy-origin-spin 2s linear infinite;
}

.rc-velvet-fabric {
position: relative;
width: 200px;
height: 160px;
border-radius: 12px;
background:
radial-gradient(ellipse 70% 50% at 30% 30%, rgba(180,40,90,0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 75% 70%, rgba(60,0,30,0.85), transparent 65%),
linear-gradient(135deg, #7a0e3a 0%, #4a0520 50%, #6a0c30 100%);
box-shadow:
inset 0 0 30px rgba(0,0,0,0.6),
inset 8px 10px 18px rgba(255,120,170,0.25),
inset -8px -10px 18px rgba(0,0,0,0.5),
0 10px 25px rgba(40,0,15,0.5);
}

.rc-vhs-glitch {
width: 100%;
min-height: 240px;
background:
linear-gradient(180deg, #1a0033 0%, #4a0080 50%, #001a4a 100%);
position: relative;
border-radius: 8px;
overflow: hidden;
filter: contrast(1.2) saturate(1.3);
}

.rc-vibrate {
animation: roy-vibrate 0.32s linear infinite;
}

.rc-vintage-tv {
width: 100%;
min-height: 240px;
background:
radial-gradient(ellipse 90% 70% at 50% 50%, #1a3a5c 0%, #0a1a2c 70%, #000 100%);
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow:
inset 0 0 60px rgba(0,0,0,0.8),
inset 0 0 120px rgba(80,140,200,0.3);
}

.rc-visual-aurora-border {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0b1026;
border: none;
overflow: hidden;
}

.rc-visual-backdrop-blur-heavy {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
radial-gradient(circle at 20% 30%, #ec4899 0%, transparent 40%),
radial-gradient(circle at 80% 70%, #06b6d4 0%, transparent 40%),
radial-gradient(circle at 50% 50%, #f59e0b 0%, transparent 50%),
linear-gradient(135deg, #8b5cf6, #10b981);
overflow: hidden;
}

.rc-visual-blend-mode-overlay {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #1e293b, #0f172a);
overflow: hidden;
}

.rc-visual-border-beam {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0f172a;
border: none;
overflow: hidden;
}

.rc-visual-chrome {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(
180deg,
#fefefe 0%,
#c8c8d0 10%,
#888890 20%,
#d8d8e0 30%,
#f8f8fc 45%,
#a0a0a8 55%,
#686870 65%,
#d0d0d8 75%,
#f0f0f5 85%,
#b0b0b8 95%,
#808088 100%
);
overflow: hidden;
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.7),
inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.rc-visual-color-shift {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #8b5cf6);
animation: roy-hue-cycle 6s linear infinite;
}

.rc-visual-foil {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.12) 0px,
rgba(255, 255, 255, 0.12) 2px,
transparent 2px,
transparent 5px
),
repeating-linear-gradient(
-45deg,
rgba(0, 0, 0, 0.12) 0px,
rgba(0, 0, 0, 0.12) 2px,
transparent 2px,
transparent 5px
),
linear-gradient(
135deg,
#f0f0f5 0%,
#c0c0d0 25%,
#f8f8ff 50%,
#b0b0c0 75%,
#e8e8f0 100%
);
background-size: 8px 8px, 8px 8px, 100% 100%;
overflow: hidden;
animation: roy-visual-foil-hue 6s ease-in-out infinite;
box-shadow:
inset 0 2px 6px rgba(255, 255, 255, 0.7),
inset 0 -2px 6px rgba(0, 0, 0, 0.25);
}

.rc-visual-frost-blur {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
radial-gradient(circle at 30% 30%, #06b6d4 0%, transparent 50%),
radial-gradient(circle at 70% 70%, #ec4899 0%, transparent 50%),
linear-gradient(135deg, #8b5cf6, #f59e0b);
overflow: hidden;
}

.rc-visual-glass-reflection {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
radial-gradient(circle at 30% 30%, #ec4899 0%, transparent 50%),
radial-gradient(circle at 70% 70%, #06b6d4 0%, transparent 50%),
linear-gradient(135deg, #8b5cf6, #f59e0b);
overflow: hidden;
}

.rc-visual-glitch-distort {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
overflow: hidden;
}

.rc-visual-gradient-mesh {
background:
radial-gradient(at 20% 20%, #ec4899 0px, transparent 50%),
radial-gradient(at 80% 0%,  #f59e0b 0px, transparent 50%),
radial-gradient(at 0% 50%,  #8b5cf6 0px, transparent 50%),
radial-gradient(at 80% 80%, #06b6d4 0px, transparent 50%),
radial-gradient(at 50% 100%, #22c55e 0px, transparent 50%),
#0f172a;
background-size: 200% 200%;
animation: roy-visual-gradient-mesh 10s ease-in-out infinite;
}

.rc-visual-gradient-text-animated {
background: linear-gradient(
90deg,
#ef4444,
#f59e0b,
#eab308,
#22c55e,
#06b6d4,
#3b82f6,
#8b5cf6,
#ec4899,
#ef4444
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: roy-visual-gradient-text-animated 4s linear infinite;
}

.rc-visual-holographic {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(
115deg,
#ff0080 0%,
#ff8a00 14%,
#ffe600 28%,
#00ff96 42%,
#00d4ff 56%,
#6f00ff 70%,
#ff00d4 84%,
#ff0080 100%
);
background-size: 300% 300%;
overflow: hidden;
animation: roy-text-grad-shift 6s ease infinite;
}

.rc-visual-hue-rotate-loop {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: conic-gradient(
from 0deg,
#ef4444,
#f59e0b,
#eab308,
#22c55e,
#06b6d4,
#3b82f6,
#8b5cf6,
#ec4899,
#ef4444
);
animation: roy-hue-cycle 4s linear infinite;
}

.rc-visual-image-distortion {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #06b6d4);
animation: roy-visual-image-distortion 2.4s ease-in-out infinite;
}

.rc-visual-inner-glow {
width: 180px;
height: 120px;
border-radius: 14px;
background: #0f172a;
border: none;
animation: roy-visual-inner-glow 2.6s ease-in-out infinite;
}

.rc-visual-iridescent {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: conic-gradient(
from 0deg at 50% 50%,
#ff0080,
#ff8a00,
#ffe600,
#00ff96,
#00d4ff,
#6f00ff,
#ff00d4,
#ff0080
);
animation: roy-hue-cycle 8s linear infinite;
overflow: hidden;
}

.rc-visual-liquid-fill {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0f172a;
border: none;
overflow: hidden;
}

.rc-visual-mask-fade {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
-webkit-mask: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%) no-repeat;
mask: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%) no-repeat;
-webkit-mask-size: 100% 200%;
mask-size: 100% 200%;
animation: roy-visual-mask-fade 3s ease-in-out infinite alternate;
}

.rc-visual-metallic {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background:
linear-gradient(
180deg,
#f5f5f5 0%,
#d0d0d8 14%,
#a0a0a8 28%,
#808088 42%,
#c0c0c8 58%,
#f0f0f5 74%,
#b0b0b8 88%,
#d0d0d8 100%
);
overflow: hidden;
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.7),
inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.rc-visual-neon-pulse {
width: 180px;
height: 120px;
border-radius: 14px;
background: #0a0a0f;
border: 2px solid #ec4899;
animation: roy-visual-neon-pulse 1.6s ease-in-out infinite;
}

.rc-visual-noise-overlay {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #1e293b, #0f172a);
overflow: hidden;
}

.rc-visual-pixelate {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #06b6d4);
overflow: hidden;
}

.rc-visual-prism {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0a0a0f 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.rc-visual-saturation-pulse {
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #ec4899, #f59e0b, #06b6d4);
animation: roy-visual-saturation-pulse 2.4s ease-in-out infinite;
}

.rc-visual-shadow-pulse {
width: 140px;
height: 100px;
border-radius: 14px;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
border: none;
animation: roy-visual-shadow-pulse 2s ease-in-out infinite;
}

.rc-visual-shimmer-sweep {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
border: none;
background: linear-gradient(135deg, #1e293b, #334155);
overflow: hidden;
}

.rc-visual-spotlight-follow {
position: relative;
width: 180px;
height: 120px;
border-radius: 14px;
background: #0a0a0f;
border: none;
overflow: hidden;
}

.rc-water-ripple {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, #4fb3d9 0%, #1d6a8c 70%, #0d3f56 100%);
overflow: hidden;
}

.rc-watercolor {
width: 100%;
min-height: 240px;
background:
radial-gradient(ellipse 50% 40% at 25% 35%, rgba(255,150,180,0.7), transparent 60%),
radial-gradient(ellipse 45% 35% at 70% 30%, rgba(150,200,255,0.65), transparent 65%),
radial-gradient(ellipse 55% 40% at 60% 75%, rgba(255,220,120,0.6), transparent 60%),
radial-gradient(ellipse 35% 30% at 30% 80%, rgba(180,255,180,0.55), transparent 65%),
radial-gradient(ellipse 30% 25% at 85% 65%, rgba(220,150,255,0.55), transparent 65%),
linear-gradient(135deg, #faf6ee 0%, #f0e8d8 100%);
background-blend-mode: multiply, multiply, multiply, multiply, multiply, normal;
filter: blur(0.5px) contrast(0.95);
position: relative;
border-radius: 8px;
overflow: hidden;
}

.rc-zoom-in-down {
animation: roy-zoom-in-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center top;
}

.rc-zoom-in-left {
animation: roy-zoom-in-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: left center;
}

.rc-zoom-in-right {
animation: roy-zoom-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: right center;
}

.rc-zoom-in-up {
animation: roy-zoom-in-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center bottom;
}

.rc-zoom-out-left {
animation: roy-zoom-out-left 0.65s cubic-bezier(0.55, 0, 0.68, 0.53) both;
transform-origin: left center;
}

.rc-zoom-out-up {
animation: roy-zoom-out-up 0.65s cubic-bezier(0.55, 0, 0.68, 0.53) both;
transform-origin: center bottom;
}
@keyframes roy-rotate-spin-float {
0%, 100% { transform: rotate(0deg) translateY(0); }
50% { transform: rotate(180deg) translateY(-10px); }
}
@keyframes roy-hue-cycle-shine {
0% { filter: hue-rotate(0deg) brightness(1); }
50% { filter: hue-rotate(180deg) brightness(1.3); }
100% { filter: hue-rotate(360deg) brightness(1); }
}
@keyframes roy-b10-op-orbit-fb {
0% { left: 0; }
50% { left: 100%; }
100% { left: 0; }
}