/* ==========================================================================
   Code Vise - public website scroll animations   (assets/scroll-reveal.css)
   --------------------------------------------------------------------------
   Usage:  <h2 data-scroll="fade-up">...</h2>
   Values: fade-up | fade-down | fade-left | fade-right | zoom-in | fade-in | reveal
   Optional: data-scroll-delay="240" (ms)   data-scroll-duration="900" (ms)

   Isolation: loaded only by public pages; every rule requires the [data-scroll]
   attribute, which only exists on public markup. Admin never loads this file.

   Safety:  elements are hidden ONLY while  html.sr-js  is set (added by a tiny
   inline script in each page's <head>) AND the element has not yet been seen.
   If JavaScript is off/fails, or scroll-reveal.js does not report ready within
   4 seconds, the class is removed and everything is simply visible.
   Direction naming: fade-right = the element travels to the right (enters from
   the left); fade-left = travels to the left (enters from the right).
   ========================================================================== */

[data-scroll] {
  --sr-dur: 700ms;
  --sr-dist: 20px;
  --sr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Waiting state: hidden + offset. Never permanent: it needs .sr-js and no .is-inview */
html.sr-js [data-scroll]:not(.is-inview) { opacity: 0; }
html.sr-js [data-scroll="fade-up"]:not(.is-inview)    { translate: 0 var(--sr-dist); }
html.sr-js [data-scroll="fade-down"]:not(.is-inview)  { translate: 0 calc(var(--sr-dist) * -1); }
html.sr-js [data-scroll="fade-right"]:not(.is-inview) { translate: calc(var(--sr-dist) * -1) 0; }
html.sr-js [data-scroll="fade-left"]:not(.is-inview)  { translate: var(--sr-dist) 0; }
html.sr-js [data-scroll="zoom-in"]:not(.is-inview)    { scale: 0.96; }
html.sr-js [data-scroll="reveal"]:not(.is-inview)     { translate: 0 12px; clip-path: inset(0 0 22% 0); }

/* Animation runs only until the element has finished; afterwards the element's own
   CSS (hover transitions etc.) is completely untouched. */
html.sr-js [data-scroll]:not(.is-done) {
  transition-property: opacity, translate, scale, clip-path !important;
  transition-duration: var(--sr-dur) !important;
  transition-timing-function: var(--sr-ease) !important;
  transition-delay: var(--sr-d, 0ms) !important;
}
html.sr-js [data-scroll].is-inview { opacity: 1; translate: 0 0; scale: 1; }
html.sr-js [data-scroll="reveal"].is-inview { clip-path: inset(0 0 0 0); }
html.sr-js [data-scroll].is-instant { transition: none !important; }

/* Finished: hand the element back to its own CSS (no leftover transform/containing block) */
html.sr-js [data-scroll].is-done { translate: none; scale: none; clip-path: none; }

/* Phones: sideways slides become a gentle rise, and never cause a horizontal scrollbar */
@media (max-width: 700px) {
  html.sr-js [data-scroll="fade-right"]:not(.is-inview),
  html.sr-js [data-scroll="fade-left"]:not(.is-inview) { translate: 0 var(--sr-dist); }
}
html.sr-js body { overflow-x: clip; }

/* Older browsers without the individual translate/scale properties: same effect via transform */
@supports not (translate: 0 0) {
  html.sr-js [data-scroll="fade-up"]:not(.is-inview)    { transform: translateY(var(--sr-dist)); }
  html.sr-js [data-scroll="fade-down"]:not(.is-inview)  { transform: translateY(calc(var(--sr-dist) * -1)); }
  html.sr-js [data-scroll="fade-right"]:not(.is-inview) { transform: translateX(calc(var(--sr-dist) * -1)); }
  html.sr-js [data-scroll="fade-left"]:not(.is-inview)  { transform: translateX(var(--sr-dist)); }
  html.sr-js [data-scroll="zoom-in"]:not(.is-inview)    { transform: scale(0.96); }
  html.sr-js [data-scroll="reveal"]:not(.is-inview)     { transform: translateY(12px); }
  html.sr-js [data-scroll]:not(.is-done) { transition-property: opacity, transform, clip-path !important; }
  html.sr-js [data-scroll].is-inview:not(.is-done) { transform: none; }
  @media (max-width: 700px) {
    html.sr-js [data-scroll="fade-right"]:not(.is-inview),
    html.sr-js [data-scroll="fade-left"]:not(.is-inview) { transform: translateY(var(--sr-dist)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.sr-js [data-scroll] {
    opacity: 1 !important; translate: none !important; scale: none !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
}