{{-- Celebration flash: premium gifted / new subscription. Big, colored banner + confetti.
     Driven by session('celebrate'). Self-contained (inline style/JS) because the asset
     build is currently broken — keep it dependency-free. --}}
@if(session('celebrate'))
    <div class="fermenty-celebrate" id="fermentyCelebrate" role="alert">
        <button type="button" class="celebrate-close" aria-label="Cerrar"
                onclick="var b=document.getElementById('fermentyCelebrate');b&&b.remove();">&times;</button>
        <div class="celebrate-emoji">🎉</div>
        <div class="celebrate-text">{{ session('celebrate') }}</div>
    </div>
    <canvas id="fermentyConfetti" aria-hidden="true"></canvas>

    <style>
        .fermenty-celebrate{
            position:relative; z-index:2001;
            max-width:760px; margin:18px auto 0; padding:20px 52px 20px 24px;
            border-radius:18px; color:#fff;
            background:linear-gradient(120deg,#2C5234 0%,#4B7A50 45%,#C9621A 100%);
            box-shadow:0 12px 30px rgba(22,39,27,.28);
            display:flex; align-items:center; gap:16px;
            animation:celebratePop .5s cubic-bezier(.2,.9,.3,1.3);
        }
        .fermenty-celebrate .celebrate-emoji{ font-size:40px; line-height:1; flex:0 0 auto; animation:celebrateBounce 1s ease infinite; }
        .fermenty-celebrate .celebrate-text{ font-size:1.25rem; font-weight:700; line-height:1.3; letter-spacing:.2px; }
        .fermenty-celebrate .celebrate-close{
            position:absolute; top:8px; right:14px; background:none; border:0;
            color:rgba(255,255,255,.8); font-size:26px; line-height:1; cursor:pointer;
        }
        .fermenty-celebrate .celebrate-close:hover{ color:#fff; }
        #fermentyConfetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:2000; }
        @keyframes celebratePop{ 0%{transform:scale(.85) translateY(-12px);opacity:0;} 100%{transform:scale(1) translateY(0);opacity:1;} }
        @keyframes celebrateBounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
        @media (max-width:600px){
            .fermenty-celebrate{ margin:12px; padding:16px 44px 16px 18px; }
            .fermenty-celebrate .celebrate-text{ font-size:1.05rem; }
        }
    </style>

    <script>
    (function(){
        // Gently auto-dismiss the banner.
        setTimeout(function(){
            var b=document.getElementById('fermentyCelebrate');
            if(b){ b.style.transition='opacity .6s,transform .6s'; b.style.opacity='0'; b.style.transform='translateY(-10px)';
                   setTimeout(function(){ b&&b.remove(); }, 650); }
        }, 9000);

        var c=document.getElementById('fermentyConfetti');
        if(!c) return;

        // Respect reduced-motion: skip the confetti, keep the banner.
        if(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches){ c.remove(); return; }

        var ctx=c.getContext('2d'), W, H, raf;
        var colors=['#4B7A50','#2C5234','#C9621A','#B07E24','#C2DCB6','#FBE9C1','#F6E6CB','#FFFFFF'];
        function resize(){ W=c.width=window.innerWidth; H=c.height=window.innerHeight; }
        resize(); window.addEventListener('resize', resize);

        var parts=[];
        for(var i=0;i<150;i++){
            parts.push({
                x:Math.random()*W, y:Math.random()*-H,
                r:6+Math.random()*7, d:2+Math.random()*4,
                col:colors[(Math.random()*colors.length)|0],
                rot:Math.random()*Math.PI, spin:(Math.random()*0.12)+0.03
            });
        }

        var start=Date.now(), DURATION=4500;
        function loop(){
            var elapsed=Date.now()-start;
            ctx.clearRect(0,0,W,H);
            for(var i=0;i<parts.length;i++){
                var p=parts[i];
                p.y+=p.d; p.x+=Math.sin(elapsed/300+i)*1.1; p.rot+=p.spin;
                if(p.y>H+20){ p.y=-20; p.x=Math.random()*W; }
                ctx.save(); ctx.translate(p.x,p.y); ctx.rotate(p.rot);
                ctx.fillStyle=p.col; ctx.fillRect(-p.r/2,-p.r/2,p.r,p.r*0.62);
                ctx.restore();
            }
            if(elapsed<DURATION){ raf=requestAnimationFrame(loop); }
            else { c.style.transition='opacity .8s'; c.style.opacity='0';
                   setTimeout(function(){ if(c&&c.parentNode) c.parentNode.removeChild(c); }, 850); }
        }
        loop();
    })();
    </script>
@endif