/* Uptown Cedar image-interaction stack — Discover follower + lightbox.
   This is the owner-approved harness stack (a faithful port of the proven
   Crescent Blinds app/redesign-src/site.js + site.css), integrated into the
   real site as ONE unit, loaded outside React. Classes are namespaced .uc-*
   so they can never collide with any earlier styling. The lightbox does NO
   body-scroll manipulation: it is a fixed opaque full-viewport overlay, so the
   page never moves and the scroll position is preserved on close.

   The behaviour and look are identical to the harness the owner physically
   passed: Uptown green circle, white "Discover" text, smooth follower, and
   X / backdrop / Escape close. */

:root { --uc-green: hsl(150, 74%, 10%); --uc-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* Enlargeable images are always clickable, follower or not (progressive
   enhancement): if the follower never loads, this cursor still signals it. */
[data-enlargeable="true"] { cursor: pointer; }

/* ---- Discover cursor follower (Uptown green, white text) ---- */
.uc-discover {
  position: fixed; left: 0; top: 0; width: 96px; height: 96px; border-radius: 50%;
  background: var(--uc-green);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 40px -12px rgba(4, 40, 22, 0.55);
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", system-ui, sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: #ffffff; text-indent: 0.28em;
  pointer-events: none; z-index: 70; opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 280ms var(--uc-ease), transform 280ms var(--uc-ease);
  will-change: left, top;
}
.uc-discover.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.uc-hide, .uc-hide * { cursor: none; }

/* ---- Lightbox: fixed opaque overlay, no body-scroll locking ---- */
.uc-lightbox {
  position: fixed; inset: 0; background: rgba(4, 20, 12, 0.95);
  display: none; z-index: 60; align-items: center; justify-content: center; padding: 48px;
}
.uc-lightbox.open { display: flex; }
.uc-lightbox img { max-width: min(1100px, 100%); max-height: 100%; display: block;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7); }
.uc-lightbox button {
  position: absolute; top: 24px; right: 24px; background: none;
  border: 1px solid rgba(255, 255, 255, 0.35); color: hsl(40, 30%, 98%);
  padding: 10px 16px; font-family: "Inter", system-ui, sans-serif; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
}
.uc-lightbox button:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 620px) {
  .uc-lightbox { padding: 16px; }
  .uc-lightbox button { top: 10px; right: 10px; }
}