/* ==========================================================================
   Sarah & Ahmed · Engagement Countdown Styles
   Palette:
     green-900: #0F3B2E
     green-700: #1F5A45
     plum-900:  #3E1A5B
     plum-700:  #6B3FA0
     lilac-300: #C9B3E6
     cream:     #FBF7F0
   Fonts:
     'Cormorant Garamond' (serif, weight 500)
     'Montserrat' (sans, uppercase labels)
     'Great Vibes' (cursive, done announcement)
   ========================================================================== */

/* ── Countdown Container ── */
.countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: clamp(0.25rem, 1.6vw, 0.875rem);
  margin: 1.6rem auto 2rem;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Individual Unit (Card + Label) ── */
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Split-Flap Card ── */
.countdown-card {
  --card-w: clamp(3rem, 15vw, 5.125rem);
  --card-h: clamp(3.625rem, 18.5vw, 6rem);
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 0.375rem;
  perspective: 25rem;
  background-color: #0F3B2E;
  box-shadow: 0 6px 14px rgba(107, 63, 160, 0.22), 0 2px 4px rgba(62, 26, 91, 0.16);
  color: #FBF7F0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.65rem, 5.2vw, 3.2rem);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  box-sizing: border-box;
}

/* Thin hairline across the middle */
.countdown-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(251, 247, 240, 0.1);
  z-index: 10;
  pointer-events: none;
}

/* ── Card Halves ── */
.countdown-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background-color: #0F3B2E;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.countdown-top {
  top: 0;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(180deg, #134838 0%, #0F3B2E 100%);
}

.countdown-bottom {
  top: 50%;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  background-image: linear-gradient(180deg, #0d352a 0%, #0a2920 100%);
}

/* Number positioning within halves to form a seamless split glyph */
.countdown-half .countdown-num {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--card-h);
  line-height: var(--card-h);
  text-align: center;
  white-space: nowrap;
}

.countdown-top .countdown-num {
  top: 0;
}

.countdown-bottom .countdown-num {
  bottom: 0;
}

/* ── Flipping Leaves (Split-Flap 3D Fold) ── */
.countdown-flip {
  z-index: 4;
  outline: 1px solid transparent; /* Prevents jagged antialiasing during 3D rotation */
}

.countdown-flip-top {
  transform-origin: 50% 100%;
  animation: countdownFoldTop 0.6s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.countdown-flip-bottom {
  z-index: 3;
  transform-origin: 50% 0%;
  animation: countdownUnfoldBottom 0.6s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

@keyframes countdownFoldTop {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

@keyframes countdownUnfoldBottom {
  0% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/* ── Unit Label Under Card ── */
.countdown-label {
  display: block;
  margin-top: clamp(0.3125rem, 1.4vw, 0.625rem);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: clamp(0.52rem, 1.4vw, 0.72rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6B3FA0; /* plum-700 */
  text-align: center;
  margin-right: -0.2em; /* Optical centering to offset trailing letter-spacing */
  white-space: nowrap;
}

/* ── Target Passed / Done Announcement ── */
.countdown-done {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: #6B3FA0; /* plum-700 */
  text-align: center;
  margin: 1rem auto;
  animation: countdownDonePop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes countdownDonePop {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Screen-Reader Only Accessible Text ── */
.countdown-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced Motion Preference ── */
@media (prefers-reduced-motion: reduce) {
  .countdown-flip {
    display: none !important;
    animation: none !important;
  }
  .countdown-done {
    animation: none !important;
  }
}