/* =========================================================
   STATS SECTION
========================================================= */

.stats-bg {
  background:
    linear-gradient(
      135deg,
      #e8eeff 0%,
      #f0f4ff 40%,
      #e4eeff 100%
    );
}


/* =========================================================
   STATS TOP GLOW
========================================================= */

.stats-bg::before {

  content: "";

  position: absolute;

  top: -60px;
  left: 50%;

  transform: translateX(-50%);

  width: 300px;
  height: 120px;

  background:
    radial-gradient(
      ellipse,
      rgba(160, 180, 255, 0.25) 0%,
      transparent 70%
    );

  pointer-events: none;
}


/* =========================================================
   STAT NUMBER
========================================================= */

.stat-number {

  background:
    linear-gradient(
      135deg,
      #8ab4e8 0%,
      #a0c4f4 30%,
      #b8d4f8 55%,
      #a8c8f0 100%
    );

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

  filter:
    drop-shadow(
      0 1px 8px rgba(120, 170, 230, 0.18)
    );
}


/* =========================================================
   STAT DIVIDER
========================================================= */

.stat-divider {

  flex-shrink: 0;

  width: 1px;
  height: 56px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(130, 160, 220, 0.35),
      transparent
    );
}


/* =========================================================
   STAT ANIMATION
========================================================= */

.stat-animate {

  opacity: 0;

  transform:
    translateY(24px);

}


/* Started state */

.stats-started .stat-animate {

  animation:
    fadeInUp 0.6s ease forwards;

}


/* Stagger */

.stats-started .stat-wrapper:nth-child(1)
.stat-animate {

  animation-delay: 0.1s;

}


.stats-started .stat-wrapper:nth-child(2)
.stat-animate {

  animation-delay: 0.2s;

}


.stats-started .stat-wrapper:nth-child(3)
.stat-animate {

  animation-delay: 0.3s;

}


.stats-started .stat-wrapper:nth-child(4)
.stat-animate {

  animation-delay: 0.4s;

}


/* =========================================================
   FADE IN UP
========================================================= */

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform:
      translateY(24px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* =========================================================
   MOBILE DIVIDERS
========================================================= */

@media (max-width: 767px) {

  .stat-wrapper {

    width: 100%;

  }

  .stat-divider {

    display: none;

  }

  .stat-wrapper + .stat-wrapper {

    margin-top: 18px;

    padding-top: 18px;

    border-top:
      1px solid
      rgba(130, 160, 220, 0.15);

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .stat-animate {

    opacity: 1;

    transform: none;

  }

  .stats-started .stat-animate {

    animation: none;

  }

}