/* Countdown to the wedding: four numbers set inside gold jharokha frames */
.countdown {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6svh 24px;
  text-align: center;
}

.countdown__title {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(44px, 5vmin + 22px, 76px);
  color: var(--gold);
  line-height: 1.15;
  padding: 0 0.3em;
}

.countdown__subtitle {
  margin: 0.3em 0 clamp(26px, 4vh, 44px);
  font-size: clamp(15px, 1.2vmin + 10px, 21px);
  color: var(--ink);
}

.countdown__units {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 34px);
}

/* frame art is perfectly symmetric (assets/decor/arch_frame_sym.webp, 240x403) */
.countdown__unit {
  position: relative;
  width: clamp(72px, 19vw, 150px);
  aspect-ratio: 240 / 403;
  background: url("../assets/decor/arch_frame_sym.webp") center / 100% 100% no-repeat;
  container-type: inline-size;
}

/* window clipped to the arch-shaped inner panel, so rolling digits disappear behind the frame edge */
.countdown__window {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/decor/arch_frame_mask.png") center / 100% 100% no-repeat;
          mask: url("../assets/decor/arch_frame_mask.png") center / 100% 100% no-repeat;
}

/* measured inner panel: left 15%, top 23.8%, width 70%, height 60.8% (assets/decor/arch_frame.json) */
.countdown__inner {
  position: absolute;
  left: 15%;
  top: 23.8%;
  width: 70%;
  height: 60.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 12%;
  gap: 4%;
}

.countdown__value {
  position: relative;
  width: 100%;
  height: 1.2em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 7.5vw, 52px);   /* fallback for phones without container units (iOS 15) */
  font-size: 30cqw;
  line-height: 1.2em;
  color: var(--rose);
}

.countdown__digit {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: 11px;
  font-size: clamp(11px, 9.5cqw, 15px);
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ---------- the couple's motifs on this screen ---------- */
/* this section shares the page's layer so the emboss can blend into the paper itself (nothing here sits above the frame) */
.page > section.countdown { z-index: auto; }
.countdown > :not(.countdown__emboss):not(.motif) { position: relative; }

/* blind emboss: a grey light-and-shadow map (mid-grey = no change) blended into the paper */
.countdown__emboss {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vmin, 700px);
  transform: translate(-50%, -50%);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}

/* fine gold line-art: the diya on the left, the doe on the right, facing each other at the bottom */
.motif { position: absolute; bottom: calc(var(--frame) + 5svh); opacity: 0.5; pointer-events: none; }
.motif img { display: block; width: 100%; }
.motif--diya { left: calc(var(--frame) + 7vw); width: clamp(90px, 22vw, 210px); }
.motif--doe { right: calc(var(--frame) + 7vw); width: clamp(76px, 18vw, 180px); }
/* the diya's flame flickers gently */
.motif__flame {
  position: absolute;
  left: 84.9%;
  top: 0;
  width: 15.1% !important;
  transform-origin: 50% 96%;
  animation: motif-flicker 2.6s ease-in-out infinite;
}
@keyframes motif-flicker {
  0%, 100% { transform: scale(1, 1) rotate(-1.5deg); }
  30% { transform: scale(0.94, 1.07) rotate(1.5deg); }
  60% { transform: scale(1.04, 0.96) rotate(-0.5deg); }
}
@media (prefers-reduced-motion: reduce) { .motif__flame { animation: none; } }

/* a faint gold tinge under the blind emboss: the gold crest itself, very light, blended into the paper */
.countdown__emboss--tint { mix-blend-mode: multiply; opacity: 0.12; }

/* after the wedding: the counting frames give way to the thank-you line */
.countdown.is-done .countdown__units, .countdown.is-done .countdown__title { display: none; }