/* ============================================================================
   SmartRoots — motion states for the vanilla-JS port
   ---------------------------------------------------------------------------
   The React site animated through Framer Motion, which wrote inline styles and
   so needed no CSS. These rules are the stylesheet half of assets/js/site.js:
   JS only adds classes (.is-in, .is-open, .rv-done); timing and easing live
   here, on the same tokens as the rest of the site.

   Every state is gated on `html.js`, so without JavaScript nothing is hidden,
   and every animation is switched off under prefers-reduced-motion.
   ========================================================================= */

[hidden] { display: none !important; }

/* --- Reveal (Motion.tsx <Reveal>) ----------------------------------------- */
html.js [data-reveal]:not(.rv-done) {
  opacity: 0;
  transform: translate3d(var(--rv-x, 0px), var(--rv-y, 0px), 0);
  transition:
    opacity var(--rv-dur, .62s) var(--ease-out-expo) var(--rv-delay, 0s),
    transform var(--rv-dur, .62s) var(--ease-out-expo) var(--rv-delay, 0s);
}
html.js [data-reveal="up"]    { --rv-y: var(--rv-dist, 22px); }
html.js [data-reveal="down"]  { --rv-y: calc(var(--rv-dist, 22px) * -1); }
html.js [data-reveal="left"]  { --rv-x: var(--rv-dist, 22px); }
html.js [data-reveal="right"] { --rv-x: calc(var(--rv-dist, 22px) * -1); }
html.js [data-reveal].is-in:not(.rv-done) { opacity: 1; transform: translate3d(0, 0, 0); }

/* --- Stagger (Motion.tsx <Stagger>/<StaggerItem>) ------------------------- */
html.js [data-stagger-item]:not(.rv-done) {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .6s var(--ease-out-expo) calc(var(--st-delay, 0s) + var(--i, 0) * var(--st-gap, .075s)),
    transform .6s var(--ease-out-expo) calc(var(--st-delay, 0s) + var(--i, 0) * var(--st-gap, .075s));
}
html.js [data-stagger].is-in > [data-stagger-item]:not(.rv-done) { opacity: 1; transform: translate3d(0, 0, 0); }

/* --- Load-time entrances (framer initial/animate on mount) ---------------- */
html.js [data-rise] {
  animation: sr-rise var(--rise-dur, .7s) var(--ease-out-expo) var(--rise-delay, 0s) both;
}
html.js [data-rise="rise14"]  { animation-name: sr-rise14; }
html.js [data-rise="fade"]    { animation-name: sr-fade; }
html.js [data-rise="scale96"] { animation-name: sr-scale96; }
html.js [data-rise="scale94"] { animation-name: sr-scale94; }
html.js [data-rise="card"]    { animation-name: sr-card; }
html.js [data-rise="line"]    { animation-name: sr-line; }
html.js [data-rise="slide"]   { animation-name: sr-slide; }

@keyframes sr-rise    { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes sr-rise14  { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes sr-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sr-scale96 { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sr-scale94 { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sr-card    { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sr-line    { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes sr-slide   { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: none; } }

/* --- Mega menu (Header.tsx AnimatePresence) -------------------------------- */
html.js .mega {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(.985);
  transition: opacity .34s var(--ease-out-expo), transform .34s var(--ease-out-expo);
}
html.js .mega.is-open { opacity: 1; transform: none; }
html.js .mega.is-closing { opacity: 0; transform: translate3d(0, -8px, 0) scale(.99); }

html.js .mega .mega-in {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .32s var(--ease-out-expo) var(--mi-delay, 0s), transform .32s var(--ease-out-expo) var(--mi-delay, 0s);
}
html.js .mega .mega-in--x {
  transform: translate3d(-10px, 0, 0);
  transition-duration: .4s;
  transition-delay: .04s;
}
html.js .mega.is-open .mega-in { opacity: 1; transform: none; }

/* --- Mobile drawer ---------------------------------------------------------- */
html.js .mnav {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
html.js .mnav.is-open { opacity: 1; transform: none; }
html.js .mnav__sub { transition: height .28s var(--ease-out-expo), opacity .28s var(--ease-out-expo); }

/* --- Carousels (Results / Testimonials) ------------------------------------ */
.csx__track, .tsx__track { touch-action: pan-y; }
html.js .csx__track.is-animating,
html.js .tsx__track.is-animating { transition: transform .62s cubic-bezier(.2, .9, .25, 1); }
.csx__track.is-dragging, .tsx__track.is-dragging { user-select: none; cursor: grabbing; }
.csx__track.is-dragging img, .tsx__track.is-dragging img { pointer-events: none; }

/* --- Tab panels (SmartComply platform) ------------------------------------- */
html.js [data-tabpanel].is-entering { animation: sr-rise14 .42s var(--ease-out-expo) both; }

/* --- recLite season panel swap --------------------------------------------- */
html.js [data-swap].is-swapping { animation: sr-rise14 .42s var(--ease-out-expo) both; }

/* --- recLite mockups (RecliteVisuals.tsx Seq + whileInView) ---------------- */
html.js [data-seq-item]:not(.rv-done) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .55s var(--ease-out-expo) calc(var(--seq-delay, .15s) + var(--i, 0) * .08s),
    transform .55s var(--ease-out-expo) calc(var(--seq-delay, .15s) + var(--i, 0) * .08s);
}
html.js [data-seq].is-in > [data-seq-item]:not(.rv-done) { opacity: 1; transform: none; }

[data-inview="bar"] { transform: scaleX(var(--to, 1)); }
html.js [data-inview]:not(.rv-done) {
  transition:
    opacity var(--iv-dur, .6s) var(--ease-out-expo) var(--iv-delay, 0s),
    transform var(--iv-dur, .6s) var(--ease-out-expo) var(--iv-delay, 0s);
}
html.js [data-inview="rise16"]:not(.is-in) { opacity: 0; transform: translate3d(0, 16px, 0); }
html.js [data-inview="rise12"]:not(.is-in) { opacity: 0; transform: translate3d(0, 12px, 0); }
html.js [data-inview="slide"]:not(.is-in)  { opacity: 0; transform: translate3d(-14px, 0, 0); }
html.js [data-inview="grow"]:not(.is-in)   { opacity: 0; transform: scaleX(.4); }
html.js [data-inview="bar"]:not(.is-in)    { transform: scaleX(0); }

/* --- Accordion (recLite FAQ) ----------------------------------------------- */
html.js [data-acc-panel] { overflow: hidden; transition: height .36s var(--ease-out-expo), opacity .36s var(--ease-out-expo); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-stagger-item] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js [data-rise] { animation: none !important; }
  html.js .mega, html.js .mega .mega-in, html.js .mnav { transform: none !important; transition: opacity .2s linear !important; }
  html.js .mega .mega-in { opacity: 1 !important; }
  html.js .csx__track.is-animating, html.js .tsx__track.is-animating { transition: none; }
  html.js [data-tabpanel].is-entering, html.js [data-swap].is-swapping { animation: none; }
  html.js [data-acc-panel], html.js .mnav__sub { transition: none; }
  html.js [data-seq-item], html.js [data-inview] { opacity: 1 !important; transition: none !important; }
  html.js [data-seq-item], html.js [data-inview]:not([data-inview="bar"]) { transform: none !important; }
  html.js [data-inview="bar"] { transform: scaleX(var(--to, 1)) !important; }
}