@use 'abstracts';

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

.stats {
  padding-block: calc(var(--space-4) * 2);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-muted) 100%);

  &__wrapper {
    @include abstracts.container-wrapper;
    width: 100%;
  }

  &__header {
    text-align: center;
    margin-bottom: calc(var(--space-4) * 1.5);

    h2 {
      font-size: var(--font-size-xl);
      margin-bottom: var(--space-2);
    }
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);

    @include abstracts.breakpoint('md') {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &__card {
    text-align: center;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--border-radius);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    opacity: 0;

    &.is-visible {
      animation: fade-in-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    &:nth-child(1).is-visible { animation-delay: 0ms; }
    &:nth-child(2).is-visible { animation-delay: 100ms; }
    &:nth-child(3).is-visible { animation-delay: 200ms; }
    &:nth-child(4).is-visible { animation-delay: 300ms; }

    &:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
  }

  &__value {
    font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
  }

  &__label {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--space-1);
  }

  &__description {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
  }
}
