/* Shared motion for the sample builds. transform + opacity + clip-path only. produced_by: Nell Ashby */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);}
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity 420ms var(--ease-out) var(--d,0ms),transform 420ms var(--ease-out) var(--d,0ms);}
.js [data-reveal].in{opacity:1;transform:none;}
.js [data-clip]{clip-path:inset(0 0 100% 0);transition:clip-path 600ms var(--ease-out);}
.js [data-clip].in{clip-path:inset(0 0 0 0);}
[data-count]{font-variant-numeric:tabular-nums;display:inline-block;min-width:var(--w,2ch);}
[data-shot]{opacity:0;transition:opacity 500ms var(--ease-out);}
[data-shot].on{opacity:1;}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    [data-parallax]{animation:tp-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%;}
    @keyframes tp-par{from{transform:translateY(-6%) scale(1.12);}to{transform:translateY(6%) scale(1.12);}}
  }
}
[data-parallax]{transform:scale(1.12);}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{transform:none;transition:opacity 200ms linear;}
  .js [data-clip]{clip-path:none;transition:none;}
  [data-parallax]{animation:none;transform:none;}
  [data-shot]{transition:none;}
}
/* before / after compare */
[data-compare]{position:relative;overflow:hidden;--p:50%;touch-action:pan-y;}
[data-compare] img{display:block;width:100%;height:100%;object-fit:cover;}
[data-compare] .top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0);}
[data-compare] .bar{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.2);}
[data-compare] .bar::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 10px rgba(0,0,0,.3);}
[data-compare] input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y;-webkit-appearance:none;appearance:none;}
[data-compare]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
[data-compare] img{-webkit-user-drag:none;pointer-events:none;}
[data-compare] .tagl,[data-compare] .tagr{transition:opacity 160ms ease;}
[data-compare].near-l .tagl,[data-compare].near-r .tagr{opacity:0;}
[data-compare] input:focus-visible ~ .bar{outline:3px solid #FFD21F;outline-offset:2px;}
[data-compare] .tagl,[data-compare] .tagr{position:absolute;bottom:12px;font:700 12px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.6);color:#fff;padding:6px 10px;pointer-events:none;}
[data-compare] .tagl{left:12px}[data-compare] .tagr{right:12px}