/* ============================================================
   Inland Web Services — shared demo enhancement layer
   Drop-in: <link rel="stylesheet" href="../_shared/enhance.css">
            <script src="../_shared/enhance.js"></script>
   Adds: scroll-reveal, scroll progress, header-on-scroll,
         and a draggable before/after slider (.ba).
   Per-demo accent: set --enh-accent on :root (optional).
   ============================================================ */

/* ---- top scroll-progress bar ---- */
.enh-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:var(--enh-accent,#ff5a1f);pointer-events:none;transition:width .1s linear}

/* ---- scroll reveal (motion-safe) ---- */
@media (prefers-reduced-motion:no-preference){
  html.enh-js .enh-reveal{opacity:0;transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  html.enh-js .enh-reveal.enh-in{opacity:1;transform:none}

  /* Fail-safe. A pre-hidden block is invisible until IntersectionObserver
     adds .enh-in. If that never fires — observer edge case, a scroll
     container we didn't anticipate, a browser quirk — the section stays
     blank forever and the page looks broken. These are sales demos, so
     content must never depend on JS to become visible.

     The animation sits in delay (no backwards fill) for 4s, so the normal
     reveal transition runs untouched. After 4s it forces the same end
     state the reveal was going to produce anyway. */
  html.enh-js .enh-reveal{animation:enh-failsafe 1ms linear 4s forwards}
  @keyframes enh-failsafe{to{opacity:1;transform:none}}
}

/* ---- subtle header shadow once scrolled ---- */
.enh-stuck{box-shadow:0 8px 30px rgba(0,0,0,.14)}

/* ---- before / after comparison slider ---- */
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:#0a0c14;
  --pos:50%;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;transform:translateX(-50%);
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.28);cursor:ew-resize;touch-action:none}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:1.15rem;
  font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.ba-grip::before{content:"\21C6"}           /* ⇆ */
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible .ba-grip{box-shadow:0 0 0 4px rgba(255,255,255,.65),0 6px 20px rgba(0,0,0,.4)}
.ba-tag{position:absolute;top:12px;padding:.32rem .72rem;border-radius:999px;font-size:.72rem;
  font-weight:800;letter-spacing:.09em;background:rgba(0,0,0,.62);color:#fff;pointer-events:none}
.ba-tag--before{left:12px}
.ba-tag--after{right:12px}
.ba-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);pointer-events:none;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.5);
  padding:.3rem .8rem;border-radius:999px;transition:opacity .4s;white-space:nowrap}
.ba.enh-touched .ba-hint{opacity:0}

/* ---- click-to-expand lightbox ---- */
[data-lightbox] img{cursor:zoom-in}
.enh-lb{position:fixed;inset:0;z-index:10000;display:none;place-items:center;padding:4vw;
  background:rgba(6,8,14,.93);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.enh-lb.enh-lb-open{display:grid}
.enh-lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:92vw}
.enh-lb-img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:8px;
  box-shadow:0 30px 90px rgba(0,0,0,.65)}
.enh-lb-cap{color:#cfd3e6;font-size:.85rem;text-align:center;max-width:64ch;line-height:1.4}
.enh-lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:none;background:rgba(255,255,255,.13);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s}
.enh-lb-btn:hover{background:rgba(255,255,255,.26)}
.enh-lb-prev{left:2.5vw}
.enh-lb-next{right:2.5vw}
.enh-lb-close{top:3vh;right:3vw;transform:none;width:46px;height:46px;font-size:1.5rem}

/* ---- category filter ---- */
.enh-filter{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:30px}
.enh-filter button{padding:.5rem 1.1rem;border-radius:999px;border:1px solid rgba(128,128,128,.35);
  background:transparent;color:inherit;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.enh-filter button:hover{border-color:var(--enh-accent,#888)}
.enh-filter button[aria-pressed="true"]{background:var(--enh-accent,#111);border-color:transparent;color:#fff}
.enh-hidden{display:none!important}