/*
 * Folloy — animations + scroll reveal + hero mesh shift.
 */

@keyframes folloy-mesh-shift {
    0%, 100% {
        background-position: 0% 50%, 100% 50%, 50% 100%;
    }
    50% {
        background-position: 100% 50%, 0% 50%, 50% 0%;
    }
}

@keyframes folloy-fade-up {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes folloy-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes folloy-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.45); }
    50%      { box-shadow: 0 0 0 12px rgba(217, 70, 239, 0); }
}

[data-folloy-reveal] {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity var(--folloy-duration-slow) var(--folloy-ease-out),
        transform var(--folloy-duration-slow) var(--folloy-ease-out);
    will-change: opacity, transform;
}

[data-folloy-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.folloy-hero-mesh {
    position: relative;
    background-color: var(--wp--preset--color--ink-950);
    background-image:
        radial-gradient(60% 80% at 20% 25%, rgba(124, 58, 237, 0.55) 0%, transparent 60%),
        radial-gradient(50% 70% at 80% 30%, rgba(217, 70, 239, 0.45) 0%, transparent 60%),
        radial-gradient(60% 60% at 50% 100%, rgba(251, 191, 36, 0.30) 0%, transparent 60%);
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: folloy-mesh-shift 18s ease-in-out infinite;
    isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
    .folloy-hero-mesh { animation: none; }
}

.folloy-pulse-cta {
    animation: folloy-pulse-glow 2.4s var(--folloy-ease-out) infinite;
}

/* Hover lift used on cards */
.folloy-lift {
    transition: transform var(--folloy-duration-base) var(--folloy-ease-out),
                box-shadow var(--folloy-duration-base) var(--folloy-ease-out);
}
.folloy-lift:hover {
    transform: translate3d(0, -4px, 0);
}