/* ========================================================
   SCROLL REVEAL ANIMATIONS — PINK LOTUS (thiep-cuoi-4)
   Fade + slide L/R/T when each block enters the viewport
   ======================================================== */

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

/* Base: mọi .reveal-block ẩn cho đến khi có .visible */
.reveal-block,
.reveal-item {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

.reveal-block.reveal-left,
.reveal-item.reveal-left {
  transform: translateX(-55px);
}

.reveal-block.reveal-right,
.reveal-item.reveal-right {
  transform: translateX(55px);
}

.reveal-block.reveal-up,
.reveal-item.reveal-up {
  transform: translateY(40px);
}

.reveal-block.reveal-scale,
.reveal-item.reveal-scale {
  transform: translateY(28px) scale(0.92);
}

.reveal-block.reveal-from-top,
.reveal-item.reveal-from-top {
  transform: translateY(-45px);
}

.reveal-block.visible,
.reveal-item.visible {
  opacity: 1;
  transform: none;
}

/* Stagger children inside a visible block */
.reveal-block.visible .reveal-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-block.visible .reveal-stagger > *:nth-child(2) { transition-delay: 0.25s; }
.reveal-block.visible .reveal-stagger > *:nth-child(3) { transition-delay: 0.4s; }
.reveal-block.visible .reveal-stagger > *:nth-child(4) { transition-delay: 0.55s; }
.reveal-block.visible .reveal-stagger > *:nth-child(5) { transition-delay: 0.7s; }
.reveal-block.visible .reveal-stagger > *:nth-child(6) { transition-delay: 0.85s; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.reveal-block.visible .reveal-stagger > *,
.reveal-stagger.visible > * {
  opacity: 1;
  transform: none;
}

/* Nội dung trong các card chạy xen kẽ trái / phải / trên xuống. */
.ceremony-invite-card.reveal-sequence > *,
.reception-invite-card.reveal-sequence > *,
.gallery-block-c2.reveal-sequence > * {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.ceremony-invite-card.reveal-sequence > :nth-child(1),
.reception-invite-card.reveal-sequence > :nth-child(1),
.gallery-block-c2.reveal-sequence > :nth-child(1) {
  transform: translateX(-55px);
}

.ceremony-invite-card.reveal-sequence > :nth-child(2),
.reception-invite-card.reveal-sequence > :nth-child(2),
.gallery-block-c2.reveal-sequence > :nth-child(2) {
  transform: translateX(55px);
}

.ceremony-invite-card.reveal-sequence > :nth-child(3),
.gallery-block-c2.reveal-sequence > :nth-child(3) {
  transform: translateY(-45px);
}

.ceremony-invite-card.reveal-sequence > :nth-child(4),
.gallery-block-c2.reveal-sequence > :nth-child(4) {
  transform: translateY(42px);
}

.ceremony-invite-card.reveal-sequence > :nth-child(5) {
  transform: translateX(55px);
}

.ceremony-invite-card.reveal-sequence.visible > *,
.reception-invite-card.reveal-sequence.visible > *,
.gallery-block-c2.reveal-sequence.visible > * {
  opacity: 1;
  transform: none;
}

.ceremony-invite-card.reveal-sequence.visible > :nth-child(1),
.reception-invite-card.reveal-sequence.visible > :nth-child(1),
.gallery-block-c2.reveal-sequence.visible > :nth-child(1) { transition-delay: 0.1s; }

.ceremony-invite-card.reveal-sequence.visible > :nth-child(2),
.reception-invite-card.reveal-sequence.visible > :nth-child(2),
.gallery-block-c2.reveal-sequence.visible > :nth-child(2) { transition-delay: 0.25s; }

.ceremony-invite-card.reveal-sequence.visible > :nth-child(3),
.gallery-block-c2.reveal-sequence.visible > :nth-child(3) { transition-delay: 0.4s; }

.ceremony-invite-card.reveal-sequence.visible > :nth-child(4),
.gallery-block-c2.reveal-sequence.visible > :nth-child(4) { transition-delay: 0.55s; }

.ceremony-invite-card.reveal-sequence.visible > :nth-child(5) { transition-delay: 0.7s; }

/* Album thumbs: trái / phải xen kẽ */
.album-grid-2x2.reveal-block .album-thumb-item,
.album-grid-2x2 .album-thumb-item {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.album-grid-2x2 .album-thumb-item:nth-child(odd) {
  transform: translateX(-70px) scale(0.94);
}

.album-grid-2x2 .album-thumb-item:nth-child(even) {
  transform: translateX(70px) scale(0.94);
}

.album-grid-2x2.visible .album-thumb-item:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.album-grid-2x2.visible .album-thumb-item:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}
.album-grid-2x2.visible .album-thumb-item:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.55s;
}
.album-grid-2x2.visible .album-thumb-item:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: 0.75s;
}

/* Timeline rows slide from left when parent visible */
.timeline-c3-wrap .timeline-row-c3 {
  opacity: 0;
  transform: translateX(-45px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.timeline-block-c3.visible .timeline-row-c3:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.15s; }
.timeline-block-c3.visible .timeline-row-c3:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.35s; }
.timeline-block-c3.visible .timeline-row-c3:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.55s; }
.timeline-block-c3.visible .timeline-row-c3:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.75s; }
.timeline-block-c3.visible .timeline-row-c3:nth-child(5),
.timeline-block-c3.visible .timeline-row-c3:nth-child(n+6) { opacity: 1; transform: none; transition-delay: 0.95s; }

/* Countdown boxes */
.countdown-grid-c3 .countdown-box-c3 {
  opacity: 0;
  transform: translateY(30px) scale(0.88);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.countdown-block-c3.visible .countdown-box-c3:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.15s; }
.countdown-block-c3.visible .countdown-box-c3:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.3s; }
.countdown-block-c3.visible .countdown-box-c3:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.45s; }
.countdown-block-c3.visible .countdown-box-c3:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.6s; }

/* Parents L/R */
.parents-grid-c1.reveal-block .parents-col:first-child {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) 0.2s,
    transform var(--reveal-duration) var(--reveal-ease) 0.2s;
}
.parents-grid-c1.reveal-block .parents-col:last-child {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) 0.35s,
    transform var(--reveal-duration) var(--reveal-ease) 0.35s;
}
.parents-grid-c1.reveal-block.visible .parents-col:first-child,
.parents-grid-c1.reveal-block.visible .parents-col:last-child,
.parents-grid-c1.visible .parents-col {
  opacity: 1;
  transform: none;
}

/* Couple names L/R — chỉ opacity để không phá layout transform sẵn có */
.couple-names-c1.reveal-block .couple-person:first-child .full-name,
.couple-names-c1.reveal-block .couple-person:last-child .full-name,
.couple-names-c1.reveal-block .amp-symbol {
  opacity: 0;
  transition: opacity var(--reveal-duration) var(--reveal-ease);
}
.couple-names-c1.reveal-block.visible .couple-person:first-child .full-name,
.couple-names-c1.visible .couple-person:first-child .full-name { opacity: 1; transition-delay: 0.2s; }
.couple-names-c1.reveal-block.visible .amp-symbol,
.couple-names-c1.visible .amp-symbol { opacity: 1; transition-delay: 0.35s; }
.couple-names-c1.reveal-block.visible .couple-person:last-child .full-name,
.couple-names-c1.visible .couple-person:last-child .full-name { opacity: 1; transition-delay: 0.5s; }

/* Intro names: fade cùng block cha — không ẩn riêng để tránh bị kẹt opacity:0 */

/* Wish items */
.wish-item-c3 {
  opacity: 0;
  transform: translateX(-35px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}
.wishes-stream-c3.visible .wish-item-c3,
.wish-item-c3.visible {
  opacity: 1;
  transform: none;
}
.wishes-stream-c3.visible .wish-item-c3:nth-child(1) { transition-delay: 0.1s; }
.wishes-stream-c3.visible .wish-item-c3:nth-child(2) { transition-delay: 0.25s; }
.wishes-stream-c3.visible .wish-item-c3:nth-child(3) { transition-delay: 0.4s; }
.wishes-stream-c3.visible .wish-item-c3:nth-child(4) { transition-delay: 0.55s; }
.wishes-stream-c3.visible .wish-item-c3:nth-child(n+5) { transition-delay: 0.7s; }

/* Dresscode swatches */
.dresscode-palette .dresscode-item {
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}
.dresscode-block-c2.visible .dresscode-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.2s; }
.dresscode-block-c2.visible .dresscode-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.35s; }
.dresscode-block-c2.visible .dresscode-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.5s; }
.dresscode-block-c2.visible .dresscode-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.65s; }

/* Couple portraits: ảnh / chữ trượt L-R khi scroll */
.couple-sides-block .couple-side-photo,
.couple-sides-block .couple-side-info {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.couple-sides-block .couple-side-row--groom .couple-side-photo {
  transform: translateX(-70px) scale(0.94);
}

.couple-sides-block .couple-side-row--groom .couple-side-info {
  transform: translateX(55px);
}

.couple-sides-block .couple-side-row--bride .couple-side-info {
  transform: translateX(-55px);
}

.couple-sides-block .couple-side-row--bride .couple-side-photo {
  transform: translateX(70px) scale(0.94);
}

.couple-sides-block.visible .couple-side-row--groom .couple-side-photo {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.couple-sides-block.visible .couple-side-row--groom .couple-side-info {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}

.couple-sides-block.visible .couple-side-row--bride .couple-side-info {
  opacity: 1;
  transform: none;
  transition-delay: 0.55s;
}

.couple-sides-block.visible .couple-side-row--bride .couple-side-photo {
  opacity: 1;
  transform: none;
  transition-delay: 0.75s;
}

.couple-sides-block.visible .couple-side-row--groom .couple-side-name {
  transition-delay: 0.55s;
}

.couple-sides-block.visible .couple-side-row--bride .couple-side-name {
  transition-delay: 0.95s;
}

.couple-sides-block .couple-side-name {
  opacity: 0;
  transform: translateY(18px) scale(0.92);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.couple-sides-block.visible .couple-side-name {
  opacity: 1;
  transform: none;
}

/* Note: không tắt animation theo prefers-reduced-motion —
   thiệp cưới chủ đích dùng scroll reveal làm hiệu ứng chính. */