/* ========================================================
   SCROLL REVEAL ANIMATIONS — LAVENDER WATERCOLOR THEME
   Granular scroll reveal animations for all components and blocks
   ======================================================== */

:root {
  --reveal-duration: 5s;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ========================================================
   1. HEADINGS & TITLES
   ======================================================== */
.section-title,
.card-title-main,
.gift-heading-main,
.gb-card-title,
.countdown-title,
.venue-heading {
  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;
}

.visible .section-title,
.visible .card-title-main,
.visible .gift-heading-main,
.visible .gb-card-title,
.visible .countdown-title,
.visible .venue-heading,
.section-title.visible,
.card-title-main.visible,
.gift-heading-main.visible,
.gb-card-title.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtitles */
.section-subtitle,
.card-subtitle-small,
.gb-card-subtitle {
  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-subtitle,
.visible .card-subtitle-small,
.visible .gb-card-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative Heart Dividers */
.card-heart-divider,
.gb-heart-divider,
.gift-heart-divider,
.card-floret-divider {
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.visible .card-heart-divider,
.visible .gb-heart-divider,
.visible .gift-heart-divider,
.visible .card-floret-divider,
.card-heart-divider.visible,
.gb-heart-divider.visible,
.gift-heart-divider.visible {
  opacity: 1;
  transform: scaleX(1);
}

/* ========================================================
   2. HERO COVER SECTION
   ======================================================== */
.hero-kicker-wrap {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 1.8s ease-out 0s,
              transform 2s var(--reveal-ease) 0s;
  will-change: opacity, transform;
}

.hero-photo-stage {
  opacity: 0;
  transform: none;
  transition: opacity 1.8s ease-out 0.05s;
  will-change: opacity;
}

.hero-title-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.8s ease-out 0.1s,
              transform 2.2s var(--reveal-ease) 0.1s;
  will-change: opacity, transform;
}

.hero-groom {
  display: inline-block;
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 1.8s ease-out 0.15s,
              transform 2.2s var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.hero-bride {
  display: inline-block;
  opacity: 0;
  transform: translateX(35px);
  transition: opacity 1.8s ease-out 0.15s,
              transform 2.2s var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.hero-ampersand {
  display: inline-block;
  opacity: 0;
  transform: scale(0.3) rotate(-8deg);
  transition: opacity 1.8s ease-out 0.18s,
              transform 2.2s var(--reveal-ease) 0.18s;
  will-change: opacity, transform;
}

.hero-date,
.hero-quote {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.8s ease-out 0.22s,
              transform 2.2s var(--reveal-ease) 0.22s;
  will-change: opacity, transform;
}

.visible .hero-kicker-wrap,
.visible .hero-photo-stage,
.visible .hero-title-box,
.hero-section.visible .hero-groom,
.hero-title-box.visible .hero-groom,
.hero-section.visible .hero-bride,
.hero-title-box.visible .hero-bride,
.hero-section.visible .hero-ampersand,
.hero-title-box.visible .hero-ampersand,
.hero-section.visible .hero-date,
.hero-title-box.visible .hero-date,
.hero-section.visible .hero-quote,
.hero-title-box.visible .hero-quote {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0deg);
}

/* ========================================================
   3. WEDDING INFO / CEREMONY SECTION
   ======================================================== */
.card-ceremony {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

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

.parents-grid {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.3s,
              transform var(--reveal-duration) var(--reveal-ease) 0.3s;
  will-change: opacity, transform;
}

.family-side:first-child {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.4s,
              transform var(--reveal-duration) var(--reveal-ease) 0.4s;
  will-change: opacity, transform;
}

.family-side:last-child {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.4s,
              transform var(--reveal-duration) var(--reveal-ease) 0.4s;
  will-change: opacity, transform;
}

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

.couple-ceremony-vertical {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.6s,
              transform var(--reveal-duration) var(--reveal-ease) 0.6s;
  will-change: opacity, transform;
}

.couple-person-block:first-child .person-fullname {
  opacity: 0;
  transform: translateX(-25px) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.7s,
              transform var(--reveal-duration) var(--reveal-ease) 0.7s;
  will-change: opacity, transform;
}

.couple-person-block:last-child .person-fullname {
  opacity: 0;
  transform: translateX(25px) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.8s,
              transform var(--reveal-duration) var(--reveal-ease) 0.8s;
  will-change: opacity, transform;
}

.couple-amp-symbol {
  opacity: 0;
  transform: scale(0.4) rotate(-15deg);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.75s,
              transform var(--reveal-duration) var(--reveal-ease) 0.75s;
  will-change: opacity, transform;
}

.ceremony-details {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.9s,
              transform var(--reveal-duration) var(--reveal-ease) 0.9s;
  will-change: opacity, transform;
}

.ceremony-time-large {
  opacity: 0;
  transform: scale(0.7) translateY(12px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 1.05s,
              transform var(--reveal-duration) var(--reveal-ease) 1.05s;
  will-change: opacity, transform;
}

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

.visible .parents-grid,
.visible .family-side:first-child,
.visible .family-side:last-child,
.visible .announcement-wrap,
.visible .couple-ceremony-vertical,
.visible .couple-person-block:first-child .person-fullname,
.visible .couple-person-block:last-child .person-fullname,
.visible .couple-amp-symbol,
.visible .ceremony-details,
.visible .ceremony-time-large,
.visible .ceremony-date-box {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0deg);
}

/* ========================================================
   4. GALLERY SECTION
   ======================================================== */
.gallery-grid-2x2 {
  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;
}

.gallery-grid-2x2.visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery-card:nth-child(1),
.gallery-card:nth-child(3),
.gallery-card:nth-child(5) {
  opacity: 0;
  transform: translateX(-70px) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.gallery-card:nth-child(2),
.gallery-card:nth-child(4),
.gallery-card:nth-child(6) {
  opacity: 0;
  transform: translateX(70px) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.gallery-grid-2x2.visible .gallery-card:nth-child(1),
.visible .gallery-card:nth-child(1) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.15s;
}

.gallery-grid-2x2.visible .gallery-card:nth-child(2),
.visible .gallery-card:nth-child(2) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.32s;
}

.gallery-grid-2x2.visible .gallery-card:nth-child(3),
.visible .gallery-card:nth-child(3) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.48s;
}

.gallery-grid-2x2.visible .gallery-card:nth-child(4),
.visible .gallery-card:nth-child(4) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.64s;
}

.gallery-grid-2x2.visible .gallery-card:nth-child(5),
.visible .gallery-card:nth-child(5) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.80s;
}

.gallery-grid-2x2.visible .gallery-card:nth-child(6),
.visible .gallery-card:nth-child(6) {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: 0.96s;
}

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

.gallery-quote-box.visible,
.visible .gallery-quote-box {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================
   5. RECEPTION TIMING, SCHEDULE & CALENDAR
   ======================================================== */
.reception-timing-block {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

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

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

.reception-highlight-hour {
  opacity: 0;
  transform: scale(0.75) translateY(15px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.3s,
              transform var(--reveal-duration) var(--reveal-ease) 0.3s;
}

.reception-timing-block.visible .reception-prompt,
.reception-timing-block.visible .reception-highlight-hour,
.visible .reception-prompt,
.visible .reception-highlight-hour {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Schedule Icons */
.reception-schedule-icons {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
              transform var(--reveal-duration) var(--reveal-ease) 0.2s;
  will-change: opacity, transform;
}

.reception-schedule-icons.visible {
  opacity: 1;
  transform: translateY(0);
}

.sched-icon-item {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}

.reception-schedule-icons.visible .sched-icon-item:nth-child(1),
.visible .sched-icon-item:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
}

.reception-schedule-icons.visible .sched-icon-item:nth-child(3),
.visible .sched-icon-item:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.45s;
}

/* Calendar Card Box */
.calendar-card-box {
  opacity: 0;
  transform: translateY(35px) 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-card-box.visible,
.visible .calendar-card-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

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

.calendar-card-box.visible .calendar-header-nav {
  opacity: 1;
  transform: translateY(0);
}

.calendar-grid-days span {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--reveal-duration) ease,
              transform var(--reveal-duration) var(--reveal-ease);
}

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

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

.btn-calendar-add,
.btn-rsvp-trigger {
  opacity: 0;
  transform: translateY(15px) scale(0.92);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 1.05s,
              transform var(--reveal-duration) var(--reveal-ease) 1.05s;
}

.calendar-card-box.visible .btn-calendar-add,
.calendar-card-box.visible .btn-rsvp-trigger {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ========================================================
   6. COUNTDOWN SECTION (ĐẾM NGƯỢC ĐẾN NGÀY VUI)
   ======================================================== */
.countdown-section, .countdown-sub-section, .countdown-inner-wrap {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.1s,
              transform var(--reveal-duration) var(--reveal-ease) 0.1s;
  will-change: opacity, transform;
}

.countdown-section, .countdown-sub-section, .countdown-inner-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}

.countdown-section, .countdown-sub-section, .countdown-inner-wrap .count-pill {
  opacity: 0;
  transform: translateY(35px) scale(0.82);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.countdown-section, .countdown-sub-section, .countdown-inner-wrap.visible .count-pill:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.15s;
}

.countdown-section, .countdown-sub-section, .countdown-inner-wrap.visible .count-pill:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
}

.countdown-section, .countdown-sub-section, .countdown-inner-wrap.visible .count-pill:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.45s;
}

.countdown-section, .countdown-sub-section, .countdown-inner-wrap.visible .count-pill:nth-child(4) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.6s;
}

/* ========================================================
   7. VENUE & GOOGLE MAP SECTION (TIỆC CƯỚI SẼ TỔ CHỨC TẠI)
   ======================================================== */
.venue-location-block {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.1s,
              transform var(--reveal-duration) var(--reveal-ease) 0.1s;
  will-change: opacity, transform;
}

.venue-location-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.venue-location-block .venue-name {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
  will-change: opacity, transform;
}

.venue-location-block.visible .venue-name {
  opacity: 1;
  transform: translateX(0);
}

.venue-location-block .venue-address {
  opacity: 0;
  transform: translateX(35px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.4s,
              transform var(--reveal-duration) var(--reveal-ease) 0.4s;
  will-change: opacity, transform;
}

.venue-location-block.visible .venue-address {
  opacity: 1;
  transform: translateX(0);
}

.venue-location-block .map-embed-wrapper {
  opacity: 0;
  transform: scale(0.85) translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.55s,
              transform var(--reveal-duration) var(--reveal-ease) 0.55s;
  will-change: opacity, transform;
}

.venue-location-block.visible .map-embed-wrapper {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.venue-location-block .btn-direction {
  opacity: 0;
  transform: translateY(25px) scale(0.88);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.75s,
              transform var(--reveal-duration) var(--reveal-ease) 0.75s;
  will-change: opacity, transform;
}

.venue-location-block.visible .btn-direction {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ========================================================
   8. DRESSCODE & TIMELINE SECTION
   ======================================================== */
.dresscode-unified-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.dresscode-unified-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.swatch-col-item {
  opacity: 0;
  transform: translateY(15px) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
}

.dresscode-unified-block.visible .swatch-col-item:nth-child(1) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.2s; }
.dresscode-unified-block.visible .swatch-col-item:nth-child(2) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.35s; }
.dresscode-unified-block.visible .swatch-col-item:nth-child(3) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.5s; }
.dresscode-unified-block.visible .swatch-col-item:nth-child(4) { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.65s; }

.timeline-unified-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

.timeline-unified-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-v-item {
  opacity: 0;
  transform: translateX(-45px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.timeline-unified-block.visible .timeline-v-item:nth-child(1),
.timeline-v-item.visible {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.timeline-unified-block.visible .timeline-v-item:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.38s;
}

.timeline-unified-block.visible .timeline-v-item:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.54s;
}

.timeline-unified-block.visible .timeline-v-item:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.70s;
}

.timeline-unified-block.visible .timeline-v-item:nth-child(5) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.86s;
}

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

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

.guestbook-form .gb-input {
  opacity: 0;
  transform: translateX(-25px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.3s,
              transform var(--reveal-duration) var(--reveal-ease) 0.3s;
}

.card-guestbook-form-box.visible .gb-input {
  opacity: 1;
  transform: translateX(0);
}

.guestbook-form .gb-textarea {
  opacity: 0;
  transform: translateX(-25px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s,
              transform var(--reveal-duration) var(--reveal-ease) 0.45s;
}

.card-guestbook-form-box.visible .gb-textarea {
  opacity: 1;
  transform: translateX(0);
}

.gb-feather-badge {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.6s,
              transform var(--reveal-duration) var(--reveal-ease) 0.6s;
}

.card-guestbook-form-box.visible .gb-feather-badge {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.btn-gb-submit {
  opacity: 0;
  transform: translateY(18px) scale(0.88);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.7s,
              transform var(--reveal-duration) var(--reveal-ease) 0.7s;
}

.card-guestbook-form-box.visible .btn-gb-submit {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Wishes List */
.wishes-list {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
  will-change: opacity, transform;
}

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

.wish-item {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.wishes-list.visible .wish-item:nth-child(1),
.wish-item.visible {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.15s;
}

.wishes-list.visible .wish-item:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.32s;
}

.wishes-list.visible .wish-item:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.48s;
}

.wishes-list.visible .wish-item:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.64s;
}

.wishes-list.visible .wish-item:nth-child(n+5) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
}

/* ========================================================
   10. GIFT BOX SECTION (HỘP QUÀ MỪNG)
   ======================================================== */
.gift-inner-wrap,
.gift-section {
  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;
}

.gift-inner-wrap.visible,
.gift-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.gift-box-trigger {
  opacity: 0;
  transform: translateY(35px) scale(0.9);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
  will-change: opacity, transform;
}

.gift-box-trigger.visible,
.gift-inner-wrap.visible .gift-box-trigger,
.gift-section.visible .gift-box-trigger {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gift-deco-script.gift-script-left-top {
  opacity: 0;
  transform: translateX(-35px) rotate(-8deg);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s,
              transform var(--reveal-duration) var(--reveal-ease) 0.45s;
}

.gift-inner-wrap.visible .gift-script-left-top,
.gift-section.visible .gift-script-left-top {
  opacity: 0.85;
  transform: translateX(0) rotate(-8deg);
}

.gift-deco-script.gift-script-right-top {
  opacity: 0;
  transform: translateX(35px) rotate(7deg);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.6s,
              transform var(--reveal-duration) var(--reveal-ease) 0.6s;
}

.gift-inner-wrap.visible .gift-script-right-top,
.gift-section.visible .gift-script-right-top {
  opacity: 0.85;
  transform: translateX(0) rotate(7deg);
}

.gift-deco-script.gift-script-left-bot {
  opacity: 0;
  transform: translateY(25px) rotate(-6deg);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.75s,
              transform var(--reveal-duration) var(--reveal-ease) 0.75s;
}

.gift-inner-wrap.visible .gift-script-left-bot,
.gift-section.visible .gift-script-left-bot {
  opacity: 0.85;
  transform: translateY(0) rotate(-6deg);
}

.gift-open-prompt {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.85s,
              transform var(--reveal-duration) var(--reveal-ease) 0.85s;
}

.gift-inner-wrap.visible .gift-open-prompt,
.gift-section.visible .gift-open-prompt {
  opacity: 1;
  transform: translateY(0);
}

.gift-thankyou-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.95s,
              transform var(--reveal-duration) var(--reveal-ease) 0.95s;
}

/* Thank-you lives in site-footer (outside gift) — always visible */
.site-footer .gift-thankyou-text {
  opacity: 1;
  transform: none;
}

/* Family Profiles Section reveal */
.family-profiles-section,
.family-profile-row {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.family-profiles-section.visible,
.visible .family-profiles-section,
.family-profile-row.visible,
.visible .family-profile-row {
  opacity: 1;
  transform: translateY(0);
}

.groom-row .family-profile-photo-col {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
}

.groom-row .family-profile-info-col {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
}

.bride-row .family-profile-info-col {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.15s,
              transform var(--reveal-duration) var(--reveal-ease) 0.15s;
}

.bride-row .family-profile-photo-col {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.25s,
              transform var(--reveal-duration) var(--reveal-ease) 0.25s;
}

.family-profile-row.visible .family-profile-photo-col,
.visible .family-profile-row .family-profile-photo-col,
.family-profile-row.visible .family-profile-info-col,
.visible .family-profile-row .family-profile-info-col {
  opacity: 1;
  transform: translateX(0);
}