/* =====================================================
   InfoShop — Animations & Transitions
   ===================================================== */

/* ---- Keyframes ---- */
@keyframes spin {
       to {
              transform: rotate(360deg);
       }
}

@keyframes pulse {

       0%,
       100% {
              opacity: 1;
       }

       50% {
              opacity: 0.5;
       }
}

@keyframes fadeIn {
       from {
              opacity: 0;
       }

       to {
              opacity: 1;
       }
}

@keyframes fadeInUp {
       from {
              opacity: 0;
              transform: translateY(20px);
       }

       to {
              opacity: 1;
              transform: translateY(0);
       }
}

@keyframes slideInRight {
       from {
              opacity: 0;
              transform: translateX(30px);
       }

       to {
              opacity: 1;
              transform: translateX(0);
       }
}

@keyframes slideInDown {
       from {
              opacity: 0;
              transform: translateY(-10px);
       }

       to {
              opacity: 1;
              transform: translateY(0);
       }
}

@keyframes scaleIn {
       from {
              opacity: 0;
              transform: scale(0.9);
       }

       to {
              opacity: 1;
              transform: scale(1);
       }
}

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

       to {
              background-position: 200% 0;
       }
}

@keyframes glowPulse {

       0%,
       100% {
              box-shadow: 0 0 20px var(--color-primary-glow);
       }

       50% {
              box-shadow: 0 0 40px var(--color-primary-glow), 0 0 60px var(--color-primary-glow);
       }
}

@keyframes countUp {
       from {
              opacity: 0;
              transform: translateY(10px);
       }

       to {
              opacity: 1;
              transform: translateY(0);
       }
}

@keyframes borderRotate {
       from {
              background-position: 0% 50%;
       }

       to {
              background-position: 100% 50%;
       }
}

/* ---- Animation utilities ---- */
.animate-fade-in {
       animation: fadeIn 0.4s ease forwards;
}

.animate-fade-in-up {
       animation: fadeInUp 0.5s ease forwards;
}

.animate-scale-in {
       animation: scaleIn 0.3s ease forwards;
}

.animate-slide-down {
       animation: slideInDown 0.3s ease forwards;
}

.animate-pulse {
       animation: pulse 2s ease-in-out infinite;
}

.animate-spin {
       animation: spin 1s linear infinite;
}

/* ---- Stagger children ---- */
.stagger-children>* {
       opacity: 0;
       animation: fadeInUp 0.5s ease forwards;
}

.stagger-children>*:nth-child(1) {
       animation-delay: 0.05s;
}

.stagger-children>*:nth-child(2) {
       animation-delay: 0.10s;
}

.stagger-children>*:nth-child(3) {
       animation-delay: 0.15s;
}

.stagger-children>*:nth-child(4) {
       animation-delay: 0.20s;
}

.stagger-children>*:nth-child(5) {
       animation-delay: 0.25s;
}

.stagger-children>*:nth-child(6) {
       animation-delay: 0.30s;
}

/* ---- Skeleton loading ---- */
.skeleton {
       background: linear-gradient(90deg,
                     var(--color-bg-elevated) 25%,
                     var(--color-bg-hover) 50%,
                     var(--color-bg-elevated) 75%);
       background-size: 200% 100%;
       animation: shimmer 1.5s infinite;
       border-radius: var(--radius-md);
}

.skeleton-text {
       height: 14px;
       margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
       width: 60%;
}

.skeleton-title {
       height: 24px;
       width: 40%;
       margin-bottom: var(--space-4);
}

.skeleton-card {
       height: 200px;
       border-radius: var(--radius-lg);
}

/* ---- Page transitions ---- */
.page-enter {
       animation: fadeIn 0.3s ease;
}

/* ---- Number counter animation ---- */
.count-animate {
       animation: countUp 0.6s ease forwards;
}

/* ---- Hover glow for cards ---- */
.glow-on-hover {
       transition: box-shadow var(--transition-base);
}

.glow-on-hover:hover {
       box-shadow: 0 0 30px var(--color-primary-glow), var(--shadow-lg);
}

/* ---- Animated gradient border ---- */
.gradient-border {
       position: relative;
       background: var(--color-bg-card);
       border-radius: var(--radius-lg);
}

.gradient-border::before {
       content: '';
       position: absolute;
       inset: -1px;
       border-radius: inherit;
       background: linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-primary));
       background-size: 200% 200%;
       animation: borderRotate 3s linear infinite;
       z-index: -1;
}

/* ---- Floating animation for hero element ---- */
.float {
       animation: float 4s ease-in-out infinite;
}

@keyframes float {

       0%,
       100% {
              transform: translateY(0);
       }

       50% {
              transform: translateY(-10px);
       }
}

/* ---- Status pulse dot ---- */
.status-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       display: inline-block;
}

.status-dot.active {
       background: var(--color-success);
       animation: pulse 2s infinite;
}

.status-dot.pending {
       background: var(--color-warning);
       animation: pulse 1.5s infinite;
}

.status-dot.inactive {
       background: var(--color-text-muted);
}