/* =================================================================
   BOSHOFF TROUE — UX Enhancements
   Scroll-reveal animations, hover polish, back-to-top button.
   ================================================================= */

/* ── Smooth anchor scrolling ─────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Scroll-reveal ───────────────────────────────────────────────── */
.ux-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.ux-reveal-visible {
  opacity: 1;
  transform: none;
}

/* ── Hover polish — buttons ──────────────────────────────────────── */
.wedding-rsvp .rsvp-button,
.venue-button {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wedding-rsvp .rsvp-button:hover,
.venue-button:hover {
  transform: translateY(-2px);
}

/* ── Hover polish — accommodation cards ──────────────────────────── */
.inligting-verblyf .venue-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.inligting-verblyf .venue-card:hover {
  transform: translateY(-4px);
  border-color: #DE989E;
}

/* ── Hover polish — schedule icons ───────────────────────────────── */
.wedding-schedule .schedule-event-icon img {
  transition: transform 0.3s ease;
}

.wedding-schedule .schedule-event:hover .schedule-event-icon img {
  transform: scale(1.08);
}

/* ── Hover polish — colour swatches ──────────────────────────────── */
.swatch-color {
  transition: transform 0.3s ease;
}

.swatch-item:hover .swatch-color {
  transform: translateY(-4px);
}

/* ── Back-to-top button ──────────────────────────────────────────── */
.ux-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--wedding-cream);
  background-color: var(--wedding-maroon);
  color: var(--wedding-cream);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 999;
}

.ux-back-to-top.ux-btt-visible {
  opacity: 0.9;
  visibility: visible;
  transform: translateY(0);
}

.ux-back-to-top:hover {
  opacity: 1;
}

/* ── Respect reduced-motion preferences ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .ux-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}