/* Elements toggled with the hidden attribute stay hidden even when a class sets display */
[hidden]{display:none!important}

/* Shared motion for SPRED SOLUTIONS samples. Everything is opt-in via data attributes and
   switches off for visitors who prefer reduced motion. */
html.m-ready [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.m-ready [data-reveal="fade"]{transform:none}
html.m-ready [data-reveal="left"]{transform:translateX(-36px)}
html.m-ready [data-reveal="right"]{transform:translateX(36px)}
html.m-ready [data-reveal="scale"]{transform:scale(.94)}
html.m-ready [data-reveal].in{opacity:1;transform:none}

/* Image wipe: the frame uncovers, the photo settles from a slight zoom */
.m-img{position:relative;overflow:hidden}
.m-img img{display:block;width:100%;height:100%;object-fit:cover}
/* The clip sits on the photo, not the frame: a fully clipped frame never registers as on screen */
html.m-ready .m-img img{clip-path:inset(0 0 100% 0);transform:scale(1.18);transition:clip-path 1.2s cubic-bezier(.77,0,.18,1),transform 1.8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.m-ready .m-img.in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* Headline words rise in one after another */
.m-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.m-words .w>span{display:inline-block}
html.m-ready .m-words .w>span{transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms + var(--d,0ms))}
html.m-ready .m-words.in .w>span{transform:none}

/* Hover zoom for photo cards */
.zoom{overflow:hidden}
.zoom img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img,a:hover .zoom img,a:focus-visible .zoom img,
html.m-ready .m-img.in.zoom:hover img,html.m-ready a:hover .m-img.in.zoom img{transform:scale(1.06)}

/* Page fade between pages of the same sample */
html.m-ready body{animation:m-in .6s ease both}
html.m-leave body{opacity:0;transition:opacity .28s ease}
@keyframes m-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html.m-ready [data-reveal],html.m-ready .m-img img,html.m-ready .m-words .w>span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html.m-ready body{animation:none}
  .zoom img{transition:none}
}