/* ==========================================================================
   Wizads motion layer
   Reveal-on-scroll, floating illustrations, brand sparkles, partner marquee,
   animated gradients, counters and hover feedback.

   Progressive enhancement: hidden "before reveal" states only apply under
   html.motion-ready, which is set by a tiny inline script when JS and
   IntersectionObserver are available and the user hasn't asked for reduced
   motion. Without it, every element is simply visible (crawlers, no-JS).
   Only opacity/transform are animated, so there is no layout shift.
   ========================================================================== */

/* ---------- 1. Reveal on scroll ---------- */

html.motion-ready [data-reveal] {
    opacity: 0;
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .25, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

html.motion-ready [data-reveal="up"] { transform: translateY(18px); }
html.motion-ready [data-reveal="left"] { transform: translateX(-24px); }
html.motion-ready [data-reveal="right"] { transform: translateX(24px); }
html.motion-ready [data-reveal="zoom"] { transform: scale(.97); }

/* Sideways slides could push content past the screen edge on phones: slide up instead. */
@media (max-width: 767.98px) {
    html.motion-ready [data-reveal="left"],
    html.motion-ready [data-reveal="right"] {
        transform: translateY(18px);
    }
}

html.motion-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- 2. Floating illustrations ---------- */

.motion-float {
    animation: motion-float 6s ease-in-out infinite;
}

.motion-float-slow {
    animation-duration: 8s;
    animation-delay: -2s;
}

@keyframes motion-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* ---------- 3. Brand sparkles (the star from the Wizads logo) ---------- */

.motion-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.motion-sparkle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    opacity: 0;
    animation: motion-twinkle 3.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes motion-twinkle {
    0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
    45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* ---------- 4. Partner logos marquee ---------- */

.motion-marquee {
    overflow: hidden;
    padding: 1.5rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.motion-marquee-track {
    --marquee-gap: 4rem;
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: motion-marquee 32s linear infinite;
}

.motion-marquee:hover .motion-marquee-track {
    animation-play-state: paused;
}

.motion-marquee-track li {
    flex-shrink: 0;
}

.motion-marquee-track img {
    height: 60px;
    width: auto;
    max-width: 195px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .75;
    transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.motion-marquee-track img:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
}

/* Shift by exactly one copy of the list: (track width + one gap) / number of copies. */
@keyframes motion-marquee {
    to { transform: translateX(calc((-100% - var(--marquee-gap)) / var(--marquee-copies, 2))); }
}

/* ---------- 5. Living gradients (CTA and gradient cards) ---------- */

.motion-gradient {
    background-size: 200% 200% !important;
    animation: motion-gradient 10s ease infinite;
}

@keyframes motion-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------- 6. Attention pulse for the main call to action ---------- */

.motion-pulse {
    animation: motion-pulse 2.6s ease-out infinite;
}

@keyframes motion-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
    70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* "Watch Demo" play buttons */
.motion-ping {
    animation: motion-ping 2.2s ease-out infinite;
}

@keyframes motion-ping {
    0% { box-shadow: 0 0 0 0 rgba(96, 96, 231, .5); }
    80%, 100% { box-shadow: 0 0 0 12px rgba(96, 96, 231, 0); }
}

/* ---------- 7. Hover feedback ---------- */

.btn.rounded-5 {
    transition: transform .25s ease, box-shadow .25s ease,
        color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn.rounded-5:hover {
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.4rem rgba(40, 40, 140, .18);
}

.btn.rounded-5:active {
    transform: translateY(0);
}

.benefits-cards .card:hover,
.motion-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 1.25rem 2.5rem rgba(96, 96, 231, .2);
}

.motion-lift {
    transition: transform .4s cubic-bezier(.2, .7, .25, 1), box-shadow .4s ease, border-color .4s ease;
}

.benefits-cards .card:hover img,
.motion-pop-parent:hover .motion-pop {
    animation: motion-pop .5s ease;
}

@keyframes motion-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18) rotate(-6deg); }
    100% { transform: scale(1); }
}

/* ---------- 8. Respect "reduce motion" ---------- */

@media (prefers-reduced-motion: reduce) {
    .motion-float,
    .motion-sparkle,
    .motion-marquee-track,
    .motion-gradient,
    .motion-pulse,
    .motion-ping {
        animation: none !important;
    }

    .motion-sparkle {
        opacity: .8;
    }

    .motion-marquee-track {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }

    .motion-marquee-track [aria-hidden="true"] {
        display: none;
    }

    .btn.rounded-5:hover,
    .benefits-cards .card:hover,
    .motion-lift:hover {
        transform: none;
    }
}