/* ============ FOLD 03 · Stats strip ============ */

.stats {
  position: relative;
  height: 25.384rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.1739rem 6.9546rem 6.9546rem;
  background: var(--sand-100);
  overflow: hidden;
}

/* Sand photo blended over the sand colour (Figma: soft-light) */
.stats__texture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.stats__inner {
  position: relative;
  width: 100%; height: 16.691rem;
  padding: 0 2.4341rem;
}

.stats__grid {
      display: grid;
    grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 17.846rem;
}

.stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 3.825rem 1.9125rem 3.4773rem;
}
.stat { position: relative; }
/* Dividers: shorter and softer, centred on the number + caption */
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 6.4rem;
  width: 0.1rem; height: 12.8rem;
  background: rgba(110, 139, 166, 0.28);
}
.stat--last { justify-self: start; }

/* Icon slots (empty in the design, kept for spacing) */
.stat__icon { display: block; flex-shrink: 0; width: 2.9557rem; height: 2.9557rem; filter: drop-shadow(0 0.3477rem 0.3477rem rgba(120, 90, 40, 0.22)); }
.stat__icon--wide { width: 3.3034rem; height: 1.9125rem; }
.stat--wide-icon { padding-top: 4.8682rem; }

.stat__value {
  height: 4.3466rem;
  padding-top: 0.8693rem;
  font-weight: 900; font-size: 3rem; line-height: 3.4773rem; letter-spacing: -0.0869rem;
  color: var(--accent-gold);
  text-align: center; white-space: nowrap;
}
.stat__unit { color: var(--sand-800); }

.stat__label {
 
  padding-top: 0.7824rem;
  font-weight: 500; font-size: 17px; 
  color: var(--seafloor);
  text-align: center; white-space: nowrap;
	line-height: 1.4;
}

.stat__num { display: inline-block; text-align: right; }   /* min-width set by JS so digits don't shift */

/* ---- Peeking mascot: slides in along its body axis, holds, slides back out ----
   Cycle length is --peek-cycle. Direction (-0.847, 0.531) = the robot's "down" after its 57.95° tilt. */
.stats { --peek-cycle: 5s; --peek-dist: 20rem; }

.stats__robot {
  position: absolute; left: 0; top: 0.282rem;
  width: 18.164rem; height: 25.15rem;
  pointer-events: none;
}
.stats__robot img {
  display: block; width: 100%; height: 100%;
  transform-origin: 0% 55%;
  will-change: transform;
}
.js .stats__robot img {
  animation: robot-peek var(--peek-cycle) cubic-bezier(0.45, 0, 0.2, 1) infinite;
  animation-play-state: paused;
}
.js .stats.is-inview .stats__robot img { animation-play-state: running; }

@keyframes robot-peek {
  0%, 100% { transform: translate(calc(var(--peek-dist) * -0.847), calc(var(--peek-dist) * 0.531)) rotate(-6deg); }
  16%      { transform: translate(0.4rem, -0.25rem) rotate(2deg); }     /* pop in, slight overshoot */
  22%      { transform: translate(0, 0) rotate(0deg); }
  38%      { transform: translate(0, 0) rotate(-3deg); }            /* little curious tilt */
  50%      { transform: translate(0, 0) rotate(0deg); }
  66%      { transform: translate(0, 0) rotate(0deg); }
  82%      { transform: translate(calc(var(--peek-dist) * -0.847), calc(var(--peek-dist) * 0.531)) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .js .stats__robot img { animation: none; }
}