* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --on: #00ffc8;
  --glow: 0 0 4px #00ffc8, 0 0 12px #00ffc855;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060a09;
  overflow: hidden;
}

.display {
  display: flex;
  align-items: center;
  gap: 1.2vw;
  padding: 4vw;
  perspective: 500px;
}

.digit {
  position: relative;
  width: 6vw;
  height: 10vw;
  animation: flip-in 0.5s cubic-bezier(.2,.9,.3,1.2) both;
  animation-delay: calc(var(--i) * 90ms);
}

.d0 { --i: 0; }
.d1 { --i: 1; }
.d2 { --i: 2; }
.d3 { --i: 3; }
.d4 { --i: 4; }
.d5 { --i: 5; }
.d6 { --i: 6; }
.d7 { --i: 7; }
.d8 { --i: 8; }
.d9 { --i: 9; }

.seg {
  position: absolute;
  background: var(--on);
  border-radius: 2px;
  box-shadow: var(--glow);
  animation: hum 3s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 100ms + 0.9s);
}

/* Horizontal segments */
.seg.a { top: 0;       left: 10%;  width: 80%;  height: 10%; }
.seg.g { top: 45%;     left: 10%;  width: 80%;  height: 10%; }
.seg.d { bottom: 0;    left: 10%;  width: 80%;  height: 10%; }

/* Vertical segments */
.seg.f { top: 10%;     left: 0;    width: 10%;  height: 35%; }
.seg.b { top: 10%;     right: 0;   width: 10%;  height: 35%; }
.seg.e { bottom: 10%;  left: 0;    width: 10%;  height: 35%; }
.seg.c { bottom: 10%;  right: 0;   width: 10%;  height: 35%; }

.suffix {
  font-family: system-ui, sans-serif;
  font-size: 2.4vw;
  color: #00ffc866;
  margin-left: 0.5vw;
  font-weight: 300;
  animation: fade-in 0.8s 1.3s both;
}

@keyframes flip-in {
  from { opacity: 0; transform: rotateX(90deg) scale(0.7); }
  to   { opacity: 1; transform: rotateX(0deg)   scale(1); }
}

@keyframes hum {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.88; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .digit, .seg, .suffix { animation: none; opacity: 1; }
}