/* ============================================================
   QuarkSite Scroll Reveal
   Transition-based. Works with Angular dynamic rendering.
   Handles existing .wow markup and sections without wow classes.
============================================================ */

/* ---- Base hidden state ---------------------------------------- */
.sr-element {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.78s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ---- Variants: initial position before reveal ---------------- */
.sr-element.sr-up    { transform: translateY(52px); }
.sr-element.sr-down  { transform: translateY(-38px); }
.sr-element.sr-left  { transform: translateX(-62px); }
.sr-element.sr-right { transform: translateX(62px); }
.sr-element.sr-zoom  { transform: scale(0.87) translateY(26px); }
.sr-element.sr-fade  { /* opacity only, no transform shift */ }

/* ---- Revealed state ------------------------------------------ */
.sr-element.sr-visible {
  opacity: 1;
  transform: none;
}

/* ---- Stagger delay helpers ----------------------------------- */
.sr-element[data-sr-delay="130"] { transition-delay: 130ms; }
.sr-element[data-sr-delay="260"] { transition-delay: 260ms; }
.sr-element[data-sr-delay="390"] { transition-delay: 390ms; }
.sr-element[data-sr-delay="520"] { transition-delay: 520ms; }
.sr-element[data-sr-delay="650"] { transition-delay: 650ms; }

/* ---- Respect prefers-reduced-motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sr-element {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}