/*
 * Bundle: animations.min.css
 * Generated: 2025-11-08 22:52:50
 * Files: 5
 */

/* === animations.css === */
:root {
--animation-duration-fast: 0.2s;
--animation-duration-normal: 0.3s;
--animation-duration-medium: 0.5s;
--animation-duration-slow: 0.8s;
--animation-duration-slower: 1.2s;
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--animation-primary: #667eea;
--animation-secondary: #764ba2;
--animation-accent: #f093fb;
--animation-success: #4facfe;
--animation-warning: #f093fb;
--animation-danger: #fa709a;
--glow-primary: 0 0 20px rgba(102, 126, 234, 0.6);
--glow-secondary: 0 0 25px rgba(118, 75, 162, 0.6);
--glow-accent: 0 0 30px rgba(240, 147, 251, 0.6);
--shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.15);
--shadow-float: 0 15px 50px rgba(0, 0, 0, 0.2);
--animation-distance-small: 20px;
--animation-distance-medium: 40px;
--animation-distance-large: 60px;
--animation-scale-small: 0.95;
--animation-scale-large: 1.05;
--animation-scale-xl: 1.1;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(var(--animation-distance-medium)) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(calc(-1 * var(--animation-distance-medium))) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(calc(-1 * var(--animation-distance-medium))) scale(0.98);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(var(--animation-distance-medium)) scale(0.98);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.7) rotate(-5deg);
}
50% {
opacity: 0.8;
transform: scale(1.02) rotate(2deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes slideInUp {
from {
transform: translateY(100%) scale(0.95);
opacity: 0;
}
60% {
transform: translateY(-5%) scale(1.02);
opacity: 0.9;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%) scale(0.95);
opacity: 0;
}
60% {
transform: translateY(5%) scale(1.02);
opacity: 0.9;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.2) rotate(-10deg);
}
20% {
opacity: 0.7;
transform: scale(1.1) rotate(5deg);
}
40% {
opacity: 0.9;
transform: scale(0.9) rotate(-2deg);
}
60% {
opacity: 1;
transform: scale(1.05) rotate(1deg);
}
80% {
transform: scale(0.98) rotate(-0.5deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.8);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 15px rgba(102, 126, 234, 0.2);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 25px rgba(102, 126, 234, 0);
}
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: var(--glow-primary);
filter: brightness(1);
}
50% {
box-shadow: var(--glow-accent);
filter: brightness(1.2);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0) rotate(0deg); }
10% { transform: translateX(-8px) rotate(-1deg); }
20% { transform: translateX(8px) rotate(1deg); }
30% { transform: translateX(-6px) rotate(-0.5deg); }
40% { transform: translateX(6px) rotate(0.5deg); }
50% { transform: translateX(-4px) rotate(-0.3deg); }
60% { transform: translateX(4px) rotate(0.3deg); }
70% { transform: translateX(-2px) rotate(-0.1deg); }
80% { transform: translateX(2px) rotate(0.1deg); }
90% { transform: translateX(-1px) rotate(0deg); }
}
@keyframes rotate {
from {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.05);
}
to {
transform: rotate(360deg) scale(1);
}
}
@keyframes rotateY {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
@keyframes glow {
0%, 100% {
box-shadow: var(--glow-primary);
filter: brightness(1);
}
25% {
box-shadow: var(--glow-secondary);
filter: brightness(1.1);
}
50% {
box-shadow: var(--glow-accent);
filter: brightness(1.2);
}
75% {
box-shadow: var(--glow-secondary);
filter: brightness(1.1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
33% {
transform: translateY(-8px) rotate(1deg);
}
66% {
transform: translateY(-4px) rotate(-0.5deg);
}
}
@keyframes wiggle {
0%, 7% { transform: rotateZ(0deg) scale(1); }
15% { transform: rotateZ(-12deg) scale(1.02); }
20% { transform: rotateZ(8deg) scale(0.98); }
25% { transform: rotateZ(-8deg) scale(1.01); }
30% { transform: rotateZ(5deg) scale(0.99); }
35% { transform: rotateZ(-3deg) scale(1.005); }
40%, 100% { transform: rotateZ(0deg) scale(1); }
}
@keyframes heartbeat {
0% {
transform: scale(1);
filter: brightness(1);
}
14% {
transform: scale(1.15);
filter: brightness(1.1);
}
28% {
transform: scale(1);
filter: brightness(1);
}
42% {
transform: scale(1.15);
filter: brightness(1.1);
}
70% {
transform: scale(1);
filter: brightness(1);
}
}
@keyframes slideInRotate {
from {
opacity: 0;
transform: translateX(-100%) rotate(-180deg) scale(0.5);
}
to {
opacity: 1;
transform: translateX(0) rotate(0deg) scale(1);
}
}
@keyframes flipIn {
from {
opacity: 0;
transform: perspective(400px) rotateY(-90deg) scale(0.8);
}
40% {
transform: perspective(400px) rotateY(-10deg) scale(1.05);
}
70% {
transform: perspective(400px) rotateY(10deg) scale(0.98);
}
to {
opacity: 1;
transform: perspective(400px) rotateY(0deg) scale(1);
}
}
@keyframes zoomInBounce {
from {
opacity: 0;
transform: scale(0.1) rotate(-30deg);
}
50% {
opacity: 1;
transform: scale(1.2) rotate(15deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes morphing {
0% {
border-radius: 50% 20% 30% 40%;
transform: rotate(0deg) scale(1);
}
25% {
border-radius: 30% 50% 20% 40%;
transform: rotate(90deg) scale(1.05);
}
50% {
border-radius: 40% 30% 50% 20%;
transform: rotate(180deg) scale(0.95);
}
75% {
border-radius: 20% 40% 30% 50%;
transform: rotate(270deg) scale(1.02);
}
100% {
border-radius: 50% 20% 30% 40%;
transform: rotate(360deg) scale(1);
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes textGlow {
0%, 100% {
text-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
}
50% {
text-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(118, 75, 162, 0.6);
}
}
.animate-fadeInUp {
animation: fadeInUp var(--animation-duration-medium) var(--ease-out-cubic);
}
.animate-fadeInDown {
animation: fadeInDown var(--animation-duration-medium) var(--ease-out-cubic);
}
.animate-fadeInLeft {
animation: fadeInLeft var(--animation-duration-medium) var(--ease-out-cubic);
}
.animate-fadeInRight {
animation: fadeInRight var(--animation-duration-medium) var(--ease-out-cubic);
}
.animate-scaleIn {
animation: scaleIn var(--animation-duration-medium) var(--ease-bounce);
}
.animate-slideInUp {
animation: slideInUp var(--animation-duration-slow) var(--ease-out-cubic);
}
.animate-slideInDown {
animation: slideInDown var(--animation-duration-slow) var(--ease-out-cubic);
}
.animate-bounceIn {
animation: bounceIn var(--animation-duration-slow) var(--ease-bounce);
}
.animate-slideInRotate {
animation: slideInRotate var(--animation-duration-slow) var(--ease-elastic);
}
.animate-flipIn {
animation: flipIn var(--animation-duration-slow) var(--ease-out-cubic);
}
.animate-zoomInBounce {
animation: zoomInBounce var(--animation-duration-medium) var(--ease-bounce);
}
.animate-pulse {
animation: pulse 2s var(--ease-in-out-cubic) infinite;
}
.animate-pulseGlow {
animation: pulseGlow 3s var(--ease-in-out-cubic) infinite;
}
.animate-shake {
animation: shake var(--animation-duration-medium) var(--ease-in-out-cubic);
}
.animate-rotate {
animation: rotate 2s linear infinite;
}
.animate-rotateY {
animation: rotateY 1.5s var(--ease-in-out-cubic) infinite;
}
.animate-glow {
animation: glow 4s var(--ease-in-out-cubic) infinite;
}
.animate-float {
animation: float 6s var(--ease-in-out-cubic) infinite;
}
.animate-wiggle {
animation: wiggle 1s var(--ease-bounce);
}
.animate-heartbeat {
animation: heartbeat 2s var(--ease-in-out-cubic) infinite;
}
.animate-morphing {
animation: morphing 8s var(--ease-in-out-cubic) infinite;
}
.animate-gradientShift {
background-size: 200% 200%;
animation: gradientShift 4s var(--ease-in-out-cubic) infinite;
}
.animate-textGlow {
animation: textGlow 3s var(--ease-in-out-cubic) infinite;
}
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }
.animate-delay-6 { animation-delay: 0.6s; }
.animate-delay-7 { animation-delay: 0.7s; }
.animate-delay-8 { animation-delay: 0.8s; }
.animate-delay-9 { animation-delay: 0.9s; }
.animate-delay-10 { animation-delay: 1s; }
.animate-fast { animation-duration: var(--animation-duration-fast) !important; }
.animate-normal { animation-duration: var(--animation-duration-normal) !important; }
.animate-medium { animation-duration: var(--animation-duration-medium) !important; }
.animate-slow { animation-duration: var(--animation-duration-slow) !important; }
.animate-slower { animation-duration: var(--animation-duration-slower) !important; }
.hover-lift {
transition: all var(--animation-duration-normal) var(--ease-out-cubic);
transform-origin: center;
}
.hover-lift:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-lift);
filter: brightness(1.05);
}
.hover-scale {
transition: transform var(--animation-duration-normal) var(--ease-out-cubic);
transform-origin: center;
}
.hover-scale:hover {
transform: scale(var(--animation-scale-large));
}
.hover-scale-xl:hover {
transform: scale(var(--animation-scale-xl));
}
.hover-rotate {
transition: transform var(--animation-duration-normal) var(--ease-out-cubic);
transform-origin: center;
}
.hover-rotate:hover {
transform: rotate(8deg) scale(1.02);
}
.hover-glow {
transition: all var(--animation-duration-normal) var(--ease-out-cubic);
}
.hover-glow:hover {
box-shadow: var(--glow-primary);
filter: brightness(1.1);
}
.hover-float {
transition: all var(--animation-duration-normal) var(--ease-out-cubic);
}
.hover-float:hover {
transform: translateY(-12px);
box-shadow: var(--shadow-float);
}
.hover-bounce {
transition: transform var(--animation-duration-fast) var(--ease-bounce);
}
.hover-bounce:hover {
transform: scale(1.1);
}
.hover-flip {
transition: transform var(--animation-duration-medium) var(--ease-out-cubic);
transform-style: preserve-3d;
}
.hover-flip:hover {
transform: rotateY(180deg);
}
.scroll-reveal {
opacity: 0;
transform: translateY(var(--animation-distance-large)) scale(0.95);
transition: all var(--animation-duration-slow) var(--ease-out-cubic);
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.scroll-reveal-left {
opacity: 0;
transform: translateX(calc(-1 * var(--animation-distance-large))) scale(0.95);
transition: all var(--animation-duration-slow) var(--ease-out-cubic);
}
.scroll-reveal-left.revealed {
opacity: 1;
transform: translateX(0) scale(1);
}
.scroll-reveal-right {
opacity: 0;
transform: translateX(var(--animation-distance-large)) scale(0.95);
transition: all var(--animation-duration-slow) var(--ease-out-cubic);
}
.scroll-reveal-right.revealed {
opacity: 1;
transform: translateX(0) scale(1);
}
.scroll-reveal-scale {
opacity: 0;
transform: scale(0.7) rotate(-5deg);
transition: all var(--animation-duration-slow) var(--ease-bounce);
}
.scroll-reveal-scale.revealed {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.scroll-reveal-rotate {
opacity: 0;
transform: rotate(-45deg) scale(0.8);
transition: all var(--animation-duration-slow) var(--ease-elastic);
}
.scroll-reveal-rotate.revealed {
opacity: 1;
transform: rotate(0deg) scale(1);
}
.loading-spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid rgba(102, 126, 234, 0.2);
border-top: 3px solid var(--animation-primary);
border-radius: 50%;
animation: rotate 1s linear infinite;
position: relative;
}
.loading-spinner::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid transparent;
border-top: 2px solid var(--animation-secondary);
border-radius: 50%;
animation: rotate 1.5s linear infinite reverse;
}
.loading-spinner-large {
width: 40px;
height: 40px;
border-width: 4px;
}
.loading-dots {
display: inline-flex;
align-items: center;
gap: 4px;
}
.loading-dots::before,
.loading-dots::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--animation-primary);
animation: pulse 1.5s var(--ease-in-out-cubic) infinite;
}
.loading-dots::before {
animation-delay: 0s;
}
.loading-dots::after {
animation-delay: 0.5s;
}
.loading-pulse {
animation: pulseGlow 2s var(--ease-in-out-cubic) infinite;
}
.loading-wave {
display: inline-flex;
gap: 2px;
}
.loading-wave span {
display: block;
width: 4px;
height: 20px;
background: var(--animation-primary);
border-radius: 2px;
animation: wave 1.2s var(--ease-in-out-cubic) infinite;
}
.loading-wave span:nth-child(2) { animation-delay: 0.1s; }
.loading-wave span:nth-child(3) { animation-delay: 0.2s; }
.loading-wave span:nth-child(4) { animation-delay: 0.3s; }
.loading-wave span:nth-child(5) { animation-delay: 0.4s; }
@keyframes wave {
0%, 40%, 100% {
transform: scaleY(0.4);
opacity: 0.5;
}
20% {
transform: scaleY(1);
opacity: 1;
}
}
.transition-all {
transition: all var(--animation-duration-normal) var(--ease-out-cubic);
}
.transition-fast {
transition: all var(--animation-duration-fast) var(--ease-out-cubic);
}
.transition-slow {
transition: all var(--animation-duration-medium) var(--ease-out-cubic);
}
.transition-colors {
transition: color var(--animation-duration-normal) var(--ease-out-cubic),
background-color var(--animation-duration-normal) var(--ease-out-cubic),
border-color var(--animation-duration-normal) var(--ease-out-cubic);
}
.transition-transform {
transition: transform var(--animation-duration-normal) var(--ease-out-cubic);
}
.transition-opacity {
transition: opacity var(--animation-duration-normal) var(--ease-out-cubic);
}
.transition-bounce {
transition: all var(--animation-duration-normal) var(--ease-bounce);
}
.transition-elastic {
transition: all var(--animation-duration-medium) var(--ease-elastic);
}
.focus-ring:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3);
transform: scale(1.02);
}
.focus-glow:focus {
outline: none;
box-shadow: var(--glow-primary);
filter: brightness(1.1);
}
.focus-lift:focus {
outline: none;
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.border-animate {
position: relative;
overflow: hidden;
}
.border-animate::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--animation-primary), var(--animation-secondary), transparent);
animation: borderSlide 3s linear infinite;
}
.border-animate-glow::after {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(45deg, var(--animation-primary), var(--animation-secondary), var(--animation-accent));
border-radius: inherit;
z-index: -1;
opacity: 0;
transition: opacity var(--animation-duration-normal) var(--ease-out-cubic);
}
.border-animate-glow:hover::after {
opacity: 1;
}
@keyframes borderSlide {
0% { left: -100%; }
100% { left: 100%; }
}
.text-shimmer {
background: linear-gradient(90deg,
var(--animation-primary) 0%,
var(--animation-secondary) 50%,
var(--animation-accent) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientShift 3s var(--ease-in-out-cubic) infinite;
}
.text-typewriter {
overflow: hidden;
border-right: 2px solid var(--animation-primary);
white-space: nowrap;
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: var(--animation-primary); }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.animate-pulse,
.animate-pulseGlow,
.animate-rotate,
.animate-rotateY,
.animate-glow,
.animate-float,
.animate-heartbeat,
.animate-morphing,
.animate-gradientShift,
.animate-textGlow {
animation: none !important;
}
}
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
.will-change-auto {
will-change: auto;
}
.animate-fadeInUp,
.animate-fadeInDown,
.animate-fadeInLeft,
.animate-fadeInRight,
.animate-scaleIn,
.animate-slideInUp,
.animate-slideInDown,
.animate-bounceIn,
.animate-slideInRotate,
.animate-flipIn,
.animate-zoomInBounce {
will-change: transform, opacity;
}
.animate-pulse,
.animate-pulseGlow,
.animate-glow {
will-change: transform, box-shadow, filter;
}
.animate-rotate,
.animate-rotateY {
will-change: transform;
}
.animate-fadeInUp:not(:hover),
.animate-fadeInDown:not(:hover),
.animate-fadeInLeft:not(:hover),
.animate-fadeInRight:not(:hover),
.animate-scaleIn:not(:hover),
.animate-slideInUp:not(:hover),
.animate-slideInDown:not(:hover),
.animate-bounceIn:not(:hover),
.animate-slideInRotate:not(:hover),
.animate-flipIn:not(:hover),
.animate-zoomInBounce:not(:hover) {
animation-fill-mode: forwards;
}
@media print {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
box-shadow: none !important;
}
}

/* === micro-interactions.css === */
.tp-ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tp-ripple::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}
.tp-ripple:active::after {
transform: scale(0, 0);
opacity: 0.3;
transition: 0s;
}
.tp-btn.tp-ripple::after {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 10.01%);
}
.tp-btn-primary.tp-ripple::after {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 10%, transparent 10.01%);
}
.tp-card-glow {
position: relative;
transition: all var(--tp-transition-base, 200ms) ease;
}
.tp-card-glow::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(
135deg,
var(--tp-primary-400, #60a5fa),
var(--tp-primary-600, #2563eb)
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--tp-transition-base, 200ms) ease;
pointer-events: none;
}
.tp-card-glow:hover::before {
opacity: 1;
}
.tp-card-glow:hover {
transform: translateY(-4px);
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.1),
0 20px 30px -10px rgba(59, 130, 246, 0.2);
}
.tp-card-glow-success::before {
background: linear-gradient(
135deg,
var(--tp-success-400, #34d399),
var(--tp-success-600, #059669)
);
}
.tp-card-glow-success:hover {
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.1),
0 20px 30px -10px rgba(16, 185, 129, 0.2);
}
.tp-card-glow-warning::before {
background: linear-gradient(
135deg,
var(--tp-warning-400, #fbbf24),
var(--tp-warning-600, #d97706)
);
}
.tp-card-glow-warning:hover {
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.1),
0 20px 30px -10px rgba(245, 158, 11, 0.2);
}
.tp-counter {
display: inline-block;
font-variant-numeric: tabular-nums;
}
@keyframes tp-counter-bounce {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
.tp-counter.tp-counting {
animation: tp-counter-bounce 0.4s ease-in-out;
}
.tp-counter-increment {
position: relative;
display: inline-block;
}
.tp-counter-increment::after {
content: attr(data-increment);
position: absolute;
top: -120%;
left: 50%;
transform: translateX(-50%);
color: var(--tp-success-500, #10b981);
font-size: 0.75em;
font-weight: bold;
opacity: 0;
animation: tp-counter-increment-up 1s ease-out;
}
@keyframes tp-counter-increment-up {
0% {
opacity: 0;
top: 0;
}
20% {
opacity: 1;
}
100% {
opacity: 0;
top: -120%;
}
}
.tp-counter-decrement::after {
content: attr(data-decrement);
color: var(--tp-danger-500, #ef4444);
animation: tp-counter-decrement-down 1s ease-out;
}
@keyframes tp-counter-decrement-down {
0% {
opacity: 0;
top: 0;
}
20% {
opacity: 1;
}
100% {
opacity: 0;
top: 120%;
}
}
.tp-skeleton {
background: linear-gradient(
90deg,
var(--tp-gray-200, #e5e7eb) 25%,
var(--tp-gray-100, #f3f4f6) 50%,
var(--tp-gray-200, #e5e7eb) 75%
);
background-size: 200% 100%;
animation: tp-skeleton-loading 1.5s ease-in-out infinite;
border-radius: var(--tp-radius-base, 4px);
cursor: wait;
}
@keyframes tp-skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.tp-skeleton-text {
height: 1em;
margin-bottom: 0.5em;
}
.tp-skeleton-title {
height: 1.5em;
width: 60%;
margin-bottom: 0.75em;
}
.tp-skeleton-avatar {
width: 48px;
height: 48px;
border-radius: var(--tp-radius-full, 50%);
}
.tp-skeleton-button {
height: 40px;
width: 120px;
border-radius: var(--tp-radius-md, 6px);
}
.tp-skeleton-card {
height: 200px;
border-radius: var(--tp-radius-lg, 8px);
}
.tp-transition-all {
transition: all var(--tp-transition-base, 200ms) ease;
}
.tp-transition-fast {
transition: all var(--tp-transition-fast, 150ms) ease;
}
.tp-transition-slow {
transition: all var(--tp-transition-slow, 300ms) ease;
}
.tp-transition-transform {
transition: transform var(--tp-transition-base, 200ms) ease;
}
.tp-transition-opacity {
transition: opacity var(--tp-transition-base, 200ms) ease;
}
.tp-transition-colors {
transition:
background-color var(--tp-transition-base, 200ms) ease,
border-color var(--tp-transition-base, 200ms) ease,
color var(--tp-transition-base, 200ms) ease;
}
.tp-press:active {
transform: scale(0.95);
}
.tp-lift {
transition: transform var(--tp-transition-base, 200ms) ease;
}
.tp-lift:hover {
transform: translateY(-2px);
}
.tp-lift:active {
transform: translateY(0);
}
@keyframes tp-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.tp-bounce:hover {
animation: tp-bounce 0.6s ease-in-out;
}
@keyframes tp-shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
.tp-shake {
animation: tp-shake 0.5s ease-in-out;
}
@keyframes tp-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
.tp-pulse {
animation: tp-pulse 2s ease-in-out infinite;
}
.tp-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--tp-gray-200, #e5e7eb);
border-top-color: var(--tp-primary-500, #3b82f6);
border-radius: 50%;
animation: tp-spinner-rotate 0.8s linear infinite;
}
@keyframes tp-spinner-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.tp-spinner-sm {
width: 20px;
height: 20px;
border-width: 2px;
}
.tp-spinner-lg {
width: 60px;
height: 60px;
border-width: 6px;
}
.tp-dots-loader {
display: inline-flex;
gap: 8px;
}
.tp-dots-loader span {
width: 8px;
height: 8px;
background-color: var(--tp-primary-500, #3b82f6);
border-radius: 50%;
animation: tp-dots-bounce 1.4s ease-in-out infinite;
}
.tp-dots-loader span:nth-child(1) {
animation-delay: -0.32s;
}
.tp-dots-loader span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes tp-dots-bounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
.tp-progress-pulse {
position: relative;
overflow: hidden;
}
.tp-progress-pulse::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: tp-progress-shimmer 2s infinite;
}
@keyframes tp-progress-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.tp-focus-ring:focus-visible {
outline: 2px solid var(--tp-primary-500, #3b82f6);
outline-offset: 2px;
border-radius: var(--tp-radius-base, 4px);
}
.tp-focus-glow:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(59, 130, 246, 0.3),
0 0 0 1px var(--tp-primary-500, #3b82f6);
}
.tp-hover-underline {
position: relative;
display: inline-block;
}
.tp-hover-underline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: currentColor;
transition: width var(--tp-transition-base, 200ms) ease;
}
.tp-hover-underline:hover::after {
width: 100%;
}
.tp-badge-pulse {
position: relative;
}
.tp-badge-pulse::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background-color: inherit;
animation: tp-badge-pulse-animation 2s ease-out infinite;
z-index: -1;
}
@keyframes tp-badge-pulse-animation {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
[data-theme="dark"] .tp-skeleton {
background: linear-gradient(
90deg,
var(--tp-gray-700, #374151) 25%,
var(--tp-gray-600, #4b5563) 50%,
var(--tp-gray-700, #374151) 75%
);
}
[data-theme="dark"] .tp-spinner {
border-color: var(--tp-gray-700, #374151);
border-top-color: var(--tp-primary-400, #60a5fa);
}
[data-theme="dark"] .tp-dots-loader span {
background-color: var(--tp-primary-400, #60a5fa);
}
@media (prefers-reduced-motion: reduce) {
.tp-ripple::after,
.tp-skeleton,
.tp-spinner,
.tp-dots-loader span,
.tp-progress-pulse::after,
.tp-badge-pulse::before,
.tp-bounce,
.tp-shake,
.tp-pulse,
.tp-counter.tp-counting {
animation: none !important;
}
.tp-transition-all,
.tp-transition-fast,
.tp-transition-slow,
.tp-transition-transform,
.tp-transition-opacity,
.tp-transition-colors,
.tp-lift,
.tp-press,
.tp-card-glow,
.tp-hover-underline::after {
transition: none !important;
}
}
[dir="rtl"] .tp-hover-underline::after {
left: auto;
right: 0;
}
@media print {
.tp-ripple::after,
.tp-skeleton,
.tp-spinner,
.tp-dots-loader {
display: none !important;
}
}

/* === optimized-animations.css === */
:root {
--anim-instant: 100ms;
--anim-fast: 200ms;
--anim-normal: 300ms;
--anim-slow: 500ms;
--anim-slower: 800ms;
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
--origin-center: center center;
--origin-top: center top;
--origin-bottom: center bottom;
--origin-left: left center;
--origin-right: right center;
}
.will-animate {
will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
.will-animate-color {
will-change: color, background-color;
}
.will-animate-scale {
will-change: transform;
transform: translateZ(0) scale(1);
}
@media (hover: hover) {
.will-animate:not(:hover):not(:active) {
will-change: auto;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.anim-fade-in {
animation: fadeIn var(--anim-normal) var(--ease-smooth);
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.anim-fade-out {
animation: fadeOut var(--anim-normal) var(--ease-smooth);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.anim-fade-in-up {
animation: fadeInUp var(--anim-normal) var(--ease-smooth);
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.anim-fade-in-down {
animation: fadeInDown var(--anim-normal) var(--ease-smooth);
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.anim-slide-in-right {
animation: slideInRight var(--anim-normal) var(--ease-smooth);
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.anim-slide-in-left {
animation: slideInLeft var(--anim-normal) var(--ease-smooth);
}
@keyframes slideUp {
from {
transform: translate3d(0, 100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.anim-slide-up {
animation: slideUp var(--anim-slow) var(--ease-smooth);
}
@keyframes scaleUp {
from {
transform: scale3d(0.8, 0.8, 1);
opacity: 0;
}
to {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
.anim-scale-up {
animation: scaleUp var(--anim-normal) var(--ease-smooth);
transform-origin: var(--origin-center);
}
@keyframes scaleDown {
from {
transform: scale3d(1.2, 1.2, 1);
opacity: 0;
}
to {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
.anim-scale-down {
animation: scaleDown var(--anim-normal) var(--ease-smooth);
transform-origin: var(--origin-center);
}
@keyframes pulse {
0%, 100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
50% {
transform: scale3d(1.05, 1.05, 1);
opacity: 0.8;
}
}
.anim-pulse {
animation: pulse 2s var(--ease-smooth) infinite;
}
@keyframes pulseGentle {
0%, 100% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.02, 1.02, 1);
}
}
.anim-pulse-gentle {
animation: pulseGentle 3s var(--ease-smooth) infinite;
}
@keyframes spin {
from {
transform: rotate3d(0, 0, 1, 0deg);
}
to {
transform: rotate3d(0, 0, 1, 360deg);
}
}
.anim-spin {
animation: spin 1s linear infinite;
}
.anim-spin-slow {
animation: spin 2s linear infinite;
}
@keyframes rotateIn {
from {
transform: rotate3d(0, 0, 1, -180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 1, 0deg);
opacity: 1;
}
}
.anim-rotate-in {
animation: rotateIn var(--anim-slow) var(--ease-smooth);
}
@keyframes bounce {
0%, 100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -10px, 0);
}
}
.anim-bounce {
animation: bounce 2s var(--ease-smooth) infinite;
}
@keyframes bounceIn {
0% {
transform: scale3d(0.3, 0.3, 1);
opacity: 0;
}
50% {
transform: scale3d(1.05, 1.05, 1);
opacity: 1;
}
70% {
transform: scale3d(0.95, 0.95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
.anim-bounce-in {
animation: bounceIn var(--anim-slow) var(--ease-bounce);
}
@keyframes shimmer {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
.anim-shimmer {
animation: shimmer 3s linear infinite;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%
);
background-size: 200% 100%;
}
@keyframes glow {
from {
filter: drop-shadow(0 0 0 transparent);
}
to {
filter: drop-shadow(0 0 8px currentColor);
}
}
.anim-glow {
animation: glow 2s var(--ease-smooth) infinite alternate;
}
@keyframes float {
0%, 100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -10px, 0);
}
}
.anim-float {
animation: float 6s var(--ease-smooth) infinite;
}
@keyframes shake {
0%, 100% {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-5px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(5px, 0, 0);
}
}
.anim-shake {
animation: shake 0.5s var(--ease-smooth);
}
@keyframes wiggle {
0%, 100% {
transform: rotate3d(0, 0, 1, 0deg);
}
25% {
transform: rotate3d(0, 0, 1, -5deg);
}
75% {
transform: rotate3d(0, 0, 1, 5deg);
}
}
.anim-wiggle {
animation: wiggle 0.5s var(--ease-smooth);
}
@keyframes ripple {
from {
transform: scale3d(0, 0, 1);
opacity: 0.5;
}
to {
transform: scale3d(2, 2, 1);
opacity: 0;
}
}
.anim-ripple {
animation: ripple 0.6s linear;
}
@keyframes loadingDots {
0%, 20% {
opacity: 0.3;
transform: scale3d(0.8, 0.8, 1);
}
50% {
opacity: 1;
transform: scale3d(1.2, 1.2, 1);
}
100% {
opacity: 0.3;
transform: scale3d(0.8, 0.8, 1);
}
}
.loading-dot {
animation: loadingDots 1.4s infinite;
}
.loading-dot:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes progressShimmer {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
.anim-progress-shimmer {
animation: progressShimmer 2s linear infinite;
}
@keyframes heartbeat {
0%, 100% {
transform: scale3d(1, 1, 1);
}
14%, 42% {
transform: scale3d(1.3, 1.3, 1);
}
28%, 70% {
transform: scale3d(1, 1, 1);
}
}
.anim-heartbeat {
animation: heartbeat 1.5s var(--ease-smooth) infinite;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0.3;
}
}
.anim-flash {
animation: flash 2s var(--ease-smooth) infinite;
}
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.anim-swing {
animation: swing 1s var(--ease-smooth);
transform-origin: top center;
}
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-duration-fast { animation-duration: var(--anim-fast); }
.anim-duration-normal { animation-duration: var(--anim-normal); }
.anim-duration-slow { animation-duration: var(--anim-slow); }
.anim-duration-slower { animation-duration: var(--anim-slower); }
.anim-infinite { animation-iteration-count: infinite; }
.anim-once { animation-iteration-count: 1; }
.anim-twice { animation-iteration-count: 2; }
.anim-alternate { animation-direction: alternate; }
.anim-reverse { animation-direction: reverse; }
.anim-fill-forwards { animation-fill-mode: forwards; }
.anim-fill-backwards { animation-fill-mode: backwards; }
.anim-fill-both { animation-fill-mode: both; }
.hover-lift {
transition: transform var(--anim-fast) var(--ease-smooth);
}
.hover-lift:hover {
transform: translate3d(0, -2px, 0);
}
.hover-scale {
transition: transform var(--anim-fast) var(--ease-smooth);
}
.hover-scale:hover {
transform: scale3d(1.05, 1.05, 1);
}
.hover-rotate {
transition: transform var(--anim-normal) var(--ease-smooth);
}
.hover-rotate:hover {
transform: rotate3d(0, 0, 1, 5deg);
}
.hover-glow {
transition: filter var(--anim-fast) var(--ease-smooth);
}
.hover-glow:hover {
filter: drop-shadow(0 0 8px currentColor);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.will-animate,
.hover-lift,
.hover-scale,
.hover-rotate {
transition-duration: 0.01ms !important;
}
[class*="anim-pulse"],
[class*="anim-spin"],
[class*="anim-bounce"],
[class*="anim-float"],
[class*="anim-shimmer"],
[class*="anim-glow"],
[class*="anim-heartbeat"],
[class*="anim-flash"] {
animation: none !important;
}
}
[data-theme="dark"] {
--anim-fast: 250ms;
--anim-normal: 350ms;
--anim-slow: 550ms;
}

/* === animations-optimized.css === */
:root {
--animation-duration-instant: 100ms;
--animation-duration-fast: 200ms;
--animation-duration-normal: 300ms;
--animation-duration-medium: 500ms;
--animation-duration-slow: 800ms;
--animation-duration-slower: 1200ms;
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--animation-primary: #667eea;
--animation-secondary: #764ba2;
--animation-accent: #f093fb;
--animation-success: #4facfe;
--animation-warning: #f093fb;
--animation-danger: #fa709a;
--glow-primary: 0 0 20px rgba(102, 126, 234, 0.6);
--glow-secondary: 0 0 25px rgba(118, 75, 162, 0.6);
--glow-accent: 0 0 30px rgba(240, 147, 251, 0.6);
--shadow-lift: 0 10px 40px rgba(0, 0, 0, 0.15);
--shadow-float: 0 15px 50px rgba(0, 0, 0, 0.2);
--animation-distance-small: 20px;
--animation-distance-medium: 40px;
--animation-distance-large: 60px;
--animation-scale-small: 0.95;
--animation-scale-large: 1.05;
--animation-scale-xl: 1.1;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, var(--animation-distance-medium), 0) scale3d(0.98, 0.98, 1);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, calc(-1 * var(--animation-distance-medium)), 0) scale3d(0.98, 0.98, 1);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(calc(-1 * var(--animation-distance-medium)), 0, 0) scale3d(0.98, 0.98, 1);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(var(--animation-distance-medium), 0, 0) scale3d(0.98, 0.98, 1);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale3d(0.7, 0.7, 1) rotate3d(0, 0, 1, -5deg);
}
50% {
opacity: 0.8;
transform: scale3d(1.02, 1.02, 1) rotate3d(0, 0, 1, 2deg);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
}
}
@keyframes scaleInCenter {
from {
opacity: 0;
transform: scale3d(0.5, 0.5, 1);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes scaleUp {
from {
transform: scale3d(0.8, 0.8, 1);
opacity: 0;
}
to {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0) scale3d(0.95, 0.95, 1);
opacity: 0;
}
60% {
transform: translate3d(0, -5%, 0) scale3d(1.02, 1.02, 1);
opacity: 0.9;
}
to {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0) scale3d(0.95, 0.95, 1);
opacity: 0;
}
60% {
transform: translate3d(0, 5%, 0) scale3d(1.02, 1.02, 1);
opacity: 0.9;
}
to {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
opacity: 1;
}
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale3d(0.2, 0.2, 1) rotate3d(0, 0, 1, -10deg);
}
20% {
opacity: 0.7;
transform: scale3d(1.1, 1.1, 1) rotate3d(0, 0, 1, 5deg);
}
40% {
opacity: 0.9;
transform: scale3d(0.9, 0.9, 1) rotate3d(0, 0, 1, -2deg);
}
60% {
opacity: 1;
transform: scale3d(1.05, 1.05, 1) rotate3d(0, 0, 1, 1deg);
}
80% {
transform: scale3d(0.98, 0.98, 1) rotate3d(0, 0, 1, -0.5deg);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
}
}
@keyframes bounce {
0%, 100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -10px, 0);
}
}
@keyframes pulse {
0% {
transform: scale3d(1, 1, 1);
filter: drop-shadow(0 0 0 rgba(102, 126, 234, 0.8));
}
50% {
transform: scale3d(1.05, 1.05, 1);
filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.4));
}
100% {
transform: scale3d(1, 1, 1);
filter: drop-shadow(0 0 25px rgba(102, 126, 234, 0));
}
}
@keyframes pulseGlow {
0%, 100% {
filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6)) brightness(1);
}
50% {
filter: drop-shadow(0 0 30px rgba(240, 147, 251, 0.6)) brightness(1.2);
}
}
@keyframes pulseGentle {
0%, 100% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.02, 1.02, 1);
}
}
@keyframes rotate {
from {
transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
}
50% {
transform: rotate3d(0, 0, 1, 180deg) scale3d(1.05, 1.05, 1);
}
to {
transform: rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
}
}
@keyframes spin {
from {
transform: rotate3d(0, 0, 1, 0deg);
}
to {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes rotateY {
from {
transform: rotate3d(0, 1, 0, 0deg);
}
to {
transform: rotate3d(0, 1, 0, 360deg);
}
}
@keyframes rotateX {
from {
transform: rotate3d(1, 0, 0, 0deg);
}
to {
transform: rotate3d(1, 0, 0, 360deg);
}
}
@keyframes shake {
0%, 100% {
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}
10% {
transform: translate3d(-8px, 0, 0) rotate3d(0, 0, 1, -1deg);
}
20% {
transform: translate3d(8px, 0, 0) rotate3d(0, 0, 1, 1deg);
}
30% {
transform: translate3d(-6px, 0, 0) rotate3d(0, 0, 1, -0.5deg);
}
40% {
transform: translate3d(6px, 0, 0) rotate3d(0, 0, 1, 0.5deg);
}
50% {
transform: translate3d(-4px, 0, 0) rotate3d(0, 0, 1, -0.3deg);
}
60% {
transform: translate3d(4px, 0, 0) rotate3d(0, 0, 1, 0.3deg);
}
70% {
transform: translate3d(-2px, 0, 0) rotate3d(0, 0, 1, -0.1deg);
}
80% {
transform: translate3d(2px, 0, 0) rotate3d(0, 0, 1, 0.1deg);
}
90% {
transform: translate3d(-1px, 0, 0) rotate3d(0, 0, 1, 0deg);
}
}
@keyframes wiggle {
0%, 7% {
transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
}
15% {
transform: rotate3d(0, 0, 1, -12deg) scale3d(1.02, 1.02, 1);
}
20% {
transform: rotate3d(0, 0, 1, 8deg) scale3d(0.98, 0.98, 1);
}
25% {
transform: rotate3d(0, 0, 1, -8deg) scale3d(1.01, 1.01, 1);
}
30% {
transform: rotate3d(0, 0, 1, 5deg) scale3d(0.99, 0.99, 1);
}
35% {
transform: rotate3d(0, 0, 1, -3deg) scale3d(1.005, 1.005, 1);
}
40%, 100% {
transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
}
}
@keyframes float {
0%, 100% {
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}
33% {
transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, 1deg);
}
66% {
transform: translate3d(0, -4px, 0) rotate3d(0, 0, 1, -0.5deg);
}
}
@keyframes floatSlow {
0%, 100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -15px, 0);
}
}
@keyframes heartbeat {
0% {
transform: scale3d(1, 1, 1);
filter: brightness(1);
}
14% {
transform: scale3d(1.15, 1.15, 1);
filter: brightness(1.1);
}
28% {
transform: scale3d(1, 1, 1);
filter: brightness(1);
}
42% {
transform: scale3d(1.15, 1.15, 1);
filter: brightness(1.1);
}
70% {
transform: scale3d(1, 1, 1);
filter: brightness(1);
}
}
@keyframes glow {
0%, 100% {
filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6)) brightness(1);
}
25% {
filter: drop-shadow(0 0 25px rgba(118, 75, 162, 0.6)) brightness(1.1);
}
50% {
filter: drop-shadow(0 0 30px rgba(240, 147, 251, 0.6)) brightness(1.2);
}
75% {
filter: drop-shadow(0 0 25px rgba(118, 75, 162, 0.6)) brightness(1.1);
}
}
@keyframes shimmer {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
@keyframes flipIn {
from {
opacity: 0;
transform: perspective(400px) rotate3d(0, 1, 0, -90deg) scale3d(0.8, 0.8, 1);
}
to {
opacity: 1;
transform: perspective(400px) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
}
}
@keyframes flipInX {
from {
opacity: 0;
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
}
to {
opacity: 1;
transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
}
}
@keyframes flipInY {
from {
opacity: 0;
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
}
to {
opacity: 1;
transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
}
}
@keyframes slideInRotate {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -180deg) scale3d(0.5, 0.5, 1);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
}
}
@keyframes zoomInRotate {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 1) rotate3d(0, 0, 1, -360deg);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
}
}
@keyframes ripple {
from {
transform: scale3d(0, 0, 1);
opacity: 0.5;
}
to {
transform: scale3d(2, 2, 1);
opacity: 0;
}
}
@keyframes rippleWave {
0% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
100% {
transform: scale3d(4, 4, 1);
opacity: 0;
}
}
.gpu-accelerated {
will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
.anim-fade-in-up { animation: fadeInUp var(--animation-duration-normal) var(--ease-smooth); }
.anim-fade-in-down { animation: fadeInDown var(--animation-duration-normal) var(--ease-smooth); }
.anim-fade-in-left { animation: fadeInLeft var(--animation-duration-normal) var(--ease-smooth); }
.anim-fade-in-right { animation: fadeInRight var(--animation-duration-normal) var(--ease-smooth); }
.anim-scale-in { animation: scaleIn var(--animation-duration-medium) var(--ease-bounce); }
.anim-bounce-in { animation: bounceIn var(--animation-duration-slow) var(--ease-bounce); }
.anim-slide-in-up { animation: slideInUp var(--animation-duration-medium) var(--ease-smooth); }
.anim-slide-in-down { animation: slideInDown var(--animation-duration-medium) var(--ease-smooth); }
.anim-pulse { animation: pulse 2s var(--ease-smooth) infinite; }
.anim-float { animation: float 6s var(--ease-smooth) infinite; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-shake { animation: shake 0.5s var(--ease-smooth); }
.anim-wiggle { animation: wiggle 0.5s var(--ease-bounce); }
.anim-heartbeat { animation: heartbeat 1.5s var(--ease-smooth) infinite; }
.anim-glow { animation: glow 3s var(--ease-smooth) infinite alternate; }
.transition-smooth { transition: all var(--animation-duration-normal) var(--ease-smooth); }
.transition-fast { transition: all var(--animation-duration-fast) var(--ease-smooth); }
.transition-slow { transition: all var(--animation-duration-slow) var(--ease-smooth); }
.hover-lift {
transition: transform var(--animation-duration-fast) var(--ease-smooth);
}
.hover-lift:hover {
transform: translate3d(0, -4px, 0);
}
.hover-scale {
transition: transform var(--animation-duration-fast) var(--ease-smooth);
}
.hover-scale:hover {
transform: scale3d(1.05, 1.05, 1);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.anim-pulse,
.anim-float,
.anim-spin,
.anim-heartbeat,
.anim-glow {
animation: none !important;
}
}
[data-theme="dark"] {
--animation-duration-fast: 250ms;
--animation-duration-normal: 350ms;
--animation-duration-medium: 550ms;
}

/* === animations.css === */
:root {
--tp-anim-duration-fast: 200ms;
--tp-anim-duration-normal: 300ms;
--tp-anim-duration-slow: 500ms;
--tp-anim-duration-very-slow: 800ms;
--tp-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--tp-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--tp-easing-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--tp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--tp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
--tp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
--tp-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
}
body {
opacity: 0;
transition: opacity var(--tp-anim-duration-slow) var(--tp-easing-smooth);
}
body.tp-page-loaded {
opacity: 1;
}
body.tp-page-exiting {
opacity: 0;
}
.tp-card,
.large-tab-card,
.info-card,
.stat-card {
position: relative;
overflow: hidden;
transition: all var(--tp-anim-duration-normal) var(--tp-easing-smooth);
}
.tp-lift {
transform: translateY(-8px);
box-shadow: var(--tp-shadow-lg) !important;
}
.tp-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
width: 20px;
height: 20px;
animation: tp-ripple-animation 600ms ease-out;
pointer-events: none;
}
@keyframes tp-ripple-animation {
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(20);
opacity: 0;
}
}
.tp-fade-in-up {
animation: tp-fade-in-up 500ms var(--tp-easing-smooth) backwards;
}
@keyframes tp-fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tp-fade-in {
animation: tp-fade-in 400ms var(--tp-easing-smooth) backwards;
}
@keyframes tp-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.tp-fade-out {
animation: tp-fade-out 300ms var(--tp-easing-smooth) forwards;
}
@keyframes tp-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.tp-animated {
position: relative;
overflow: hidden;
transition: all var(--tp-anim-duration-fast) var(--tp-easing-smooth);
}
.tp-scale-down {
transform: scale(0.95);
}
.tp-pulse-focus {
animation: tp-pulse 1s infinite;
}
@keyframes tp-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
50% {
box-shadow: 0 0 0 8px rgba(102, 126, 234, 0);
}
}
.tp-global-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 0;
visibility: hidden;
transition: all var(--tp-anim-duration-normal) var(--tp-easing-smooth);
}
.tp-global-loader.tp-show {
opacity: 1;
visibility: visible;
}
.tp-loader-content {
text-align: center;
color: #fff;
}
.tp-loader-content p {
margin-top: 16px;
font-size: 14px;
}
.tp-spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
border-radius: 50%;
animation: tp-spin 800ms linear infinite;
margin: 0 auto;
}
.tp-spinner-small {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: tp-spin 600ms linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes tp-spin {
to {
transform: rotate(360deg);
}
}
.tp-loading {
pointer-events: none;
opacity: 0.7;
}
.tp-scroll-animate {
opacity: 0;
transform: translateY(50px);
transition: all 600ms var(--tp-easing-smooth);
}
.tp-scroll-animate.tp-in-view {
opacity: 1;
transform: translateY(0);
}
.tp-slide-in {
opacity: 0;
transform: translateX(-50px);
transition: all 600ms var(--tp-easing-smooth);
}
.tp-slide-in.tp-in-view {
opacity: 1;
transform: translateX(0);
}
.tp-toast-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 10000;
max-width: 400px;
}
.tp-toast {
background: #fff;
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 12px;
box-shadow: var(--tp-shadow-lg);
display: flex;
align-items: center;
gap: 12px;
transform: translateX(120%);
opacity: 0;
transition: all var(--tp-anim-duration-normal) var(--tp-easing-bounce);
}
.tp-toast.tp-toast-show {
transform: translateX(0);
opacity: 1;
}
.tp-toast-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
.tp-toast-message {
flex: 1;
font-size: 14px;
color: #333;
}
.tp-toast-close {
flex-shrink: 0;
background: transparent;
border: none;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
color: #999;
font-size: 18px;
line-height: 1;
transition: all var(--tp-anim-duration-fast);
}
.tp-toast-close:hover {
background: #f0f0f0;
color: #333;
}
.tp-toast-success .tp-toast-icon {
background: #27ae60;
color: #fff;
}
.tp-toast-error .tp-toast-icon {
background: #e74c3c;
color: #fff;
}
.tp-toast-warning .tp-toast-icon {
background: #f39c12;
color: #fff;
}
.tp-toast-info .tp-toast-icon {
background: #3498db;
color: #fff;
}
.tp-skeleton {
padding: 16px 0;
}
.tp-skeleton-line {
height: 16px;
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
border-radius: 4px;
margin-bottom: 12px;
animation: tp-skeleton-loading 1.5s ease-in-out infinite;
}
@keyframes tp-skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.tp-modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all var(--tp-anim-duration-normal) var(--tp-easing-smooth);
}
.tp-modal-backdrop.tp-show {
opacity: 1;
visibility: visible;
}
.tp-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
max-width: 600px;
width: 90%;
background: #fff;
border-radius: 12px;
box-shadow: var(--tp-shadow-xl);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all var(--tp-anim-duration-normal) var(--tp-easing-bounce);
}
.tp-modal.tp-modal-open {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
body.tp-modal-open {
overflow: hidden;
}
.tp-form-field {
position: relative;
margin-bottom: 24px;
}
.tp-form-field label {
position: absolute;
top: 16px;
right: 12px;
font-size: 14px;
color: #999;
pointer-events: none;
transition: all var(--tp-anim-duration-fast) var(--tp-easing-smooth);
}
.tp-form-field.tp-focused label,
.tp-form-field.tp-filled label {
top: -8px;
right: 8px;
font-size: 12px;
color: #667eea;
background: #fff;
padding: 0 4px;
}
.tp-form-field input,
.tp-form-field textarea,
.tp-form-field select {
width: 100%;
padding: 16px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
transition: all var(--tp-anim-duration-fast) var(--tp-easing-smooth);
}
.tp-form-field.tp-focused input,
.tp-form-field.tp-focused textarea,
.tp-form-field.tp-focused select {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.tp-form-field.tp-error input,
.tp-form-field.tp-error textarea,
.tp-form-field.tp-error select {
border-color: #e74c3c;
}
.tp-form-field.tp-success input,
.tp-form-field.tp-success textarea,
.tp-form-field.tp-success select {
border-color: #27ae60;
}
.tp-shake {
animation: tp-shake 500ms ease-in-out;
}
@keyframes tp-shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
.tp-bounce {
animation: tp-bounce 500ms var(--tp-easing-bounce);
}
@keyframes tp-bounce {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.tp-pulse {
animation: tp-pulse-scale 1s ease-in-out infinite;
}
@keyframes tp-pulse-scale {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.tp-highlight-flash {
animation: tp-highlight-flash 1.5s ease-out;
}
@keyframes tp-highlight-flash {
0%, 100% {
background-color: transparent;
}
50% {
background-color: rgba(102, 126, 234, 0.2);
}
}
.tp-rotate {
animation: tp-rotate 2s linear infinite;
}
@keyframes tp-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.tp-swing {
animation: tp-swing 1s ease-in-out;
}
@keyframes tp-swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.tp-wobble {
animation: tp-wobble 1s ease-in-out;
}
@keyframes tp-wobble {
0%, 100% {
transform: translateX(0);
}
15% {
transform: translateX(-25px) rotate(-5deg);
}
30% {
transform: translateX(20px) rotate(3deg);
}
45% {
transform: translateX(-15px) rotate(-3deg);
}
60% {
transform: translateX(10px) rotate(2deg);
}
75% {
transform: translateX(-5px) rotate(-1deg);
}
}
.tp-flip {
animation: tp-flip 600ms ease-in-out;
}
@keyframes tp-flip {
0% {
transform: perspective(400px) rotateY(0);
}
100% {
transform: perspective(400px) rotateY(360deg);
}
}
.tp-parallax {
will-change: transform;
transition: transform 100ms linear;
}
@media screen and (max-width: 768px) {
.tp-toast-container {
right: 10px;
left: 10px;
max-width: none;
}
.tp-toast {
padding: 12px 16px;
}
.tp-modal {
width: 95%;
}
.tp-lift {
transform: translateY(-4px);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.tp-parallax {
transform: none !important;
}
}
body.tp-no-animations * {
animation: none !important;
transition: none !important;
}
@media (prefers-color-scheme: dark) {
:root {
--tp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--tp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--tp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
--tp-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.tp-toast {
background: #2d2d2d;
color: #fff;
}
.tp-toast-message {
color: #fff;
}
.tp-toast-close {
color: #999;
}
.tp-toast-close:hover {
background: #444;
color: #fff;
}
.tp-skeleton-line {
background: linear-gradient(
90deg,
#2d2d2d 25%,
#3d3d3d 50%,
#2d2d2d 75%
);
}
.tp-modal {
background: #2d2d2d;
}
.tp-form-field label {
color: #aaa;
}
.tp-form-field input,
.tp-form-field textarea,
.tp-form-field select {
background: #333;
border-color: #444;
color: #fff;
}
}
@media print {
.tp-toast-container,
.tp-global-loader,
.tp-modal-backdrop,
.tp-ripple {
display: none !important;
}
* {
animation: none !important;
transition: none !important;
}
}