@php
    $effect = in_array(($d['effect'] ?? 'fade-up'), ['fade-up', 'fade-in', 'slide-left', 'slide-right', 'zoom-in'], true)
        ? $d['effect']
        : 'fade-up';
    $duration = max(200, min(3000, (int) ($d['duration'] ?? 700)));
    $stagger = (bool) ($d['stagger'] ?? true);
@endphp

<style>
    @keyframes animfx-fade-up {
        from { opacity: 0; transform: translate3d(0, var(--animfx-y, 40px), 0) scale(var(--animfx-scale, 0.96)); filter: blur(var(--animfx-blur, 8px)); }
        to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    }
    @keyframes animfx-fade-in {
        from { opacity: 0; transform: scale(var(--animfx-scale, 0.98)); filter: blur(var(--animfx-blur, 8px)); }
        to { opacity: 1; transform: scale(1); filter: blur(0); }
    }
    @keyframes animfx-slide-left {
        from { opacity: 0; transform: translate3d(var(--animfx-x, 56px), 0, 0) scale(var(--animfx-scale, 0.98)); filter: blur(var(--animfx-blur, 6px)); }
        to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    }
    @keyframes animfx-slide-right {
        from { opacity: 0; transform: translate3d(calc(var(--animfx-x, 56px) * -1), 0, 0) scale(var(--animfx-scale, 0.98)); filter: blur(var(--animfx-blur, 6px)); }
        to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    }
    @keyframes animfx-zoom-in {
        from { opacity: 0; transform: translate3d(0, var(--animfx-y, 20px), 0) scale(var(--animfx-scale, 0.9)); filter: blur(var(--animfx-blur, 10px)); }
        to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
    }

    .animfx-ready,
    .animfx-child-ready {
        opacity: 0;
        will-change: transform, opacity, filter;
        backface-visibility: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
        .animfx-ready,
        .animfx-child-ready {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            animation: none !important;
            transition: none !important;
        }
    }
</style>

<script>
    (function() {
        if (typeof IntersectionObserver === 'undefined') {
            return;
        }
        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            return;
        }
        if (window.__animfxEnhancedBound) {
            return;
        }
        window.__animfxEnhancedBound = true;

        const effect = @json($effect);
        const duration = @json($duration);
        const stagger = @json($stagger);
        const animationName = 'animfx-' + effect;
        const easing = 'cubic-bezier(0.22, 0.61, 0.36, 1)';

        const scope = document.querySelector('main') || document;
        const allSections = Array.from(scope.querySelectorAll('section'));
        const targets = allSections.filter((el) => !el.dataset.animfxBound && !el.closest('header') && !el.closest('footer'));

        if (!targets.length) {
            return;
        }

        const fxPreset = {
            'fade-up': { x: '0px', y: '44px', scale: '0.96', blur: '10px' },
            'fade-in': { x: '0px', y: '0px', scale: '0.97', blur: '9px' },
            'slide-left': { x: '64px', y: '0px', scale: '0.99', blur: '7px' },
            'slide-right': { x: '64px', y: '0px', scale: '0.99', blur: '7px' },
            'zoom-in': { x: '0px', y: '24px', scale: '0.9', blur: '11px' },
        }[effect] || { x: '0px', y: '40px', scale: '0.96', blur: '8px' };

        const childSelector = [
            'h1', 'h2', 'h3', 'h4', 'h5',
            'p', 'li', 'blockquote',
            'img', 'figure',
            'a', 'button',
            '.rounded-xl', '.rounded-2xl',
            '.card', '[class*="shadow"]'
        ].join(',');

        function prepareNode(el, isChild) {
            el.classList.add(isChild ? 'animfx-child-ready' : 'animfx-ready');
            el.style.setProperty('--animfx-x', fxPreset.x);
            el.style.setProperty('--animfx-y', fxPreset.y);
            el.style.setProperty('--animfx-scale', fxPreset.scale);
            el.style.setProperty('--animfx-blur', fxPreset.blur);
        }

        function revealNode(el, delay) {
            el.style.animation = `${animationName} ${duration}ms ${easing} ${delay}ms both`;
        }

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting) {
                    return;
                }
                const el = entry.target;
                const index = Number(el.dataset.animfxIndex || 0);
                const sectionDelay = stagger ? index * 110 : 0;

                revealNode(el, sectionDelay);

                const children = Array.from(el.querySelectorAll(childSelector))
                    .filter((node) => node.offsetParent !== null && !node.dataset.animfxChildBound)
                    .slice(0, 24);

                children.forEach((child, childIndex) => {
                    child.dataset.animfxChildBound = '1';
                    prepareNode(child, true);
                    const childDelay = sectionDelay + 120 + (stagger ? childIndex * 55 : 0);
                    revealNode(child, childDelay);
                });

                observer.unobserve(el);
            });
        }, { threshold: 0.18 });

        targets.forEach((el, index) => {
            el.dataset.animfxBound = '1';
            el.dataset.animfxIndex = String(index);
            prepareNode(el, false);
            observer.observe(el);
        });
    })();
</script>
