/* =========================================================
   Phong cách "Ren thêu": nền satin nâu be + thẻ giấy kem viền ren
   ========================================================= */
:root {
  --satin: #7a5e4a;
  --satin-deep: #4f3a2c;
  --paper: #fbf6ee;
  --ink: #4a3426;
  --taupe: #a07e5f;
  --stitch: #dcc8ad;
  --white: #fff;
  --script: "Great Vibes", cursive;
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --display: "Playfair Display", Georgia, serif;
  --sans: "Quicksand", system-ui, sans-serif;
  --w: 480px;
  /* Vân satin: các nếp vải bóng chạy chéo */
  --satin-sheen:
    repeating-linear-gradient(162deg,
      rgba(255,255,255,0) 0, rgba(255,255,255,.07) 90px, rgba(255,255,255,.015) 170px,
      rgba(60,38,24,.28) 260px, rgba(255,255,255,.05) 360px, rgba(255,255,255,0) 460px),
    radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(90% 50% at 100% 55%, rgba(255,255,255,.07), transparent 60%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  color: var(--white);
  background: var(--satin-deep);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100vh; }
img { display: block; max-width: 100%; }
main {
  max-width: var(--w);
  margin: 0 auto;
  background-color: var(--satin);
  background-image: var(--satin-sheen);
  box-shadow: 0 0 80px rgba(50,32,20,.5);
  overflow: hidden;
}

/* ---------- Chữ ---------- */
.script { font-family: var(--script); font-weight: 400; line-height: 1.15; }
.script.big { font-size: 3.6rem; }
.title {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: 1.15rem; color: var(--ink); margin-bottom: 1.2rem;
}
.title.light { color: var(--white); }
.title.sm { font-size: .95rem; margin-bottom: .5rem; }
.caps-sm { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--taupe); margin: .3rem 0; }
.small { font-size: .9rem; color: rgba(255,255,255,.82); }

/* ---------- Nút ---------- */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  font: 600 .78rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: .8rem 1.6rem; border-radius: 2px; transition: transform .2s, background .2s, color .2s;
}
.btn-dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-dark:hover { background: transparent; color: var(--ink); }
.btn:hover { transform: translateY(-2px); }

/* ---------- Thẻ giấy viền ren ---------- */
.lace {
  position: relative; color: var(--ink); text-align: center;
  margin: 40px 16px; padding: 3.6rem 1.8rem 3.4rem;
  background-color: var(--paper);
  /* dải chấm thêu chạy sát mép trên + dưới */
  background-image:
    radial-gradient(circle, var(--stitch) 1.6px, transparent 2.2px),
    radial-gradient(circle, var(--stitch) 1.6px, transparent 2.2px);
  background-size: 11px 11px, 11px 11px;
  background-repeat: repeat-x;
  background-position: 0 24px, 0 calc(100% - 24px);
  outline: 1px dashed var(--stitch); outline-offset: -12px;
  box-shadow: 4px 6px 16px rgba(50,32,20,.45);
}
/* mép ren vỏ sò + lỗ thêu ở trên và dưới */
.lace::before, .lace::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none;
  background-size: 22px 14px; background-repeat: round;
}
.lace::before {
  bottom: 100%;
  background-image:
    radial-gradient(circle at 11px 8px, var(--satin) 2.2px, transparent 2.8px),
    radial-gradient(circle at 11px 14px, var(--paper) 11px, transparent 11.6px);
}
.lace::after {
  top: 100%;
  background-image:
    radial-gradient(circle at 11px 6px, var(--satin) 2.2px, transparent 2.8px),
    radial-gradient(circle at 11px 0, var(--paper) 11px, transparent 11.6px);
}
.vline { display: block; width: 1px; align-self: stretch; background: var(--ink); opacity: .4; }

/* ---------- Phong bì mở đầu ---------- */
.envelope {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background-color: var(--satin); background-image: var(--satin-sheen);
  transition: opacity .9s ease, visibility .9s;
}
.envelope.opened { opacity: 0; visibility: hidden; }
.env-inner { width: min(86vw, 360px); margin: 0; padding: 3.4rem 1.5rem 3rem; }
.env-small { font-family: var(--display); letter-spacing: .22em; text-transform: uppercase; font-size: .75rem; color: var(--taupe); }
.env-names {
  font-family: "Dancing Script", var(--script); font-weight: 600; color: var(--ink);
  font-size: 2.7rem; line-height: 1.2; margin: 1.2rem 0; display: flex; flex-direction: column;
}
.env-names em { font-family: var(--script); font-weight: 400; font-style: normal; font-size: .9em; line-height: 1; color: var(--taupe); }
#openBtn { border-radius: 999px; padding: .85rem 2.4rem; }
.env-seal {
  width: 58px; height: 58px; margin: 0 auto 1.6rem; border-radius: 50%;
  display: grid; place-items: center; color: #f3ece2; font-size: 1.3rem;
  background: radial-gradient(circle at 35% 30%, #9a7458, #4a3426); box-shadow: 0 5px 12px rgba(0,0,0,.35);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ---------- Nút nhạc ---------- */
.music-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: rgba(79,58,44,.75); color: #fff; font-size: 1.3rem; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.4); backdrop-filter: blur(4px);
}
.music-btn.playing { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hero ---------- */
.hero { padding: 4.5rem 1.2rem 3.5rem; text-align: center; }
.std { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .3em; font-size: .95rem; }
.env-stage { position: relative; width: 82%; max-width: 360px; aspect-ratio: 1 / .95; margin: 2.6rem auto 2rem; }
.env-back {
  position: absolute; left: 4%; right: 4%; top: 30%; bottom: 0;
  background: linear-gradient(180deg, #ece0cf, #f7efe3); box-shadow: 0 14px 30px rgba(50,32,20,.42);
}
.env-back::before { /* nắp phong bì mở lên */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 55%;
  background: linear-gradient(0deg, #e5d6c2, #f4ebdd); clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.float-photo {
  position: absolute; left: 30%; top: 0; width: 48%; aspect-ratio: 3 / 4;
  border: 7px solid #fff; background: #ddd; box-shadow: 2px 3px 8px rgba(0,0,0,.35);
  transform: rotate(9deg); animation: floaty 4.5s ease-in-out infinite;
}
.float-photo img { width: 100%; height: 100%; object-fit: cover; }
@keyframes floaty { 50% { transform: rotate(7deg) translateY(-10px); } }
.env-front {
  position: absolute; left: 4%; right: 4%; bottom: 0; height: 58%;
  background: linear-gradient(180deg, #fffaf2, #efe3d2);
  clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
}
.env-front::before { /* đường chỉ thêu dọc mép dưới phong bì */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 10px; height: 6px;
  background: radial-gradient(circle, var(--stitch) 1.4px, transparent 2px) 0 0 / 9px 6px repeat-x;
}
.wax {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: #f3ece2; font-size: 1rem; background: radial-gradient(circle at 35% 30%, #9a7458, #4a3426);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.hero-names { position: relative; margin-top: 1rem; }
.hero-names h1 {
  position: relative; font-family: var(--serif); font-weight: 500; text-transform: uppercase;
  font-size: 2.7rem; line-height: 1.15; display: flex; flex-direction: column; gap: .5rem;
}
.amp-bg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-family: var(--script); font-size: 8rem; line-height: 1; color: rgba(255,255,255,.14); pointer-events: none;
}
.hero-date { font-family: var(--display); letter-spacing: .35em; margin-top: 1.6rem; font-size: 1rem; color: rgba(255,255,255,.85); }

/* ---------- Section chung (trên nền satin) ---------- */
.section { padding: 3.5rem 1.4rem; text-align: center; position: relative; }

/* ---------- Thông tin lễ cưới ---------- */
.families { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; margin-bottom: 1.4rem; font-size: .95rem; font-weight: 600; }
.families h4 { font-weight: 500; color: var(--taupe); font-size: .85rem; margin-bottom: .2rem; }
.invite-text { font-size: .98rem; margin: .2rem auto 0; max-width: 320px; text-transform: uppercase; letter-spacing: .02em; font-size: .78rem; line-height: 1.7; }
.couple-names { margin: 1rem 0 1.2rem; }
.couple-names h3 { font-family: var(--serif); font-weight: 500; font-size: 2.1rem; line-height: 1.25; }
.couple-names .amp { display: block; font-family: var(--script); font-size: 2.2rem; line-height: 1; color: var(--taupe); }
.time-row { display: flex; justify-content: center; gap: 1.6rem; text-transform: uppercase; color: var(--taupe); font-size: .85rem; letter-spacing: .08em; margin-top: .4rem; }
.date-big { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .5rem 0; }
.date-big > span { font-size: 3.6rem; line-height: 1; font-weight: 500; }
.date-big .vline { align-self: auto; height: 46px; }
.date-big div { display: flex; flex-direction: column; align-items: flex-start; text-transform: uppercase; font-size: 1.05rem; line-height: 1.35; letter-spacing: .06em; }
.lunar { font-style: italic; color: var(--taupe); font-size: .92rem; }
.venue { margin-top: 1.8rem; }
.venue h3 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; margin: .2rem 0; }
.venue p { margin-bottom: 1.1rem; }
.map iframe { width: 100%; height: 240px; border: 0; margin-top: 1.4rem; filter: grayscale(.85) contrast(1.05); }

/* ---------- Album: slide 3D ---------- */
.cf { position: relative; height: 380px; margin: 0 auto; perspective: 1000px; touch-action: pan-y; user-select: none; }
.cf-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.cf-item {
  position: absolute; height: 92%; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 14px 30px rgba(50,32,20,.45); background: var(--satin-deep);
  transition: transform 1.1s cubic-bezier(.4,.2,.2,1), opacity 1.1s ease;
}
.cf-item.active { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 18px 40px rgba(50,32,20,.5); }
.cf-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cf-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 200; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: rgba(79,58,44,.55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cf-prev { left: 0; } .cf-next { right: 0; }
.cf-count { margin-top: 1rem; font-family: var(--display); letter-spacing: .2em; font-size: .85rem; color: rgba(255,255,255,.88); }

/* ---------- Đếm ngược ---------- */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 0 0 2.2rem; }
.countdown div { border: 1px solid rgba(255,255,255,.35); padding: .8rem 0; background: rgba(255,255,255,.04); }
.countdown b { display: block; font-family: var(--serif); font-size: 2.1rem; font-weight: 500; line-height: 1.1; }
.countdown span { font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.88); }
.cd-row { display: grid; grid-template-columns: 0.8fr 1fr; gap: 1rem; align-items: center; }
.calendar { background: var(--paper); color: var(--ink); padding: 1rem .7rem; outline: 1px dashed var(--stitch); outline-offset: -6px; box-shadow: 3px 5px 14px rgba(50,32,20,.42); }
.calendar h4 { font-family: var(--display); font-weight: 600; margin-bottom: .5rem; letter-spacing: .06em; font-size: .85rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: .78rem; }
.cal-grid .dow { font-weight: 600; color: var(--taupe); font-size: .66rem; }
.cal-grid .day { padding: .2rem 0; border-radius: 50%; }
.cal-grid .day.hl { background: var(--ink); color: #fff; position: relative; }
.cal-grid .day.hl::after { content: "♥"; position: absolute; top: -9px; right: -3px; font-size: .65rem; color: var(--ink); }
.cd-done { font-family: var(--script); font-size: 2.2rem; margin: 0 0 2rem; }

/* ---------- Ảnh polaroid ---------- */
.polaroid { border: 7px solid #fff; background: #ddd; box-shadow: 2px 4px 10px rgba(50,32,20,.4); aspect-ratio: 3 / 4; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.tilt-l { transform: rotate(-4deg); } .tilt-r { transform: rotate(4deg); }

/* ---------- Cô dâu chú rể ---------- */
.couple-grid { display: grid; gap: 2.6rem; margin-top: 1rem; }
.person .polaroid { width: 200px; margin: 0 auto 1.4rem; }
.person h3.script { font-size: 2.3rem; margin: 0 0 .4rem; }
.person p:last-child { color: rgba(255,255,255,.88); font-size: 1rem; max-width: 340px; margin: 0 auto; }
.story { margin-top: 3rem; text-align: left; border-left: 1px solid rgba(255,255,255,.3); padding-left: 1.4rem; }
.story-item { position: relative; margin-bottom: 1.6rem; }
.story-item::before { content: "♥"; position: absolute; left: -1.85rem; top: 0; background: var(--satin); color: #fff; width: .9rem; text-align: center; font-size: .8rem; }
.story-item b { font-family: var(--display); color: #f1dcc3; }
.story-item h4 { font-family: var(--display); font-weight: 600; }
.story-item p { color: rgba(255,255,255,.88); font-size: 1rem; }

/* ---------- Lịch trình ---------- */
.timeline { list-style: none; margin: 1rem auto 0; max-width: 320px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: .35; }
.timeline li { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin-bottom: 1.3rem; position: relative; }
.timeline li::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); box-shadow: 0 0 0 4px var(--paper); }
.timeline .t { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; text-align: right; }
.timeline .l { text-align: left; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.dresscode { margin-top: 2.4rem; }
.swatches { display: flex; justify-content: center; gap: .6rem; margin-top: .9rem; }
.swatches span { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--stitch), 0 3px 8px rgba(0,0,0,.15); }

/* ---------- Hộp quà ---------- */
.gift-box { position: relative; width: 96px; height: 96px; margin: .6rem auto .8rem; display: block; background: none; border: 0; cursor: pointer; animation: wiggle 2.4s ease-in-out infinite; }
.gb-body { position: absolute; left: 10px; right: 10px; bottom: 0; height: 58px; background: linear-gradient(90deg, transparent 43%, var(--taupe) 43% 57%, transparent 57%), var(--paper); box-shadow: 0 6px 16px rgba(50,32,20,.42); }
.gb-lid { position: absolute; left: 4px; right: 4px; top: 22px; height: 20px; z-index: 1; background: linear-gradient(90deg, transparent 43%, var(--taupe) 43% 57%, transparent 57%), #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.gb-lid::before, .gb-lid::after { content: ""; position: absolute; bottom: 100%; width: 22px; height: 16px; border: 4px solid var(--taupe); border-radius: 50% 50% 0 50%; }
.gb-lid::before { right: 50%; } .gb-lid::after { left: 50%; transform: scaleX(-1); }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-5deg); } }

/* ---------- RSVP ---------- */
.rsvp { display: grid; gap: .7rem; text-align: left; font-family: var(--sans); }
.rsvp input:not([type=radio]), .rsvp select, .rsvp textarea {
  width: 100%; font: inherit; font-size: .92rem; padding: .7rem .85rem; border: 1px solid #e0cfb8; border-radius: 2px; background: #fff; color: var(--ink);
}
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus { outline: 1px solid var(--ink); border-color: var(--ink); }
.rsvp > label { font-size: .8rem; color: var(--taupe); font-weight: 600; margin-top: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips label { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border: 1px solid #e0cfb8; border-radius: 999px; font-size: .85rem; cursor: pointer; background: #fff; }
.chips label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips input { accent-color: var(--ink); }
.rsvp .btn { justify-self: center; margin-top: .4rem; }
.form-msg { text-align: center; font-size: .9rem; color: var(--taupe); min-height: 1.2em; }
.wishes { max-height: 420px; overflow-y: auto; display: grid; gap: .7rem; text-align: left; padding-right: 4px; }
.wish { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); padding: .8rem 1rem; }
.wish b { font-family: var(--display); font-size: .95rem; }
.wish p { font-size: 1rem; color: rgba(255,255,255,.8); white-space: pre-line; }
.wishes:empty::before { content: "Hãy là người đầu tiên gửi lời chúc ♥"; display: block; text-align: center; color: rgba(255,255,255,.88); font-style: italic; }

/* ---------- Modal + lightbox ---------- */
.modal, .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(50,35,25,.88); padding: 16px; }
[hidden] { display: none !important; }
.modal-card { background: var(--paper); color: var(--ink); padding: 2rem 1.2rem; width: min(100%, 420px); max-height: 90vh; overflow: auto; text-align: center; position: relative; outline: 1px dashed var(--stitch); outline-offset: -10px; }
.modal-close, .lb-close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 2rem; cursor: pointer; color: inherit; }
.gifts { display: grid; gap: 1.2rem; }
.gift { border: 1px solid #eadcc8; padding: 1rem; }
.gift img { width: 180px; height: 180px; object-fit: contain; margin: .6rem auto; background: #fff; }
.gift .acc { font-family: var(--display); font-size: 1.2rem; letter-spacing: .08em; }
.gift .small { color: var(--taupe); }
.gift button { margin-top: .5rem; padding: .5rem 1rem; font-size: .7rem; }
.lightbox { color: #fff; }
.lightbox img { max-width: 100%; max-height: 86vh; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); color: #fff; border: 0; font-size: 2.2rem; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }

/* ---------- Cảm ơn ---------- */
.thanks { position: relative; min-height: 80vh; display: grid; place-items: end center; text-align: center; }
.thanks-bg { position: absolute; inset: 0; background: var(--satin-deep) center 30%/cover no-repeat; filter: grayscale(.2); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(79,58,44,0) 45%, rgba(79,58,44,.9) 100%); }
.thanks-content { position: relative; padding: 2rem 2rem 3.2rem; }
.thanks .script { text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.thanks p { max-width: 320px; margin: .8rem auto 0; font-size: 1.05rem; }

/* ---------- Hiệu ứng xuất hiện khi cuộn ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .float-photo, .gift-box, .env-seal, .music-btn.playing { animation: none; }
  .cf-item { transition: none; }
}
@media (max-width: 360px) {
  .hero-names h1 { font-size: 2.2rem; }
  .cf { height: 320px; }
  .cd-row { grid-template-columns: 1fr; }
  .cd-row .polaroid { width: 60%; margin: 0 auto; }
}
.section .caps-sm { color: #f1dcc3; }

/* ---------- Lời chúc chạy ở góc màn hình ---------- */
.wish-ticker {
  position: fixed; z-index: 60; top: 12px; right: max(10px, calc(50% - var(--w) / 2 + 10px));
  width: min(340px, calc(100vw - 20px)); display: flex; align-items: center; gap: .7rem;
  padding: .7rem 2.4rem .8rem .9rem; overflow: hidden; border-radius: 4px 4px 8px 8px;
  background: #fff; color: #2b2522; box-shadow: 0 6px 20px rgba(50,32,20,.22);
  opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .3s ease;
}
.wish-ticker.show { opacity: 1; transform: none; }
.wt-icon { font-size: 1.5rem; line-height: 1; flex: none; }
.wt-text { min-width: 0; flex: 1; cursor: pointer; display: flex; flex-direction: column; font-family: var(--sans); }
.wt-text b { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-text span { font-size: .85rem; color: #6b625c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-close {
  position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border: 0; background: none;
  color: #9a918b; font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.wt-close:hover { color: #2b2522; }
.wt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #f6e7d2; }
.wt-bar::after { content: ""; position: absolute; inset: 0; background: #e8b36b; transform-origin: left; transform: scaleX(0); }
.wt-bar.run::after { animation: wtProgress var(--wt-d, 2000ms) linear forwards; }
@keyframes wtProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wish-ticker { transition: none; } .wt-bar.run::after { animation: none; transform: scaleX(1); } }