/* =====================================================================
   The Laser Lab NY — Version 2 image animations
   Scroll-triggered entrance effects (IntersectionObserver in animations.js).
   Nothing is hidden unless JavaScript has added .js-anim to <html>, so the
   site stays fully visible without JavaScript or with reduced motion.
   Animations use fill-mode "backwards": once an effect ends, the image
   returns to its normal style, so it can never be left invisible.
   ===================================================================== */

:root{
  --a-dur:1.2s;
  --ease-out:cubic-bezier(.22,.61,.36,1);      /* smooth, luxury feel */
  --ease-wix:cubic-bezier(.25,.46,.45,.94);   /* Wix fade/shape curve */
}

/* waiting state (before the element scrolls into view) */
.js-anim [data-anim]:not(.in){opacity:0!important}

/* running state */
.js-anim [data-anim].in{
  animation-duration:var(--a-dur);
  animation-timing-function:var(--ease-out);
  animation-fill-mode:backwards;
  animation-delay:var(--d,0ms);
}

/* ---------- effects ---------- */

/* Shutters: vertical slats open (original Wix "Shutters") */
.js-anim [data-anim="shutters"].in{animation-name:a-shutters;animation-timing-function:cubic-bezier(.47,0,.745,.715)}
@keyframes a-shutters{
  0%{clip-path:polygon(0% 0%,0% 100%,0% 100%,0% 0%,8% 0%,8% 100%,8% 100%,8% 0%,16% 0%,16% 100%,16% 100%,16% 0%,25% 0%,25% 100%,25% 100%,25% 0%,33% 0%,33% 100%,33% 100%,33% 0%,41% 0%,41% 100%,41% 100%,41% 0%,50% 0%,50% 100%,50% 100%,50% 0%,58% 0%,58% 100%,58% 100%,58% 0%,66% 0%,66% 100%,66% 100%,66% 0%,75% 0%,75% 100%,75% 100%,75% 0%,83% 0%,83% 100%,83% 100%,83% 0%,91% 0%,91% 100%,91% 100%,91% 0%)}
  100%{clip-path:polygon(0% 0%,0% 100%,8% 100%,8% 0%,8% 0%,8% 100%,18% 100%,18% 0%,16% 0%,16% 100%,29% 100%,29% 0%,25% 0%,25% 100%,41% 100%,41% 0%,33% 0%,33% 100%,55% 100%,55% 0%,41% 0%,41% 100%,70% 100%,70% 0%,50% 0%,50% 100%,87% 100%,87% 0%,58% 0%,58% 100%,105% 100%,105% 0%,66% 0%,66% 100%,124% 100%,124% 0%,75% 0%,75% 100%,145% 100%,145% 0%,83% 0%,83% 100%,168% 100%,168% 0%,91% 0%,91% 100%,191% 100%,191% 0%)}
}

/* Shape: circular reveal with fade (original Wix "Shape") */
.js-anim [data-anim="shape"].in{animation-name:a-shape;animation-timing-function:var(--ease-wix);animation-duration:1.4s}
@keyframes a-shape{
  0%{clip-path:circle(0%);opacity:0}
  80%{opacity:var(--o,1)}
  100%{clip-path:circle(75%);opacity:var(--o,1)}
}

/* Float: rises gently into place (original Wix "Float") */
.js-anim [data-anim="float"].in{animation-name:a-float;animation-timing-function:cubic-bezier(.445,.05,.55,.95)}
@keyframes a-float{
  0%{opacity:0;transform:translateY(60px)}
  100%{opacity:var(--o,1);transform:none}
}

/* Shape + float together (Home "Free Consultation" photo, as on Wix) */
.js-anim [data-anim="shape-float"].in{animation-name:a-shape-float;animation-timing-function:var(--ease-wix);animation-duration:1.4s}
@keyframes a-shape-float{
  0%{clip-path:circle(0%);opacity:0;transform:translateY(60px)}
  80%{opacity:1}
  100%{clip-path:circle(75%);opacity:1;transform:none}
}

/* Flip: rotates into view on its vertical axis (replaces Wix's 360° "Spin") */
.js-anim [data-anim="flip"].in{animation-name:a-flip;animation-duration:1.3s}
@keyframes a-flip{
  0%{opacity:0;transform:perspective(900px) rotateY(-75deg) scale(.92)}
  45%{opacity:1}
  100%{opacity:var(--o,1);transform:perspective(900px) rotateY(0) scale(1)}
}

/* Wink: opens from a horizontal line (original Wix "Wink") */
.js-anim [data-anim="wink"].in{animation-name:a-wink;animation-timing-function:var(--ease-wix)}
@keyframes a-wink{
  0%{opacity:0;clip-path:polygon(0% 50%,100% 50%,100% 50%,0% 50%);transform:scaleY(0)}
  30%{opacity:1}
  100%{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);transform:scaleY(1)}
}

/* Reveal: wipes upward from the bottom edge (original Wix "Reveal") */
.js-anim [data-anim="reveal"].in{animation-name:a-reveal;animation-timing-function:cubic-bezier(.645,.045,.355,1)}
@keyframes a-reveal{
  0%{clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%)}
  100%{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
}

/* Fold: unfolds downward from the top edge (original Wix "Fold") */
.js-anim [data-anim="fold"].in{animation-name:a-fold;animation-timing-function:var(--ease-wix);transform-origin:50% 0}
@keyframes a-fold{
  0%{opacity:0;transform:perspective(800px) rotateX(-90deg)}
  40%{opacity:1}
  100%{opacity:1;transform:perspective(800px) rotateX(0)}
}

/* Blur: comes into focus (original Wix "Blur") */
.js-anim [data-anim="blur"].in{animation-name:a-blur;animation-duration:1.6s;animation-timing-function:cubic-bezier(.47,0,.745,.715)}
@keyframes a-blur{
  0%{opacity:0;filter:blur(6px)}
  100%{opacity:1;filter:blur(0)}
}

/* Slide-in from the left / right / bottom (new) */
.js-anim [data-anim="slide-left"].in{animation-name:a-slide-left}
.js-anim [data-anim="slide-right"].in{animation-name:a-slide-right}
.js-anim [data-anim="slide-up"].in{animation-name:a-slide-up}
@keyframes a-slide-left{0%{opacity:0;transform:translateX(-70px)}100%{opacity:var(--o,1);transform:none}}
@keyframes a-slide-right{0%{opacity:0;transform:translateX(70px)}100%{opacity:var(--o,1);transform:none}}
@keyframes a-slide-up{0%{opacity:0;transform:translateY(50px)}100%{opacity:var(--o,1);transform:none}}

/* Zoom: gently scales into place (new) */
.js-anim [data-anim="zoom"].in{animation-name:a-zoom;animation-duration:1.3s}
@keyframes a-zoom{0%{opacity:0;transform:scale(.86)}100%{opacity:var(--o,1);transform:none}}

/* Settle: page banners fade in while easing back from a slight zoom (new) */
.js-anim [data-anim="settle"].in{animation-name:a-settle;animation-duration:1.8s}
@keyframes a-settle{0%{opacity:0;transform:scale(1.06)}100%{opacity:var(--o,1);transform:none}}

/* ---------- hover (desktop pointers only; never needed to see content) ---------- */
@media (hover:hover) and (pointer:fine){
  img.hv{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),filter .6s var(--ease-out)}
  img.hv:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 30px -14px rgba(19,22,28,.35)}
  img.hv-logo{transition:transform .5s var(--ease-out),filter .5s var(--ease-out)}
  img.hv-logo:hover{transform:scale(1.07)}
  .ig img{transition:transform .7s var(--ease-out)}
  .ig{overflow:hidden;transition:box-shadow .5s var(--ease-out)}
  .ig:hover img,.ig:focus-visible img{transform:scale(1.06)}
  .ig:hover,.ig:focus-visible{box-shadow:0 12px 26px -12px rgba(19,22,28,.4)}
}

/* ---------- accessibility / safety ---------- */
@media (prefers-reduced-motion:reduce){
  .js-anim [data-anim]:not(.in){opacity:1!important}
  .js-anim [data-anim].in{animation:none!important}
  img.hv,img.hv-logo,.ig img{transition:none!important}
  img.hv:hover,img.hv-logo:hover,.ig:hover img{transform:none!important}
}
@media print{
  .js-anim [data-anim]:not(.in){opacity:1!important}
}