/* Scroll-triggered reveal used across the landing page sections (Problem, How It Works,
   Built for Everyone, Features, Get Started, Pricing, Video Demo) — see /js/landing.js for
   the IntersectionObserver that adds .lc-revealed once an element scrolls into view. */
[data-lc-reveal],
[data-lc-reveal-item] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-lc-reveal].lc-revealed,
[data-lc-reveal-item].lc-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-lc-reveal],
    [data-lc-reveal-item] {
        transition: none;
    }
}

/* Slow-drifting gradient on headline accent text — the gradient itself was already there
   (bg-[length:200%_auto], 3-stop from/via/to), it just never actually moved. This animates
   its background-position so the color subtly travels instead of sitting static. */
@keyframes lcTextShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.lc-text-shimmer {
    animation: lcTextShimmer 6s ease-in-out infinite;
}

/* Diagonal light sweep across primary gradient CTA buttons on hover — layered on top of
   whatever hover classes (scale/shadow) the button already has. */
.lc-btn-shine {
    position: relative;
    overflow: hidden;
}
.lc-btn-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.35) 52%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.65s ease;
    pointer-events: none;
}
.lc-btn-shine:hover::after {
    transform: translateX(120%);
}

/* Staggered cascade for the Built for Everyone bullet lists — each <li> fades/slides in
   just after the last once the card itself has scrolled into view (parent already carries
   [data-lc-reveal-item], this just cascades its children instead of popping in as one block). */
.lc-bullet {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-lc-reveal-item].lc-revealed .lc-bullet {
    opacity: 1;
    transform: translateX(0);
}
.lc-bullet:nth-child(1) { transition-delay: 0.15s; }
.lc-bullet:nth-child(2) { transition-delay: 0.25s; }
.lc-bullet:nth-child(3) { transition-delay: 0.35s; }
.lc-bullet:nth-child(4) { transition-delay: 0.45s; }
.lc-bullet:nth-child(5) { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
    .lc-text-shimmer { animation: none; }
    .lc-btn-shine::after { display: none; }
    .lc-bullet { opacity: 1; transform: none; transition: none; }
}

/* Reveal variant: zoom-in (old creativeparkingsolutions.com used AOS "zoom-in-down" as its
   main scroll effect) — an alternate to the default fade-up, for sections that should stand
   out from the page's otherwise-uniform fade-up rhythm. Same [data-lc-reveal] element, just
   swaps the pre-reveal transform; source order (after the base rule above) is what lets this
   win over it, since both selectors share the same specificity. */
[data-lc-reveal-variant="zoom"] {
    transform: scale(0.88);
}
[data-lc-reveal-variant="zoom"].lc-revealed {
    transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
    [data-lc-reveal-variant="zoom"] {
        transform: none;
    }
}