/* ========================================================
   SCROLL REVEAL ANIMATIONS — VINTAGE BOTANICAL THEME
   Granular 5s smooth scroll reveal animations with extended left/right travel
   Compatible with sibling templates (thiep-cuoi-1, 2, 4, 5, 6, 7)
   ======================================================== */

:root {
  --reveal-duration: 5s;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slide-distance-wide: 90px;
  --slide-distance-medium: 70px;
}

/* Ngăn thanh cuộn ngang khi các phần tử trượt từ 2 bên vào */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.wedding-site-wrapper {
  overflow-x: hidden;
  overflow-x: clip;
  /* Giữ max-width: 900px từ vintage-theme.css trên desktop */
}

/* Các section và card luôn hiển thị trọn vẹn, không sinh thanh cuộn dọc bên trong */
.reveal-section,
.reveal-block,
.reveal-item,
.wedding-info-card-container,
.reception-timing-card,
.calendar-paper-card,
.countdown-box-card,
.guestbook-form-box,
.wishes-display-list {
  overflow: visible !important;
}

/* Base reveal elements will-change */
.reveal-block,
.reveal-section,
.reveal-item {
  will-change: opacity, transform;
}

/* Override base section transition to use the smooth 5s curve */
.reveal-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease) !important;
  will-change: opacity, transform;
}

.reveal-section.visible,
.visible.reveal-section {
  opacity: 1;
  transform: translateY(0) !important;
}

/* ========================================================
   1. SECTION TITLES, LEAF ICONS & SUBTITLES
   ======================================================== */
.section-leaf-icon {
  opacity: 0;
  transform: translateY(-24px) scale(0.8);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.05s,
              transform var(--reveal-duration) var(--reveal-ease) 0.05s;
  will-change: opacity, transform;
}

.section-main-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.1s,
              transform var(--reveal-duration) var(--reveal-ease) 0.1s;
  will-change: opacity, transform;
}

.section-quote-italic {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

.visible .section-leaf-icon,
.visible .section-main-title,
.visible .section-quote-italic,
.section-leaf-icon.visible,
.section-main-title.visible,
.section-quote-italic.visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ========================================================
   2. SECTION 1: HERO COVER SECTION
   ======================================================== */
.hero-wedding > .section-main-title {
  opacity: 0;
  transform: translateY(-26px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.05s,
              transform var(--reveal-duration) var(--reveal-ease) 0.05s;
  will-change: opacity, transform;
}

.hero-names-script .hero-groom {
  display: inline-block;
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-wide))) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.hero-names-script .hero-amp {
  display: inline-block;
  opacity: 0;
  transform: scale(0.25) rotate(-20deg);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

.hero-names-script .hero-bride {
  display: inline-block;
  opacity: 0;
  transform: translateX(var(--slide-distance-wide)) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.hero-guest-invite {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
  will-change: opacity, transform;
}

.hero-subquote {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.3s,
              transform var(--reveal-duration) var(--reveal-ease) 0.3s;
  will-change: opacity, transform;
}

.hero-polaroid-wrap {
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.1s,
              transform var(--reveal-duration) var(--reveal-ease) 0.1s;
  will-change: opacity, transform;
}

.hero-wedding.visible > .section-main-title,
.hero-wedding.visible .hero-groom,
.hero-wedding.visible .hero-amp,
.hero-wedding.visible .hero-bride,
.hero-wedding.visible .hero-guest-invite,
.hero-wedding.visible .hero-subquote,
.hero-wedding.visible .hero-polaroid-wrap,
.visible .hero-groom,
.visible .hero-amp,
.visible .hero-bride,
.visible .hero-guest-invite,
.visible .hero-subquote,
.visible .hero-polaroid-wrap {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0deg);
}

/* ========================================================
   3. SECTION 2: THÔNG TIN LỄ CƯỚI (WEDDING INFO)
   ======================================================== */
.wedding-info-card-container {
  opacity: 0;
  transform: translateY(45px) scale(0.96);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.1s,
              transform var(--reveal-duration) var(--reveal-ease) 0.1s;
  will-change: opacity, transform;
}

.wedding-info-card-container.visible,
.visible .wedding-info-card-container {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hai gia đình: Nhà trai từ bên trái (-90px), Nhà gái từ bên phải (+90px) */
.parents-two-col {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

.parent-side-col:first-child {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-wide))) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.3s,
              transform var(--reveal-duration) var(--reveal-ease) 0.3s;
  will-change: opacity, transform;
}

.parent-side-col:last-child {
  opacity: 0;
  transform: translateX(var(--slide-distance-wide)) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.3s,
              transform var(--reveal-duration) var(--reveal-ease) 0.3s;
  will-change: opacity, transform;
}

.info-announcement {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s,
              transform var(--reveal-duration) var(--reveal-ease) 0.45s;
  will-change: opacity, transform;
}

/* Cặp đôi Chú rể & Cô dâu trượt từ 2 bên */
.couple-vertical-stack {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.5s,
              transform var(--reveal-duration) var(--reveal-ease) 0.5s;
  will-change: opacity, transform;
}

.couple-person-item:first-child {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-wide))) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.6s,
              transform var(--reveal-duration) var(--reveal-ease) 0.6s;
  will-change: opacity, transform;
}

.couple-stack-amp {
  opacity: 0;
  transform: scale(0.3) rotate(-20deg);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.65s,
              transform var(--reveal-duration) var(--reveal-ease) 0.65s;
  will-change: opacity, transform;
}

.couple-person-item:last-child {
  opacity: 0;
  transform: translateX(var(--slide-distance-wide)) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.6s,
              transform var(--reveal-duration) var(--reveal-ease) 0.6s;
  will-change: opacity, transform;
}

.ceremony-venue-notice {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.75s,
              transform var(--reveal-duration) var(--reveal-ease) 0.75s;
  will-change: opacity, transform;
}

.ceremony-time-badge {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.85s,
              transform var(--reveal-duration) var(--reveal-ease) 0.85s;
  will-change: opacity, transform;
}

.ceremony-time-line {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.95s,
              transform var(--reveal-duration) var(--reveal-ease) 0.95s;
}

.ceremony-date-big {
  opacity: 0;
  transform: scale(0.8) translateY(18px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 1.05s,
              transform var(--reveal-duration) var(--reveal-ease) 1.05s;
}

.ceremony-lunar-date {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 1.15s,
              transform var(--reveal-duration) var(--reveal-ease) 1.15s;
}

.visible .parents-two-col,
.visible .parent-side-col:first-child,
.visible .parent-side-col:last-child,
.visible .info-announcement,
.visible .couple-vertical-stack,
.visible .couple-person-item:first-child,
.visible .couple-stack-amp,
.visible .couple-person-item:last-child,
.visible .ceremony-venue-notice,
.visible .ceremony-time-badge,
.visible .ceremony-time-line,
.visible .ceremony-date-big,
.visible .ceremony-lunar-date,
.wedding-info-card-container.visible .parents-two-col,
.wedding-info-card-container.visible .parent-side-col:first-child,
.wedding-info-card-container.visible .parent-side-col:last-child,
.wedding-info-card-container.visible .info-announcement,
.wedding-info-card-container.visible .couple-vertical-stack,
.wedding-info-card-container.visible .couple-person-item:first-child,
.wedding-info-card-container.visible .couple-stack-amp,
.wedding-info-card-container.visible .couple-person-item:last-child,
.wedding-info-card-container.visible .ceremony-venue-notice,
.wedding-info-card-container.visible .ceremony-time-badge,
.wedding-info-card-container.visible .ceremony-time-line,
.wedding-info-card-container.visible .ceremony-date-big,
.wedding-info-card-container.visible .ceremony-lunar-date {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0deg);
}

/* ========================================================
   4. SECTION 3: ALBUM ẢNH CƯỚI (GALLERY)
   ======================================================== */
#gallery .gallery-carousel,
.gallery-carousel {
  opacity: 0;
  transform: translateY(50px) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

#gallery .carousel-track,
.carousel-track {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

#gallery .carousel-btn.prev,
.carousel-btn.prev {
  opacity: 0;
  transform: translateX(-60px) translateY(-50%) scale(0.7) !important;
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.35s,
              transform var(--reveal-duration) var(--reveal-ease) 0.35s,
              background 0.22s ease, box-shadow 0.22s ease !important;
  will-change: opacity, transform;
}

#gallery .carousel-btn.next,
.carousel-btn.next {
  opacity: 0;
  transform: translateX(60px) translateY(-50%) scale(0.7) !important;
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.35s,
              transform var(--reveal-duration) var(--reveal-ease) 0.35s,
              background 0.22s ease, box-shadow 0.22s ease !important;
  will-change: opacity, transform;
}

#gallery .carousel-dots,
.carousel-dots {
  opacity: 0;
  transform: translateY(22px) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s,
              transform var(--reveal-duration) var(--reveal-ease) 0.45s;
  will-change: opacity, transform;
}

#gallery .gallery-thumbs,
.gallery-thumbs {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.55s,
              transform var(--reveal-duration) var(--reveal-ease) 0.55s;
  will-change: opacity, transform;
}

#gallery.visible .gallery-carousel,
.gallery-section.visible .gallery-carousel,
.gallery-carousel.visible,
.visible .gallery-carousel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#gallery.visible .carousel-track,
.gallery-section.visible .carousel-track,
.visible .carousel-track {
  opacity: 1;
  transform: scale(1);
}

#gallery.visible .carousel-btn.prev,
.gallery-section.visible .carousel-btn.prev,
.gallery-carousel.visible .carousel-btn.prev,
.visible .carousel-btn.prev {
  opacity: 1;
  transform: translateX(0) translateY(-50%) scale(1) !important;
}

#gallery.visible .carousel-btn.next,
.gallery-section.visible .carousel-btn.next,
.gallery-carousel.visible .carousel-btn.next,
.visible .carousel-btn.next {
  opacity: 1;
  transform: translateX(0) translateY(-50%) scale(1) !important;
}

#gallery.visible .carousel-dots,
.gallery-section.visible .carousel-dots,
.visible .carousel-dots {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#gallery.visible .gallery-thumbs,
.gallery-section.visible .gallery-thumbs,
.visible .gallery-thumbs {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ========================================================
   5. SECTION 4: THÔNG TIN TIỆC CƯỚI & ĐẾM NGƯỢC (RECEPTION)
   ======================================================== */
.reception-timing-card {
  opacity: 0;
  transform: translateY(45px) scale(0.96);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.1s,
              transform var(--reveal-duration) var(--reveal-ease) 0.1s;
  will-change: opacity, transform;
}

.reception-timing-card.visible,
.visible .reception-timing-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reception-lead-prompt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
}

.reception-day-time {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.35s,
              transform var(--reveal-duration) var(--reveal-ease) 0.35s;
}

.reception-date-block {
  opacity: 0;
  transform: scale(0.8) translateY(24px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s,
              transform var(--reveal-duration) var(--reveal-ease) 0.45s;
  will-change: opacity, transform;
}

.reception-lunar-date {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.55s,
              transform var(--reveal-duration) var(--reveal-ease) 0.55s;
}

/* Hai mốc giờ: Đón khách (-70px) & Khai tiệc (+70px) */
.reception-times-clean .reception-time-item:first-child {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-medium))) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.65s,
              transform var(--reveal-duration) var(--reveal-ease) 0.65s;
  will-change: opacity, transform;
}

.reception-times-clean .reception-time-item:last-child {
  opacity: 0;
  transform: translateX(var(--slide-distance-medium)) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.65s,
              transform var(--reveal-duration) var(--reveal-ease) 0.65s;
  will-change: opacity, transform;
}

/* Tờ lịch vintage mini */
.calendar-paper-card {
  opacity: 0;
  transform: translateY(45px) scale(0.95);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

.calendar-paper-card.visible,
.visible .calendar-paper-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.calendar-paper-header,
.calendar-grid-header {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.35s,
              transform var(--reveal-duration) var(--reveal-ease) 0.35s;
}

/* Stagger calendar 31 days cascade */
.calendar-grid-days span {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--reveal-duration) ease,
              transform var(--reveal-duration) var(--reveal-ease);
}

.calendar-paper-card.visible .calendar-paper-header,
.calendar-paper-card.visible .calendar-grid-header,
.visible .calendar-paper-header,
.visible .calendar-grid-header {
  opacity: 1;
  transform: translateY(0);
}

.calendar-paper-card.visible .calendar-grid-days span,
.visible .calendar-grid-days span {
  opacity: 1;
  transform: scale(1);
}

.calendar-paper-card.visible .calendar-grid-days span:nth-child(1)  { transition-delay: 0.40s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(2)  { transition-delay: 0.42s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(3)  { transition-delay: 0.44s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(4)  { transition-delay: 0.46s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(5)  { transition-delay: 0.48s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(6)  { transition-delay: 0.50s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(7)  { transition-delay: 0.52s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(8)  { transition-delay: 0.54s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(9)  { transition-delay: 0.56s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(10) { transition-delay: 0.58s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(11) { transition-delay: 0.60s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(12) { transition-delay: 0.62s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(13) { transition-delay: 0.64s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(14) { transition-delay: 0.66s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(15) { transition-delay: 0.68s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(16) { transition-delay: 0.70s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(17) { transition-delay: 0.72s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(18) { transition-delay: 0.74s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(19) { transition-delay: 0.76s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(20) { transition-delay: 0.78s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(21) { transition-delay: 0.80s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(22) { transition-delay: 0.82s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(23) { transition-delay: 0.84s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(24) { transition-delay: 0.86s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(25) { transition-delay: 0.88s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(26) { transition-delay: 0.90s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(27) { transition-delay: 0.92s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(28) { transition-delay: 0.94s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(29) { transition-delay: 0.96s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(30) { transition-delay: 0.98s; }
.calendar-paper-card.visible .calendar-grid-days span:nth-child(31) { transition-delay: 1.00s; }

/* Khối Đếm ngược */
.countdown-box-card {
  opacity: 0;
  transform: translateY(45px) scale(0.96);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

.countdown-box-card.visible,
.visible .countdown-box-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.countdown-card-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.3s,
              transform var(--reveal-duration) var(--reveal-ease) 0.3s;
}

/* 4 hộp số xuất hiện mượt mà từ dưới lên và scale nhẹ, không trượt ngang gây tràn lề */
.count-unit-col {
  opacity: 0;
  transform: translateY(28px) scale(0.88);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.countdown-box-card.visible .count-unit-col:nth-child(1),
.visible .count-unit-col:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.25s;
}

.countdown-box-card.visible .count-unit-col:nth-child(2),
.visible .count-unit-col:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.40s;
}

.countdown-box-card.visible .count-unit-col:nth-child(3),
.visible .count-unit-col:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.55s;
}

.countdown-box-card.visible .count-unit-col:nth-child(4),
.visible .count-unit-col:nth-child(4) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.70s;
}

/* Nút bấm Lưu Lịch (-60px) & Xác Nhận RSVP (+60px) */
.reception-action-btns #btn-add-calendar {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-medium))) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.85s,
              transform var(--reveal-duration) var(--reveal-ease) 0.85s;
  will-change: opacity, transform;
}

.reception-action-btns #btn-trigger-rsvp {
  opacity: 0;
  transform: translateX(var(--slide-distance-medium)) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.85s,
              transform var(--reveal-duration) var(--reveal-ease) 0.85s;
  will-change: opacity, transform;
}

.reception-banner-quote {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.4s,
              transform var(--reveal-duration) var(--reveal-ease) 0.4s;
}

.visible .reception-lead-prompt,
.visible .reception-day-time,
.visible .reception-date-block,
.visible .reception-lunar-date,
.visible .reception-times-clean .reception-time-item,
.visible .countdown-card-title,
.visible .reception-action-btns #btn-add-calendar,
.visible .reception-action-btns #btn-trigger-rsvp,
.visible .reception-banner-quote,
.reception-timing-card.visible .reception-lead-prompt,
.reception-timing-card.visible .reception-day-time,
.reception-timing-card.visible .reception-date-block,
.reception-timing-card.visible .reception-lunar-date,
.reception-timing-card.visible .reception-times-clean .reception-time-item,
.countdown-box-card.visible .countdown-card-title,
.countdown-box-card.visible .reception-action-btns #btn-add-calendar,
.countdown-box-card.visible .reception-action-btns #btn-trigger-rsvp,
.reception-banner-quote.visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ========================================================
   6. SECTION 5: ĐỊA ĐIỂM TIỆC CƯỚI (VENUE)
   ======================================================== */
.venue-name-title {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-wide)));
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
  will-change: opacity, transform;
}

.venue-address-text {
  opacity: 0;
  transform: translateX(var(--slide-distance-wide));
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.35s,
              transform var(--reveal-duration) var(--reveal-ease) 0.35s;
  will-change: opacity, transform;
}

.btn-view-map {
  opacity: 0;
  transform: translateY(25px) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.5s,
              transform var(--reveal-duration) var(--reveal-ease) 0.5s;
  will-change: opacity, transform;
}

.venue-special-invite {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.6s,
              transform var(--reveal-duration) var(--reveal-ease) 0.6s;
}

.venue-landscape-wrap {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.4s,
              transform var(--reveal-duration) var(--reveal-ease) 0.4s;
  will-change: opacity, transform;
}

.visible .venue-name-title,
.visible .venue-address-text,
.visible .btn-view-map,
.visible .venue-special-invite,
.visible .venue-landscape-wrap,
.venue-section.visible .venue-name-title,
.venue-section.visible .venue-address-text,
.venue-section.visible .btn-view-map,
.venue-section.visible .venue-special-invite,
.venue-section.visible .venue-landscape-wrap {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ========================================================
   7. SECTION 6: TRANG PHỤC (DRESS CODE)
   ======================================================== */
.dresscode-color-palette {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

.dresscode-swatch {
  opacity: 0;
  transform: translateY(22px) scale(0.85);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.dresscode-divider-line {
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s,
              transform var(--reveal-duration) var(--reveal-ease) 0.45s;
}

.visible .dresscode-color-palette,
.visible .dresscode-divider-line,
.dresscode-section.visible .dresscode-color-palette,
.dresscode-section.visible .dresscode-divider-line {
  opacity: 1;
  transform: translate(0) scaleX(1);
}

.dresscode-section.visible .dresscode-swatch:nth-child(1),
.visible .dresscode-swatch:nth-child(1) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.2s; }
.dresscode-section.visible .dresscode-swatch:nth-child(2),
.visible .dresscode-swatch:nth-child(2) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.35s; }
.dresscode-section.visible .dresscode-swatch:nth-child(3),
.visible .dresscode-swatch:nth-child(3) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.5s; }
.dresscode-section.visible .dresscode-swatch:nth-child(4),
.visible .dresscode-swatch:nth-child(4) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.65s; }
.dresscode-section.visible .dresscode-swatch:nth-child(5),
.visible .dresscode-swatch:nth-child(5) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.8s; }
.dresscode-section.visible .dresscode-swatch:nth-child(n+6),
.visible .dresscode-swatch:nth-child(n+6) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.95s; }

/* ========================================================
   8. SECTION 7: TIMELINE NGÀY CƯỚI
   ======================================================== */
.timeline-vertical-flow {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

/* Các mục timeline trượt so le từ 2 bên (-90px và +90px) */
.timeline-step-row:nth-child(odd) {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-wide)));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.timeline-step-row:nth-child(even) {
  opacity: 0;
  transform: translateX(var(--slide-distance-wide));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.timeline-reminder-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.4s,
              transform var(--reveal-duration) var(--reveal-ease) 0.4s;
}

.visible .timeline-vertical-flow,
.visible .timeline-reminder-text,
.timeline-section.visible .timeline-vertical-flow,
.timeline-section.visible .timeline-reminder-text {
  opacity: 1;
  transform: translate(0);
}

.timeline-section.visible .timeline-step-row:nth-child(1),
.visible .timeline-step-row:nth-child(1),
.timeline-step-row.visible { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.timeline-section.visible .timeline-step-row:nth-child(2),
.visible .timeline-step-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.38s; }
.timeline-section.visible .timeline-step-row:nth-child(3),
.visible .timeline-step-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.54s; }
.timeline-section.visible .timeline-step-row:nth-child(4),
.visible .timeline-step-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.70s; }
.timeline-section.visible .timeline-step-row:nth-child(5),
.visible .timeline-step-row:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.86s; }
.timeline-section.visible .timeline-step-row:nth-child(n+6),
.visible .timeline-step-row:nth-child(n+6) { opacity: 1; transform: translateX(0); transition-delay: 1.00s; }

/* ========================================================
   9. SECTION 8: SỔ LƯU BÚT (GUESTBOOK)
   ======================================================== */
.guestbook-form-box {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.guestbook-input-name {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-wide)));
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
  will-change: opacity, transform;
}

.guestbook-textarea-msg {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance-wide)));
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.4s,
              transform var(--reveal-duration) var(--reveal-ease) 0.4s;
  will-change: opacity, transform;
}

.guestbook-actions {
  opacity: 0;
  transform: translateX(var(--slide-distance-medium)) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.55s,
              transform var(--reveal-duration) var(--reveal-ease) 0.55s;
  will-change: opacity, transform;
}

.guestbook-form-box.visible,
.visible .guestbook-form-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.visible .guestbook-input-name,
.visible .guestbook-textarea-msg,
.visible .guestbook-actions,
.guestbook-form-box.visible .guestbook-input-name,
.guestbook-form-box.visible .guestbook-textarea-msg,
.guestbook-form-box.visible .guestbook-actions {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Danh sách lời chúc: Chặn tuyệt đối tràn ngang */
.wishes-display-list {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  overflow-x: hidden !important;
  will-change: opacity, transform;
}

.wishes-display-list::-webkit-scrollbar:horizontal {
  display: none !important;
  height: 0px !important;
}

.wishes-display-list.visible,
.visible .wishes-display-list {
  opacity: 1;
  transform: translateY(0);
}

.wish-single-entry {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.wishes-display-list.visible .wish-single-entry:nth-child(1),
.visible .wish-single-entry:nth-child(1),
.wish-single-entry.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.15s;
}

.wishes-display-list.visible .wish-single-entry:nth-child(2),
.visible .wish-single-entry:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
}

.wishes-display-list.visible .wish-single-entry:nth-child(3),
.visible .wish-single-entry:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.45s;
}

.wishes-display-list.visible .wish-single-entry:nth-child(4),
.visible .wish-single-entry:nth-child(4) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.6s;
}

.wishes-display-list.visible .wish-single-entry:nth-child(n+5),
.visible .wish-single-entry:nth-child(n+5) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.75s;
}

/* ========================================================
   10. SECTION 9: HỘP QUÀ MỪNG (GIFT BOX)
   ======================================================== */
.gift-envelope-trigger {
  opacity: 0;
  transform: translateY(35px) scale(0.85);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
  will-change: opacity, transform;
}

.gift-hint-text {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s,
              transform var(--reveal-duration) var(--reveal-ease) 0.45s;
}

.gift-tnd-credit {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.55s,
              transform var(--reveal-duration) var(--reveal-ease) 0.55s;
}

/* Brand credit lives in site-footer (outside gift) */
.site-footer .gift-tnd-credit,
footer .gift-tnd-credit {
  opacity: 0.55;
  transform: none;
}

.visible .gift-envelope-trigger,
.visible .gift-hint-text,
.gift-section.visible .gift-envelope-trigger,
.gift-section.visible .gift-hint-text {
  opacity: 1;
  transform: translate(0) scale(1);
}


/* ========================================================
   11. RESPONSIVE OPTIMIZATION (MOBILE & TABLET)
   ======================================================== */
@media (max-width: 900px) {
  :root {
    --slide-distance-wide: 65px;
    --slide-distance-medium: 45px;
  }
}

@media (max-width: 480px) {
  :root {
    --slide-distance-wide: 55px;
    --slide-distance-medium: 38px;
  }
}