/* Advanced Animations for TabTidy Landing Page */

/* Tab grouping animation - simulates how tabs get organized */
@keyframes tabGrouping {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(20px) scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.tab.animate-grouping {
  animation: tabGrouping 1.5s ease-in-out;
}

/* Smart Names color change animation */
@keyframes colorChange {
  0% { background-color: #f5f5f5; }
  50% { background-color: #4285F4; }
  100% { background-color: #34A853; }
}

.smart-name-demo {
  animation: colorChange 3s ease-in-out infinite;
}

/* Tab sorting animation */
@keyframes tabSort {
  0% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  75% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

.tab-sorting {
  animation: tabSort 2s ease-in-out;
}

/* Inactive tab warning pulse */
@keyframes inactiveWarning {
  0%, 100% { 
    background-color: transparent;
    border-color: #ccc;
  }
  50% { 
    background-color: rgba(255, 152, 0, 0.1);
    border-color: #FF9800;
  }
}

.inactive-tab-demo {
  animation: inactiveWarning 2s ease-in-out infinite;
}

/* Tab movement animation - for ungrouped tabs moving right */
@keyframes moveRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(200px);
    opacity: 1;
  }
}

.move-right-demo {
  animation: moveRight 2s ease-in-out;
}

/* Floating animation for feature icons */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.feature-icon {
  animation: float 3s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.feature-card:nth-child(1) .feature-icon { --float-delay: 0s; }
.feature-card:nth-child(2) .feature-icon { --float-delay: 0.5s; }
.feature-card:nth-child(3) .feature-icon { --float-delay: 1s; }
.feature-card:nth-child(4) .feature-icon { --float-delay: 1.5s; }
.feature-card:nth-child(5) .feature-icon { --float-delay: 2s; }
.feature-card:nth-child(6) .feature-icon { --float-delay: 2.5s; }

/* Disable floating animation for feature icons */
.feature-icon {
  animation: none !important;
}

/* Typing animation for demo text */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--primary-color); }
}

.typing-demo {
  overflow: hidden;
  border-right: 2px solid var(--primary-color);
  white-space: nowrap;
  animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
}

/* Pulsing dot animation for "new features" */
@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
  }
}

.pulse-dot {
  animation: pulse-dot 2s infinite;
}

/* Loading animation for demo elements */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
}

/* Tab creation animation */
@keyframes tabCreate {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(90deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.tab-create {
  animation: tabCreate 0.8s ease-out;
}

/* Progress bar animation for stats */
@keyframes progressBar {
  0% { width: 0%; }
  100% { width: var(--progress-width, 100%); }
}

.progress-bar {
  animation: progressBar 2s ease-out;
}

/* Hover effect for pricing cards */
.pricing-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 25px 50px rgba(66, 133, 244, 0.2);
}

/* Staggered animation for feature list */
.feature {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
}

.feature.animate {
  opacity: 1;
  transform: translateX(0);
}

.feature:nth-child(1) { transition-delay: 0.1s; }
.feature:nth-child(2) { transition-delay: 0.2s; }
.feature:nth-child(3) { transition-delay: 0.3s; }
.feature:nth-child(4) { transition-delay: 0.4s; }
.feature:nth-child(5) { transition-delay: 0.5s; }
.feature:nth-child(6) { transition-delay: 0.6s; }
.feature:nth-child(7) { transition-delay: 0.7s; }

/* Tab grouping demonstration */
.demo-tab-container {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}

.demo-tab {
  position: absolute;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Before grouping - scattered positions */
.demo-tab.before:nth-child(1) { top: 20px; left: 10px; }
.demo-tab.before:nth-child(2) { top: 60px; left: 120px; }
.demo-tab.before:nth-child(3) { top: 100px; left: 250px; }
.demo-tab.before:nth-child(4) { top: 140px; left: 80px; }

/* After grouping - organized positions */
.demo-tab.after:nth-child(1) { top: 20px; left: 10px; }
.demo-tab.after:nth-child(2) { top: 20px; left: 100px; }
.demo-tab.after:nth-child(3) { top: 80px; left: 10px; }
.demo-tab.after:nth-child(4) { top: 80px; left: 100px; }

/* Glowing effect for active elements */
@keyframes glow {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
  }
  50% { 
    box-shadow: 0 0 20px rgba(66, 133, 244, 0.8), 
                0 0 30px rgba(66, 133, 244, 0.6);
  }
}

.glow-effect {
  animation: glow 2s ease-in-out infinite;
}

/* Morphing background animation */
@keyframes morphBackground {
  0%, 100% {
    background: linear-gradient(45deg, #667eea, #764ba2);
  }
  25% {
    background: linear-gradient(45deg, #f093fb, #f5576c);
  }
  50% {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
  }
  75% {
    background: linear-gradient(45deg, #43e97b, #38f9d7);
  }
}

.morphing-bg {
  animation: morphBackground 10s ease-in-out infinite;
}

/* Scroll-triggered animations */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Success state animation */
@keyframes checkmark {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 100 0;
  }
}

.checkmark {
  animation: checkmark 1s ease-in-out;
}

/* Tab close animation */
@keyframes tabClose {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.8) rotate(90deg);
    opacity: 0.5;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

.tab-close {
  animation: tabClose 0.5s ease-in;
}

/* Responsive animations - disable complex animations on mobile */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .feature-icon {
    animation: none;
  }
  
  .morphing-bg {
    animation: none;
  }
  
  .floating-element {
    animation: none;
  }
}