/**
 * Animation enhancements for the landing page
 * Provides smooth transitions and polish for anime.js animations
 */

/* Smooth scroll behavior */
html {
  scroll-behavior: auto; /* We're handling this with JS for more control */
}

/* Ensure elements start invisible if they have data-animate */
[data-animate] {
  opacity: 0;
}

/* But keep containers with staggered children visible */
[data-animate][data-stagger] {
  opacity: 1 !important;
}

/* Hide staggered children instead */
[data-stagger-child] {
  opacity: 0;
}

/* Hero elements initial state */
[data-hero] {
  opacity: 1 !important; /* Container should be visible */
}

[data-hero="badge"],
[data-hero="title"],
[data-hero="description"],
[data-hero="subtext"],
[data-hero="buttons"] {
  opacity: 0;
}

/* Card hover effects - only transition box-shadow, not transform */
.bg-gradient-to-b {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

/* Ensure smooth animations */
[data-stagger-child],
[data-animate] {
  transform-origin: center center;
}

.bg-gradient-to-b:hover {
  box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.15);
}

/* Button hover enhancements */
a[class*="px-6 py-3"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  [data-animate],
  [data-hero="badge"],
  [data-hero="title"],
  [data-hero="description"],
  [data-hero="subtext"],
  [data-hero="buttons"] {
    opacity: 1 !important;
  }
}

/* Performance optimizations */
[data-animate],
[data-stagger-child],
[data-hero] > * {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sticky Note Styles */
.sticky-note {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}

.sticky-note:hover {
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.15),
    0 12px 24px rgba(0,0,0,0.15);
}

/* Handwriting font alternative */
.font-handwriting {
  font-family: 'Segoe Print', 'Bradley Hand', 'Brush Script MT', cursive;
}

/* Kanban column styles */
.kanban-column {
  min-height: 400px;
}