/* Split-flap digit without 3D (hero overflow:hidden flattens rotateX into black bars).
   Four layers. Inner .flip-num is the full card; each half clips it.
   Fold layers animate with clip-path so the old top closes toward the hinge,
   then the new bottom opens from the hinge — numbers stay a single glyph. */
.countdown--flip{
  display:flex;flex-wrap:wrap;gap:.7rem 1rem;
  margin-top:clamp(1rem,2.2vh,1.6rem);
  max-width:560px;
}
.flip-unit{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:4.5rem}
.flip-unit > span{
  font-family:var(--font-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(226,232,242,.65);font-weight:600;
}
.flip-digits{display:flex;gap:.22rem}
.flip-digit{
  --flip-h: 3.4rem;
  --flip-fs: 2.05rem;
  --flip-ms: .32s;
  box-sizing:border-box;
  position:relative;
  width:2.5rem;
  height:var(--flip-h);
  font-family:var(--font-ui),ui-sans-serif,system-ui,sans-serif;
  color:#fff;
  border-radius:8px;
  background:#12102C;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.flip-upper,
.flip-lower,
.flip-fold-top,
.flip-fold-bot{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  overflow:hidden;
  background:#161430;
}
.flip-upper,
.flip-fold-top{
  top:0;
  border-radius:8px 8px 0 0;
}
.flip-lower,
.flip-fold-bot{
  bottom:0;
  border-radius:0 0 8px 8px;
}
.flip-upper{z-index:1}
.flip-lower{z-index:1}
.flip-fold-top,
.flip-fold-bot{
  z-index:4;
  pointer-events:none;
  display:none;
}
.flip-digit.is-flip .flip-fold-top,
.flip-digit.is-flip .flip-fold-bot{
  display:block;
}
.flip-digit.is-flip .flip-fold-top{
  animation:zbifFoldTop var(--flip-ms) ease-in forwards;
}
.flip-digit.is-flip .flip-fold-bot{
  clip-path:inset(0 0 100% 0);
  animation:zbifFoldBot var(--flip-ms) ease-out var(--flip-ms) forwards;
}
@keyframes zbifFoldTop{
  from{clip-path:inset(0 0 0 0)}
  to{clip-path:inset(100% 0 0 0)}
}
@keyframes zbifFoldBot{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}
.flip-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:200%;
  font-size:var(--flip-fs);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1;
  color:#fff;
}
.flip-lower .flip-num,
.flip-fold-bot .flip-num{
  position:relative;
  top:-100%;
}
.flip-digit .flip-hinge{
  position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.55);z-index:6;pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .flip-fold-top,.flip-fold-bot{display:none}
}
@media(max-width:640px){
  .flip-digit{--flip-h:2.9rem;--flip-fs:1.7rem;width:2.15rem}
}
