/* Animation CSS for Tnbihaty Landing Page */

/* AOS (Animate On Scroll) Animations */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos].aos-animate {
  opacity: 1;
}

/* Fade animations */
[data-aos="fade-up"] {
  transform: translateY(50px);
}

[data-aos="fade-down"] {
  transform: translateY(-50px);
}

[data-aos="fade-right"] {
  transform: translateX(-50px);
}

[data-aos="fade-left"] {
  transform: translateX(50px);
}

[data-aos="fade-up-right"] {
  transform: translate(-50px, 50px);
}

[data-aos="fade-up-left"] {
  transform: translate(50px, 50px);
}

[data-aos="fade-down-right"] {
  transform: translate(-50px, -50px);
}

[data-aos="fade-down-left"] {
  transform: translate(50px, -50px);
}

[data-aos].aos-animate {
  transform: translateX(0) translateY(0);
}

/* Zoom animations */
[data-aos="zoom-in"] {
  transform: scale(0.6);
}

[data-aos="zoom-in-up"] {
  transform: translateY(50px) scale(0.6);
}

[data-aos="zoom-in-down"] {
  transform: translateY(-50px) scale(0.6);
}

[data-aos="zoom-in-right"] {
  transform: translateX(-50px) scale(0.6);
}

[data-aos="zoom-in-left"] {
  transform: translateX(50px) scale(0.6);
}

[data-aos="zoom-out"] {
  transform: scale(1.2);
}

[data-aos="zoom-out-up"] {
  transform: translateY(50px) scale(1.2);
}

[data-aos="zoom-out-down"] {
  transform: translateY(-50px) scale(1.2);
}

[data-aos="zoom-out-right"] {
  transform: translateX(-50px) scale(1.2);
}

[data-aos="zoom-out-left"] {
  transform: translateX(50px) scale(1.2);
}

/* Flip animations */
[data-aos="flip-up"] {
  transform: perspective(2500px) rotateX(-100deg);
}

[data-aos="flip-down"] {
  transform: perspective(2500px) rotateX(100deg);
}

[data-aos="flip-right"] {
  transform: perspective(2500px) rotateY(-100deg);
}

[data-aos="flip-left"] {
  transform: perspective(2500px) rotateY(100deg);
}

/* Custom animations */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

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

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

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

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

.fadeInUp-animation {
  animation: fadeInUp 0.5s ease-out forwards;
}

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

.slideInLeft-animation {
  animation: slideInLeft 0.5s ease-out forwards;
}

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

.slideInRight-animation {
  animation: slideInRight 0.5s ease-out forwards;
}

/* Counter Animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter-animation {
  animation: countUp 1s ease-out forwards;
}

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

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

.typing-animation {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--whatsapp-green);
  animation: 
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-animation {
  animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

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

.bounce-animation {
  animation: bounce 2s infinite;
}

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

.rotate-animation {
  animation: rotate 8s linear infinite;
}

/* Scale Animation */
@keyframes scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

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

/* Fade In Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fadeIn-animation {
  animation: fadeIn 1s ease-out forwards;
}

/* Staggered Animation Delays */
.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }

/* Transition Delays */
.transition-delay-100 { transition-delay: 0.1s; }
.transition-delay-200 { transition-delay: 0.2s; }
.transition-delay-300 { transition-delay: 0.3s; }
.transition-delay-400 { transition-delay: 0.4s; }
.transition-delay-500 { transition-delay: 0.5s; }

/* Animation Durations */
.duration-300 { transition-duration: 0.3s; }
.duration-500 { transition-duration: 0.5s; }
.duration-700 { transition-duration: 0.7s; }
.duration-1000 { transition-duration: 1s; }

/* Animation Timing Functions */
.ease-in-out { transition-timing-function: ease-in-out; }
.ease-out { transition-timing-function: ease-out; }
.ease-in { transition-timing-function: ease-in; }
.linear { transition-timing-function: linear; }

/* Hover Animations */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-10px);
}

.hover-scale {
  transition: transform 0.3s ease;
}

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

.hover-rotate {
  transition: transform 0.3s ease;
}

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

.hover-shadow {
  transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Scroll-based animations initialization */
.aos-init {
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.aos-animate {
  opacity: 1;
}

/* Animation for chatbot typing indicator */
@keyframes typingDots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
  100% { content: "."; }
}

.typing-indicator::after {
  content: ".";
  animation: typingDots 1.5s infinite;
}

/* Animation for notification badge */
@keyframes notify {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.notification-badge {
  animation: notify 2s infinite;
}

/* Responsive animations */
@media (max-width: 768px) {
  [data-aos] {
    transition-duration: 0.3s !important;
  }
  
  .stagger-animation > * {
    animation-delay: 0.1s !important;
  }
}

/* Prefers-reduced-motion media query */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}