[reveal], [data-reveal] { opacity: 0; }

/* Optional: starting transforms if JS is late */
[reveal="left"],  [data-reveal="left"]  { transform: translateX(-24px); }
[reveal="right"], [data-reveal="right"] { transform: translateX(24px); }
[reveal="down"],  [data-reveal="down"]  { transform: translateY(-24px); }
[reveal="raise"], [data-reveal="raise"], [reveal]:not([reveal]), [data-reveal]:not([data-reveal]) { transform: translateY(24px); }

/* When visible (JS toggles this) */
.ros-visible { opacity: 1 !important; transform: none !important; }