/*
 * Vibe Theme motion kit. See assets/js/motion.js for the attributes.
 * Tune per site or section with the custom properties below.
 */
:root {
    --vb-reveal-distance: 28px;
    --vb-reveal-duration: 700ms;
    --vb-reveal-easing: cubic-bezier(.2, .7, .2, 1);
}

/* Reveal: hidden only after the script marks an element as below the fold. */
.vb-reveal-pending {
    opacity: 0;
}
.vb-reveal-pending[data-vb-reveal=""],
.vb-reveal-pending[data-vb-reveal="up"] { transform: translateY(var(--vb-reveal-distance)); }
.vb-reveal-pending[data-vb-reveal="down"] { transform: translateY(calc(var(--vb-reveal-distance) * -1)); }
.vb-reveal-pending[data-vb-reveal="left"] { transform: translateX(var(--vb-reveal-distance)); }
.vb-reveal-pending[data-vb-reveal="right"] { transform: translateX(calc(var(--vb-reveal-distance) * -1)); }
.vb-reveal-pending[data-vb-reveal="zoom"] { transform: scale(0.94); }

.vb-reveal-in {
    transition-property: opacity, transform;
    transition-duration: var(--vb-reveal-duration);
    transition-timing-function: var(--vb-reveal-easing);
}

/* Typewriter caret */
.vb-typewriter {
    border-right: 0.12em solid currentColor;
    padding-right: 0.08em;
    animation: vb-caret 0.9s steps(1) infinite;
}
@keyframes vb-caret {
    50% { border-right-color: transparent; }
}

/* Tilt: rotate towards the pointer. Combine other transforms on a wrapper. */
[data-vb-tilt] {
    transform: perspective(1000px) rotateX(var(--vb-tilt-x, 0deg)) rotateY(var(--vb-tilt-y, 0deg));
    transition: transform 200ms ease-out;
}

/* Parallax: offset follows scroll. */
[data-vb-parallax] {
    transform: translate3d(0, var(--vb-parallax, 0px), 0);
    will-change: transform;
}

/*
 * Reduced motion, in one place: the kit's own effects stop, and so do CSS
 * animations and transitions in sections (colour fades stay instant). Sections
 * that must keep a gentle animation can opt out with .vb-motion-safe.
 */
@media (prefers-reduced-motion: reduce) {
    .vb-reveal-pending {
        opacity: 1;
        transform: none;
    }
    .vb-typewriter {
        animation: none;
    }
    [data-vb-tilt],
    [data-vb-parallax] {
        transform: none;
    }
    .vb-section *:not(.vb-motion-safe):not(.vb-motion-safe *),
    .vb-section *:not(.vb-motion-safe):not(.vb-motion-safe *)::before,
    .vb-section *:not(.vb-motion-safe):not(.vb-motion-safe *)::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}