/* ============================================================
   lu-social motion layer — lu-motion.css
   Same stylistic improvements as rootworth, adapted to lu-social's
   markup + palette. Scroll reveals, image framing, and a lightbox.
   (No radio / dropdown dock / hero-subtitle / nav-underline here —
   lu-social has no radio or submenus, and its nav already carries
   its own hover treatment.)
   All motion gated behind prefers-reduced-motion + the `.rw-motion`
   JS flag — if JS never runs, nothing is hidden.
   Source of truth: domain/lu_social/theme/lu-motion.css
   ============================================================ */

/* ----- Scroll reveal (same settings as rootworth) ---------- */
html.rw-motion .rw-reveal {
  opacity: 0;
  transform: translateY(44px) scale(0.985);
  transition:
    opacity 1.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rw-delay, 0ms);
  will-change: opacity, transform;
}

html.rw-motion .rw-reveal.rw-in {
  opacity: 1;
  transform: none;
}

/* ----- Unified image framing + hover zoom ------------------ */
.entry-content .wp-block-image {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(42, 52, 57, 0.12);
}

.entry-content .wp-block-image img {
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.entry-content .wp-block-image:hover img {
  transform: scale(1.04);
}

/* ----- Lightbox (click image to view large) --------------- */
.rw-zoomable {
  cursor: zoom-in;
}

.rw-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(42, 52, 57, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  cursor: zoom-out;
}

.rw-lightbox.rw-open {
  opacity: 1;
  pointer-events: auto;
}

.rw-lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  transform: scale(0.95);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rw-lightbox.rw-open img {
  transform: scale(1);
}

/* ----- Footer social navigation ---------------------------- */
.rw-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(42, 52, 57, 0.15);
}

.rw-social a {
  color: var(--slate, #2A3439);
  line-height: 0;
  background: none;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.rw-social a:hover,
.rw-social a:focus {
  color: var(--cinnabar, #A04020);
  transform: translateY(-2px);
}

.rw-social svg {
  display: block;
}

/* ----- Reduced-motion: hard off --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.rw-motion .rw-reveal,
  html.rw-motion .rw-reveal.rw-in {
    opacity: inherit;
    transform: none;
    transition: none;
  }
  .entry-content .wp-block-image img,
  .rw-lightbox,
  .rw-lightbox img {
    transition: none;
  }
}