/* =====================================================================
   Rent-a-Website — shared MOTION UTILITIES (used on every page)
   Bold, on-brand entrance + scroll-linked motion. Pairs with motion.js.
   ===================================================================== */

/* Reveal = the content ANIMATES IN as it enters (rise + fade, eased). Best practice:
   animate entering content, never fade out what someone is reading. One-time, then it stays put. */
@media (prefers-reduced-motion: no-preference) {
  .has-motion [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.7,.2,1);
    transition-delay: var(--rd, 0s);
  }
  .has-motion [data-reveal="down"]  { transform: translateY(-26px); }
  .has-motion [data-reveal="left"]  { transform: translateX(34px); }
  .has-motion [data-reveal="right"] { transform: translateX(-34px); }
  .has-motion [data-reveal="scale"] { transform: scale(.94); }
  .has-motion [data-reveal].in-view { opacity: 1; transform: none; }
}

/* Scroll-linked parallax — JS updates --py continuously (the "moves the whole way down" layer) */
[data-parallax] { transform: translate3d(0, var(--py, 0), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none; } }

/* Scroll-scrubbed — JS drives --p (0→1) tied to scroll position; motion reverses as you scroll back */
[data-scrub] { --p: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* default scrub = gentle: soft rise + fade, tied to the scrollbar (you SEE it move).
     Opacity floored at 0.35 so content NEVER washes out to blank/grey while you read it. */
  .has-motion [data-scrub] {
    opacity: calc(0.35 + 0.65 * var(--p));
    transform: translateY(calc((1 - var(--p)) * 46px));
    will-change: transform, opacity;
  }
  /* bold "card" variant — the show-off moment (rise + fan-rotate + scale) */
  .has-motion [data-scrub="card"] {
    transform:
      translateY(calc((1 - var(--p)) * 90px))
      rotate(calc((1 - var(--p)) * var(--rot, 0deg)))
      scale(calc(0.9 + var(--p) * 0.1));
  }
}