/* scenes/countdown-location.css -- the countdown slide (vansh-ishika's, kept for
 * mohi-nimisha by the owner 2026-10-26; just before the families / RSVP slide). Markup: tools/build.py extra_stage_html; ticking: js/countdown.js;
 * motion: js/motion/scenes/countdown-location.js.
 * Lengths are design px on the 1080x1920 stage: calc(N * var(--u)). Armed (hidden-
 * before-entrance) states live ONLY under html.motion, so reduced motion / no JS shows
 * the resting frame. Only transform / opacity animate; no filter / blend / will-change. */

/* ================================================================== countdown */
/* Ivory type over the twilight sky: a soft dusk shadow keeps it crisp on the violet. */
.scene--countdown .tb .r { text-shadow: 0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(22, 12, 54, 0.5); }

.cd {
  position: absolute;
  left: calc(118 * var(--u));
  top: calc(452 * var(--u));
  width: calc(844 * var(--u));
  height: calc(292 * var(--u));
  display: flex;
  justify-content: space-between;
  margin: 0;
}
/* One unit = a small jharokha arch: gold edge, a hairline inner arch, dusk glass. */
.cd__tile {
  position: relative;
  width: calc(190 * var(--u));
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: calc(2 * var(--u)) solid rgba(233, 199, 124, 0.78);
  border-radius: calc(95 * var(--u)) calc(95 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(180deg, rgba(24, 20, 66, 0.62), rgba(52, 26, 76, 0.42));
  box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(12, 8, 40, 0.35);
}
.cd__tile::before {
  content: "";
  position: absolute;
  inset: calc(9 * var(--u));
  border: calc(1.5 * var(--u)) solid rgba(233, 199, 124, 0.32);
  border-radius: calc(86 * var(--u)) calc(86 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
  pointer-events: none;
}
.cd__num {
  margin-top: calc(98 * var(--u));
  font: 600 calc(100 * var(--u)) / 1 "Cormorant Garamond", serif;
  font-variant-numeric: lining-nums tabular-nums;
  color: #fffcef;
  text-shadow: 0 0 calc(18 * var(--u)) rgba(255, 210, 140, 0.35);
}
.cd__lbl {
  margin-top: calc(22 * var(--u));
  font: 600 calc(22 * var(--u)) / 1 "Cormorant Garamond", serif;
  letter-spacing: 0.16em;
  padding-left: 0.16em;                 /* centre the tracked caps */
  text-transform: uppercase;
  color: #efd49c;
}
.cd__done {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 calc(96 * var(--u)) / 1.2 "Hello Bride", cursive;
  color: #fffcef;
  text-shadow: 0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(22, 12, 54, 0.5);
}
.cd__done[hidden] { display: none; }
.cd.is-done .cd__tile { display: none; }

/* gold rule with a centre diamond, between the tiles and the date */
.cd__rule {
  position: absolute;
  left: calc(420 * var(--u));
  top: calc(800 * var(--u));
  width: calc(240 * var(--u));
  height: calc(2 * var(--u));
  background: linear-gradient(90deg, rgba(233, 199, 124, 0), rgba(233, 199, 124, 0.85) 30%, rgba(233, 199, 124, 0.85) 70%, rgba(233, 199, 124, 0));
}
.cd__rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  background: #efd49c;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* entrance: the tiles rise in one by one after the title, then the rule draws */
html.motion .scene--countdown:not(.is-entered) .cd__tile,
html.motion .scene--countdown:not(.is-entered) .cd__done {
  opacity: 0;
  transform: translateY(calc(30 * var(--u))) scale(0.96);
}
html.motion .scene--countdown:not(.is-entered) .cd__rule { opacity: 0; transform: scaleX(0.2); }
html.motion .scene--countdown .cd__tile,
html.motion .scene--countdown .cd__done {
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(650ms + var(--i, 0) * 120ms);
}
html.motion .scene--countdown .cd__rule {
  transition: opacity 600ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1150ms;
}
/* a value change: the new digits settle in from above (js/countdown.js adds .is-tick) */
html.motion .cd__num.is-tick { animation: cd-tick 420ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cd-tick {
  from { opacity: 0.25; transform: translateY(-14%); }
  to { opacity: 1; transform: none; }
}

/* flame glows (lamp tower + floating diyas) and a few stars: built by the scene module,
   running only while the slide is on screen (.cl-live) */
.cl-glow,
.cl-star {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  animation-play-state: paused;
}
.cl-glow {
  width: calc(var(--s) * var(--u));
  height: calc(var(--s) * var(--u));
  margin: calc(var(--s) * -0.5 * var(--u)) 0 0 calc(var(--s) * -0.5 * var(--u));
  background: radial-gradient(circle, rgba(255, 222, 150, 0.85) 0, rgba(255, 178, 84, 0.32) 34%, rgba(255, 150, 60, 0) 68%);
  opacity: 0.5;
  animation: cl-flicker var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes cl-flicker {
  0% { opacity: 0.38; transform: scale(0.9); }
  45% { opacity: 0.72; transform: scale(1.06); }
  70% { opacity: 0.5; transform: scale(0.97); }
  100% { opacity: 0.8; transform: scale(1.1); }
}
.cl-star {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin: calc(-3 * var(--u)) 0 0 calc(-3 * var(--u));
  background: radial-gradient(circle, #fffef6 0, rgba(255, 250, 225, 0.6) 40%, rgba(255, 250, 225, 0) 70%);
  opacity: 0.2;
  animation: cl-twinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes cl-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50% { opacity: 0.95; transform: scale(1.25); }
}
.cl-live .cl-glow,
.cl-live .cl-star { animation-play-state: running; }

/* the tap: a diya set on the river drifts downstream (WAAPI on .cl-diya; the img bobs) */
.cl-diya {
  position: absolute;
  width: calc(112 * var(--u));
  height: calc(81 * var(--u));
  margin: calc(-56 * var(--u)) 0 0 calc(-56 * var(--u));
  pointer-events: none;
  z-index: 40;
}
.cl-diya img { display: block; width: 100%; height: 100%; animation: cl-bob 2.6s ease-in-out infinite alternate; }
.cl-diya::before {
  content: "";
  position: absolute;
  left: 22%;
  top: -55%;
  width: 90%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.55) 0, rgba(255, 170, 80, 0.18) 40%, rgba(255, 150, 60, 0) 70%);
}
@keyframes cl-bob {
  from { transform: translateY(0) rotate(-2.5deg); }
  to { transform: translateY(-6%) rotate(2.5deg); }
}
.cl-ripple {
  position: absolute;
  width: calc(170 * var(--u));
  height: calc(54 * var(--u));
  margin: calc(-27 * var(--u)) 0 0 calc(-85 * var(--u));
  border: calc(2.5 * var(--u)) solid rgba(255, 222, 160, 0.75);
  border-radius: 50%;
  pointer-events: none;
  z-index: 39;
}