/* ==========================================
   MODERN SMOOTH ANIMATIONS
   Optimized for performance and mobile
   ========================================== */

/* ===== PAGE LOAD ANIMATIONS ===== */

/* Fade in from bottom - smooth entrance */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from right - horizontal entrance */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from left - horizontal entrance */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from left - smooth side entry */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right - smooth side entry */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom in - scale entrance */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scale in - subtle zoom */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fade in - simple opacity */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */

/* Slide up - bottom reveal */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide down - top reveal */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== CONTINUOUS ANIMATIONS ===== */

/* Floating - smooth up/down motion */
@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Floating subtle - gentle motion */
@keyframes floatingSubtle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Pulse - breathing effect */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(0.98);
  }
}

/* Pulse glow - glowing effect */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(124, 58, 237, 0.6);
  }
}

/* Bounce - playful bounce */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

/* Rotate - continuous rotation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Shimmer - loading effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Gradient shift - color wave */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ===== BUTTON ANIMATIONS ===== */

/* Button pop - scale effect */
@keyframes buttonPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Button shake - attention grabber */
@keyframes buttonShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Ripple - click effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===== TEXT ANIMATIONS ===== */

/* Typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Blink cursor */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Text reveal - slide and fade */
@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Gradient text animation */
@keyframes gradientText {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ===== CARD ANIMATIONS ===== */

/* Card flip */
@keyframes cardFlip {
  from {
    transform: perspective(1000px) rotateY(-10deg);
    opacity: 0;
  }
  to {
    transform: perspective(1000px) rotateY(0deg);
    opacity: 1;
  }
}

/* Card hover lift */
@keyframes cardLift {
  from {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  to {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.2);
  }
}

/* ==========================================
   ANIMATION UTILITY CLASSES
   ========================================== */

/* ===== FADE ANIMATIONS ===== */
.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.fade-in-down {
  animation: slideDown 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.fade-in-left {
  animation: fadeInLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.fade-in-right {
  animation: fadeInRight 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* ===== SLIDE ANIMATIONS ===== */
.slide-in-left {
  animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.slide-in-right {
  animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.slide-up {
  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.slide-down {
  animation: slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* ===== ZOOM ANIMATIONS ===== */
.zoom-in {
  animation: zoomIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* ===== CONTINUOUS ANIMATIONS ===== */
.floating {
  animation: floating 3.5s ease-in-out infinite;
}

.floating-subtle {
  animation: floatingSubtle 4s ease-in-out infinite;
}

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

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

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

.rotate-slow {
  animation: rotate 20s linear infinite;
}

.rotate-fast {
  animation: rotate 10s linear infinite;
}

.shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 1000px 100%;
}

/* ===== ANIMATION DELAYS ===== */
.delay-1 {
  animation-delay: 0.15s;
}

.delay-2 {
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.45s;
}

.delay-4 {
  animation-delay: 0.6s;
}

.delay-5 {
  animation-delay: 0.75s;
}

.delay-6 {
  animation-delay: 0.9s;
}

/* ===== ANIMATION DURATIONS ===== */
.duration-fast {
  animation-duration: 0.3s;
}

.duration-normal {
  animation-duration: 0.6s;
}

.duration-slow {
  animation-duration: 1s;
}

/* ==========================================
   HOVER ANIMATIONS
   ========================================== */

/* Scale hover effect */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Lift hover effect */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.2);
}

/* Glow hover effect */
.hover-glow {
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 25px rgba(124, 58, 237, 0.4);
}

/* Brighten hover effect */
.hover-brighten {
  transition: filter 0.3s ease;
}

.hover-brighten:hover {
  filter: brightness(1.1);
}

/* Rotate hover effect */
.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

/* Pulse on hover */
.pulse-on-hover:hover {
  animation: buttonPop 0.5s ease-out;
}

/* ==========================================
   BUTTON SPECIFIC ANIMATIONS
   ========================================== */

/* Enhanced button base */

/* Enhanced button base */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Button hover lift */
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.25);
}

/* Button active press */
.btn:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 0.1s;
}

/* Button ripple effect container */
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
  transition: 0s;
}

/* ==========================================
   CARD ANIMATIONS
   ========================================== */

/* Quick link cards */
.quick-link-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.quick-link-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.2);
}

/* Hero feature cards */
.hero-feature-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.hero-feature-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.18);
}

/* Template cards */
.template-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.template-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 25px 50px rgba(124, 58, 237, 0.25);
}

/* Testimonial cards */
.testimonial-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.15);
}

/* ==========================================
   STAGGERED GRID ANIMATIONS
   ========================================== */

/* Quick links grid stagger */
.quick-links-grid .quick-link-card:nth-child(1) {
  animation-delay: 0.1s;
}

.quick-links-grid .quick-link-card:nth-child(2) {
  animation-delay: 0.2s;
}

.quick-links-grid .quick-link-card:nth-child(3) {
  animation-delay: 0.3s;
}

.quick-links-grid .quick-link-card:nth-child(4) {
  animation-delay: 0.4s;
}

.quick-links-grid .quick-link-card:nth-child(5) {
  animation-delay: 0.5s;
}

.quick-links-grid .quick-link-card:nth-child(6) {
  animation-delay: 0.6s;
}

/* Features grid stagger */
.features-showcase-grid .showcase-card:nth-child(1),
.features-grid .feature-card:nth-child(1) {
  animation-delay: 0.1s;
}

.features-showcase-grid .showcase-card:nth-child(2),
.features-grid .feature-card:nth-child(2) {
  animation-delay: 0.2s;
}

.features-showcase-grid .showcase-card:nth-child(3),
.features-grid .feature-card:nth-child(3) {
  animation-delay: 0.3s;
}

.features-showcase-grid .showcase-card:nth-child(4),
.features-grid .feature-card:nth-child(4) {
  animation-delay: 0.4s;
}

.features-showcase-grid .showcase-card:nth-child(5),
.features-grid .feature-card:nth-child(5) {
  animation-delay: 0.5s;
}

.features-showcase-grid .showcase-card:nth-child(6),
.features-grid .feature-card:nth-child(6) {
  animation-delay: 0.6s;
}

/* Templates grid stagger */
.templates-grid .template-card:nth-child(1) {
  animation-delay: 0.1s;
}

.templates-grid .template-card:nth-child(2) {
  animation-delay: 0.15s;
}

.templates-grid .template-card:nth-child(3) {
  animation-delay: 0.2s;
}

.templates-grid .template-card:nth-child(4) {
  animation-delay: 0.25s;
}

.templates-grid .template-card:nth-child(5) {
  animation-delay: 0.3s;
}

.templates-grid .template-card:nth-child(6) {
  animation-delay: 0.35s;
}

/* Testimonials grid stagger */
.testimonials-grid .testimonial-card:nth-child(1) {
  animation-delay: 0.1s;
}

.testimonials-grid .testimonial-card:nth-child(2) {
  animation-delay: 0.2s;
}

.testimonials-grid .testimonial-card:nth-child(3) {
  animation-delay: 0.3s;
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */

/* Scroll reveal - elements fade in when scrolled into view */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll fade - simple fade on scroll */
.scroll-fade {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.scroll-fade.revealed {
  opacity: 1;
}

/* Scroll slide left */
.scroll-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-slide-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scroll slide right */
.scroll-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-slide-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scroll zoom */
.scroll-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-zoom.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================
   SMOOTH SCROLL BEHAVIOR
   ========================================== */

html {
  scroll-behavior: smooth;
}

/* Smooth scroll with custom easing */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  
  * {
    scroll-behavior: smooth;
  }
}

/* ==========================================
   LOADING ANIMATIONS
   ========================================== */

/* Page load fade in */
body {
  animation: fadeIn 0.5s ease-out;
}

/* Skeleton loading */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  animation: skeleton-loading 1.5s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    #f0f0f0 0px,
    #f8f8f8 40px,
    #f0f0f0 80px
  );
  background-size: 200px 100%;
}

/* ==========================================
   SPECIAL EFFECTS
   ========================================== */

/* Gradient animation for hero text */
.gradient-text {
  background: linear-gradient(
    135deg,
    #7c3aed 0%,
    #ec4899 50%,
    #f59e0b 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}

/* Parallax scroll effect */
.parallax {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon bounce on hover */
.icon-bounce:hover {
  animation: bounce 0.6s ease;
}

/* Badge pulse */
.badge-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Notification slide in */
@keyframes notificationSlideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification {
  animation: notificationSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   MOBILE OPTIMIZATIONS
   ========================================== */

/* Reduce animations on mobile for performance */
@media (max-width: 767px) {
  /* Faster animations on mobile */
  .fade-in-up,
  .fade-in-down,
  .fade-in-left,
  .fade-in-right,
  .slide-up,
  .slide-down,
  .zoom-in,
  .scale-in {
    animation-duration: 0.5s;
  }
  
  /* Disable continuous animations on low-end devices */
  @media (prefers-reduced-motion: no-preference) {
    .floating,
    .floating-subtle,
    .pulse {
      animation-duration: 4s; /* Slower for battery saving */
    }
  }
  
  /* Simpler hover effects on touch devices */
  .hover-lift:hover,
  .hover-scale:hover,
  .hover-glow:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================== */

/* Respect user's motion preferences */
@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;
  }
  
  /* Keep essential transitions but make them instant */
  .btn,
  .quick-link-card,
  .template-card,
  .hero-feature-card,
  .testimonial-card {
    transition: none !important;
  }
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Use will-change for animated elements */
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right,
.slide-up,
.zoom-in,
.scale-in,
.btn,
.quick-link-card,
.template-card,
.hero-feature-card {
  will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.fade-in-up.animation-complete,
.fade-in-down.animation-complete,
.fade-in-left.animation-complete,
.fade-in-right.animation-complete,
.slide-up.animation-complete,
.zoom-in.animation-complete,
.scale-in.animation-complete {
  will-change: auto;
}

/* GPU acceleration for smooth animations */
.btn,
.quick-link-card,
.template-card,
.hero-feature-card,
.testimonial-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ==========================================
   END OF ANIMATIONS
   ========================================== */