/* การเผยเนื้อหาตอนเลื่อนถึง
   ────────────────────────────────────────────────────────────────
   ทุกกฎในไฟล์นี้อยู่ใต้ [data-reveal] ซึ่งสคริปต์เป็นคนติดให้
   ถ้าสคริปต์ไม่ทำงาน ไม่มีป้ายนี้ ทุกอย่างจึงแสดงตามปกติทันที
   เป็นการ์ดแต่งงาน หน้าว่างเปล่าคือสิ่งที่รับไม่ได้ */

[data-reveal] .reveal-item {
  transition:
    opacity .85s cubic-bezier(.22,.7,.25,1) var(--reveal-delay, 0ms),
    transform .85s cubic-bezier(.22,.7,.25,1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal] .reveal-item:not(.is-in) {
  opacity: 0;
  transform: translateY(26px);
}

[data-reveal] .reveal-item.is-in {
  opacity: 1;
  transform: none;
}

/* ภาพใหญ่ให้ขยายเข้ามาเล็กน้อยด้วย เหมือนค่อย ๆ วางลงบนหน้ากระดาษ */
[data-reveal] .yuki-portrait:not(.is-in),
[data-reveal] .venue-map-card:not(.is-in),
[data-reveal] .invitation-slideshow:not(.is-in),
[data-reveal] .gallery-viewer:not(.is-in) {
  transform: translateY(32px) scale(.975);
}

/* ชื่อบ่าวสาวเป็นหัวใจของหน้า ให้มาช้ากว่าและนุ่มกว่าชิ้นอื่น */
[data-reveal] .names {
  transition-duration: 1.15s;
}
[data-reveal] .names:not(.is-in) {
  transform: translateY(18px);
}

/* แถวกำหนดการเลื่อนมาจากทางซ้ายเล็กน้อย ให้รู้สึกเหมือนไล่อ่านลงมา */
[data-reveal] .event:not(.is-in) {
  transform: translateY(20px) translateX(-10px);
}

/* ของที่มี transform เป็นของตัวเองอยู่แล้วห้ามทับ ไม่งั้นการจัดวางจะเพี้ยน */
[data-reveal] .event-art {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .reveal-item,
  [data-reveal] .reveal-item:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}