/* =============================================
   Landing Page Effects & Animations
   Extracted from landingpage.blade.php for caching
   ============================================= */

/* 1. Animated gradient mesh background */
body.landing-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(125deg, #f8f9fa 0%, #eef2ff 25%, #f0f9ff 50%, #fef3f2 75%, #f8f9fa 100%);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}
body.landing-dark::before {
    background: linear-gradient(125deg, #0f172a 0%, #1e293b 25%, #0c4a6e 50%, #1e1b4b 75%, #0f172a 100%);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}
@keyframes gradientShift {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* 2. Scroll-reveal framework (IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-left   { transform: translateX(-40px); }
.reveal-right  { transform: translateX( 40px); }
.reveal-scale  { transform: scale(.92); }
.reveal.visible.reveal-left,
.reveal.visible.reveal-right,
.reveal.visible.reveal-scale { transform: none; }

/* 3. Animated counter for stats */
.counter { display: inline-block; font-variant-numeric: tabular-nums; }
.counter.is-counting { animation: countPulse .6s ease; }
@keyframes countPulse {
    0%   { transform: scale(1);   }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1);   }
}

/* 4. Magnetic CTA button */
.btn-magnetic {
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.btn-magnetic:hover { box-shadow: 0 10px 30px rgba(0,0,0,.12); }

/* 5. Floating decorative blobs (extra layer over existing ones) */
.lp-float-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
    animation: blobFloat 14s ease-in-out infinite;
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0,0)    scale(1);   }
    33%      { transform: translate(40px,-30px) scale(1.1); }
    66%      { transform: translate(-30px,40px) scale(.9); }
}

/* 6. Subtle parallax on images */
.parallax-img {
    transition: transform .8s cubic-bezier(.16,1,.3,1);
    will-change: transform;
}

/* 7. Section gradient overlays (very subtle) */
section { position: relative; }

/* 8. Animated underline on hover for nav links */
.lnding-menubar .nav-link,
.pricing-subnav .nav-link { position: relative; }
.lnding-menubar .nav-link::after,
.pricing-subnav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -4px;
    width: 0; height: 2px;
    background: currentColor;
    transition: width .25s, left .25s;
}
.lnding-menubar .nav-link:hover::after,
.pricing-subnav .nav-link:hover::after {
    width: 80%;
    left: 10%;
}

/* 9. Smooth fade-in on body load */
body.landing-page { animation: pageFadeIn .6s ease both; }
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 10. Smooth scroll for the whole page */
html { scroll-behavior: smooth; }

/* 11. Glassmorphism card class (opt-in) */
.glass-card {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 8px 32px rgba(15,23,42,.05);
}
body.landing-dark .glass-card {
    background: rgba(15,23,42,.65);
    border-color: rgba(255,255,255,.1);
}

/* 12. Pulse ring on "Get Started" buttons */
@keyframes ringPulse {
    0%   { box-shadow: 0 0 0 0    rgba(var(--bs-primary-rgb), .5); }
    70%  { box-shadow: 0 0 0 14px rgba(var(--bs-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0    rgba(var(--bs-primary-rgb), 0); }
}
.btn-pulse {
    animation: ringPulse 2.4s infinite;
}

/* 13. Animated "trusted by" logo strip */
.logo-marquee {
    display: flex;
    gap: 3rem;
    animation: marquee 28s linear infinite;
    width: max-content;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.logo-marquee img { filter: grayscale(100%); opacity: .7; transition: all .3s; }
.logo-marquee img:hover { filter: grayscale(0); opacity: 1; }

/* 14. Floating back-to-top button */
.lp-back-to-top {
    position: fixed;
    bottom: 30px; right: 30px;
    z-index: 9999;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(20px);
    transition: all .3s;
    pointer-events: none;
}
.lp-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.lp-back-to-top:hover { transform: translateY(-3px); }

/* 15. Section divider wave (between sections) */
.section-wave-divider {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: -1px;
}

/* 17. Image hover zoom — subtle scale + shadow on feature/screenshot cards */
.img-zoom {
    overflow: hidden;
}
.img-zoom img {
    transition: transform .5s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.img-zoom:hover img {
    transform: scale(1.06);
    filter: brightness(1.04);
}

/* 18. Shimmer card — moving highlight sweep across feature cards */
.card-shimmer {
    position: relative;
    overflow: hidden;
}
.card-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,.35) 48%,
        rgba(255,255,255,.5) 50%,
        rgba(255,255,255,.35) 52%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    pointer-events: none;
    transition: background-position .6s;
}
.card-shimmer:hover::after {
    background-position: -100% 0;
}
body.landing-dark .card-shimmer::after {
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,.08) 48%,
        rgba(255,255,255,.12) 50%,
        rgba(255,255,255,.08) 52%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
}

/* 19. Animated gradient text for section headings */
.text-gradient {
    background: linear-gradient(135deg, var(--bs-primary), #6366f1, #06b6d4, var(--bs-primary));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradientShift 6s ease infinite;
}
body.landing-dark .text-gradient {
    background: linear-gradient(135deg, #818cf8, #a5b4fc, #67e8f9, #818cf8);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradientShift 6s ease infinite;
}
@keyframes textGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 20. Gentle float — decorative or icon elements bob up/down */
.float-gentle {
    animation: floatGentle 4s ease-in-out infinite;
}
.float-gentle-delay-1 { animation-delay: .5s; }
.float-gentle-delay-2 { animation-delay: 1s; }
.float-gentle-delay-3 { animation-delay: 1.5s; }
@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* 21. Soft glow pulse for CTA buttons */
.btn-glow {
    animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px  rgba(var(--bs-primary-rgb), .3); }
    50%      { box-shadow: 0 0 24px rgba(var(--bs-primary-rgb), .6); }
}

/* 22. Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}