/* ==========================================================================
   Twinkling Tree — post-purchase upsell, recreated from Cherish's Figma frame.
   Frame: 390 x 1340 CSS. Every position below is measured off her PNG export
   (refs/fig780.png, a 2x export) — not invented.
   ========================================================================== */

:root {
  --frame: 390px;

  /* colours sampled from the export */
  --eyebrow:   #731813;
  --gold-text: #9a6206;
  --gold-orn:  #c79c55;
  --gold-pill: #d3ad6d;
  --green:     #16311f;   /* matches her Figma live-text layers exactly */
  --green-deep:#12291c;
  --red-hot:   #d62222;
  --red:       #8e2323;
  --accent:    #8f5f2a;   /* her countdown reference's accent (rgb 143,95,42) */
  --red-bar:   #a83030;
  --ink:       #3d392f;
  --muted:     #6b6456;
  --bar-track: #f5ddb7;
  --cream:     #eaddc4;

  --prata:   "Prata", Georgia, serif;
  --playfair:"Playfair Display", Georgia, serif;
  --lora:    "Lora", Georgia, serif;
  --inter:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
p, h1, h2 { margin: 0; }          /* headings keep a default margin otherwise (C1) */

/* no horizontal scrollbar, and no vertical one stealing width from the zoom
   calculation — otherwise #stage renders ~1% small and drifts (D3) */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--cream);
}
html::-webkit-scrollbar { width: 0; height: 0; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--lora);
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: relative;
  width: var(--frame);
  height: 1340px;
  margin: 0 auto;
  overflow: hidden;
  transform-origin: top left;
}

/* --------------------------------------------------------------------------
   Background — her `new bg.png`, tone-matched to the export, branches at the
   top and a vertically flipped copy carrying branches at the bottom.
   -------------------------------------------------------------------------- */
.bg {
  position: absolute;
  left: 0;
  width: var(--frame);
  height: 693.3px;                /* 390 * 3840/2160 — the asset's own ratio */
  background: url("assets/bg-toned.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.bg--top    { top: 0; }

.bg--bottom { bottom: 0; transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   Shared helper: centred absolute line
   -------------------------------------------------------------------------- */
.eyebrow, .badge, .head, .product, .remain, .claimed, .note, .sold {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Eyebrow  (export: L1 ink top 52, L2 ink top 64.5; cx 195)
   -------------------------------------------------------------------------- */
.eyebrow {
  top: 47px;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 8.63px;
  letter-spacing: 1.5px;
  color: var(--eyebrow);
}
.eyebrow span { display: block; }
.eyebrow__l1 { text-indent: 1.5px; }
.eyebrow__l2 { margin-top: 8.6px; text-indent: 1.5px; }

/* --------------------------------------------------------------------------
   Limited Edition pill  (export: pill 82.5–103, text ink top 90)
   -------------------------------------------------------------------------- */
.badge {
  top: 82.5px;
  margin-left: 5.3px;             /* her badge text centres at 201, not 195 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 148px;
  height: 20.5px;
  border: 1px solid var(--gold-pill);
  border-radius: 999px;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 9.03px;
  letter-spacing: 2.14px;
  text-indent: 0;
  padding-left: 2.14px;
  color: var(--gold-text);
}
.badge__dash { font-weight: 400; letter-spacing: 0; text-indent: 0; }

/* --------------------------------------------------------------------------
   Headline  (export baselines 149 / 194.5 / 235.5; widths 272.5 / 260.5 / 259)
   The hero in her Figma is a flattened bitmap, so its typeface isn't a webfont;
   Prata is the closest match by width + cap-height (3.3%).
   -------------------------------------------------------------------------- */
.head {
  top: 119px;
  margin-left: 3px;
  font-family: var(--prata);
  font-weight: 400;
  font-size: 34.71px;
  color: var(--green-deep);
}
.head span { display: block; }
.head__l2 { margin-top: 12px; letter-spacing: -0.53px; }
.head__l3 { margin-top: 8px; padding-left: 26px; }
.head em {
  /* Prata has no italic, and Playfair's italic renders 44px narrower than the
     bitmap's, so it is sized up to match the measured width of "special". */
  font-style: italic;
  font-family: var(--playfair);
  font-size: 1.22em;
  letter-spacing: .012em;
  color: #6a0102;
}


/* the brush swoosh, taken from her export at its measured position */
.ornament {
  position: absolute;
  left: 112px;
  top: 300px;
  width: 176px;
  height: 18px;
  pointer-events: none;
}

.brush {
  position: absolute;
  left: 94px;
  top: 228px;
  width: 168px;
  height: 38px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Product name + ornament  (export: ink top 274.5, w 295.5; ornament 300–318)
   -------------------------------------------------------------------------- */
.product {
  top: 275px;
  font-family: var(--prata);
  font-size: 18.85px;
  color: var(--gold-text);
}

/* --------------------------------------------------------------------------
   Video  (export: 30,319 → 359,731; 329x412; aspect 0.7985; radius ~13)
   -------------------------------------------------------------------------- */
.video {
  position: absolute;
  left: 30px;
  top: 319px;
  width: 329px;
  height: 412px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  overflow: hidden;
  background: #1a1206;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* measured against her export: 1.8% in, 4px down */
  scale: 1.018;
  object-position: 50% 50%;
  position: relative; top: 4px;
}
.video__caption {
  position: absolute;
  left: 50%;
  bottom: 42.5px;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(16, 10, 4, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: var(--lora);
  font-size: 16.7px;
  line-height: 1;
  color: #fbf2e0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Scarcity — these are her Figma LIVE-text layers, and their values match my
   v1 CSS exactly (she imported that page into Figma), so they're reproduced
   from the same numbers rather than guessed.
   -------------------------------------------------------------------------- */
.sold {
  top: 766.5px;
  font-family: var(--playfair);
  font-weight: 600;
  font-size: 23.24px;
  color: var(--green);
}
.sold span { display: block; }
.sold__l2 { margin-top: 8px; }
.sold__flame {
  width: 18px;
  height: 22.5px;
  vertical-align: -4.5px;         /* sits its top on her 770 ink line */
}
.sold em {
  font-style: normal;
  color: var(--red-hot);
  border-bottom: 1.5px solid rgba(214, 34, 34, .55);
  padding-bottom: 1px;
}

.remain {
  top: 842px;
  font-family: var(--lora);
  font-size: 19.36px;
  color: var(--ink);
}
.remain strong {
  font-family: var(--playfair);
  font-weight: 700;
  font-size: 26px;
  color: var(--red-hot);          /* same red as "sold out" */
}

@keyframes tt-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}

.bar { position: absolute; left: 34.5px; top: 894.5px; width: 312.5px; }
.bar__track {
  height: 9px;
  border-radius: 999px;
  background: var(--bar-track);
  overflow: hidden;
}
/* The glisten travels the FULL length of the bar.
   The reference translates a 34px element by 320% — but that is 320% of the
   element's own 34px (~109px), so on a 312px bar the band only ever crossed the
   first third. Instead the band is a background on a full-width layer and the
   BACKGROUND POSITION is animated, so it sweeps end to end at any bar width. */
.bar__glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent) no-repeat;
  background-size: 34px 100%;
  animation: bar-sweep 3.6s linear infinite;
  pointer-events: none;
}
@keyframes bar-sweep {
  from { background-position: -34px 0; }
  to   { background-position: calc(100% + 34px) 0; }
}
.bar__track { position: relative; }

.bar__fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red-bar), var(--red) 62%, #c0912f);
  transition: width 1.4s cubic-bezier(.16, 1, .3, 1);
}

.claimed {
  top: 915.5px;
  display: flex;
  justify-content: space-between;
  width: 312.5px;
  font-family: var(--inter);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
}
.claimed b { font-weight: 700; color: var(--red); }

.note {
  top: 944.5px;
  margin-left: -1.5px;
  font-family: var(--lora);
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Countdown — built from her timer design image (the numbers must actually
   run, so it's live text, not the image).
   -------------------------------------------------------------------------- */
.timer { position: absolute; left: 0; top: 1010px; width: var(--frame); text-align: center; }

.timer__head {
  font-family: var(--prata);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  color: var(--green-deep);
}
.timer__orn { display: block; width: 150px; height: 15px; margin: 12px auto 0; }

.timer__clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
}
.timer__unit { display: inline-flex; align-items: baseline; gap: 5px; }
.timer__unit b {
  /* Prata has no tabular figures, so a "1" is narrower than a "0" and the
     unit labels shuffle as the clock ticks. A fixed box holds them still. */
  display: inline-block;
  width: 2ch;
  text-align: center;
  font-family: var(--prata);
  font-weight: 400;
  font-size: 33px;
  line-height: 1;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.timer__unit i {
  font-family: var(--lora);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-text);
}

.timer__foot {
  margin: 30px 0 0;
  padding: 0;                     /* centred now the tree is gone */
  font-family: var(--lora);
  font-size: 14px;
  line-height: 1.5;
  color: var(--green);
}
.timer__foot span { color: var(--gold-text); }

@media (prefers-reduced-motion: reduce) {
  .bar__fill { transition: none; }
  .bar__glint { animation: none; opacity: .35; }
}