/* Animations CSS - Animations, Transitions, Effects */ 

@keyframes blink-caret {
    from,
    to {
      border-color: transparent;
    }
    50% {
      border-color: var(--brand-primary);
    }
  }
  
  @keyframes moveBackground {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 100% 100%;
    }
  }
  
  @keyframes float {
    0% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-20px) scale(1.05);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }
  
  @keyframes particlesAnimation {
    0% {
      background-position: 0% 0%;
    }
    25% {
      background-position: 100% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    75% {
      background-position: 0% 100%;
    }
    100% {
      background-position: 0% 0%;
    }
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes glitch-effect {
    0% {
      transform: translate(0);
      opacity: 0;
    }
    20% {
      transform: translate(-5px, 5px);
      opacity: 0.3;
    }
    40% {
      transform: translate(-5px, -5px);
      opacity: 0;
    }
    60% {
      transform: translate(5px, 5px);
      opacity: 0.3;
    }
    80% {
      transform: translate(5px, -5px);
      opacity: 0;
    }
    100% {
      transform: translate(0);
      opacity: 0;
    }
  }
  
  @keyframes pulse {
    0% {
      opacity: 0.3;
      transform: scale(1);
    }
    100% {
      opacity: 0.6;
      transform: scale(1.1);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes popup-entrance {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideDown {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideLeft {
    from {
      transform: translateX(20px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideRight {
    from {
      transform: translateX(-20px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes zoomIn {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px);
    }
    60% {
      transform: translateY(-10px);
    }
  }
  
  .fade-in {
    animation: fadeIn 1s ease forwards;
  }
  
  .slide-up {
    animation: slideUp 1s ease forwards;
  }
  
  .slide-down {
    animation: slideDown 1s ease forwards;
  }
  
  .slide-left {
    animation: slideLeft 1s ease forwards;
  }
  
  .slide-right {
    animation: slideRight 1s ease forwards;
  }
  
  .zoom-in {
    animation: zoomIn 1s ease forwards;
  }
  
  .bounce {
    animation: bounce 2s ease infinite;
  }
  
  .delay-100 {
    animation-delay: 0.1s;
  }
  
  .delay-200 {
    animation-delay: 0.2s;
  }
  
  .delay-300 {
    animation-delay: 0.3s;
  }
  
  .delay-400 {
    animation-delay: 0.4s;
  }
  
  .delay-500 {
    animation-delay: 0.5s;
  }
  
  /* Testimonial Animations */
  @keyframes testimonialCardSwitch {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    20% {
      opacity: 0;
      transform: translateY(20px);
    }
    40% {
      opacity: 0;
      transform: translateY(-20px);
    }
    60% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes logoSwitch {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    33% {
      transform: scale(0.8);
      opacity: 0;
    }
    66% {
      transform: scale(0.8);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* Ripple Effect for Mobile */
  .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
  }
  
  @keyframes ripple {
    to {
      transform: scale(2.5);
      opacity: 0;
    }
  }
  
  /* Button Hover Effects */
  .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .btn:hover::after {
    opacity: 1;
  }
  
  /* Card Hover Effects */
  .company-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 102, 0, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: inherit;
  }
  
  .company-card:hover::before {
    opacity: 1;
  }
  
  /* Glitch Text Effect */
  .glitch-text {
    position: relative;
    color: var(--text-primary);
    animation: glitch 5s infinite;
  }
  
  .glitch-text::before,
  .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
  }
  
  .glitch-text::before {
    color: var(--brand-primary);
    animation: glitch-effect 3s infinite;
  }
  
  .glitch-text::after {
    color: var(--brand-secondary);
    animation: glitch-effect 2s infinite reverse;
  }
  
  /* Animated Testimonial Cards */
  .testimonial-card {
    animation: testimonialCardSwitch 10s infinite;
    animation-delay: 0s;
  }
  
  .testimonial-card--second {
    animation: testimonialCardSwitch 10s infinite;
    animation-delay: 5s;
  }
  
  .testimonial-thumbnail__image {
    animation: logoSwitch 15s infinite;
    animation-delay: 0s;
  }
  
  .testimonial-thumbnail__image--second {
    animation: logoSwitch 15s infinite;
    animation-delay: 5s;
  }
  
  .testimonial-thumbnail__image--third {
    animation: logoSwitch 15s infinite;
    animation-delay: 10s;
  }
  
  /* Mobile Testimonial Card Animation */
  .testimonial-card--small-viewport-one {
    animation: slideUp 0.5s ease forwards, testimonialCardSwitch 15s infinite;
  }
  
  .testimonial-card--small-viewport-two {
    animation: slideUp 0.5s ease forwards 0.2s, testimonialCardSwitch 15s infinite 5s;
    opacity: 0;
  }
  
  .testimonial-card--small-viewport-three {
    animation: slideUp 0.5s ease forwards 0.4s, testimonialCardSwitch 15s infinite 10s;
    opacity: 0;
  }
  
  /* Animated Gradient */
  .animated-gradient--jelly .animated-gradient__item {
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  /* Pull to Refresh Animation */
  .pull-indicator {
    position: fixed;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .pull-indicator.visible {
    transform: translateY(60px);
  }
  
  .pull-indicator .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-light);
    border-top: 3px solid var(--brand-primary);
    border-radius: 50%;
    margin-right: 10px;
    animation: spin 1s linear infinite;
  }
  
  .pull-indicator span {
    font-size: 14px;
    color: var(--text-secondary);
  }
  
  /* Header Loader Animation */
  #headerLoader {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--gradient-primary);
    z-index: 1001;
    transition: width 0.3s ease;
  }
  
  /* Review Ball Animation */
  .review-ball {
    position: absolute;
    top: 200px;  
    right: 690px;
    width: 90px;
    height: 90px;
    perspective: 1000px;
    z-index: 1;
  }
  
  .review-ball-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 50%;
    background: var(--gradient-primary);
    box-shadow: 0 0 30px rgba(255, 102, 0, 0.411);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 10px;
  }
  
  .review-ball-inner:hover {
    transform: scale(1.1);
  }
  
  .review-ball-content {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .review-count {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
  }
  
  .review-text {
    font-size: 0.9rem;
    font-weight: 500;
  }
  
  .review-ball-orbit {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: rotate 15s linear infinite;
  }