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

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
html {
  scroll-behavior: smooth;
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #3ecfb4; }
}

@keyframes hide-caret {
  to { border-color: transparent; }
}

.reveal {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #3ecfb4;
  width: 0;
  animation: 
    typing 1.5s steps(20, end) forwards,
    blink-caret 0.75s step-end infinite,
    hide-caret 0s 1.5s forwards;  
}

.delay-xs { animation-delay: 0.2s; }
.delay-sm { animation-delay: 0.5s; }
.delay-md { animation-delay: 1.5s; }  
.delay-lg { animation-delay: 2.5s; }
.delay-xl { animation-delay: 3s; }

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-section .animate-card {
    opacity: 0;
}

.animate-section.active .animate-card {
    animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-section.active .delay-1 { animation-delay: 0.2s; }
.animate-section.active .delay-2 { animation-delay: 0.4s; }
.animate-section.active .delay-3 { animation-delay: 0.6s; }

.animate-section .section-header {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.animate-section.active .section-header {
    opacity: 1;
    transform: translateY(0);
}

/*section 3*/


/* Initial hidden states */
.animate-left, .animate-right {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-left {
    transform: translateX(-50px);
}

.animate-right {
    transform: translateX(50px);
}

/* State when visible */
.animate-left.show, .animate-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* Optional: Add a slight delay for a staggered effect if cards are close */
.max-w-7xl > div:nth-child(2) {
    transition-delay: 0.1s;
}

.max-w-7xl > div:nth-child(3) {
    transition-delay: 0.2s;
}

/* Custom animation for the spin icon in the last card */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}
/* Container for the comparison cards */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Delay for the second card (Flexa card) */
.grid > div:nth-child(2).reveal-up {
    transition-delay: 0.15s;
}

/* When the cards are visible */
.reveal-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* List items inside the cards */
.stagger-item {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.show .stagger-item {
    opacity: 1;
    transform: translateX(0);
}

/* Sequence for list items */
.stagger-item:nth-child(1) { transition-delay: 0.3s; }
.stagger-item:nth-child(2) { transition-delay: 0.4s; }
.stagger-item:nth-child(3) { transition-delay: 0.5s; }
.stagger-item:nth-child(4) { transition-delay: 0.6s; }
.stagger-item:nth-child(5) { transition-delay: 0.7s; }







.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.reveal-item.active {
  opacity: 1;
  transform: translateY(0);
}

.text-fade.active { transition-delay: 0.5s; }
.btn-fade.active { transition-delay: 0.8s; }

.image-fade {
  transform: translateX(-30px);
}
.image-fade.active {
  transform: translateX(0);
}

#typewriter::after {
  content: '|';
  animation: blink 0.7s infinite;
  margin-left: 5px;
  color: #3ecfb4;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.cta-reveal-item {
    will-change: transform, opacity;
}

.mockup-fade {
    transition-delay: 0.4s !important;
}

#typewriter-cta::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: white;
    margin-left: 4px;
    animation: blink 0.8s infinite;
    vertical-align: middle;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}




/* about page */
.cursor-active::after {
    content: '|';
    margin-left: 5px;
    color: #3ecfb4; 
    animation: blink 0.7s infinite;
}

.cursor-finished::after {
    display: none;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.vision-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.vision-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-title.active {
  opacity: 1;
  transform: translateY(0);
}

.value-item.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger {
    opacity: 0;
    transform: translateY(40px) scale(0.98); /* إزاحة مع تصغير بسيط جداً */
    transition: 
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-stagger.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.reveal-not, .reveal-compare {
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden; 
}

.reveal-not {
    transform: translateY(40px) scale(0.96);
    transition: 
        opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-compare {
    transform: translateX(-40px);
    transition: 
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}
.typewriter-cursor::after {
  content: '|';
  margin-left: 4px;
  color: #fff;
  animation: blink 0.8s infinite;
}

.typewriter-cursor.finished::after {
  display: none;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cta-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* use cases page */
.usecase {
    opacity: 0;
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: blur(5px); 
}

.reveal-right {
    transform: translateX(100px);
}

.reveal-left {
    transform: translateX(-100px);
}

.usecase.active {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}
.reveal-up {
    transform: translateY(30px);
}

.delay-1 { transition-delay: 0.5s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 0.7s; }
.delay-4 { transition-delay: 0.8s; }