/*
Theme Name: TT5 Saoir Landing
Template: twentytwentyfive
Text Domain: tt5-saoir
Version: 1.0.4
*/
/* ===========================================
   KEYFRAME ANIMATIONS
   =========================================== */

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

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.animate-fade-up {
  animation: fade-up 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

.animate-slide-in {
  animation: slide-in 0.4s ease-out forwards;
}

/* ===========================================
   ANIMATION DELAYS (for staggered effects)
   =========================================== */

.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }

/* ===========================================
   HOVER TRANSITIONS
   =========================================== */

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

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

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

/* ===========================================
   BUTTON TRANSITIONS
   =========================================== */

.btn-transition {
  transition: all 0.2s ease;
}

.btn-transition:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39, 126, 126, 0.25);
}

/* ===========================================
   SMOOTH SCROLL (add to html element)
   =========================================== */

html {
  scroll-behavior: smooth;
}
 a:hover > :not(.wp-block-button__link) {
 	color: #277E7E !important;
 }

 @media (max-width: 769px) {
  .has-background {
    background-position: 50% 100%;
  }
 }