/* Local Fonts */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/SplineSans-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/SplineSans-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/SplineSans-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/SplineSans-Bold.ttf') format('truetype');
  font-display: swap;
}

/* Material Symbols icons are now loaded as SVGs via JavaScript */
.material-symbols-outlined {
  display: inline-block;
  vertical-align: middle;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f111a;
}

::-webkit-scrollbar-thumb {
  background: #2e3040;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8b5cf6;
}

.text-gradient {
  background: linear-gradient(90deg, #4a98f7, #8059f5, #f451a5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
  border: 1px solid transparent;
  isolation: isolate;
}

.gradient-border > *,
.gradient-border > span {
  position: relative;
  z-index: 1;
}

.gradient-border:hover {
  background-color: inherit !important;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    #3b82f6 0deg,
    #8b5cf6 120deg,
    #ec4899 240deg,
    #3b82f6 360deg
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

.gradient-border:hover::before {
  opacity: 1;
}

.gradient-border-default {
  position: relative;
  border: 2px solid transparent;
}

.gradient-border-default::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    #3b82f6 0deg,
    #8b5cf6 120deg,
    #ec4899 240deg,
    #3b82f6 360deg
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

.gradient-border-default > * {
  position: relative;
  z-index: 2;
}

/* Background image classes for testimonials */
.testimonial-avatar-james {
  background-image: url('../img/james.jpg');
}

.testimonial-avatar-sarah {
  background-image: url('../img/sarah.jpg');
}

.testimonial-avatar-micheal {
  background-image: url('../img/micheal.jpg');
}

/* Page load animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-up {
  opacity: 0 !important;
  transform: translateY(30px);
  transition: none;
}

.fade-in-up.animate {
  opacity: 1 !important;
  transform: translateY(0);
  animation: fadeInUp 0.8s ease-out forwards;
}

.fade-in {
  opacity: 0;
}

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

/* Stagger delays for sequential animations */
.fade-in-up-delay-1 {
  animation-delay: 0.1s;
}

.fade-in-up-delay-2 {
  animation-delay: 0.2s;
}

.fade-in-up-delay-3 {
  animation-delay: 0.3s;
}

.fade-in-up-delay-4 {
  animation-delay: 0.4s;
}

.fade-in-up-delay-5 {
  animation-delay: 0.5s;
}

.fade-in-up-delay-6 {
  animation-delay: 0.6s;
}

/* Performance optimization */
.fade-in-up,
.fade-in {
  will-change: opacity, transform;
}