/* MiStarts Interface Enhancements - Melhorias da Interface */

/* ===== ANIMAÇÕES DE ENTRADA ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

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

/* ===== CLASSES DE ANIMAÇÃO ===== */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out;
}

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

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

/* ===== EFEITOS DE HOVER MELHORADOS ===== */
.hover-lift {
  transition: var(--mistarts-transition);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--mistarts-shadow-xl);
}

.hover-glow {
  transition: var(--mistarts-transition);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(49, 69, 229, 0.3);
}

.hover-scale {
  transition: var(--mistarts-transition);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ===== GRADIENTES ANIMADOS ===== */
.gradient-animated {
  background: linear-gradient(-45deg, #3145E5, #5878E8, #3145E5, #5878E8);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ===== CARDS INTERATIVOS ===== */
.interactive-card {
  background: var(--mistarts-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mistarts-radius-lg);
  padding: 2rem;
  transition: var(--mistarts-transition);
  position: relative;
  overflow: hidden;
}

.interactive-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.interactive-card:hover::before {
  left: 100%;
}

.interactive-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mistarts-shadow-xl);
  border-color: var(--mistarts-primary);
}

/* ===== BOTÕES ESPECIAIS ===== */
.btn-mistarts-glow {
  background: var(--mistarts-gradient-primary);
  border: none;
  color: white;
  padding: 0.875rem 2rem;
  border-radius: var(--mistarts-radius-md);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--mistarts-transition);
  box-shadow: var(--mistarts-shadow-md);
  position: relative;
  overflow: hidden;
}

.btn-mistarts-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-mistarts-glow:hover::before {
  left: 100%;
}

.btn-mistarts-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(49, 69, 229, 0.4);
  color: white;
}

/* ===== SEÇÕES COM PARALLAX ===== */
.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.parallax-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.parallax-section .container {
  position: relative;
  z-index: 2;
}

/* ===== LOADING STATES ===== */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== SCROLL INDICATORS ===== */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1000;
}

.scroll-progress {
  height: 100%;
  background: var(--mistarts-gradient-primary);
  width: 0%;
  transition: width 0.1s ease;
}

/* ===== GLASSMORPHISM ===== */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--mistarts-radius-lg);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mistarts-radius-lg);
}

/* ===== RESPONSIVE ENHANCEMENTS ===== */
@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
  }
  
  .interactive-card {
    padding: 1.5rem;
  }
  
  .btn-mistarts-glow {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .interactive-card {
    padding: 1rem;
  }
  
  .btn-mistarts-glow {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* ===== DARK MODE ENHANCEMENTS ===== */
@media (prefers-color-scheme: dark) {
  .loading-skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .hover-lift,
  .hover-glow,
  .hover-scale {
    transform: none !important;
    box-shadow: none !important;
  }
  
  .animate-fade-in-up,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-pulse,
  .animate-float {
    animation: none !important;
  }
}