/* Refined Flip Clock Animation Styles - Based on 8px rhythm */

:root {
  --spacing-unit: 8px;
  --transition-smooth: 200ms ease-out;
  --transition-medium: 300ms ease-out;
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.flip-clock {
  display: flex;
  align-items: baseline; /* Better alignment for numbers */
  justify-content: center;
  gap: calc(var(--spacing-unit) * 2); /* 16px base gap */
  font-variant-numeric: tabular-nums;
}

.flip-card {
  position: relative;
  display: inline-block;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.flip-card-digit {
  display: block;
  line-height: 0.8; /* Tighter line height for massive numbers */
}

/* Ultra-smooth number transition */
.flip-card.transitioning .flip-card-digit {
  animation: gentleFade var(--transition-smooth);
}

@keyframes gentleFade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Color transitions for urgency states */
.timer-normal { color: #1A1A1A; }
.timer-warning { color: #FF5201; }
.timer-critical { color: #DC2626; }

.timer-transition {
  transition: color 500ms ease-out;
}

/* Refined landscape optimizations */
@media (orientation: landscape) {
  .flip-clock {
    gap: calc(var(--spacing-unit) * 1.5); /* Tighter in landscape */
  }
}

/* Touch device optimizations */
@media (hover: none) {
  /* Make hover states always visible on touch */
  .opacity-0 {
    opacity: 0.15;
  }

  /* Larger touch targets */
  button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Smooth progress bars */
.progress-bar-smooth {
  transition: width 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button press feedback */
button:active {
  transform: scale(0.97);
}

/* Focus states for accessibility */
button:focus-visible {
  outline: 2px solid #FF5201;
  outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}