/* Stats Showcase - Homepage rotating stats display */

.stats-showcase {
  padding: 79px var(--content-side-padding, 6vw) 16px;
  height: 280px; /* FIXED HEIGHT - single row of 5 stats */
  overflow: hidden;
  box-sizing: border-box;
}

.stats-showcase__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 162px;
  gap: 0 2rem;
  max-width: 100%;
}

.stats-showcase__grid--fading {
  opacity: 0;
}

.stats-showcase__item {
  position: relative;
  padding-top: 1rem;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  cursor: pointer;
  height: 100%; /* Fill the fixed grid cell height */
  overflow: hidden; /* Prevent content overflow */
}

.stats-showcase__item:hover {
  text-decoration: none;
}

.stats-showcase__item:hover .stats-showcase__number {
  color: #751560;
}

.stats-showcase__item--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accent bar at top - brand magenta */
.stats-showcase__accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 4px;
  background-color: #751560;
}

.stats-showcase__number {
  font-family: "Poppins", sans-serif;
  font-size: 2.7rem;
  font-weight: 400;
  color: #32013a;
  line-height: 1;
  height: 3.15rem; /* Fixed height to prevent layout shifts */
  margin-bottom: 0.45rem;
  transition: color 0.3s ease;
  overflow: hidden;
}

.stats-showcase__number-inner {
  display: inline-flex;
  align-items: baseline;
}

.stats-showcase__digits-container {
  display: inline-flex;
  align-items: baseline;
}

/* Individual digit slot machine */
.stats-showcase__digit-slot {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.15em;
  width: 0.6em;
  vertical-align: baseline;
}

.stats-showcase__digit-track {
  display: flex;
  flex-direction: column;
  /* NO CSS transition - JS handles all animation via inline styles */
}

.stats-showcase__digit-value {
  display: block;
  height: 1.15em;
  line-height: 1.15;
  text-align: center;
}

.stats-showcase__char {
  display: inline-block;
}

/* Decimal point - animated width */
.stats-showcase__decimal {
  display: inline-block;
  overflow: hidden;
  text-align: center;
  vertical-align: baseline;
  /* Width and opacity controlled by JS */
}

.stats-showcase__prefix,
.stats-showcase__suffix {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

/* Animated prefix/suffix scroll states */
.stats-showcase__prefix--animated,
.stats-showcase__suffix--animated {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.15em;
  vertical-align: baseline;
}

.stats-showcase__prefix--animated[data-scroll-state="out"],
.stats-showcase__suffix--animated[data-scroll-state="out"] {
  animation: affixScrollOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stats-showcase__prefix--animated[data-scroll-state="in"],
.stats-showcase__suffix--animated[data-scroll-state="in"] {
  animation: affixScrollIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes affixScrollOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes affixScrollIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Hidden digit slot for digits that will scroll in */
.stats-showcase__digit-slot--hidden {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Label with rolling animation */
.stats-showcase__label-wrapper {
  position: relative;
  height: 59px; /* Fixed height to prevent layout shifts */
  overflow: hidden;
}

.stats-showcase__label {
  font-family: "Poppins", sans-serif;
  font-size: 1.04rem;
  font-weight: 400;
  color: #32013a;
  opacity: 0.7;
  line-height: 1.4;
  max-width: 200px;
  /* No transition on base - only animate when rolling out */
}

.stats-showcase__label--rolling-out {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.stats-showcase__label--rolling-in {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: labelFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.15s;
}

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

/* Source with rolling animation */
.stats-showcase__source-wrapper {
  position: relative;
  margin-top: 0.68rem;
  height: 18px; /* Fixed height to prevent layout shifts */
  overflow: hidden;
}

.stats-showcase__source {
  font-family: "Poppins", sans-serif;
  font-size: 0.77rem;
  font-weight: 500;
  color: #751560;
  /* No transition on base - only animate when rolling out */
}

.stats-showcase__source--rolling-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.stats-showcase__source--rolling-in {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(10px);
  animation: sourceFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes sourceFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rollIn {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-110%);
  }
}

/* New text scrolls UP from below into view */
@keyframes rollInUp {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
  .stats-showcase {
    height: 280px;
  }

  .stats-showcase__grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 162px;
    gap: 0 1.5rem;
  }

  .stats-showcase__number {
    font-size: 2.25rem;
    height: 2.7rem;
  }

  .stats-showcase__label {
    font-size: 0.9rem;
  }

  .stats-showcase__source {
    font-size: 0.72rem;
  }
}

/* Responsive - Small Tablet */
@media (max-width: 991px) {
  .stats-showcase {
    padding: 79px 5vw 16px;
    height: 270px;
  }

  .stats-showcase__grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 155px;
    gap: 0 1rem;
  }

  .stats-showcase__number {
    font-size: 1.8rem;
    height: 2.2rem;
  }

  .stats-showcase__label {
    font-size: 0.8rem;
    max-width: 140px;
  }

  .stats-showcase__source {
    font-size: 0.65rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .stats-showcase {
    padding: 79px 5vw 16px;
    height: 480px; /* 2 rows on mobile */
  }

  .stats-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 155px);
    gap: 1.5rem 1rem;
  }

  .stats-showcase__number {
    font-size: 1.8rem;
    height: 2.25rem;
  }

  .stats-showcase__label {
    font-size: 0.86rem;
  }

  .stats-showcase__source {
    font-size: 0.68rem;
  }

  .stats-showcase__accent {
    width: 36px;
    height: 3.6px;
  }
}

/* Responsive - Small Mobile */
@media (max-width: 479px) {
  .stats-showcase {
    height: 500px;
  }

  .stats-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 130px);
    gap: 1.2rem 0.8rem;
  }

  .stats-showcase__number {
    font-size: 1.5rem;
    height: 1.9rem;
  }

  .stats-showcase__label {
    font-size: 0.75rem;
    max-width: 120px;
  }

  .stats-showcase__source {
    font-size: 0.6rem;
  }
}

/* Large screens */
@media (min-width: 1600px) {
  .stats-showcase {
    padding-left: var(--content-side-padding);
    padding-right: var(--content-side-padding);
    height: 300px;
  }

  .stats-showcase__grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 171px;
    gap: 0 2.5rem;
  }

  .stats-showcase__number {
    font-size: 2.93rem;
    height: 3.38rem;
  }

  .stats-showcase__label {
    font-size: 1.08rem;
  }
}

/* 1800px+ - Use max-width container pattern like case studies */
/* Content sections get more padding (8vw) than the hero (3vw) */
@media (min-width: 1800px) {
  .stats-showcase {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(3vw + 5vw);
    padding-right: calc(3vw + 5vw);
  }
}

@media (min-width: 2000px) {
  .stats-showcase {
    height: 320px;
  }

  .stats-showcase__grid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 180px;
    gap: 0 3rem;
  }

  .stats-showcase__number {
    font-size: 3.15rem;
    height: 3.6rem;
  }

  .stats-showcase__label {
    font-size: 1.13rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .stats-showcase__item {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .stats-showcase__grid {
    transition: none;
  }

  .stats-showcase__digit-track,
  .stats-showcase__label,
  .stats-showcase__source {
    transition: none;
  }

  .stats-showcase__label--rolling-out,
  .stats-showcase__source--rolling-out {
    transition: none;
  }

  .stats-showcase__label--rolling-in,
  .stats-showcase__source--rolling-in {
    animation: none;
    transform: translateY(0);
  }
}