/* Sketch Reveal — shared scroll-entrance animation.
   Add data-sk-reveal to any element. JS adds .sk-in when it scrolls into view.

   Tunables (set inline or in a parent rule):
     --sk-delay     : start delay      (default 0ms)   — or data-sk-delay="200"
     --sk-distance  : travel distance  (default 30px)
     --sk-duration  : animation length (default 0.8s)
     --sk-ease      : timing function  (default a soft ease-out)

   The "start hidden" state is scoped to html.sk-reveal — a class the module's
   inline head script adds synchronously. With JS off the class is absent, so
   nothing is ever hidden (graceful, no flash of invisible content). */

html.sk-reveal [data-sk-reveal] {
	opacity: 0;
	transition:
		opacity var(--sk-duration, 0.8s) var(--sk-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		transform var(--sk-duration, 0.8s) var(--sk-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		filter var(--sk-duration, 0.8s) var(--sk-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
	transition-delay: var(--sk-delay, 0ms);
	will-change: opacity, transform;
}

/* Variants — the starting transform. Revealed state always returns to none. */
html.sk-reveal [data-sk-reveal=""],
html.sk-reveal [data-sk-reveal="fade-up"]    { transform: translateY(var(--sk-distance, 30px)); }
html.sk-reveal [data-sk-reveal="fade-down"]  { transform: translateY(calc(var(--sk-distance, 30px) * -1)); }
html.sk-reveal [data-sk-reveal="fade-left"]  { transform: translateX(var(--sk-distance, 30px)); }   /* enters from the right */
html.sk-reveal [data-sk-reveal="fade-right"] { transform: translateX(calc(var(--sk-distance, 30px) * -1)); } /* enters from the left */
html.sk-reveal [data-sk-reveal="fade"]       { transform: none; }
html.sk-reveal [data-sk-reveal="zoom"]       { transform: scale(1.18); }   /* settle-in, good for images */
html.sk-reveal [data-sk-reveal="zoom-up"]    { transform: translateY(24px) scale(0.96); }

/* Blur variants — the element resolves out of a defocus rather than sliding.
   --sk-blur sets how soft it starts (default 12px). "blur-up" adds the usual
   rise, "blur" is the still version. Good on large type, where a word-by-word
   stagger reads as the headline coming into focus. */
html.sk-reveal [data-sk-reveal="blur"]       { transform: none; filter: blur(var(--sk-blur, 12px)); }
html.sk-reveal [data-sk-reveal="blur-up"]    { transform: translateY(var(--sk-distance, 18px)); filter: blur(var(--sk-blur, 12px)); }

/* Revealed */
html.sk-reveal [data-sk-reveal].sk-in {
	opacity: 1;
	transform: none;
}

/* Clearing the blur is scoped to the blur variants on purpose. On the general
   .sk-in rule a `filter: none` would strip any filter an unrelated revealed
   element happens to carry — a drop-shadow, a grayscale hover — the moment it
   scrolled into view. */
html.sk-reveal [data-sk-reveal="blur"].sk-in,
html.sk-reveal [data-sk-reveal="blur-up"].sk-in {
	filter: none;
}

/* Respect reduced-motion: show everything immediately, no movement. */
@media (prefers-reduced-motion: reduce) {
	html.sk-reveal [data-sk-reveal] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}