/*KEYFRAMES*/

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slideInFromTop {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes pulse {
    0%,
    100% {
      box-shadow: 0 4px 15px rgba(0, 183, 255, 0.4);
      transform: scale(1);
      opacity: 0.3;
    }
    50% {
      box-shadow: 0 4px 25px rgba(0, 183, 255, 0.6);
       transform: scale(1.2);
      opacity: 0.6;
    }
  }
  @keyframes floatCard {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  @keyframes badgePulse {
    0%,
    100% {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
      box-shadow: 0 4px 25px rgba(0, 183, 255, 0.6);
    }
  }
  @keyframes gradientShift {
    0%,
    100% {
      background-position: 0% center;
    }
    50% {
      background-position: 100% center;
    }
  }
  
  /*ANIMATION SCROLLING*/
  
  .fade-in-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-in-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /*ANIMATION TEXT */
    .blinking {
      animation: blink 0.2s step-end infinite;
    }
  
      @keyframes blink {
      0%, 100% { border-color: transparent; }
      50% { border-color: rgba(255, 255, 255, 0.829); }
    }
    
    .section-divider {
      width: 100%;
      line-height: 0;
      overflow: hidden;
    }
    
    .section-divider svg {
      width: 100%;
      height: 120px;
      display: block;
    }
    
    
    .section-fade::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(
        to bottom,
        rgba(82, 160, 255, 0),
        #f2f2f2
      );
    }
    
    .divider-line {
      width: 100%;
      height: 6px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--color-primary),
        var(--color-accent),
        transparent
      );
      margin: 6rem 0;
      animation: glow 3s infinite;
    }
    
    @keyframes glow {
      0% { opacity: 0.4; }
      50% { opacity: 1; }
      100% { opacity: 0.4; }
    }
  
    
  
    .hero-enter {
      opacity: 0;
      transform: translateY(40px);
      animation: heroEnter 0.8s ease-out forwards;
    }
    
    @keyframes heroEnter {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  
    .section-hero {
      opacity: 0;
      transform: translateY(50px);
      animation: heroEnter 0.9s ease-out forwards;
      animation-delay: 0.3s;
    }
    
    @keyframes heroEnter {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .event-card{
        animation: myAnim 4s ease 0s 1 normal forwards;
        }
       
       
        @keyframes myAnim {
            0% {
                opacity: 0;
                transform: translateX(-50px);
            }
        
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .section-how#soluzioni,.soluzioni-grid{
            animation: myAnim1 5s ease 0s 1 normal forwards;
        }

        @keyframes myAnim1 {
            0% {
                opacity: 0;
                transform: translateX(-50px);
            }
        
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes glowPulse {
          0%, 100% { 
            opacity: 0.5; 
            transform: translate(-50%, -50%) scale(1); 
          }
          50% { 
            opacity: 0.8; 
            transform: translate(-50%, -50%) scale(1.1); 
          }
        }

@keyframes pulseIcon {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 10px 40px rgba(0, 119, 200, 0.3); 
  }
  50% { 
    transform: scale(1.05); 
    box-shadow: 0 15px 50px rgba(0, 119, 200, 0.4); 
  }
}

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

@keyframes checkPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}