/* ═══════════════════════════════════════════════════════════
   THIỆP CƯỚI — NHƯ QUỲNH & HẢI LINH
   Dựng theo file thiết kế PSD (khung 1080px).
   Quy ước: 1rem = 10px trong bản thiết kế.
   → 63px thiết kế  =  6.3rem
   ═══════════════════════════════════════════════════════════ */

/* ── FONTS ────────────────────────────────────────────────── */
@font-face {
  font-family: "British Green";
  src: url("../fonts/british-green.ttf") format("truetype");
  font-display: swap
}

@font-face {
  font-family: "Palisade";
  src: url("../fonts/palisade.ttf") format("truetype");
  font-display: swap
}

@font-face {
  font-family: "Edwardian";
  src: url("../fonts/edwardian.ttf") format("truetype");
  font-display: swap
}

@font-face {
  font-family: "DM Serif";
  src: url("../fonts/dm-serif.ttf") format("truetype");
  font-display: swap
}

/* ── BIẾN ─────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  supported-color-schemes: light;
  --maroon: #69130C;
  /* đỏ rượu đậm — tiêu đề, nút */
  --wine: #692621;
  /* đỏ nâu — tên địa điểm */
  --ink: #190000;
  /* gần đen — chữ thường */
  --cream: #FFF2F0;
  /* nền hồng kem */
  --cream-2: #F4EBEA;
  /* chữ sáng trên nền tối */
  --rose: #E6D3D0;
  /* khối hồng trang trí */
  --line: #E1C5C2;
  /* viền ô input */
  --w-max: 480px;
  /* bề rộng tối đa (thiết kế mobile) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --soft: cubic-bezier(.16, .84, .30, 1);
  /* vào chậm, trôi dài — dùng cho hiệu ứng cuộn */
}

/* ── NỀN TẢNG ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  /* 1rem = 10px thiết kế, co giãn theo bề rộng khung */
  font-size: calc(min(100vw, var(--w-max)) / 108);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #1b0e0d;
  color: var(--ink);
  font-family: "British Green", Georgia, serif;
  line-height: 1.35;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
  height: 100vh
}

img {
  display: block;
  max-width: 100%
}

p,
h1,
h2,
h3 {
  margin: 0
}

/* Các font trong thiệp chỉ có bản Regular — ép 400 để trình duyệt
   không tự "bôi đậm giả" (faux bold) làm nét chữ dày và rộng ra. */
h1,
h2,
h3,
h4,
b,
strong {
  font-weight: 400
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer
}

.page {
  width: 100%;
  max-width: var(--w-max);
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity .8s var(--ease);
}

.page.is-on {
  opacity: 1
}

/* ── VIDEO NỀN LỤA TRÊN MÁY TÍNH (DESKTOP BACKGROUND) ─────── */
.bg-video-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #190000;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  filter: brightness(0.96);
}

/* ── CHỮ DÙNG CHUNG ───────────────────────────────────────── */
/* Nét nối giữa các chữ của Edwardian mảnh cỡ 1px ở cỡ chữ trên bìa — trình
   duyệt làm tròn theo lưới pixel là đứt ngay (rõ nhất ở chỗ "u" nối sang "r").
   geometricPrecision tắt việc bám lưới, text-stroke bồi thêm nửa pixel cho
   nét tóc đủ dày để không rụng. */
.t-script,
.cover__guest-label {
  text-rendering: geometricPrecision;
  -webkit-text-stroke: .014em currentColor;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-script {
  font-family: "Edwardian", cursive;
  color: var(--wine);
  letter-spacing: 0;
}

.t-serif {
  font-family: "DM Serif", Georgia, serif;
  color: var(--wine)
}

/* ═══════════ HIỆU ỨNG XUẤT HIỆN KHI CUỘN ═══════════ */
/* Mỗi khối dùng một kiểu xuất hiện khác nhau — gắn class tương ứng trong HTML:
     .reveal        trồi lên từ dưới
     .reveal-left   trượt vào từ bên trái
     .reveal-right  trượt vào từ bên phải
     .reveal-zoom   phóng nhẹ từ nhỏ ra
     .reveal-blur   từ mờ nhoè thành nét
     .reveal-wipe   chữ "chạy" ra dần từ trái sang phải
     .reveal-fade   chỉ mờ dần (cho phần tử đã có transform riêng, vd chữ xoay dọc) */
[class*="reveal"] {
  /* Chậm rãi để mắt kịp theo — muốn nhanh hơn thì giảm các số giây bên dưới */
  transition: opacity 2.6s var(--soft), transform 2.8s var(--soft), filter 2s var(--soft),
    -webkit-mask-position 2.4s var(--soft), mask-position 2.4s var(--soft), visibility 0s;
}

.reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3.6rem)
}

.reveal-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-16rem)
}

.reveal-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(16rem)
}

.reveal-zoom {
  opacity: 0;
  visibility: hidden;
  transform: scale(.88)
}

/* ── Ảnh nền: hiện dần kèm phóng nhẹ (ken burns) ────────────
   Ảnh được đưa xuống lớp ::before để phóng được mà không xô lệch bố cục. */
.reveal-img {
  position: relative;
  overflow: hidden;
  background-image: none !important
}

.reveal-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.2s var(--soft), transform 3.4s var(--soft);
}

.reveal-img.is-in::before {
  opacity: 1;
  transform: none
}

/* Mỗi mảng ảnh bay vào một hướng khác nhau.
   Luôn phóng 1.14 khi bắt đầu để lúc trượt không bị hở mép. */
.hero::before {
  background-image: url("../images/hero.jpg");
  transform: translateY(5%) scale(1.14);
}

/* Ảnh cô dâu chú rể: tách đôi, mỗi nửa bay từ một bên vào rồi ghép khít
   lại thành 1 tấm — ::before là nửa trái, ::after là nửa phải.
   Cả hai đều là khung full-size giống hệt nhau (cùng inset:0, cùng cover),
   chỉ khác nhau ở clip-path che nửa còn lại. Hai mép clip-path cố ý chồng
   lên nhau 2% ở giữa (49%/49% thay vì 50%/50%) — mép clip-path luôn bị khử
   răng cưa (anti-alias) mờ 1-2px, hai mép sát nhau tuyệt đối vẫn hở 1 đường
   mảnh; chồng nhẹ để bên trên che kín mép mờ của bên dưới. */
.couple::before {
  background-image: url("../images/couple.jpg");
  clip-path: inset(0 49% 0 0);
  -webkit-clip-path: inset(0 49% 0 0);
  transform: translateX(-70%) scale(1.06);
}

.couple::before,
.couple::after {
  transition: opacity 1.6s var(--soft), transform 2.2s cubic-bezier(.16, .84, .30, 1);
}

.couple::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/couple.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: inset(0 0 0 49%);
  -webkit-clip-path: inset(0 0 0 49%);
  opacity: 0;
  transition: opacity 2.2s var(--soft), transform 3.4s var(--soft);
  transform: translateX(70%) scale(1.06);
}

.couple.is-in::after {
  opacity: 1;
  transform: none;
}

.married::before {
  /* trượt vào từ phải */
  background-image: url("../images/married.jpg");
  transform: translateX(6%) scale(1.14);
}

/* Ảnh hộp mừng cưới: xoay quanh TRỤC DỌC (rotateY — như lật thẻ bài
   trái↔phải), 1 vòng đủ 360° rồi dừng đúng vị trí gốc, không phải xoay
   tròn trên mặt phẳng ảnh (rotate/trục Z).
   Lưu ý kỹ thuật: KHÔNG dùng transition từ "rotateY(360deg) ..." về
   "transform:none" như các ảnh khác — trình duyệt nội suy transform bằng
   cách phân rã ma trận khi 2 đầu không cùng dạng hàm, mà rotateY(360deg) sau
   phân rã lại chính là ma trận đơn vị (giống hệt 0deg) nên sẽ KHÔNG xoay gì
   cả, chỉ mờ dần vào. Phải dùng @keyframes animation, giữ đúng cùng 1 dạng
   hàm transform ở cả 2 đầu (rotateY + scale) thì mới nội suy đúng theo từng
   hàm, xoay đủ 1 vòng thật sự. perspective đặt ở .gift (phần tử cha) để
   rotateY có chiều sâu 3D thay vì chỉ bị bóp dẹt theo chiều ngang. */
.gift::before {
  background-image: url("../images/gift-bg.jpg");
  opacity: 0;
  transform: perspective(160rem) rotateY(-15deg) scale(1.08);
  transform-origin: center center;
  transform-style: preserve-3d;
}

.gift.is-in::before {
  animation: giftFlipIn 2.4s cubic-bezier(.25, .46, .45, .94) forwards;
}

@keyframes giftFlipIn {
  0% {
    opacity: 0;
    transform: perspective(160rem) rotateY(-15deg) scale(1.08);
  }

  25% {
    opacity: 1;
    transform: perspective(160rem) rotateY(-8deg) scale(1.04);
  }

  60% {
    opacity: 1;
    transform: perspective(160rem) rotateY(4deg) scale(1.01);
  }

  80% {
    transform: perspective(160rem) rotateY(-1.5deg) scale(1.005);
  }

  100% {
    opacity: 1;
    transform: perspective(160rem) rotateY(0deg) scale(1);
  }
}

.ending::before {
  /* phóng dần ra */
  background-image: url("../images/ending.jpg");
  transform: scale(1.18);
}

/* Ảnh trong collage: dâng lên + nghiêng nhẹ rồi thẳng lại,
   như đặt tấm ảnh polaroid xuống bàn.
   KHÔNG trượt ngang: hai tấm này nằm sát mép trang, trượt ngang sẽ bị
   `.page{overflow:hidden}` cắt phẳng một đường, trông như ảnh bị lỗi. */
.collage__a,
.collage__b {
  transition-duration: 2.6s
}

.collage__a.reveal-right {
  transform: translateY(6rem) scale(.9) rotate(2.5deg);
  opacity: 0;
  will-change: transform, opacity;
}

.collage__b.reveal-left {
  transform: translateY(6rem) scale(.9) rotate(-2.5deg);
  opacity: 0;
  will-change: transform, opacity;
}

.collage__b {
  transition-delay: .35s
}

/* tấm nhỏ đặt xuống sau tấm lớn */

/* Ảnh bản đồ: bay lên kèm phóng */
.save__map.reveal-zoom {
  transform: translateY(4rem) scale(.9)
}

.reveal-blur {
  opacity: 0;
  visibility: hidden;
  filter: blur(1.4rem)
}

.reveal-words {
  opacity: 0;
  visibility: hidden;
}

.reveal-words.is-in {
  opacity: 1;
  visibility: visible;
}

.reveal-words .word {
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  transform: translateY(0.6rem);
  transition: opacity 0.6s var(--soft), transform 0.6s var(--soft), visibility 0s;
}

.reveal-words.is-in .word {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Vệt mở chữ dần dần từ trái sang phải (Letter-by-letter reveal từ trái sang phải) */
.reveal-wipe {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: opacity 1.2s var(--soft),
    clip-path 2.0s var(--soft),
    -webkit-clip-path 2.0s var(--soft);
}

.invite__title.reveal-wipe {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: opacity 0.6s var(--soft),
    clip-path 1.1s cubic-bezier(.16, .84, .30, 1),
    -webkit-clip-path 1.1s cubic-bezier(.16, .84, .30, 1);
}

.reveal-fade {
  opacity: 0;
  visibility: hidden;
}

.reveal.is-in,
.reveal-left.is-in,
.reveal-right.is-in,
.reveal-zoom.is-in {
  opacity: 1;
  visibility: visible;
  transform: none
}

.reveal-blur.is-in {
  opacity: 1;
  visibility: visible;
  filter: none
}

.reveal-wipe.is-in {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.reveal-fade.is-in {
  opacity: 1;
  visibility: visible;
}

/* Lệch giờ giữa các dòng cùng nhóm cho mượt */
.save__the {
  transition-delay: .3s
}

.save__day {
  transition-delay: .3s
}

.save__lunar {
  transition-delay: .6s
}

.save__venue {
  transition-delay: .28s
}

.save__addr {
  transition-delay: .56s
}

.hero__title .t-serif {
  transition-delay: .45s;
}

.hero__title .t-serif--wide {
  transition-delay: .85s;
}

.hero__date .reveal-left {
  transition-delay: 1.2s;
}

.hero__date .reveal-right {
  transition-delay: 1.5s;
}

.ribbon .reveal-zoom {
  transition-delay: .3s
}

.ribbon .reveal-right {
  transition-delay: .5s
}

.couple__name--l {
  transition-delay: 2.3s;
}

.couple__name--r {
  transition-delay: 2.6s;
}

.gift__desc {
  transition-delay: .3s
}

.gift__hint {
  transition-delay: .6s
}

/* Ô đếm ngược & các ô nhập liệu: hiện lần lượt từng cái */
.cd>*,
.form>* {
  opacity: 0
}

.cd.is-in>*,
.form.is-in>* {
  animation: popIn 1.6s var(--soft) both
}

/* ô nhập liệu bay vào so le trái ↔ phải */
.form.is-in>*:nth-child(odd) {
  animation-name: inLeftSoft
}

.form.is-in>*:nth-child(even) {
  animation-name: inRightSoft
}

@keyframes inLeftSoft {
  from {
    opacity: 0;
    transform: translateX(-10rem)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes inRightSoft {
  from {
    opacity: 0;
    transform: translateX(10rem)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.cd.is-in>*:nth-child(1),
.form.is-in>*:nth-child(1) {
  animation-delay: .1s
}

.cd.is-in>*:nth-child(2),
.form.is-in>*:nth-child(2) {
  animation-delay: .28s
}

.cd.is-in>*:nth-child(3),
.form.is-in>*:nth-child(3) {
  animation-delay: .46s
}

.cd.is-in>*:nth-child(4),
.form.is-in>*:nth-child(4) {
  animation-delay: .64s
}

.cd.is-in>*:nth-child(5),
.form.is-in>*:nth-child(5) {
  animation-delay: .82s
}

.form.is-in>*:nth-child(6) {
  animation-delay: 1s
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(2.4rem) scale(.92)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {
  [class*="reveal"] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    -webkit-mask-image: none;
    mask-image: none
  }

  .cd>*,
  .form>* {
    opacity: 1;
    animation: none
  }

  .reveal-img::before {
    opacity: 1;
    transform: none;
    transition: none
  }
}

/* ═══════════════════════════════════════════════════════════
   BÌA — MÀN HÌNH MỞ THIỆP
   ═══════════════════════════════════════════════════════════ */
.cover {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--cream);
  transition: opacity .8s var(--ease), visibility .8s;
}

.cover.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

.cover__photo {
  position: absolute;
  inset: 0;
  background: url("../images/hero.jpg") center 22%/cover no-repeat;
  animation: coverZoom 14s var(--ease) both;
}

@keyframes coverZoom {
  from {
    transform: scale(1.12)
  }

  to {
    transform: scale(1)
  }
}

.cover__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 242, 240, .15) 0%, rgba(255, 242, 240, .05) 40%, rgba(255, 242, 240, .86) 100%);
}

/* Ánh sao lung linh rải rác trên bìa — nhấp nháy tại chỗ, không trôi/rơi,
   để không giành sự chú ý với ảnh và chữ. */
.cover__sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.cover__sparkle {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 1.4rem .3rem rgba(255, 255, 255, .95), 0 0 .4rem rgba(255, 255, 255, 1);
  animation: sparkleTwinkle ease-in-out infinite;
  opacity: 0;
}

@keyframes sparkleTwinkle {

  0%,
  100% {
    opacity: 0;
    transform: scale(.4);
  }

  50% {
    opacity: var(--op, .85);
    transform: scale(1);
  }
}

.cover__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--w-max);
  padding: 0 3rem 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Chữ trên bìa lần lượt chạy vào từ trái / phải ── */
@keyframes inLeft {
  from {
    opacity: 0;
    transform: translateX(-14rem)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes inRight {
  from {
    opacity: 0;
    transform: translateX(14rem)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes inUp {
  from {
    opacity: 0;
    transform: translateY(4rem)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.cover__eyebrow,
.cover__title>span,
.cover__names,
.cover__date,
.cover__guest,
.cover__btn {
  animation-fill-mode: both;
  animation-timing-function: var(--ease)
}

.cover__photo {
  opacity: 1;
  transition: opacity .9s var(--soft);
}

.cover__eyebrow {
  font-size: 3.2rem;
  letter-spacing: .42em;
  color: var(--wine);
  opacity: .85;
  margin-bottom: 1.4rem;
  animation-name: inUp;
  animation-duration: 1.6s;
  animation-delay: .3s;
}

.cover__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .82;
  margin-bottom: 1.8rem
}

.cover__title .t-script {
  font-size: 14rem;
  margin-bottom: -2.4rem;
  animation-name: inLeft;
  animation-duration: 1.9s;
  animation-delay: .7s
}

.cover__title .t-serif {
  font-size: 15rem;
  letter-spacing: -.015em;
  animation-name: inRight;
  animation-duration: 1.9s;
  animation-delay: 1.1s
}

.cover__title .t-serif--wide {
  font-size: 16rem;
  animation-name: inLeft;
  animation-duration: 1.9s;
  animation-delay: 1.5s
}

.cover__names {
  font-size: 4.4rem;
  color: var(--maroon);
  letter-spacing: .04em;
  animation-name: inRight;
  animation-duration: 1.7s;
  animation-delay: 1.95s
}

.cover__date {
  font-size: 3.4rem;
  color: var(--ink);
  letter-spacing: .28em;
  margin-top: .6rem;
  animation-name: inLeft;
  animation-duration: 1.7s;
  animation-delay: 2.25s
}

/* ═══════════════════════════════════════════════════════════
   KHỐI TÊN NGƯỜI ĐƯỢC MỜI
   Không dùng khung hộp — thay bằng vầng sáng kem mềm + hai nét
   kẻ mảnh ôm lấy dòng chữ, và một hạt kim cương nhỏ khép lại.
   ═══════════════════════════════════════════════════════════ */
.cover__guest {
  position: relative;
  margin: 3rem auto 0;
  padding: 2.4rem 6rem 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  max-width: 94%;
  /* vầng sáng kem toả dần ra rìa — chữ luôn đọc rõ trên ảnh */
  background: radial-gradient(60% 70% at 50% 50%,
      rgba(255, 242, 240, .94) 0%, rgba(255, 242, 240, .78) 55%, rgba(255, 242, 240, 0) 100%);
  animation-name: inUp;
  animation-duration: 1.6s;
  animation-delay: 2.6s;
}

/* nét kẻ mảnh trên & dưới, mờ dần về hai đầu */
.cover__guest::before,
.cover__guest::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105, 19, 12, .42) 22%,
      rgba(105, 19, 12, .42) 78%, transparent);
}

.cover__guest::before {
  top: 0
}

.cover__guest::after {
  bottom: 0
}

/* "Trân trọng kính mời" — chữ viết tay, hai bên có gạch ngắn */
.cover__guest-label {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-family: "Edwardian", cursive;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--wine);
}

.cover__guest-label::before,
.cover__guest-label::after {
  content: "";
  width: 5rem;
  height: 1px;
  background: rgba(105, 38, 33, .5);
}

/* Tên khách mời */
.cover__guest-name:empty,
.invite__guest-name:empty {
  display: none !important;
}

/* ── Tên khách lấp lánh: vệt sáng lướt qua + quầng sáng thở nhẹ ──
   Dùng lại đúng kỹ thuật của .save__day (dateShine) cho đồng bộ cả thiệp.
   Đặt trước hai khối tên bên dưới để font-size/màu riêng của từng chỗ vẫn thắng. */
.cover__guest-name,
.invite__guest-name {
  background: linear-gradient(100deg,
      var(--maroon) 40%, #e08a6a 46%, #fff1e6 50%, #e08a6a 54%, var(--maroon) 60%);
  background-size: 260% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dateShine 3.2s ease-in-out infinite alternate,
    nameGlow 2.6s ease-in-out infinite;
}

@keyframes nameGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 178, 145, 0));
  }

  50% {
    filter: drop-shadow(0 0 1.1rem rgba(255, 168, 132, .5));
  }
}

@media (prefers-reduced-motion:reduce) {

  .cover__guest-name,
  .invite__guest-name {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* British Green thay vì DM Serif: dm-serif.ttf thiếu nhiều chữ Việt (ễ, ọ, ờ, ư…)
   nên tên khách bị vỡ font, rơi sang Georgia giữa chừng. */
.cover__guest-name {
  font-family: "British Green", Georgia, serif;
  font-weight: 400;
  font-size: 5.2rem;
  line-height: 1.12;
  color: var(--maroon);
  letter-spacing: .03em;
  text-align: center;
  word-break: break-word;
}

/* hạt kim cương nhỏ khép lại bên dưới */
.cover__guest-name::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 1.6rem auto 0;
  transform: rotate(45deg);
  background: rgba(105, 19, 12, .55);
}

/* Bản trong trang — cùng ngôn ngữ thiết kế, gọn hơn */
.invite__guest-name {
  position: relative;
  font-family: "British Green", Georgia, serif;
  font-weight: 400;
  font-size: 4.6rem;
  line-height: 1.15;
  color: var(--maroon);
  letter-spacing: .03em;
  text-align: center;
  margin: 1rem auto 8rem;
  /* chừa chỗ vì đoạn Palisade bên dưới bị kéo lên 6rem */
  padding-bottom: 3rem;
  width: fit-content;
  max-width: 90%;
}

/* Có tên khách thì kéo tiêu đề sát xuống; không có thì giữ nguyên nhịp cũ */
.invite__title:has(+ .invite__guest-name:not(:empty)) {
  margin-bottom: 1.6rem;
}

/* Hoạ tiết dưới tên: hai nét mảnh ôm lấy hạt kim cương ở giữa */
.invite__guest-name::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.05rem;
  width: 26rem;
  margin-left: -13rem;
  height: 1px;
  background: linear-gradient(90deg, transparent,
      rgba(105, 19, 12, .45) 18%, rgba(105, 19, 12, .45) 40%, transparent 44%,
      transparent 56%, rgba(105, 19, 12, .45) 60%, rgba(105, 19, 12, .45) 82%, transparent);
}

.invite__guest-name::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .5rem;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -.55rem;
  transform: rotate(45deg);
  background: rgba(105, 19, 12, .5);
}

.cover__btn {
  display: inline-block;
  margin: 2.2rem auto 0;
  padding: 1.4rem 5rem;
  font-size: 3.2rem;
  letter-spacing: .22em;
  color: var(--cream);
  background: var(--maroon);
  border-radius: 100px;
  box-shadow: 0 1.2rem 3rem rgba(105, 19, 12, .32);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  animation: inUp 1.4s 3.1s var(--soft) both,
    pulse 2.6s ease-in-out 4.4s infinite;
}

.cover__btn:hover {
  transform: translateY(-.4rem);
  box-shadow: 0 1.8rem 4rem rgba(105, 19, 12, .42)
}

.cover__btn:active {
  transform: scale(.97)
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 1.2rem 3rem rgba(105, 19, 12, .32)
  }

  50% {
    box-shadow: 0 1.2rem 3rem rgba(105, 19, 12, .32), 0 0 0 1.6rem rgba(105, 19, 12, .10)
  }
}

/* ═══════════════════════════════════════════════════════════
   THANH TIẾN TRÌNH CUỘN TRANG
   ═══════════════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: .3rem;
  width: 0%;
  background: linear-gradient(90deg, var(--wine), var(--maroon));
  z-index: 970;
  transition: width .12s linear;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   NÚT NHẠC
   ═══════════════════════════════════════════════════════════ */
.music {
  position: fixed;
  z-index: 950;
  left: 50%;
  margin-left: calc(min(50vw, 240px) - 13.2rem);
  bottom: 3.2rem;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: rgba(255, 242, 240, .86);
  backdrop-filter: blur(6px);
  box-shadow: 0 .8rem 2.4rem rgba(25, 0, 0, .22);
}

.music.is-ready {
  display: grid
}

.music__ico {
  width: 4.6rem;
  height: 4.6rem;
  fill: none;
  stroke: var(--maroon);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.music.is-playing .music__ico {
  animation: spin 6s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.music__slash {
  position: absolute;
  width: 5.4rem;
  height: .4rem;
  border-radius: 2px;
  background: var(--maroon);
  transform: rotate(-45deg);
  transition: transform .3s var(--ease), opacity .3s
}

.music.is-playing .music__slash {
  transform: rotate(-45deg) scaleX(0);
  opacity: 0
}

/* ═══════════════════════════════════════════════════════════
   NÚT TỰ ĐỘNG CUỘN — nằm ngay trên nút nhạc
   ═══════════════════════════════════════════════════════════ */
.ascroll {
  position: fixed;
  z-index: 950;
  left: 50%;
  margin-left: calc(min(50vw, 240px) - 13.2rem);
  bottom: 14.6rem;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: rgba(255, 242, 240, .86);
  backdrop-filter: blur(6px);
  box-shadow: 0 .8rem 2.4rem rgba(25, 0, 0, .22);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.ascroll.is-ready {
  display: grid
}

.ascroll:hover {
  transform: translateY(-.4rem)
}

.ascroll__ico {
  grid-area: 1/1;
  width: 4.6rem;
  height: 4.6rem;
  fill: none;
  stroke: var(--maroon);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ascroll__ico--pause {
  display: none
}

.ascroll.is-running {
  background: var(--maroon)
}

.ascroll.is-running .ascroll__ico {
  stroke: var(--cream)
}

.ascroll.is-running .ascroll__ico--play {
  display: none
}

.ascroll.is-running .ascroll__ico--pause {
  display: block
}

.ascroll:not(.is-running) .ascroll__ico--play {
  animation: nudge 2.2s ease-in-out infinite
}

@keyframes nudge {

  0%,
  70%,
  100% {
    transform: translateY(0)
  }

  85% {
    transform: translateY(.5rem)
  }
}

/* ═══════════════════════════════════════════════════════════
   1. HERO — "Our Love Begins"
   Khung thiết kế: 1080 × 1919
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  aspect-ratio: 1080/1919;
  background: url("../images/hero.jpg") center/cover no-repeat;
}

.hero__title {
  position: absolute;
  left: 8%;
  right: 1.5%;
  top: 66.9%;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  line-height: .9;
}

/* Đốm sáng bokeh trôi nhẹ lên — điểm nhấn mộng mơ cho tấm ảnh đầu tiên khách nhìn thấy */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-particle {
  position: absolute;
  bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .95), rgba(255, 242, 240, .35) 55%, rgba(255, 242, 240, 0) 75%);
  filter: blur(1px);
  animation: heroParticleFloat linear infinite;
  opacity: 0;
}

@keyframes heroParticleFloat {
  0% {
    transform: translate(0, 0) scale(.85);
    opacity: 0;
  }

  12% {
    opacity: var(--op, .55);
  }

  88% {
    opacity: var(--op, .55);
  }

  100% {
    transform: translate(var(--drift, 3rem), -125vh) scale(1.15);
    opacity: 0;
  }
}

/* Cỡ chữ hiệu chuẩn bằng cách đo bề rộng nét thật trong trình duyệt
   rồi khớp với bbox trong file PSD (xem README). */
.hero__title .t-script {
  font-size: 22.34rem;
  letter-spacing: 0;
  margin-right: 5.4rem
}

.hero__title .t-serif {
  font-size: 29.5rem;
  letter-spacing: -.015em
}

.hero__title .t-serif--wide {
  font-size: 30.69rem;
  letter-spacing: -.015em;
  width: 100%;
  margin-top: -3.2rem;
  text-align: right
}

.hero__date {
  position: absolute;
  left: 2.9%;
  right: 2.8%;
  bottom: 1.3%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 6.3rem;
  color: var(--wine);
  letter-spacing: -.015em;
}

/* ── HIỆU ỨNG TÁCH CHỮ BIẾN MẤT SANG 2 BÊN KHI CUỘN QUA 50% HERO ── */
.hero__title span,
.hero__date span {
  transition: opacity 0.8s var(--soft), transform 0.9s var(--soft), filter 0.8s var(--soft);
  will-change: opacity, transform, filter;
}

/* Chữ bên trái (Our, Begins, 19 Sep) trượt biến mất sang TRÁI */
.hero.is-scrolled-out .reveal-left {
  opacity: 0 !important;
  transform: translateX(-16rem) scale(0.92) !important;
  filter: blur(1rem) !important;
  pointer-events: none;
}

/* Chữ bên phải (Love, 2026) trượt biến mất sang PHẢI */
.hero.is-scrolled-out .reveal-right {
  opacity: 0 !important;
  transform: translateX(16rem) scale(0.92) !important;
  filter: blur(1rem) !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   BĂNG NGANG  (wedding · invitation  /  today · tomorrow · forever)
   Khung thiết kế: 1080 × 114
   ═══════════════════════════════════════════════════════════ */
.ribbon {
  position: relative;
  z-index: 2;
  height: 11.4rem;
  background: var(--ink);
  color: var(--cream);
  font-size: 6.3rem;
  letter-spacing: -.015em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}

.ribbon__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  /* JS đo bề rộng chữ thật rồi gán lại giá trị này, để lượt chữ đầu tiên
     nằm CHÍNH GIỮA dải băng lúc chưa chạy, thay vì nằm sát mép trái. */
  --marquee-start: 0px;
  transform: translateX(var(--marquee-start));
}

.ribbon__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.52rem;
  /* Không còn dấu chấm cuối trước lượt lặp kế tiếp (chỉ còn khoảng trống) —
     bù thêm đúng phần gap + bề rộng dấu chấm đã bỏ (5.52rem + 1.6rem) vào
     padding-right để tổng khoảng cách giữ nguyên như cũ, không bị hụt. */
  padding-right: 16.32rem;
}

/* Initially hide clones */
.ribbon__content.clone {
  opacity: 0;
  transition: opacity 0.3s;
}

/* After reveal, show clones and start animation */
.reveal-marquee.is-in .ribbon__content.clone {
  opacity: 1;
  transition-delay: 2.2s;
  /* Wait for initial reveal to finish */
}

.reveal-marquee.is-in .ribbon__track {
  animation: marquee-scroll 14s linear infinite;
  animation-delay: 2.2s;
  /* Start scrolling after initial reveal */
}

@keyframes marquee-scroll {
  from {
    transform: translateX(var(--marquee-start));
  }

  to {
    /* Trượt thêm đúng 1 bề rộng .ribbon__content, tính từ điểm xuất phát
       đã căn giữa (--marquee-start), không phải từ mép trái (0) */
    transform: translateX(calc(var(--marquee-start) - 100% / 4));
    /* 4 contents total */
  }
}

.ribbon__dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--cream);
  flex: none
}

/* ═══════════════════════════════════════════════════════════
   2. CÔ DÂU & CHÚ RỂ  — khung 1080 × 791
   ═══════════════════════════════════════════════════════════ */
.couple {
  position: relative;
  aspect-ratio: 1080/791;
  background: url("../images/couple.jpg") center/cover no-repeat;
}

.couple__name {
  position: absolute;
  z-index: 2;
  color: var(--maroon);
  letter-spacing: -.015em;
  text-transform: uppercase
}

.couple__name--l {
  left: 2.8%;
  top: 15.4%
}

.couple__name--r {
  right: 3.2%;
  top: 19.7%;
  text-align: right
}

.couple__who {
  font-size: 4.5rem;
  line-height: 1.05
}

.couple__role {
  font-size: 2.4rem;
  margin-top: .7rem
}

/* ═══════════════════════════════════════════════════════════
   3. TRÂN TRỌNG KÍNH MỜI
   ═══════════════════════════════════════════════════════════ */
.invite {
  position: relative;
  z-index: 1;
  margin-top: -14.1%;
  /* kéo lên khớp toạ độ thiết kế */
  padding: 0 8.3% 0;
  text-align: center;
}

.invite__title {
  font-size: 4.8rem;
  color: var(--maroon);
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: 4.8rem;
}

.invite__text {
  font-family: "Palisade", cursive;
  margin-top: 0;
  margin-bottom: 6rem;
  font-size: 5.1rem;
  line-height: 1.28;
  letter-spacing: -.01em;
  text-align: justify;
  text-align-last: center;
  text-indent: 4rem;
}

/* ── Từng chữ sáng lần lượt (word shimmer) ── */
.word-shine {
  display: inline;
  color: var(--ink);
  animation: wordShine linear infinite;
}

@keyframes wordShine {

  0%,
  100% {
    color: var(--ink);
    text-shadow: none;
  }

  4% {
    color: #c4533a;
    text-shadow: 0 0 .8rem rgba(200, 83, 58, .45);
  }

  7% {
    color: #fff0ec;
    text-shadow: 0 0 1.6rem rgba(255, 200, 180, .65);
  }

  10% {
    color: #c4533a;
    text-shadow: 0 0 .8rem rgba(200, 83, 58, .35);
  }

  13% {
    color: var(--ink);
    text-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   4. COLLAGE ẢNH — khung 1080 × 1223  (y 3145 → 4368)
   ═══════════════════════════════════════════════════════════ */
.collage {
  position: relative;
  aspect-ratio: 1080/1223;
  margin-top: 1.4%;
}

.collage__cap {
  /* "Về Chung Một Nhà" */
  position: absolute;
  z-index: 4;
  right: 3.1%;
  top: 0.5%;
  font-size: 4.8rem;
  color: var(--ink);
  letter-spacing: -.015em;
  white-space: nowrap;
}

.collage__rose {
  /* khối hồng nền */
  position: absolute;
  z-index: 0;
  left: 27.0%;
  top: 0;
  width: 49.2%;
  height: 75.1%;
  background: var(--rose);
}

.collage__a {
  /* ảnh lớn */
  position: absolute;
  z-index: 1;
  left: 33.7%;
  top: 6.0%;
  width: 63.2%;
  box-shadow: 0 1.4rem 4rem rgba(25, 0, 0, .10);
}

.collage__b {
  /* ảnh nhỏ đè lên */
  position: absolute;
  z-index: 2;
  left: 2.9%;
  top: 65.8%;
  width: 58.1%;
  box-shadow: 0 0 2.4rem rgba(0, 0, 0, 0.15);
}

.collage__vert {
  /* chữ dọc bên trái, đọc từ dưới lên */
  position: absolute;
  z-index: 3;
  left: 18.8%;
  top: 63.7%;
  font-family: "Palisade", cursive;
  font-size: 7.3rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.025em;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: rotate(-90deg);
}

.collage__num {
  /* "19.09" dọc bên phải */
  position: absolute;
  z-index: 3;
  left: 93.1%;
  top: 87.7%;
  font-size: 4.8rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.015em;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: rotate(-90deg);
}

/* ═══════════════════════════════════════════════════════════
   5. SAVE THE DATE
   ═══════════════════════════════════════════════════════════ */
.save {
  padding: 8.2% 0 0;
  text-align: center
}

.save__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Palisade", cursive;
  line-height: 1;
  /* Palisade có bounding box lớn — giữ 1 để đủ chỗ */
}

.save__save {
  font-size: 22rem;
  color: var(--maroon);
  align-self: flex-start;
  margin-left: 14%;
  /* padding-left tạo vùng render bên trong element cho nét hoa chữ S —
     Safari iOS clip rất chặt nên padding mới ngăn bị lẹm, margin thôi không đủ */
  padding-left: 3rem;
}

/* Trong thiết kế "The" và "Date" khác cỡ và khác màu, khoảng cách giữa
   hai chữ là 42px (khung 1080) — dùng inline-flex + gap cho chuẩn. */
.save__the {
  display: inline-flex;
  align-items: baseline;
  gap: 3.6rem;
  align-self: flex-end;
  margin-right: 15.5%;
  /* tăng thêm để chữ "Date" không bị lẹm mép phải trên iPhone */
  margin-top: -4.8rem;
  /* Chỉ kéo lên vừa đủ để đuôi Save & đầu The chồng nhẹ */
}

.save__the i {
  font-style: normal;
  font-size: 15rem;
  /* "The" nhỏ hơn "Date" như trong thiết kế */
  color: var(--ink)
}

.save__the em {
  font-style: normal;
  font-size: 21rem;
  /* thu nhỏ từ 23rem — đủ to nhưng không tràn mép iPhone */
  /* "Date" to và nổi bật */
  color: var(--maroon)
}

.save__time {
  font-size: 5.8rem;
  color: var(--ink);
  letter-spacing: -.015em;
  margin-top: 7.1rem
}

.save__day {
  font-size: 13.1rem;
  letter-spacing: -.015em;
  line-height: 1.05;
  margin-top: .6rem;
  /* Vệt sáng lướt qua ngày cưới, lặp định kỳ — điểm nhấn cho con số quan trọng nhất trang */
  background: linear-gradient(100deg, var(--maroon) 42%, #ffd9c9 50%, var(--maroon) 58%);
  background-size: 260% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: dateShine 3s ease-in-out infinite alternate;
}

/* alternate: chạy tới rồi chạy NGƯỢC LẠI trong cùng animation, không có
   điểm "nhảy cóc" về vị trí ban đầu như kiểu infinite thường — trước đây
   cuối chu kỳ bị giật ngược tức thời, đây là chỗ lỗi bạn thấy. */
@keyframes dateShine {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -60% 0;
  }
}

.save__lunar {
  font-size: 3.6rem;
  color: var(--ink);
  letter-spacing: -.015em;
  margin-top: 1rem
}

/* Pháo hoa bắn ra hai bên toàn màn hình đúng lúc "Save The Date" hiện ra —
   chạy 1 lần duy nhất, phủ cả viewport (không giới hạn trong section). */
.firework-burst {
  position: fixed;
  inset: 0;
  z-index: 960;
  overflow: hidden;
  pointer-events: none;
}

.firework-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 .8rem currentColor;
  animation: fireworkFly ease-out forwards;
}

@keyframes fireworkFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 0)) scale(.25);
  }
}

/* ── Đếm ngược ── */
.cd {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 7.4rem;
}

.cd__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 19.4rem
}

.cd__boxes {
  display: flex;
  gap: 1rem
}

.cd__box {
  width: 9.3rem;
  height: 13rem;
  border-radius: .6rem;
  background: var(--maroon);
  color: var(--cream);
  font-size: 8.9rem;
  line-height: 13rem;
  text-align: center;
  letter-spacing: -.015em;
  display: block;
}

/* Ô số nảy nhẹ mỗi khi đổi số (mỗi phút/giờ/ngày đổi) */
.cd__boxes {
  perspective: 60rem;
}

.cd__box--flip {
  animation: cdFlip .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes cdFlip {
  0% {
    transform: rotateX(75deg);
    opacity: .4;
  }

  60% {
    transform: rotateX(-10deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(0);
  }
}

.cd__label {
  font-size: 2.6rem;
  color: var(--ink);
  letter-spacing: -.015em;
  margin-top: 1.1rem
}

.cd__sep {
  font-size: 8.9rem;
  line-height: 13rem;
  color: var(--wine);
  width: 8.2rem;
  text-align: center;
  flex: none;
}

/* ── Địa điểm ── */
.save__loc {
  font-size: 5.8rem;
  color: var(--ink);
  letter-spacing: -.015em;
  margin-top: 5.5rem;
  text-transform: uppercase
}

.save__venue {
  font-size: 7.3rem;
  color: var(--wine);
  letter-spacing: -.015em;
  line-height: 1.1;
  margin-top: 1.4rem
}

.save__addr {
  font-size: 3.6rem;
  color: var(--ink);
  margin-top: 1.2rem
}

/* Nút thêm sự kiện vào Google Calendar — viền rỗng, không giành sự chú ý với nút RSVP */
.save__cal {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3.2rem;
  padding: 1.4rem 3.4rem;
  border: .15rem solid var(--maroon);
  border-radius: 100px;
  color: var(--maroon);
  font-size: 2.8rem;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.save__cal:hover {
  background: var(--maroon);
  color: var(--cream);
  transform: translateY(-.3rem);
}

.save__cal:active {
  transform: scale(.96);
}

.save__cal-ico {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.save__map {
  position: relative;
  display: block;
  width: 65.6%;
  margin: 5.6rem auto 0;
  border-radius: .8rem;
  overflow: hidden;
  aspect-ratio: 709/398;
  box-shadow: 0 1rem 3rem rgba(25, 0, 0, .14);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* Nhấp nháy mời gọi khách chạm/xem bản đồ ngay lúc mới hiện ra, tự tắt sau vài nhịp */
.save__map.reveal-zoom.is-in {
  animation: mapInvite 2s ease-out 1s 3;
}

@keyframes mapInvite {

  0%,
  100% {
    box-shadow: 0 1rem 3rem rgba(25, 0, 0, .14);
  }

  50% {
    box-shadow: 0 1rem 3rem rgba(25, 0, 0, .14), 0 0 0 .6rem rgba(105, 19, 12, .12);
  }
}

.save__map:hover {
  transform: translateY(-.6rem);
  box-shadow: 0 1.6rem 4rem rgba(25, 0, 0, .2)
}

/* ═══════════════════════════════════════════════════════════
   6. WE GOT MARRIED — khung 1080 × 696
   ═══════════════════════════════════════════════════════════ */
.married {
  position: relative;
  aspect-ratio: 1080/696;
  margin-top: 9.6%;
  background: url("../images/married.jpg") center/cover no-repeat;
}

.married__txt {
  position: absolute;
  left: 21.9%;
  top: -1.5rem;
  /* nâng hẳn lên trên để chân chữ g trong "got" lọt hoàn toàn vào trong khung ảnh trên iPhone 17 Pro Max */
  font-family: "Palisade", cursive;
  font-size: 13.2rem;
  /* tinh chỉnh từ 14rem -> 13.2rem vừa vặn tuyệt đối */
  font-weight: normal;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -.015em;
  white-space: nowrap;
  text-shadow: 0 .2rem 1rem rgba(0, 0, 0, 0.1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: rotate(-7deg);
  padding-bottom: 6rem;
  margin-bottom: -6rem;
  overflow: visible !important;
  z-index: 2;

  /* Hiệu ứng mở chữ từ từ từ trái (W) sang phải (d), chạy 3.6s siêu mượt */
  transition: opacity 1.8s var(--soft),
    clip-path 3.6s cubic-bezier(.16, .84, .30, 1),
    -webkit-clip-path 3.6s cubic-bezier(.16, .84, .30, 1);
  animation: pulse-text 4s ease-in-out infinite;
}

/* Ghi đè clip-path rộng rãi ở phía dưới (-12rem) để WebKit Safari iOS không cắt đuôi chữ g */
.married__txt.reveal-wipe {
  clip-path: inset(-6rem 100% -12rem -4rem) !important;
  -webkit-clip-path: inset(-6rem 100% -12rem -4rem) !important;
}

.married__txt.reveal-wipe.is-in {
  clip-path: inset(-6rem -10rem -12rem -4rem) !important;
  -webkit-clip-path: inset(-6rem -10rem -12rem -4rem) !important;
}

@keyframes pulse-text {

  0%,
  100% {
    transform: rotate(-7deg) scale(1);
    text-shadow: 0 .2rem 1rem rgba(0, 0, 0, 0.1);
  }

  50% {
    transform: rotate(-7deg) scale(1.05);
    text-shadow: 0 .4rem 2rem rgba(255, 255, 255, 0.5);
  }
}

.rain-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.rain-drop {
  position: absolute;
  top: -10rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 .8rem rgba(255, 255, 255, 0.8);
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(80rem);
  }
}

/* ═══════════════════════════════════════════════════════════
   7. FORM XÁC NHẬN
   ═══════════════════════════════════════════════════════════ */
.rsvp {
  padding: 6.8% 0 8.5%;
  text-align: center
}

.rsvp__note {
  width: 92%;
  margin: 0 auto;
  font-size: 3.5rem;
  line-height: 1.24;
  color: var(--maroon);
}

.rsvp__note b {
  font-weight: 400;
  color: var(--maroon)
}

.form {
  width: 84.4%;
  margin: 6.4% auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.9rem
}

.field {
  position: relative
}

.field input,
.field select {
  width: 100%;
  height: 7.5rem;
  padding: 0 4.4rem;
  border: .2rem solid var(--line);
  border-radius: 100px;
  background: var(--cream);
  color: var(--maroon);
  font-family: inherit;
  font-size: 3.2rem;
  letter-spacing: .01em;
  appearance: none;
  outline: none;
  text-overflow: ellipsis;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.field input::placeholder {
  color: var(--maroon);
  opacity: 1
}

.field select {
  padding-right: 8.6rem;
  font-size: 2.9rem
}

.field select:invalid {
  color: var(--maroon)
}

.field input:focus,
.field select:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 .4rem rgba(105, 19, 12, .08);
  transform: translateY(-.2rem);
}

.field--select::after {
  /* mũi tên tam giác */
  content: "";
  position: absolute;
  right: 5.2rem;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -.5rem;
  border-left: 1.4rem solid transparent;
  border-right: 1.4rem solid transparent;
  border-top: 1.2rem solid var(--maroon);
  pointer-events: none;
}

.field input[type=number] {
  -moz-appearance: textfield
}

.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.field.has-error input,
.field.has-error select {
  border-color: #b3261e
}

/* Ô nhập lắc nhẹ khi bỏ trống trường bắt buộc — báo lỗi rõ hơn là chỉ đổi viền đỏ */
.field.is-shaking {
  animation: fieldShake .45s var(--ease);
}

@keyframes fieldShake {

  10%,
  90% {
    transform: translateX(-.3rem);
  }

  20%,
  80% {
    transform: translateX(.6rem);
  }

  30%,
  50%,
  70% {
    transform: translateX(-1rem);
  }

  40%,
  60% {
    transform: translateX(1rem);
  }
}

.form__submit {
  height: 7.5rem;
  border-radius: 100px;
  background: var(--maroon);
  color: var(--cream);
  font-size: 3.4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}

.form__submit:hover {
  filter: brightness(1.12)
}

.form__submit:active {
  transform: scale(.985)
}

/* Nhịp bật nhẹ + gợn sóng khi gửi thành công, trước khi popup cảm ơn hiện ra */
.form__submit.is-success {
  animation: submitSuccess .5s var(--ease);
}

@keyframes submitSuccess {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(105, 19, 12, .35);
  }

  50% {
    transform: scale(1.045);
    box-shadow: 0 0 0 1.2rem rgba(105, 19, 12, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(105, 19, 12, 0);
  }
}

.form__submit.is-busy {
  pointer-events: none;
  opacity: .7
}

/* ═══════════════════════════════════════════════════════════
   8. HỘP MỪNG CƯỚI — khung 1080 × 1813
   ═══════════════════════════════════════════════════════════ */
.gift {
  position: relative;
  aspect-ratio: 1080/1813;
  background: url("../images/gift-bg.jpg") center/cover no-repeat;
  perspective: 300rem;
  /* độ sâu 3D cho ảnh xoay trục dọc (rotateY) bên trong */
}

.gift::after {
  /* phủ tối nhẹ phía dưới */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 0, 0, 0) 45%, rgba(25, 0, 0, .34) 100%);
}

.gift__card {
  position: absolute;
  z-index: 2;
  left: 9.2%;
  right: 7.4%;
  top: 61.2%;
  bottom: 4.6%;
  border-radius: 2.6rem;
  text-align: center;
  background: rgba(255, 255, 255, .13);
  border: .15rem solid rgba(255, 255, 255, .20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 6.4%;
}

.gift__title {
  font-size: 6.3rem;
  color: var(--cream-2);
  font-weight: 400;
  letter-spacing: .01em
}

.gift__desc {
  font-size: 3.6rem;
  color: var(--cream-2);
  line-height: 1.36;
  margin-top: 1.6rem
}

.gift__btn {
  position: relative;
  display: block;
  margin: 2.8rem auto 0;
  width: 24.4rem;
  height: 18.9rem;
  border-radius: 2.2rem;
  background: rgba(30, 22, 20, .55);
  border: .15rem solid rgba(255, 255, 255, .14);
  transition: transform .3s var(--ease), background .3s var(--ease);
  animation: pulse2 2.8s ease-in-out infinite;
}

@keyframes pulse2 {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.045)
  }
}

.gift__btn:hover {
  background: rgba(30, 22, 20, .72)
}

.gift__btn:active {
  transform: scale(.96)
}

.gift__ico {
  position: absolute;
  left: 20.9%;
  top: 12.2%;
  width: 58.6%
}

.gift__cursor {
  position: absolute;
  left: 88%;
  top: 70%;
  width: 34%;
  transform-origin: 75% 25%;
  animation: cursorTap 1.3s ease-in-out infinite;
}

/* Ngón tay giả lập động tác chạm/nhấn — lặp liên tục để khách dễ nhận ra nút bấm được */
@keyframes cursorTap {

  0%,
  16% {
    transform: translate(0, 0) scale(1);
  }

  32% {
    transform: translate(-10%, 10%) scale(.78);
  }

  48%,
  70% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.gift__hint {
  font-size: 3.6rem;
  color: var(--cream-2);
  letter-spacing: -.015em;
  margin-top: 2.6rem
}

/* ═══════════════════════════════════════════════════════════
   9. LỜI CẢM ƠN — khung 1080 × 765
   ═══════════════════════════════════════════════════════════ */
.ending {
  position: relative;
  aspect-ratio: 1080/765;
  background: url("../images/ending.jpg") center/cover no-repeat;
  text-align: center;
}

.ending__txt {
  position: absolute;
  left: 6.7%;
  right: 6.5%;
  top: 16.5%;
  /* đẩy đoạn văn lên cao hẳn để tạo khoảng thoáng */
  font-size: 3.6rem;
  line-height: 1.45;
  color: var(--cream-2);
  z-index: 2;
}

.ending__sign {
  position: absolute;
  left: 0;
  right: 0;
  top: 48.0%;
  /* đẩy chữ ký Thân Thương xuống 48% tạo khoảng giãn cách 90px cực kỳ thoáng đẹp */
  font-family: "Palisade", cursive;
  font-size: 10.2rem;
  /* tinh chỉnh từ 10.8rem -> 10.2rem vừa vặn tuyệt đối trên iPhone 17 Pro Max */
  line-height: 1.4;
  color: var(--cream-2);
  padding-bottom: 6rem;
  margin-bottom: -6rem;
  overflow: visible !important;
  z-index: 2;
}

/* Cánh hoa rơi nhẹ, ấm áp — cùng kỹ thuật với .rain-container ở "We got
   married" nhưng chậm và thưa hơn, giữ z-index dưới chữ (2) để không đè lên.
   JS ở main.js "CÁNH HOA RƠI CHO LỜI CẢM ƠN" sinh .petal — mất khối CSS này
   là cánh hoa vẫn được tạo ra nhưng vô hình. */
.petal-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.petal {
  position: absolute;
  top: -6%;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, rgba(255, 242, 240, .92), rgba(230, 211, 208, .68));
  animation: petalFall linear infinite;
  opacity: 0;
}

@keyframes petalFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: .85;
  }

  92% {
    opacity: .85;
  }

  100% {
    transform: translateY(115vh) translateX(var(--drift, 2rem)) rotate(280deg);
    opacity: 0;
  }
}

/* Nới rộng clip-path xuống phía dưới (-10rem) cho riêng Safari iOS */
.ending__sign.reveal-wipe {
  clip-path: inset(-4rem 100% -10rem -2rem) !important;
  -webkit-clip-path: inset(-4rem 100% -10rem -2rem) !important;
}

.ending__sign.reveal-wipe.is-in {
  clip-path: inset(-4rem -4rem -10rem -2rem) !important;
  -webkit-clip-path: inset(-4rem -4rem -10rem -2rem) !important;
}

/* ═══════════════════════════════════════════════════════════
   POPUP
   ═══════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center
}

.modal[hidden] {
  display: none
}

.modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(25, 0, 0, .62);
  backdrop-filter: blur(3px);
  animation: fade .35s var(--ease) both
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.modal__panel {
  position: relative;
  width: min(88vw, 92rem);
  max-height: 86vh;
  overflow-y: auto;
  padding: 6rem 5rem 5.4rem;
  border-radius: 2.4rem;
  background: transparent;
  text-align: center;
  box-shadow: none;
  animation: pop .45s var(--ease) both;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.modal__panel::-webkit-scrollbar {
  display: none
}

/* QR code không có viền trắng dự phòng quanh mắt định vị — nơ hồng cần nổi
   HẲN lên trên ảnh (không chồng dù chỉ một chút) mới không che mất mã.
   Panel mặc định chỉ chừa 6rem phía trên, không đủ chỗ cho nơ full-size,
   nên riêng modal QR cần thêm khoảng đệm trên. */
#modal-qr .modal__panel {
  padding-top: 26rem;
}

/* Chrome/Safari */
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(3rem) scale(.96)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.modal__x {
  position: fixed;
  right: 2.4rem;
  top: 1.6rem;
  font-size: 7rem;
  line-height: 1;
  color: #fff;
  opacity: .75;
}

.modal__x:hover {
  opacity: 1
}

/* Cấu trúc: ảnh QR → caption → nơ (theo thứ tự dọc) */
.qr {
  position: relative;
  width: 78%;
  margin: 0 auto 5.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr:last-child {
  margin-bottom: 0
}

.qr__img {
  width: 100%;
  border-radius: 1.4rem;
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .55);
}

.qr figcaption {
  font-size: 3.1rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 .2rem .8rem rgba(0, 0, 0, .5);
  margin-top: 2rem;
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1rem;
}

/* Nơ hồng cô dâu — nổi hẳn phía trên góc ảnh, không chồng lên mã QR.
   QR không có viền trắng dự phòng nên hễ nơ lấn xuống dù một chút cũng che
   mất mắt định vị (finder pattern) ở góc — vì vậy để top đủ âm cho nơ nằm
   TRỌN VẸN phía trên mép ảnh; #modal-qr .modal__panel đã tăng padding-top
   để phần nổi lên này không bị overflow:auto của panel cắt mất. */
.qr__bow {
  position: absolute;
  left: 78.4%;
  top: -32%;
  width: 33.5%;
  z-index: 3;
}

/* Nơ đen chú rể — bên dưới caption */
.qr__bow--b {
  position: static;
  display: block;
  width: 22%;
  margin-top: 1.4rem;
  order: 3;
  opacity: .9;
}

.modal__panel--thanks {
  padding: 8rem 5rem 6.4rem;
  background: var(--cream);
  border-radius: 2.4rem;
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, .45);
}

.thanks__title {
  font-family: "Palisade", cursive;
  font-size: 11rem;
  color: var(--maroon);
  line-height: 1
}

.thanks__text {
  font-size: 3.4rem;
  line-height: 1.45;
  color: var(--ink);
  margin-top: 2.2rem
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP — nền phụ hai bên khung thiệp
   ═══════════════════════════════════════════════════════════ */
@media (min-width:520px) {
  body {
    background:
      linear-gradient(rgba(20, 8, 8, .72), rgba(20, 8, 8, .82)),
      url("../images/hero.jpg") center/cover no-repeat;
  }

  .page {
    box-shadow: 0 0 8rem rgba(0, 0, 0, .5)
  }

  .cover {
    background: transparent
  }

  .cover__photo,
  .cover__veil,
  .cover__sparkles {
    max-width: var(--w-max);
    left: 50%;
    translate: -50% 0;
  }

  .cover__photo,
  .cover__veil {
    box-shadow: 0 0 8rem rgba(0, 0, 0, .5);
  }
}

/* ═══════════════════════════════════════════════════════════
   LIQUID GLASS UI MENU DOCK (NÚT CHAT BẬT/TẮT LỜI CHÚC)
   ═══════════════════════════════════════════════════════════ */
.liquid-dock {
  position: fixed;
  z-index: 950;
  left: 50%;
  margin-left: calc(13.2rem - min(50vw, 240px) - 9.6rem);
  bottom: 3.2rem;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  display: none;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}

.liquid-dock.is-ready {
  display: grid;
}

.liquid-dock__btn {
  position: relative;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nền kính gương: vẫn trong suốt thấy nền phía sau, nhưng đủ sáng để icon dễ nhìn */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 242, 240, 0.4) 45%, rgba(255, 255, 255, 0.58) 100%);
  border: .15rem solid rgba(255, 255, 255, 0.65);
  border-top: .2rem solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px) saturate(200%);
  -webkit-backdrop-filter: blur(18px) saturate(200%);
  box-shadow: 0 .8rem 2.4rem rgba(25, 0, 0, 0.22),
    inset 0 .1rem .1rem rgba(255, 255, 255, 0.8),
    inset 0 -.2rem 1rem rgba(255, 255, 255, 0.12);
  color: var(--maroon);
  cursor: pointer;
  outline: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.liquid-dock__btn:hover {
  transform: translateY(-.4rem) scale(1.05);
  box-shadow: 0 1.2rem 3rem rgba(25, 0, 0, 0.3),
    inset 0 .1rem .1rem rgba(255, 255, 255, 0.8),
    inset 0 -.2rem 1rem rgba(255, 255, 255, 0.12);
}

.liquid-dock__btn:active {
  transform: scale(0.94);
}

.liquid-dock__btn.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(105, 19, 12, 0.72) 45%, rgba(105, 19, 12, 0.55) 100%);
  color: #fff;
  box-shadow: 0 .8rem 2.8rem rgba(220, 39, 67, 0.45),
    inset 0 .1rem .1rem rgba(255, 255, 255, 0.55),
    inset 0 -.2rem 1rem rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.85);
}

.liquid-dock__svg {
  width: 4.4rem;
  height: 4.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.liquid-dock__badge {
  position: absolute;
  top: -.2rem;
  right: -.2rem;
  min-width: 3.2rem;
  height: 3.2rem;
  padding: 0 .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 100px;
  background: #e63946;
  color: #fff;
  border: .2rem solid #fff;
  box-shadow: 0 .3rem .8rem rgba(230, 57, 70, 0.5);
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

/* Tin nhắn giờ hiện đè lên toàn trang (fixed) chứ không còn nằm riêng
   trong khối Hộp Mừng Cưới nữa, nên không cần đẩy hộp quà lên nhường chỗ. */

.wishes-stream {
  /* Neo cố định ở đáy trang — hiện xuyên suốt mọi section khi cuộn, không
     chỉ riêng trong khối Hộp Mừng Cưới. Canh theo bề rộng khung thiệp
     (giống .liquid-dock) để không bị dạt ra ngoài trên desktop. */
  position: fixed;
  left: 50%;
  translate: -50% 0;
  /* Nằm trên nút chat tròn (bottom 3.2rem + cao 9.6rem = 12.8rem) — từ khi
     có thêm khung nhập lời chúc ở cuối khối này, khung nhập (phần tử cuối,
     luôn nằm sát đáy khối vì khối chỉ có `bottom` không có `top`) cần thêm
     hẳn khoảng đệm mới không đè lên nút cuộn/nhạc bên cạnh nút chat. */
  bottom: 29rem;
  width: min(100vw, var(--w-max));
  max-height: 65vh;
  /* đủ chỗ ~6 tin + khung nhập, dư chút phòng lúc tin cũ đang mờ dần */
  padding: 0 7.4%;
  z-index: 940;
  /* dưới nút chat (950) và popup (1000) */
  overflow: hidden;
  pointer-events: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}

body.wishes-active .wishes-stream {
  opacity: 1;
  visibility: visible;
  pointer-events: none !important;
}

.wishes-stream__track {
  /* Không đặt height cố định: box cha chỉ có `bottom` (không `top`) nên tự
     cao dần lên khi thêm tin, đáy luôn neo cố định — tin mới tự nhiên nằm
     dưới cùng mà không cần justify-content ép buộc. */
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  pointer-events: none !important;
}

.wish-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 95%;
  padding: 1.4rem 2.8rem;
  border-radius: 100px;
  /* Nền kính gương: vẫn trong suốt thấy nền phía sau, nhưng đủ sáng để chữ dễ đọc */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 234, 232, 0.42) 45%, rgba(255, 255, 255, 0.56) 100%);
  border: .15rem solid rgba(255, 255, 255, 0.65);
  border-top: .2rem solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(22px) saturate(200%);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  box-shadow: 0 0.8rem 2.8rem rgba(105, 19, 12, 0.2),
    inset 0 .1rem .1rem rgba(255, 255, 255, 0.85),
    inset 0 -.15rem .8rem rgba(255, 255, 255, 0.15);
  font-size: 2.8rem;
  line-height: 1.35;
  color: var(--maroon);
  pointer-events: none !important;
  animation: wish-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.wish-pill__name {
  font-weight: 700;
  margin-right: 0.8rem;
  color: var(--maroon);
  white-space: nowrap;
}

.wish-pill__text {
  font-weight: 400;
  word-break: break-word;
}

/* Khung nhập lời chúc — nằm dưới cùng khối tin nhắn trôi. .wishes-stream và
   .wishes-stream__track ở trên đều khoá pointer-events:none (để không chặn
   click xuyên qua khi tin nhắn trôi qua nội dung phía dưới), nên phải bật
   lại rõ ràng ở đây form mới bấm/gõ được. */
.wishes-form {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.4rem;
}

.wishes-form__name,
.wishes-form__text {
  width: 100%;
  height: 7rem;
  padding: 0 3rem;
  border: .15rem solid rgba(255, 255, 255, .55);
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .74) 0%, rgba(255, 234, 232, .5) 45%, rgba(255, 255, 255, .6) 100%);
  backdrop-filter: blur(18px) saturate(200%);
  -webkit-backdrop-filter: blur(18px) saturate(200%);
  color: var(--maroon);
  font-family: inherit;
  font-size: 3rem;
  outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.wishes-form__name::placeholder,
.wishes-form__text::placeholder {
  color: var(--maroon);
  opacity: .6;
}

.wishes-form__name:focus,
.wishes-form__text:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 .3rem rgba(105, 19, 12, .1);
}

.wishes-form__row {
  display: flex;
  gap: 1rem;
}

.wishes-form__text {
  flex: 1;
  min-width: 0;
}

.wishes-form__send {
  flex: none;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}

.wishes-form__send:hover {
  filter: brightness(1.12);
}

.wishes-form__send:active {
  transform: scale(.92);
}

.wishes-form__send-ico {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes wish-pop-in {
  0% {
    opacity: 0;
    transform: translateY(2.4rem) scale(0.88);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}