/* scenes/countdown-location.css -- the two slides added after the PSD delivery
 * (client feedback 2026-10-23): the countdown (after the names slide) and the venues
 * (the last 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,
.cl-live .cl-sun { 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;
}

/* ================================================================== location */
.vn {
  position: absolute;
  left: calc(170 * var(--u));
  top: calc(352 * var(--u));
  width: calc(740 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(34 * var(--u));
}
.vn__card {
  position: relative;
  padding: calc(34 * var(--u)) calc(40 * var(--u)) calc(38 * var(--u));
  text-align: center;
  color: #494b00;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.9), rgba(255, 246, 230, 0.84));
  border: calc(2 * var(--u)) solid rgba(201, 162, 74, 0.6);
  border-radius: calc(30 * var(--u));
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(120, 70, 30, 0.16);
}
.vn__card::before {
  content: "";
  position: absolute;
  inset: calc(9 * var(--u));
  border: calc(1.5 * var(--u)) solid rgba(169, 42, 70, 0.2);
  border-radius: calc(22 * var(--u));
  pointer-events: none;
}
.vn__events {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font: 600 calc(23 * var(--u)) / 1.3 "Cormorant Garamond", serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a92a46;
}
.vn__events i,
.vn__meta i {
  display: inline-block;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  margin: 0 calc(16 * var(--u));
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.vn__name {
  margin: calc(12 * var(--u)) 0 calc(4 * var(--u));
  font: 700 calc(52 * var(--u)) / 1.1 "Cormorant Garamond", serif;
  color: #494b00;
}
.vn__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font: 600 calc(30 * var(--u)) / 1.3 "Cormorant Garamond", serif;
  font-variant-numeric: lining-nums;
  color: rgba(73, 75, 0, 0.86);
}
.vn__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(24 * var(--u));
  height: calc(84 * var(--u));
  padding: 0 calc(42 * var(--u)) 0 calc(34 * var(--u));
  border-radius: 999px;
  background: #a92a46;
  color: #fffaf0;
  font: 600 calc(29 * var(--u)) / 1 "Cormorant Garamond", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(169, 42, 70, 0.3);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, transform 160ms ease;
}
.vn__btn svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: none; }
/* the pill is ~30 px tall on a phone: pad the tap target to ~44 px without moving it */
.vn__btn::after { content: ""; position: absolute; inset: calc(-20 * var(--u)) calc(-8 * var(--u)); }
.vn__btn:hover { background: #8e1f3a; }
.vn__btn:active { transform: scale(0.97); }
.vn__btn:focus-visible { outline: 3px solid #a92a46; outline-offset: 4px; }

/* entrance: the cards rise in after the title */
html.motion .scene--location:not(.is-entered) .vn__card { opacity: 0; transform: translateY(calc(36 * var(--u))); }
html.motion .scene--location .vn__card {
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 160ms ease;
  transition-delay: calc(600ms + var(--i, 0) * 180ms);
}

/* the studio credit (build.py credit_html, claimed by the scene module) follows the cards */
html.motion .scene--location:not(.is-entered) [data-text="location.credit"] .tl {
  opacity: 0;
  transform: translateY(calc(16 * var(--u)));
}
html.motion .scene--location [data-text="location.credit"] .tl {
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 1250ms, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 1250ms;
}

/* golden-hour light breathing behind the Taj (scene module adds it; small node) */
.cl-sun {
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(1210 * var(--u));
  width: calc(560 * var(--u));
  height: calc(300 * var(--u));
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 190, 0.55), rgba(255, 214, 150, 0.18) 55%, rgba(255, 200, 130, 0));
  opacity: 0.25;
  animation: cl-sun 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes cl-sun {
  from { opacity: 0.2; transform: scale(0.94); }
  to { opacity: 0.7; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .vn__btn { transition: none; }
}