/* ===========================================================================
   Thiệp 8 — "forest / save the date"
   Dựng lại kỹ thuật của https://dearlydrawnvn.com/ethan-anna/
   HTML + CSS + JS thuần. Không framework, không thư viện animation.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #1f1f12; }

/* ---------------------------------------------------------------------------
   1. HỆ LAYOUT
   Toàn bộ trang vẽ trên canvas rộng 440 "design px". --px là tỉ lệ quy đổi
   sang CSS px thật. Mọi số đo viết calc(N * var(--px)) nên khi màn hẹp hơn
   440px thì cả trang co đều — không cần một media query nào.
   --------------------------------------------------------------------------- */
.c8 {
  --px: calc(min(100vw, 440px) / 440);

  --paper:  #fffef8;
  --sage:   #94966b;
  --olive:  #526035;
  --moss:   #3b3a25;
  --forest: #2c2b19;

  --out:  cubic-bezier(.16, 1, .3, 1);     /* ease-out mạnh: chuyển động vào */
  --pen:  cubic-bezier(.45, .05, .55, .95); /* ease-in-out: nét bút */
  --soft: 0 1px 9.5px #14140a73;

  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  color: var(--olive);
  font-family: "Noto Serif Display", serif;
  font-stretch: 62.5%;            /* Instrument Serif không có tiếng Việt; Noto 62.5% gần nhất */
  -webkit-font-smoothing: antialiased;
}
.c8 img { display: block; max-width: none; }

.c8-sec { position: relative; height: calc(var(--h) * var(--px)); }

.c8-abs {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}
.c8-center {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--y) * var(--px));
  margin: 0;
  text-align: center;
}
.c8-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------------------
   2. HIỆU ỨNG NÉT MỰC
   Mask gradient nghiêng, rộng 260%, trượt từ phải sang trái → chữ hiện ra
   như đang được viết. --d = thời lượng, --wait = delay.
   --------------------------------------------------------------------------- */
.ink {
  display: inline-block;
  margin:  -.3em -.45em;
  padding:  .3em  .45em;   /* chừa chỗ cho đuôi chữ ký, tránh bị mask cắt */
  -webkit-mask-image: linear-gradient(100deg, #000 46%, #0000 54%);
          mask-image: linear-gradient(100deg, #000 46%, #0000 54%);
  -webkit-mask-size: 260% 100%;  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;  mask-position: 100% 0;
  transition:
    -webkit-mask-position var(--d, 1.6s) var(--pen) var(--wait, 0s),
            mask-position var(--d, 1.6s) var(--pen) var(--wait, 0s);
}
.c8.is-ready .c8-open .ink,
.is-in .ink { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* Khoá màn 2 cho tới khi màn mở đầu diễn xong (.is-done) */
.c8:not(.is-done) .c8-couple .ink   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.c8:not(.is-done) .c8-couple .c8-up { opacity: 0; translate: 0 calc(12 * var(--px)); }

/* ---------------------------------------------------------------------------
   3. TRƯỢT LÊN + MỜ DẦN, CÓ STAGGER
   --i = thứ tự trong nhóm (cách nhau .2s), --w0 = delay nền.
   --------------------------------------------------------------------------- */
.c8-up {
  opacity: 0;
  translate: 0 calc(12 * var(--px));
  transition:
    opacity   1.4s ease       calc(var(--w0, .2s) + var(--i, 0) * .2s),
    translate 1.6s var(--out) calc(var(--w0, .2s) + var(--i, 0) * .2s);
}
.is-in .c8-up,
.c8-up.is-in { opacity: 1; translate: 0; }

/* ---------------------------------------------------------------------------
   4. KEYFRAMES
   --------------------------------------------------------------------------- */
@keyframes c8-breathe { from { transform: scale(1); }   to { transform: scale(1.05); } }
@keyframes c8-sway    { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes c8-bob {
  from { transform: translateY(calc(-3 * var(--px))) rotate(-.4deg); }
  to   { transform: translateY(calc( 3 * var(--px))) rotate( .4deg); }
}
@keyframes c8-soak {
  from { color: #3b3a2500; text-shadow: 0 0 calc(4 * var(--px)) #3b3a25b3; }
  to   { color: var(--moss); text-shadow: 0 0 #3b3a2500; }
}

/* ---------------------------------------------------------------------------
   5. ẢNH NỀN ĐẦU TRANG + FOOTER (ảnh cưới, phủ tối cho chữ trắng)
   --------------------------------------------------------------------------- */
.c8-forest {
  position: absolute;
  inset: 0 0 auto;
  height: calc(352 * var(--px));
  overflow: hidden;
  background: var(--forest);
}
.c8-forest::after {                      /* logo + tên màu trắng đè lên ảnh thật → phủ tối */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(#00000066, #0000004d 45%, #00000073);
  pointer-events: none;
}
/* đầu trang không còn chữ đè lên ảnh → chỉ tối nhẹ ở mép cho hoạ tiết góc nổi */
.c8-open .c8-forest::after {
  background: linear-gradient(#00000040, #0000 35% 70%, #00000033);
}
.c8-forest img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.06;
  transition: opacity 2.4s ease, scale 4s var(--out);
  animation: c8-breathe 24s ease-in-out 4s infinite alternate;
}
.c8.is-ready .c8-open .c8-forest img,
.c8-close.is-in .c8-forest img { opacity: 1; scale: 1; }

.c8-open {
  background: linear-gradient(var(--forest) 0 calc(352 * var(--px)), var(--paper) 0);
}

/* 4 góc dùng chung MỘT ảnh, chỉ lật trục */
.c8-corners img {
  position: absolute;
  width: auto;
  height: calc(108 * var(--px));
  opacity: 0;
  transition: opacity 2.2s .6s;
}
.c8-corners .is-tl, .c8-corners .is-bl { left:  calc(var(--cx) * var(--px)); }
.c8-corners .is-tr, .c8-corners .is-br { right: calc((var(--cx) + 5) * var(--px)); }
.c8-corners .is-tl, .c8-corners .is-tr { top: calc(17 * var(--px)); }
.c8-corners .is-bl, .c8-corners .is-br { top: calc(227 * var(--px)); }
.c8-corners .is-tl { transform: scaleY(-1); }
.c8-corners .is-tr { transform: scale(-1); }
.c8-corners .is-br { transform: scaleX(-1); }
.c8.is-ready .c8-open .c8-corners img,
.c8-close.is-in .c8-corners img { opacity: 1; }

/* ---------------------------------------------------------------------------
   6. MONOGRAM + PHONG BÌ
   --------------------------------------------------------------------------- */
.c8-monogram {
  margin: 0;
  font: 400 calc(122.33 * var(--px))/1.2425 "Mea Culpa", cursive;
  color: var(--paper);
}
/* logo UH ở footer (tách từ logo cưới, bỏ khung). Rộng 180 → cao 157.5, tỉ lệ 1.143 */
.c8-logo img { width: calc(180 * var(--px)); height: auto; }

.c8-env {
  width:  calc(188 * var(--px));
  height: calc(227 * var(--px));
  opacity: 0;
  translate: 0 calc(28 * var(--px));
  transition: opacity 1.6s ease 2.6s, translate 2.2s var(--out) 2.6s;
}
.c8.is-ready .c8-env { opacity: 1; translate: none; }

.c8-env-back  { position: absolute; inset: 0; width: 100%; height: 100%; }
.c8-env-front {
  position: absolute;
  left: 0; top: calc(92 * var(--px));
  width:  calc(189 * var(--px));
  height: calc(135 * var(--px));
  filter: drop-shadow(0 calc(3 * var(--px)) calc(6 * var(--px)) #28281433);
}
/* khe cắt: tấm thiệp trượt ra từ BÊN TRONG phong bì */
.c8-env-slot {
  position: absolute;
  left: calc(-20 * var(--px)); right: calc(-20 * var(--px));
  top:  calc(-60 * var(--px)); bottom: 0;
  overflow: hidden;
}
.c8-lacecard {
  position: absolute;
  left: calc(27 * var(--px)); top: calc(60 * var(--px));
  width:  calc(168 * var(--px));
  height: calc(225 * var(--px));
  opacity: 0;
  translate: 0 calc(165 * var(--px));
  transition: translate 2.4s cubic-bezier(.22, .9, .25, 1) 3.6s, opacity 1s 3.6s;
}
.c8.is-ready .c8-lacecard { opacity: 1; translate: 0; }
.c8-lacecard img {
  width: 100%; height: 100%;
  filter: drop-shadow(0 calc(1 * var(--px)) calc(3 * var(--px)) #28281440);
}
.c8-save, .c8-thedate {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: var(--paper);
  text-shadow: 0 1px 9.2px #00000040;
}
.c8-save {
  top: calc(63 * var(--px));
  font: extra-condensed 400 calc(36.62 * var(--px))/1.31 "Noto Serif Display", serif;
  text-transform: uppercase;
}
.c8-thedate {
  top: calc(100 * var(--px));
  font: 400 calc(27.16 * var(--px))/1.25 "Mea Culpa", cursive;     /* cỡ chỉnh để rộng bằng bản Ingrid Darling cũ */
}
.c8-tagline {
  z-index: 3;
  font: 400 calc(31.63 * var(--px))/1.25 "Mea Culpa", cursive;
  color: var(--olive);
  text-shadow: 0 1.2px 11.4px #00000040;
}

/* ---------------------------------------------------------------------------
   7. TÊN CÔ DÂU / CHÚ RỂ — đặt nghiêng kiểu chữ ký
   --------------------------------------------------------------------------- */
.c8-names { margin: 0; font-weight: 400; }
.c8-name {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  transform: matrix(.941, -.338, -.176, .984, 0, 0);
  transform-origin: 0 0;
  font: 400 calc(var(--fs) * var(--px))/1.2425 "Mea Culpa", cursive;
  color: var(--paper);
  white-space: nowrap;
  text-shadow: 0 .032em .3em #00000052;   /* chỉ bóng mờ; đã bỏ 4 lớp viền đen theo yêu cầu */
}

/* ---------------------------------------------------------------------------
   8. ẢNH FULL-BLEED
   --------------------------------------------------------------------------- */
.c8-photo { position: absolute; inset: 0 0 auto; overflow: hidden; }
.c8-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: c8-breathe 22s ease-in-out infinite alternate;
}
.c8-couple .c8-photo { height: calc(652 * var(--px)); }
.c8-couple .c8-photo::after {           /* tan dần xuống nền sage */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    var(--paper) 0%, #fffef800 19%, #94966b00 70%, #94966bbf 89%, var(--sage) 98%);
}
.c8-lace {
  width:  calc(461 * var(--px));
  height: calc(123 * var(--px));
  mix-blend-mode: screen;               /* ren trắng hoà vào ảnh, mất nền đen */
}
.c8-married {
  font: 400 calc(31.63 * var(--px))/1.25 "Mea Culpa", cursive;
  color: var(--paper);
  text-shadow: 0 1px 9.5px #00000059;
}
.c8-date {
  font: extra-condensed 400 calc(37.53 * var(--px))/1.3 "Noto Serif Display", serif;
  color: var(--paper);
  text-shadow: var(--soft);
}

/* ---------------------------------------------------------------------------
   9. LỊCH THÁNG
   --------------------------------------------------------------------------- */
.c8-cal { background: var(--sage); }
.c8-december {
  font: 400 calc(59.35 * var(--px))/1.3 "Mea Culpa", cursive;
  color: var(--paper);
  text-shadow: 0 2px 18.8px #0000004d;
}
.c8-grid {
  position: absolute;
  left: calc(26 * var(--px)); top: calc(105 * var(--px));
  width: calc(380 * var(--px));
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: calc(41 * var(--px));
  grid-auto-rows: calc(43 * var(--px));
}
.c8-grid li {
  position: relative;
  text-align: center;
  font: extra-condensed 400 calc(20.63 * var(--px))/calc(27 * var(--px)) "Noto Serif Display", serif;
  color: #fff;
  text-shadow: 0 1.4px 13.4px #0000004d;
  opacity: 0;
  transition: opacity 1.4s ease calc(.8s + var(--i) * .2s);
}
.c8-grid .is-head {
  font-size: calc(26.57 * var(--px));
  line-height: calc(34 * var(--px));
}
.is-in .c8-grid li { opacity: 1; }
.c8-grid li span { position: relative; }
.c8-grid .is-day span { color: var(--sage); text-shadow: none; }

/* vòng tròn vẽ tay quanh ngày cưới */
.c8-grid svg {
  position: absolute;
  left: 50%; top: calc(13.5 * var(--px));
  width:  calc(44 * var(--px));
  height: calc(44 * var(--px));
  overflow: visible;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.c8-grid circle {
  fill: var(--paper); fill-opacity: 0;
  stroke: var(--paper); stroke-width: 1.5px;
  stroke-dasharray: 1;                 /* dùng được vì pathLength="1" */
  stroke-dashoffset: 1px;
  transition:
    stroke-dashoffset 1.6s var(--pen) 2.4s,
    fill-opacity      1.2s ease       3.6s;
}
.is-in .c8-grid circle { stroke-dashoffset: 0; fill-opacity: 1; }

/* ---------------------------------------------------------------------------
   10. KHỐI THÔNG TIN
   --------------------------------------------------------------------------- */
.c8-paper { background: var(--paper); }
.c8-laceframe { width: calc(390 * var(--px)); height: calc(554 * var(--px)); }
.c8-oval {
  width:  calc(253 * var(--px));
  height: calc(362 * var(--px));
  border-radius: 50%;
  overflow: hidden;
}
.c8-oval img { width: 100%; height: 100%; object-fit: cover; }
.c8-laceframe, .c8-oval {
  opacity: 0;
  translate: 0 calc(16 * var(--px));
  transition: opacity 1.8s ease, translate 2.2s var(--out);
}
.c8-oval { transition-delay: .35s; }
.c8-frame.is-in .c8-laceframe,
.c8-frame.is-in .c8-oval { opacity: 1; translate: 0; }

.c8-block > *       { margin: 0; }
.c8-block > * + *   { margin-top: calc(var(--mt, 19) * var(--px)); }
.c8-body {
  font: extra-condensed 400 calc(15 * var(--px))/calc(18 * var(--px)) "Noto Serif Display", serif;
  color: var(--olive);
}
.c8-body, .c8-small p { -webkit-text-stroke: calc(.3 * var(--px)) currentColor; }
.c8-caps { text-transform: uppercase; }
.c8-display {
  font: extra-condensed 400 calc(40 * var(--px))/calc(48 * var(--px)) "Noto Serif Display", serif;
  text-transform: uppercase;
  color: var(--olive);
}
.c8-presence { font-size: calc(15 * var(--px)); }
.c8-small p {
  font: extra-condensed 400 calc(12 * var(--px))/calc(14.5 * var(--px)) "Noto Serif Display", serif;
  color: var(--olive);
}
.c8-small > * + * { --mt: 13; }

/* nút pill */
.c8-pair { display: flex; justify-content: center; gap: calc(7 * var(--px)); }
.c8-pill {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: calc(162 * var(--px));
  height: calc(32 * var(--px));
  padding: 0 calc(14 * var(--px));
  border: 0; border-radius: 999px;
  background: var(--olive);
  color: var(--paper);
  font: extra-condensed 400 calc(15.92 * var(--px))/1 "Noto Serif Display", serif;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .5s, opacity .5s, background-color .5s;
}
.c8-pill:focus-visible,
.c8-pill:has(input:focus-visible) { outline: 2px solid var(--olive); outline-offset: 3px; }
.c8-pill.is-cal {
  width:  calc(191 * var(--px));
  height: calc(37 * var(--px));
  font-size: calc(15 * var(--px));
}

/* tiêu đề mục trên nền giấy: "Xác nhận tham dự", "Trang phục" */
.c8-title {
  font: extra-condensed 400 calc(56 * var(--px))/1.05 "Noto Serif Display", serif;
  text-transform: uppercase;
  color: var(--olive);
}
.c8-title.is-xl { font-size: calc(68 * var(--px)); }

.c8-note { padding: 0 calc(50 * var(--px)); }
.c8-note p {
  font-size: calc(13.5 * var(--px));
  line-height: calc(18.5 * var(--px));
}

/* ô nhập tên trong form xác nhận */
.c8-field {
  display: block;
  width: calc(300 * var(--px));
  height: calc(36 * var(--px));
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #52603580;
  border-radius: 0;
  background: none;
  color: var(--olive);
  font: 400 calc(16 * var(--px))/1 "Lora", serif;
  text-align: center;
  outline: 0;
}
.c8-field::placeholder { color: #52603599; font-style: italic; }
.c8-field:focus { border-bottom-color: var(--olive); }

/* khung mã QR — placeholder cho tới khi có ảnh thật */
.c8-qr-box {
  display: grid;
  place-items: center;
  width:  calc(170 * var(--px));
  height: calc(170 * var(--px));
  margin-left: auto; margin-right: auto;
  border: 1px dashed #52603599;
  border-radius: calc(12 * var(--px));
  background: #fff;
  color: #526035b3;
  font: italic 400 calc(12 * var(--px))/1.4 "Lora", serif;
  overflow: hidden;
}
.c8-qr-box img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------------
   11. TIMELINE
   --------------------------------------------------------------------------- */
.c8-timeline .c8-photo { height: 100%; }
.c8-timeline .c8-photo::after {          /* ảnh thật sáng hơn tranh gốc → phủ tối để chữ trắng đọc được */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(#000000a6, #00000085 40%, #000000a3);
}
.c8-timeline ol { margin: 0; padding: 0; list-style: none; }
.c8-timeline li {
  position: absolute;
  top: calc(var(--y) * var(--px));
  color: var(--paper);
  text-shadow: 0 1px 8px #00000059;
  opacity: 0;
  transition:
    opacity   1.4s ease       calc(.8s + var(--i) * .3s),
    translate 1.8s var(--out) calc(.8s + var(--i) * .3s);
}
.c8-timeline .is-l {
  right: calc(242 * var(--px));
  text-align: right;
  translate: calc(10 * var(--px)) 0;
}
.c8-timeline .is-r {
  left: calc(241 * var(--px));
  translate: calc(-10 * var(--px)) 0;
}
.c8-timeline.is-in li { opacity: 1; translate: 0; }
.c8-timeline em {
  display: block;
  font: italic 400 calc(11.3 * var(--px))/calc(14 * var(--px)) "Lora", serif;
}
.c8-timeline b {
  display: block;
  font: 700 calc(16.94 * var(--px))/calc(19.5 * var(--px)) "Lora", serif;
  text-transform: uppercase;
}
.c8-timeline b span { display: block; }

.c8-spine {
  position: absolute;
  left: calc(223.5 * var(--px)); top: calc(150 * var(--px));   /* dưới tiêu đề "Lịch trình" */
  width: 1px; height: calc(380 * var(--px));
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 3s var(--out) .3s;
}
.c8-spine::before, .c8-spine::after {   /* hai đầu hình thoi */
  content: "";
  position: absolute; left: 50%;
  width: 5px; height: 5px;
  background: var(--paper);
  transform: translate(-50%, -50%) rotate(45deg);
}
.c8-spine::before { top: 0; }
.c8-spine::after  { top: 100%; }
.c8-timeline.is-in .c8-spine { transform: scaleY(1); }

.c8-tl-title {
  font: extra-condensed 400 calc(63.33 * var(--px))/1.2 "Noto Serif Display", serif;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1.6px 15px #0000004d;
}

/* ---------------------------------------------------------------------------
   12. TRANG PHỤC + HỒ NƯỚC
   --------------------------------------------------------------------------- */
.c8-swatches { margin: 0; padding: 0; list-style: none; }
.c8-swatches img {
  width:  calc(121 * var(--px));
  height: calc(53 * var(--px));
  -webkit-mask-image: linear-gradient(90deg, #000 45%, #0000 55%);
          mask-image: linear-gradient(90deg, #000 45%, #0000 55%);
  -webkit-mask-size: 260% 100%;  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;  mask-position: 100% 0;
  transition:
    -webkit-mask-position 1.4s var(--pen) calc(.2s + var(--i) * .3s),
            mask-position 1.4s var(--pen) calc(.2s + var(--i) * .3s);
}
.c8-swatches.is-in img { -webkit-mask-position: 0 0; mask-position: 0 0; }

.c8-water {
  width:  calc(500 * var(--px));
  height: calc(277 * var(--px));
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(#0000, #000 25% 60%, #0000);
          mask-image: linear-gradient(#0000, #000 25% 60%, #0000);
}
.c8-swans {
  width:  calc(473 * var(--px));
  height: calc(424 * var(--px));
  -webkit-mask-image: linear-gradient(#000 62%, #0000 96%);
          mask-image: linear-gradient(#000 62%, #0000 96%);
}
.c8-swans img {
  width: 100%; height: 100%;
  animation: c8-bob 7s ease-in-out infinite alternate;
}
.c8-pond > * {
  opacity: 0;
  translate: 0 calc(18 * var(--px));
  transition: opacity 2.2s ease, translate 2.6s var(--out);
}
.c8-pond.is-in > * { opacity: 1; translate: 0; }

/* ---------------------------------------------------------------------------
   13. XÁC NHẬN THAM DỰ
   --------------------------------------------------------------------------- */
.c8-rsvp .c8-pill {
  min-width: calc(164 * var(--px));
  padding: 0 calc(12 * var(--px));
  font: 700 calc(11.8 * var(--px))/1 "Lora", serif;
  letter-spacing: -.01em;
  text-transform: none;
}
.c8-rsvp .c8-pill input { position: absolute; opacity: 0; pointer-events: none; }
.c8-pill.is-on {
  background: #46512c;
  box-shadow:
    inset 0 0 0 calc(2.5 * var(--px)) #46512c,
    inset 0 0 0 calc(3.6 * var(--px)) var(--paper);
}
.c8-pair:has(.is-on) .c8-pill:not(.is-on) { opacity: .6; }
.c8-rsvp .c8-block > .c8-up + .c8-up { --mt: 13; }
.c8-pill.is-submit {
  width:  calc(350 * var(--px));
  height: calc(41 * var(--px));
  font: 700 calc(16.39 * var(--px))/1 "Lora", serif;
  text-transform: uppercase;
}
.c8-pill.is-submit:disabled { opacity: .7; cursor: progress; }

.c8-thanks > *     { margin: 0; }
.c8-thanks > * + * { margin-top: calc(6 * var(--px)); }
.c8-thanks-line {
  font: 400 calc(32.04 * var(--px))/1.3 "Mea Culpa", cursive;
  color: var(--olive);
}
.c8-demo {
  font: extra-condensed 400 calc(13 * var(--px))/1.4 "Noto Serif Display", serif;
  color: var(--olive);
  opacity: .75;
}

/* ---------------------------------------------------------------------------
   14. FOOTER + NÚT NHẠC
   --------------------------------------------------------------------------- */
.c8-close { background: var(--forest); }
.c8-close .c8-date { margin: 0; }

.c8-music {
  position: fixed;
  z-index: 50;
  right:  max(16px, 50vw - 204px);      /* bám mép phải khung 440px */
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid #52603547;
  border-radius: 50%;
  background: #fffef8f0;
  color: #526035;
  cursor: pointer;
  box-shadow: 0 6px 18px #14140a33;
}
.c8-music svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  transition: opacity .4s;
}
.c8-music circle { fill: currentColor; }
.c8-music.is-on svg {
  opacity: 1;
  animation: c8-sway 3.2s ease-in-out infinite alternate;
}
.c8-music-hint {
  position: absolute;
  top: 50%; right: calc(100% + 10px);
  translate: 0 -50%;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fffef8f0;
  color: #526035;
  font: extra-condensed 400 14px/1 "Noto Serif Display", serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 14px #14140a29;
  transition: opacity 1s;
}
.c8.is-ready .c8-music:not(.is-on) .c8-music-hint { opacity: 1; transition-delay: 8s; }

/* ---------------------------------------------------------------------------
   15. TÔN TRỌNG prefers-reduced-motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c8 *, .c8 ::before, .c8 ::after {
    transition: none !important;
    animation: none !important;
  }
  .c8 .ink, .c8 .c8-swatches img {
    -webkit-mask-image: none; mask-image: none;
  }
  .c8 .c8-up, .c8 .c8-forest img, .c8 .c8-corners img, .c8 .c8-env,
  .c8 .c8-lacecard, .c8 .c8-grid li, .c8 .c8-laceframe, .c8 .c8-oval,
  .c8 .c8-timeline li, .c8 .c8-pond > * {
    opacity: 1; translate: 0; scale: 1;
  }
  .c8 .c8-spine { transform: none; }
  .c8 .c8-grid circle { stroke-dashoffset: 0; fill-opacity: 1; }
}