@vikeriait/vue-viewport 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vikeria Srl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,294 @@
+# @vikeriait/vue-viewport
+
+A lightweight, high-performance Vue 3 directive and composable to detect when elements enter the viewport, featuring "Smart Presets", automatic margin compensation for smooth reveals, and seamless Tailwind CSS integration.
+
+## Features
+
+- 👁 **Viewport Detection**: Track when elements enter or leave with precision.
+- 🎨 **Tailwind Presets**: Ready-to-use animations like `fade-up`, `scale-up`, `slide-left`.
+- 🧠 **Smart Presets**: `fade-y` and `slide-y` automatically adapt direction based on scroll.
+- 📐 **Auto RootMargin**: Intelligently calculates the optimal `rootMargin` based on your applied styles (e.g., `translate-y-20` or `--viewport-distance`) to ensure animations start exactly when the element enters, preventing "late" triggers or blank spaces.
+- 🧩 **Modular**: Use presets via the directive and control timing (delay, duration) via standard Tailwind classes.
+- 🔀 **Conditional Logic**: Apply animations only when scrolling `down` or `up`.
+- 🛠 **Customizable**: Works with custom CSS, inline styles (`style="transform:..."`), and Tailwind classes.
+- 📦 **Composable**: `useInViewport` for programmatic control.
+- ♿ **Accessibility**: Respects `prefers-reduced-motion` out of the box.
+- 🦾 **TypeScript**: Fully typed.
+
+## Installation
+
+```bash
+pnpm add @vikeriait/vue-viewport
+# or
+npm install @vikeriait/vue-viewport
+```
+
+## Setup
+
+### 1. Global Plugin Registration
+
+```ts
+import { createApp } from 'vue'
+import ViewportPlugin from '@vikeriait/vue-viewport'
+
+const app = createApp(App)
+
+app.use(ViewportPlugin)
+app.mount('#app')
+```
+
+### 2. Import Styles
+
+**For Tailwind CSS (v4) users:**
+Import the library's Tailwind configuration to enable the presets and custom variants (like `inviewport:`).
+
+```css
+@import "tailwindcss";
+
+@import "@vikeriait/vue-viewport"; 
+/* or explicitly: @import "@vikeriait/vue-viewport/tailwind"; */
+```
+
+**For Standard CSS users:**
+If you don't use Tailwind, import the CSS bundle to enable the built-in presets.
+
+```ts
+import '@vikeriait/vue-viewport/css'
+```
+
+## Usage
+
+### Directive `v-viewport`
+
+#### 1. Basic Presets
+Simply pass the preset name string.
+
+```html
+<div v-viewport="'fade-up'">
+  I will fade up when scrolled into view!
+</div>
+```
+
+#### 2. Utility Classes
+If you want to add Tailwind (or custom) utility classes like delays or durations, apply them directly to the `class` attribute. The directive handles the preset logic separately.
+
+```html
+<!-- ✅ CORRECT: Separate preset and utility classes -->
+<div v-viewport="'fade-up'" class="delay-200 duration-1000">
+  I appear slowly with a delay.
+</div>
+```
+
+#### 3. Smart Presets (`-y`)
+These presets automatically detect the scroll direction and animate accordingly (e.g., slide up when scrolling down, slide down when scrolling up).
+
+```html
+<div v-viewport="'fade-y'">
+  I enter naturally from whichever side you scroll from.
+</div>
+```
+
+#### 4. Directional Modifiers
+Restrict animations to a specific scroll direction by appending `-down` (scrolling down / enter from bottom) or `-up` (scrolling up / enter from top).
+
+```html
+<!-- Animates only when you scroll DOWN to it -->
+<div v-viewport="'fade-up-down'">
+  I appear only on normal scroll.
+</div>
+```
+
+#### 5. Staggering
+Delay animations for elements entering at the same time. The library guarantees DOM order execution.
+
+You can pass:
+- `number`: Delay in milliseconds (e.g. `100`).
+- `string`: CSS time value (e.g. `'200ms'`, `'0.1s'`).
+- `true`: Uses the global default `--viewport-stagger` (default: 100ms).
+
+*Note: The stagger delay is **additive** to any existing CSS delay.*
+
+```html
+<!-- Explicit value -->
+<div v-for="i in 6" v-viewport="{ animation: 'fade-up', stagger: 100 }"></div>
+
+<!-- Use default from CSS variable -->
+<div v-for="i in 6" v-viewport="{ animation: 'fade-up', stagger: true }"></div>
+```
+
+#### 6. Inline Timing Control
+You can override the global defaults or utility classes directly via options. This is useful for dynamic values.
+
+```html
+<div v-viewport="{ animation: 'fade-up', duration: 1000, delay: 500, easing: 'ease-in-out' }">
+  I have custom timing!
+</div>
+```
+
+### Component `<VViewport />`
+
+Prefer components over directives? We got you.
+
+**Global Usage:**
+The plugin registers the component globally as `<VViewport />`.
+
+```html
+<VViewport preset="fade-up">
+  <h1>Hello World</h1>
+</VViewport>
+```
+
+**Local Import:**
+You can also import it directly (exported as `Viewport`).
+
+```html
+<script setup>
+import { Viewport } from '@vikeriait/vue-viewport'
+</script>
+
+<template>
+  <Viewport as="section" preset="fade-up" :stagger="100">
+    ...
+  </Viewport>
+</template>
+```
+
+**Props:**
+- `as`: (string) HTML tag (default: 'div').
+- `preset`: (string) Animation name.
+- `stagger`: (number/string/boolean) Delay logic.
+- `duration`: (number/string) Custom duration.
+- `delay`: (number/string) Custom delay.
+- `easing`: (string) Custom easing.
+- `once`: (boolean) Disconnect after first entry.
+- `threshold`: (number) Intersection threshold.
+- `rootMargin`: (string) Custom margin.
+
+### Advanced: Tailwind & Custom Styles
+
+The library is **smart**. If you use custom transforms (via Tailwind classes or inline styles), it detects them and automatically adjusts the IntersectionObserver's `rootMargin` to ensure the animation triggers precisely when the *visual* element enters the screen.
+
+**Example with Tailwind:**
+The library sees `translate-y-20` (80px), calculates the offset, and triggers the animation 80px earlier to prevent any "blank space" or jump.
+
+```html
+<div 
+  v-viewport 
+  class="opacity-0 translate-y-20 transition-all duration-700 
+         inviewport:opacity-100 inviewport:translate-y-0"
+>
+  I am a fully custom Tailwind animation handled perfectly.
+</div>
+```
+
+**Example with Inline Style:**
+
+```html
+<div 
+  v-viewport
+  style="opacity: 0; transform: translateY(100px); transition: 1s"
+  class="inviewport:opacity-100 inviewport:translate-y-0"
+>
+  I work too!
+</div>
+```
+
+### Composable `useInViewport`
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useInViewport } from '@vikeriait/vue-viewport'
+
+const target = ref(null)
+const { isInView, entry } = useInViewport(target)
+</script>
+
+<template>
+  <div ref="target">
+    {{ isInView ? 'Visible' : 'Hidden' }}
+  </div>
+</template>
+```
+
+## Built-in Presets
+
+| Preset             | Description     |
+|:-------------------|:----------------|
+| `fade`             | Simple fade     |
+| `fade-up/down`     | Fade + Slide Y  |
+| `fade-left/right`  | Fade + Slide X  |
+| `slide-up/down`    | Slide Y         |
+| `slide-left/right` | Slide X         |
+| `scale-up/down`    | Scale Transform |
+| `blur-in`          | Blur Reveal     |
+
+*Note: All presets support `-down` (on scroll down) and `-up` (on scroll up) suffixes.*
+
+## CSS Variables
+
+You can customize the global defaults in your CSS:
+
+```css
+:root {
+    --viewport-duration: 0.6s;
+    --viewport-ease: ease-out;
+    --viewport-delay: 0s; /* Global default delay */
+    --viewport-distance: 2rem;
+    --viewport-stagger: 100ms;
+    --viewport-scale-in: 0.95;
+    --viewport-scale-out: 1.05;
+    --viewport-blur: 12px;
+}
+```
+
+## Accessibility & Print
+
+The library is designed to be inclusive and reliable:
+
+- **Reduced Motion**: If a user has enabled "Reduce Motion" in their system settings, the library automatically detects the `@media (prefers-reduced-motion: reduce)` preference. In this case, all animations are disabled, and elements appear instantly in their final state (`opacity: 1`, `transform: none`).
+- **Print Friendly**: When printing a page, all animations and initial "hidden" states are stripped away via `@media print`. This ensures that all content is fully visible and correctly positioned on the physical or PDF page.
+
+## API Reference
+
+### Plugin Options
+
+Options passed to `app.use(ViewportPlugin, options)`.
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `presets` | `Record<string, string>` | `DEFAULT_PRESETS` | Custom presets map. |
+
+### Directive Options
+
+Options object passed as `v-viewport="{ ... }"`.
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `animation` | `string` | `undefined` | The animation class or preset name(s). |
+| `stagger` | `number \| string \| boolean` | `undefined` | Delay (ms/string) or `true` for global default. |
+| `duration` | `number \| string` | `undefined` | Custom duration. |
+| `delay` | `number \| string` | `undefined` | Custom delay. |
+| `easing` | `string` | `undefined` | Custom easing function. |
+| `once` | `boolean` | `false` | Disconnect after first entry. |
+| `threshold` | `number \| number[]` | `0.1` | IntersectionObserver threshold. |
+| `rootMargin` | `string` | `auto` | Manually override the calculated margin. |
+| `onEnter` | `function` | `-` | Callback when entering viewport. |
+| `onLeave` | `function` | `-` | Callback when leaving viewport. |
+
+### Directive Modifiers
+
+| Modifier | Description |
+| :--- | :--- |
+| `.once` | Disconnect after first entry. |
+
+### Directive Events
+
+| Event | Type | Description |
+| :--- | :--- | :--- |
+| `@view-enter` | `ViewportEvent` | Dispatched when entering viewport. |
+| `@view-leave` | `ViewportEvent` | Dispatched when leaving viewport. |
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,300 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { Directive } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { Plugin as Plugin_2 } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+
+declare const __VLS_component: DefineComponent<ExtractPropTypes<    {
+/** The HTML tag to render. Defaults to 'div'. */
+as: {
+type: StringConstructor;
+default: string;
+};
+/** The animation preset name (e.g., 'fade-up'). */
+preset: {
+type: StringConstructor;
+default: undefined;
+};
+/** Delay in ms or CSS string (e.g. '100ms'). Set to true to use global variable. */
+stagger: {
+type: PropType<ViewportOptions["stagger"]>;
+default: undefined;
+};
+/** Intersection threshold (0.0 - 1.0). */
+threshold: {
+type: PropType<ViewportOptions["threshold"]>;
+default: undefined;
+};
+/** Custom rootMargin string. */
+rootMargin: {
+type: PropType<ViewportOptions["rootMargin"]>;
+default: undefined;
+};
+/** If true, disconnects the observer after the first entry. */
+once: {
+type: BooleanConstructor;
+default: boolean;
+};
+/** Custom root element (defaults to viewport). */
+root: {
+type: PropType<ViewportOptions["root"]>;
+default: undefined;
+};
+/** Custom duration for the animation. */
+duration: {
+type: PropType<ViewportOptions["duration"]>;
+default: undefined;
+};
+/** Custom delay for the animation. */
+delay: {
+type: PropType<ViewportOptions["delay"]>;
+default: undefined;
+};
+/** Custom easing for the animation. */
+easing: {
+type: StringConstructor;
+default: undefined;
+};
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+enter: (payload: {
+entry: IntersectionObserverEntry;
+direction: ViewportDirection;
+}) => any;
+leave: (payload: {
+entry: IntersectionObserverEntry;
+direction: ViewportDirection;
+}) => any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+/** The HTML tag to render. Defaults to 'div'. */
+as: {
+type: StringConstructor;
+default: string;
+};
+/** The animation preset name (e.g., 'fade-up'). */
+preset: {
+type: StringConstructor;
+default: undefined;
+};
+/** Delay in ms or CSS string (e.g. '100ms'). Set to true to use global variable. */
+stagger: {
+type: PropType<ViewportOptions["stagger"]>;
+default: undefined;
+};
+/** Intersection threshold (0.0 - 1.0). */
+threshold: {
+type: PropType<ViewportOptions["threshold"]>;
+default: undefined;
+};
+/** Custom rootMargin string. */
+rootMargin: {
+type: PropType<ViewportOptions["rootMargin"]>;
+default: undefined;
+};
+/** If true, disconnects the observer after the first entry. */
+once: {
+type: BooleanConstructor;
+default: boolean;
+};
+/** Custom root element (defaults to viewport). */
+root: {
+type: PropType<ViewportOptions["root"]>;
+default: undefined;
+};
+/** Custom duration for the animation. */
+duration: {
+type: PropType<ViewportOptions["duration"]>;
+default: undefined;
+};
+/** Custom delay for the animation. */
+delay: {
+type: PropType<ViewportOptions["delay"]>;
+default: undefined;
+};
+/** Custom easing for the animation. */
+easing: {
+type: StringConstructor;
+default: undefined;
+};
+}>> & Readonly<{
+onEnter?: ((payload: {
+entry: IntersectionObserverEntry;
+direction: ViewportDirection;
+}) => any) | undefined;
+onLeave?: ((payload: {
+entry: IntersectionObserverEntry;
+direction: ViewportDirection;
+}) => any) | undefined;
+}>, {
+root: Element | Document | null | undefined;
+rootMargin: string | undefined;
+threshold: number | number[] | undefined;
+stagger: string | number | boolean | undefined;
+duration: string | number | undefined;
+delay: string | number | undefined;
+easing: string;
+once: boolean;
+as: string;
+preset: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+/**
+ * Interface for the resolved configuration used internally by the directive.
+ */
+export declare interface ResolvedConfig {
+    options: ViewportOptions;
+    animationName: string | undefined;
+    once: boolean;
+}
+
+/**
+ * A composable that tracks whether an element is within the viewport.
+ *
+ * @param target - The ref of the HTML element to observe.
+ * @param options - IntersectionObserver options.
+ * @returns Object containing `isInView` boolean ref and the `entry` object.
+ *
+ * @example
+ * ```ts
+ * const target = ref(null)
+ * const { isInView } = useInViewport(target)
+ * ```
+ */
+export declare function useInViewport(target: Ref<HTMLElement | null>, options?: IntersectionObserverInit): UseInViewportReturn;
+
+/**
+ * Return value of the useInViewport composable.
+ */
+export declare interface UseInViewportReturn {
+    /**
+     * Boolean ref indicating if the element is currently in the viewport.
+     */
+    isInView: Ref<boolean>;
+    /**
+     * The current IntersectionObserverEntry, or null if not yet observed.
+     */
+    entry: Ref<IntersectionObserverEntry | null>;
+}
+
+export declare const Viewport: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+/**
+ * Direction of the scroll movement relative to the viewport.
+ */
+export declare type ViewportDirection = 'down' | 'up';
+
+/**
+ * Custom event emitted by the directive on enter/leave.
+ */
+export declare type ViewportEvent = CustomEvent<ViewportEventDetail>;
+
+/**
+ * Detail object for Viewport custom events.
+ */
+export declare interface ViewportEventDetail {
+    entry: IntersectionObserverEntry;
+    direction: ViewportDirection;
+}
+
+/**
+ * Options for the v-viewport directive.
+ * Extends IntersectionObserverInit to allow custom observer configuration.
+ */
+export declare interface ViewportOptions extends IntersectionObserverInit {
+    /**
+     * The preset name(s) to apply (e.g. 'fade-up').
+     * Custom utility classes should be applied via the standard 'class' attribute.
+     */
+    animation?: string;
+    /**
+     * Stagger delay for elements entering together.
+     * - `number`: milliseconds
+     * - `string`: CSS time (e.g. '100ms', '0.1s')
+     * - `true`: uses global `--viewport-stagger` variable
+     */
+    stagger?: number | string | boolean;
+    /**
+     * Custom duration for the animation.
+     * - `number`: milliseconds
+     * - `string`: CSS time (e.g. '1000ms', '1s')
+     */
+    duration?: number | string;
+    /**
+     * Custom delay for the animation.
+     * - `number`: milliseconds
+     * - `string`: CSS time (e.g. '500ms', '0.5s')
+     */
+    delay?: number | string;
+    /**
+     * Custom easing for the animation (e.g. 'ease-in-out', 'cubic-bezier(...)').
+     */
+    easing?: string;
+    /**
+     * If true, the observer will disconnect after the first entry.
+     */
+    once?: boolean;
+    /**
+     * Callback triggered when the element enters the viewport.
+     */
+    onEnter?: (entry: IntersectionObserverEntry, direction: ViewportDirection) => void;
+    /**
+     * Callback triggered when the element leaves the viewport.
+     */
+    onLeave?: (entry: IntersectionObserverEntry, direction: ViewportDirection) => void;
+}
+
+declare const ViewportPlugin: Plugin_2;
+export { ViewportPlugin }
+export default ViewportPlugin;
+
+/**
+ * Options for the ViewportPlugin installation.
+ */
+export declare interface ViewportPluginOptions {
+    /**
+     * Custom presets to merge with or override the default presets.
+     * Key is the preset name, value is the CSS class(es).
+     */
+    presets?: Record<string, string>;
+}
+
+/**
+ * Vue Directive: v-viewport
+ *
+ * Detects when an element enters the viewport and applies animation states via data attributes.
+ * Uses data-vp-* attributes to avoid conflicts with Vue's class binding.
+ */
+export declare const vViewport: Directive<HTMLElement, ViewportOptions | string>;
+
+export { }
+
+
+declare module 'vue' {
+    interface HTMLAttributes {
+        onViewEnter?: (event: ViewportEvent) => void;
+        onViewLeave?: (event: ViewportEvent) => void;
+    }
+    interface GlobalDirectives {
+        vViewport: ViewportOptions | string;
+    }
+}

package/dist/style.css

@@ -0,0 +1 @@
+:root{--viewport-duration: .6s;--viewport-ease: ease-out;--viewport-delay: 0s;--viewport-distance: 2rem;--viewport-stagger: .1s;--viewport-scale-in: .95;--viewport-scale-out: 1.05;--viewport-blur: 12px}[data-vp-preset*=animate-]{transition-duration:var(--viewport-duration);transition-timing-function:var(--viewport-ease);transition-delay:var(--viewport-delay)}[data-vp-preset~=animate-fade],[data-vp-preset~=animate-fade-down][data-vp-entry=down],[data-vp-preset~=animate-fade-down][data-vp-pos=below],[data-vp-preset~=animate-fade-up][data-vp-entry=up],[data-vp-preset~=animate-fade-up][data-vp-pos=above]{opacity:0;transition-property:opacity}[data-vp-preset~=animate-fade][data-vp-in-view],[data-vp-preset~=animate-fade-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-fade-up][data-vp-entry=up][data-vp-in-view]{opacity:1}[data-vp-preset~=animate-fade-up],[data-vp-preset~=animate-fade-up-down][data-vp-entry=down],[data-vp-preset~=animate-fade-up-down][data-vp-pos=below],[data-vp-preset~=animate-fade-up-up][data-vp-entry=up],[data-vp-preset~=animate-fade-up-up][data-vp-pos=above]{opacity:0;transform:translateY(var(--viewport-distance));transition-property:opacity,transform}[data-vp-preset~=animate-fade-up][data-vp-in-view],[data-vp-preset~=animate-fade-up-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-fade-up-up][data-vp-entry=up][data-vp-in-view]{opacity:1;transform:translateY(0)}[data-vp-preset~=animate-fade-down],[data-vp-preset~=animate-fade-down-down][data-vp-entry=down],[data-vp-preset~=animate-fade-down-down][data-vp-pos=below],[data-vp-preset~=animate-fade-down-up][data-vp-entry=up],[data-vp-preset~=animate-fade-down-up][data-vp-pos=above]{opacity:0;transform:translateY(calc(var(--viewport-distance) * -1));transition-property:opacity,transform}[data-vp-preset~=animate-fade-down][data-vp-in-view],[data-vp-preset~=animate-fade-down-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-fade-down-up][data-vp-entry=up][data-vp-in-view]{opacity:1;transform:translateY(0)}[data-vp-preset~=animate-fade-left],[data-vp-preset~=animate-fade-left-down][data-vp-entry=down],[data-vp-preset~=animate-fade-left-down][data-vp-pos=below],[data-vp-preset~=animate-fade-left-up][data-vp-entry=up],[data-vp-preset~=animate-fade-left-up][data-vp-pos=above]{opacity:0;transform:translate(var(--viewport-distance));transition-property:opacity,transform}[data-vp-preset~=animate-fade-left][data-vp-in-view],[data-vp-preset~=animate-fade-left-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-fade-left-up][data-vp-entry=up][data-vp-in-view]{opacity:1;transform:translate(0)}[data-vp-preset~=animate-fade-right],[data-vp-preset~=animate-fade-right-down][data-vp-entry=down],[data-vp-preset~=animate-fade-right-down][data-vp-pos=below],[data-vp-preset~=animate-fade-right-up][data-vp-entry=up],[data-vp-preset~=animate-fade-right-up][data-vp-pos=above]{opacity:0;transform:translate(calc(var(--viewport-distance) * -1));transition-property:opacity,transform}[data-vp-preset~=animate-fade-right][data-vp-in-view],[data-vp-preset~=animate-fade-right-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-fade-right-up][data-vp-entry=up][data-vp-in-view]{opacity:1;transform:translate(0)}[data-vp-preset~=animate-slide-up],[data-vp-preset~=animate-slide-up-down][data-vp-entry=down],[data-vp-preset~=animate-slide-up-down][data-vp-pos=below],[data-vp-preset~=animate-slide-up-up][data-vp-entry=up],[data-vp-preset~=animate-slide-up-up][data-vp-pos=above]{transform:translateY(var(--viewport-distance));transition-property:transform}[data-vp-preset~=animate-slide-up][data-vp-in-view],[data-vp-preset~=animate-slide-up-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-slide-up-up][data-vp-entry=up][data-vp-in-view]{transform:translateY(0)}[data-vp-preset~=animate-slide-down],[data-vp-preset~=animate-slide-down-down][data-vp-entry=down],[data-vp-preset~=animate-slide-down-down][data-vp-pos=below],[data-vp-preset~=animate-slide-down-up][data-vp-entry=up],[data-vp-preset~=animate-slide-down-up][data-vp-pos=above]{transform:translateY(calc(var(--viewport-distance) * -1));transition-property:transform}[data-vp-preset~=animate-slide-down][data-vp-in-view],[data-vp-preset~=animate-slide-down-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-slide-down-up][data-vp-entry=up][data-vp-in-view]{transform:translateY(0)}[data-vp-preset~=animate-slide-left],[data-vp-preset~=animate-slide-left-down][data-vp-entry=down],[data-vp-preset~=animate-slide-left-down][data-vp-pos=below],[data-vp-preset~=animate-slide-left-up][data-vp-entry=up],[data-vp-preset~=animate-slide-left-up][data-vp-pos=above]{transform:translate(var(--viewport-distance));transition-property:transform}[data-vp-preset~=animate-slide-left][data-vp-in-view],[data-vp-preset~=animate-slide-left-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-slide-left-up][data-vp-entry=up][data-vp-in-view]{transform:translate(0)}[data-vp-preset~=animate-slide-right],[data-vp-preset~=animate-slide-right-down][data-vp-entry=down],[data-vp-preset~=animate-slide-right-down][data-vp-pos=below],[data-vp-preset~=animate-slide-right-up][data-vp-entry=up],[data-vp-preset~=animate-slide-right-up][data-vp-pos=above]{transform:translate(calc(var(--viewport-distance) * -1));transition-property:transform}[data-vp-preset~=animate-slide-right][data-vp-in-view],[data-vp-preset~=animate-slide-right-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-slide-right-up][data-vp-entry=up][data-vp-in-view]{transform:translate(0)}[data-vp-preset~=animate-scale-up],[data-vp-preset~=animate-scale-up-down][data-vp-entry=down],[data-vp-preset~=animate-scale-up-down][data-vp-pos=below],[data-vp-preset~=animate-scale-up-up][data-vp-entry=up],[data-vp-preset~=animate-scale-up-up][data-vp-pos=above]{opacity:0;transform:scale(var(--viewport-scale-in));transition-property:opacity,transform}[data-vp-preset~=animate-scale-up][data-vp-in-view],[data-vp-preset~=animate-scale-up-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-scale-up-up][data-vp-entry=up][data-vp-in-view]{opacity:1;transform:scale(1)}[data-vp-preset~=animate-scale-down],[data-vp-preset~=animate-scale-down-down][data-vp-entry=down],[data-vp-preset~=animate-scale-down-down][data-vp-pos=below],[data-vp-preset~=animate-scale-down-up][data-vp-entry=up],[data-vp-preset~=animate-scale-down-up][data-vp-pos=above]{opacity:0;transform:scale(var(--viewport-scale-out));transition-property:opacity,transform}[data-vp-preset~=animate-scale-down][data-vp-in-view],[data-vp-preset~=animate-scale-down-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-scale-down-up][data-vp-entry=up][data-vp-in-view]{opacity:1;transform:scale(1)}[data-vp-preset~=animate-blur-in],[data-vp-preset~=animate-blur-in-down][data-vp-entry=down],[data-vp-preset~=animate-blur-in-down][data-vp-pos=below],[data-vp-preset~=animate-blur-in-up][data-vp-entry=up],[data-vp-preset~=animate-blur-in-up][data-vp-pos=above]{opacity:0;filter:blur(var(--viewport-blur));transition-property:opacity,filter}[data-vp-preset~=animate-blur-in][data-vp-in-view],[data-vp-preset~=animate-blur-in-down][data-vp-entry=down][data-vp-in-view],[data-vp-preset~=animate-blur-in-up][data-vp-entry=up][data-vp-in-view]{opacity:1;filter:blur(0)}[data-vp-preset~=animate-fade-y][data-vp-entry=down],[data-vp-preset~=animate-fade-y][data-vp-pos=below],[data-vp-preset~=animate-fade-y][data-vp-entry=up],[data-vp-preset~=animate-fade-y][data-vp-pos=above]{opacity:0;transition-property:opacity,transform}[data-vp-preset~=animate-fade-y][data-vp-entry=down],[data-vp-preset~=animate-fade-y][data-vp-pos=below]{transform:translateY(var(--viewport-distance))}[data-vp-preset~=animate-fade-y][data-vp-entry=up],[data-vp-preset~=animate-fade-y][data-vp-pos=above]{transform:translateY(calc(var(--viewport-distance) * -1))}[data-vp-preset~=animate-fade-y][data-vp-in-view]{opacity:1;transform:translateY(0)}[data-vp-preset~=animate-slide-y][data-vp-entry=down],[data-vp-preset~=animate-slide-y][data-vp-pos=below],[data-vp-preset~=animate-slide-y][data-vp-entry=up],[data-vp-preset~=animate-slide-y][data-vp-pos=above]{transition-property:transform}[data-vp-preset~=animate-slide-y][data-vp-entry=down],[data-vp-preset~=animate-slide-y][data-vp-pos=below]{transform:translateY(var(--viewport-distance))}[data-vp-preset~=animate-slide-y][data-vp-entry=up],[data-vp-preset~=animate-slide-y][data-vp-pos=above]{transform:translateY(calc(var(--viewport-distance) * -1))}[data-vp-preset~=animate-slide-y][data-vp-in-view]{transform:translateY(0)}@media(prefers-reduced-motion:reduce),print{[data-vp-mounted]{opacity:1!important;transform:none!important;transition:none!important;filter:none!important;animation:none!important;translate:none!important}}