/*
 * Kervio Motion — class-driven animation presets (driven by kervio-motion.js / GSAP).
 *
 * Add a class to any Bricks element/container/section. Tweak per element with data attributes
 * (Style > CSS > Attributes):  data-kv-delay="0.2"  data-kv-duration="1"  data-kv-distance="40"
 *                              data-kv-start="top 85%"  data-kv-stagger="0.08"
 *
 *  Reveal on scroll
 *    kv-fade            plain fade
 *    kv-fade-up         fade + rise (most common)
 *    kv-fade-down / kv-fade-left / kv-fade-right
 *    kv-blur-in         fade + blur-to-sharp
 *    kv-scale-in        fade + subtle scale up
 *    kv-clip-reveal     image/video wipe (clip-path) with inner zoom-settle  ← "photo in"
 *    kv-line-grow       thin line that scales from the left (use on .kv-line / empty divs)
 *  Text
 *    kv-split           headline words slide up out of a mask
 *    kv-split-chars     per-character reveal (short headings only)
 *    kv-split-blur      words fade + de-blur in sequence
 *  Groups
 *    kv-stagger         direct children fade-up in sequence
 *    kv-stagger-blur    direct children blur-in in sequence
 *    kv-stagger-scale   direct children scale-in in sequence
 *  Scroll / pointer
 *    kv-parallax        element drifts while scrolling   (data-kv-speed="-12" = % travel)
 *    kv-parallax-img    image inside overflow-hidden wrapper drifts slower than the page
 *    kv-count           animates the number inside [data-kv-count="1200"] (+ data-kv-suffix)
 *    kv-magnetic        element leans toward the cursor (buttons)
 *    kv-tilt            3D tilt on hover (cards)
 *    kv-spotlight-track feeds cursor position to .kv-card--spotlight
 *  Ambient (CSS only)
 *    kv-marquee         infinite horizontal scroller (duplicate children inside .kv-marquee__track)
 *    kv-float           gentle floating loop
 *    kv-pulse-glow      soft glowing pulse
 */

/* Hidden-until-animated states only apply when JS confirmed GSAP is alive (see kervio-assets.php). */
html.kv-anim .kv-fade,
html.kv-anim .kv-fade-up,
html.kv-anim .kv-fade-down,
html.kv-anim .kv-fade-left,
html.kv-anim .kv-fade-right,
html.kv-anim .kv-blur-in,
html.kv-anim .kv-scale-in { opacity: 0; }

html.kv-anim .kv-stagger > *,
html.kv-anim .kv-stagger-blur > *,
html.kv-anim .kv-stagger-scale > * { opacity: 0; }

html.kv-anim .kv-clip-reveal { clip-path: inset(0 0 100% 0); overflow: hidden; }
html.kv-anim .kv-line-grow { transform: scaleX(0); transform-origin: left center; }

/* split text is hidden until JS has wrapped the words, then the words animate */
html.kv-anim .kv-split:not(.kv-split--ready),
html.kv-anim .kv-split-chars:not(.kv-split--ready),
html.kv-anim .kv-split-blur:not(.kv-split--ready) { visibility: hidden; }

.kv-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.kv-word__inner { display: inline-block; will-change: transform; }
.kv-char { display: inline-block; will-change: transform, opacity; }
.kv-split-blur .kv-word { overflow: visible; }

.kv-line {
    display: block;
    width: 3.5rem;
    height: 1px;
    background: hsl(var(--kv-primary-glow, 270 90% 62%));
}

.kv-tilt { transform-style: preserve-3d; will-change: transform; }
.kv-magnetic { will-change: transform; }

/* ── Ambient CSS loops ── */
.kv-marquee { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.kv-marquee__track {
    display: flex;
    align-items: center;
    gap: var(--kv-marquee-gap, 4rem);
    width: max-content;
    animation: kv-marquee var(--kv-marquee-speed, 45s) linear infinite;
}
.kv-marquee:hover .kv-marquee__track { animation-play-state: paused; }
@keyframes kv-marquee { to { transform: translateX(-50%); } }

.kv-float { animation: kv-float 7s ease-in-out infinite; }
@keyframes kv-float { 50% { transform: translateY(-14px); } }

.kv-pulse-glow { animation: kv-pulse-glow 3.2s ease-in-out infinite; }
@keyframes kv-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--kv-primary, 268 100% 43%) / 0.45); }
    50% { box-shadow: 0 0 0 14px hsl(var(--kv-primary, 268 100% 43%) / 0); }
}

/* ── Accessibility: never hide content for people who ask for less motion ── */
@media (prefers-reduced-motion: reduce) {
    html.kv-anim .kv-fade, html.kv-anim .kv-fade-up, html.kv-anim .kv-fade-down, html.kv-anim .kv-fade-left,
    html.kv-anim .kv-fade-right, html.kv-anim .kv-blur-in, html.kv-anim .kv-scale-in,
    html.kv-anim .kv-stagger > *, html.kv-anim .kv-stagger-blur > *, html.kv-anim .kv-stagger-scale > * { opacity: 1; }
    html.kv-anim .kv-clip-reveal { clip-path: none; }
    html.kv-anim .kv-line-grow { transform: none; }
    html.kv-anim .kv-split, html.kv-anim .kv-split-chars, html.kv-anim .kv-split-blur { visibility: visible; }
    .kv-marquee__track, .kv-float, .kv-pulse-glow { animation: none; }
}