/* =====================================================
   SYVELLIX COMPONENTS
===================================================== */

/* =========================
   SECTION TITLE SHINE
   Used for main section headings
========================= */

.animate-shine-title {
  background-image: linear-gradient(
    90deg,
    #111827 40%,
    #00a478 50%,
    #111827 60%
  );

  background-size: 220% auto;

  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  animation: shine-title 18s ease-in-out infinite;
}

.dark .animate-shine-title {
  background-image: linear-gradient(
    90deg,
    #ffffff 40%,
    #ccff00 50%,
    #ffffff 60%
  );
}

@keyframes shine-title {
  0% {
    background-position: 220% center;
  }

  50% {
    background-position: 0% center;
  }

  100% {
    background-position: -220% center;
  }
}

/* =========================
   FEATURE CARDS
   Why choose Syvellix
========================= */

.feature-card {
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(25px);

  animation: featureReveal 0.8s ease forwards;

  transition:
    transform 0.45s ease,
    background-color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

/* stagger animation */

.feature-card:nth-child(1) {
  animation-delay: 0.15s;
}

.feature-card:nth-child(2) {
  animation-delay: 0.3s;
}

.feature-card:nth-child(3) {
  animation-delay: 0.45s;
}

@keyframes featureReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* internal glow */

.feature-card::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  top: -100px;
  right: -100px;

  border-radius: 50%;

  background: rgba(0, 164, 120, 0.14);

  filter: blur(35px);

  opacity: 0;

  transition: opacity 0.5s ease;
}

/* hover light mode */

.feature-card:hover {
  transform: translateY(-8px);

  border-color: #00a478;

  box-shadow: 0 20px 45px rgba(0, 164, 120, 0.14);
}

.feature-card:hover::before {
  opacity: 1;
}

/* hover dark mode */

.dark .feature-card:hover {
  background-color: #262626;

  border-color: #ccff00;

  box-shadow:
    0 0 0 1px rgba(204, 255, 0, 0.25),
    0 20px 45px rgba(204, 255, 0, 0.18);
}

.dark .feature-card::before {
  background: rgba(204, 255, 0, 0.14);
}

/* =========================
   PROCESS CARDS
========================= */

.process-card {
  position: relative;
  overflow: hidden;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    background-color 0.45s ease;
}

.process-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -90px;
  right: -90px;

  border-radius: 50%;

  background: rgba(0, 164, 120, 0.12);

  filter: blur(35px);

  opacity: 0;

  transition: opacity 0.5s ease;
}

.process-card:hover {
  transform: translateY(-8px);

  border-color: #00a478;

  box-shadow: 0 20px 45px rgba(0, 164, 120, 0.12);
}

.process-card:hover::before {
  opacity: 1;
}

.dark .process-card:hover {
  background-color: #262626;

  border-color: #ccff00;

  box-shadow:
    0 0 0 1px rgba(204, 255, 0, 0.25),
    0 20px 45px rgba(204, 255, 0, 0.15);
}

.dark .process-card::before {
  background: rgba(204, 255, 0, 0.12);
}