/*! premium.css — reusable world-class micro-interactions.
 *  Pairs with premium.js. Everything is driven by data attributes; the module
 *  carries no brand knowledge, only behaviour. v1.0.0 */

/* ---------------------------------------------------------------- before / after */
.pba{position:relative;overflow:hidden;isolation:isolate;--p:50%;
  cursor:default;user-select:none;touch-action:pan-y}
.pba > .pba-layer{position:absolute;inset:0}
.pba > .pba-layer img,.pba > .pba-layer video{width:100%;height:100%;object-fit:cover;display:block}
.pba > .pba-after{clip-path:inset(0 0 0 var(--p));will-change:clip-path}
/* the almost-invisible slider: a hairline that only becomes a control on approach */
.pba-hairline{position:absolute;top:0;bottom:0;left:var(--p);width:1px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 12%,rgba(255,255,255,.55) 88%,rgba(255,255,255,0));
  opacity:.42;transition:opacity .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s}
.pba.ba-live .pba-hairline{opacity:.95;box-shadow:0 0 22px rgba(255,255,255,.32)}
.pba-grip{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%) scale(.82);z-index:5;
  width:44px;height:44px;border-radius:50%;pointer-events:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;
  opacity:0;transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1)}
.pba.ba-live .pba-grip{opacity:.9;transform:translate(-50%,-50%) scale(1)}
.pba-tag{position:absolute;bottom:18px;z-index:4;padding:5px 11px;border-radius:1px;pointer-events:none;
  font-family:var(--f-mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(4,32,60,.55);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.pba.ba-live .pba-tag{opacity:1;transform:none}
.pba-tag.is-before{left:18px}
.pba-tag.is-after{right:18px;background:rgba(229,26,56,.85)}
.pba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;z-index:6;cursor:ew-resize}
.pba-range:focus-visible + .pba-hairline{opacity:1;box-shadow:0 0 0 2px var(--red,#E51A38)}
.pba-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-family:var(--f-mono,monospace);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);transition:opacity .5s}
.pba.ba-live .pba-hint{opacity:0}

/* ---------------------------------------------------------------- desaturate on scroll */
[data-desaturate]{--sat:1}
[data-desaturate] .desat{filter:saturate(calc(var(--sat) * 100%));
  transition:filter .12s linear,opacity .4s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){[data-desaturate] .desat{filter:none}}

/* ---------------------------------------------------------------- brand hover */
[data-brand-hover] [data-brand]{--brand:currentColor;transition:color .22s cubic-bezier(.22,.61,.36,1),
  border-color .22s cubic-bezier(.22,.61,.36,1),background .22s cubic-bezier(.22,.61,.36,1),
  transform .22s cubic-bezier(.22,.61,.36,1)}
[data-brand-hover] [data-brand]:hover,[data-brand-hover] [data-brand]:focus-visible{
  color:#fff;background:var(--brand);border-color:var(--brand);transform:translateY(-2px)}

/* ---------------------------------------------------------------- reveal */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].in{opacity:1;transform:none}
[data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}