/* ──────────────────────────────────────────────────────────────
 * LearnPlus block background effects
 * Used by PageRenderer::applyBackground() in app/Modules/Frontend/Services/PageRenderer.php
 * Loaded from app/Views/layouts/public.php
 * ────────────────────────────────────────────────────────────── */

.lp-bg-wrap     { position:relative; overflow:hidden; isolation:isolate; }
.lp-bg-content  { position:relative; z-index:3; }
.lp-bg-overlay  { position:absolute; inset:0; z-index:2; pointer-events:none; }
.lp-bg-video    { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.lp-bg-fx       { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }

/* Speed modifiers (consumed via --bg-fx-speed) */
.lp-bg-anim-spd-slow   { --bg-fx-speed: 24s; }
.lp-bg-anim-spd-normal { --bg-fx-speed: 12s; }
.lp-bg-anim-spd-fast   { --bg-fx-speed: 6s; }

/* Intensity modifiers (consumed via --bg-fx-alpha) */
.lp-bg-anim-int-subtle { --bg-fx-alpha: .15; }
.lp-bg-anim-int-medium { --bg-fx-alpha: .3;  }
.lp-bg-anim-int-strong { --bg-fx-alpha: .55; }

@media (prefers-reduced-motion: reduce) {
    .lp-bg-anim *, .lp-bg-anim, .lp-bg-fx, .lp-bg-fx::before, .lp-bg-fx::after {
        animation: none !important;
    }
}

/* ── 1. Gradient shift (animates the wrapper's own background) ── */
.lp-bg-anim-gradient-shift { background-size: 200% 200% !important; animation: lp-grad-shift var(--bg-fx-speed,12s) ease infinite; }
@keyframes lp-grad-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── 2. Gradient pulse (brightness / saturation) ── */
.lp-bg-anim-gradient-pulse { animation: lp-grad-pulse var(--bg-fx-speed,12s) ease-in-out infinite; }
@keyframes lp-grad-pulse { 0%,100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.15) saturate(1.25); } }

/* ── 3. Particles (small floating dots, tile-based scroll) ── */
.lp-bg-fx-particles {
    background-image:
        radial-gradient(circle, rgba(255,255,255,var(--bg-fx-alpha,.4)) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,calc(var(--bg-fx-alpha,.4) * .6)) 1px, transparent 1.6px);
    background-size: 50px 50px, 80px 80px;
    background-position: 0 0, 25px 25px;
    animation: lp-particles var(--bg-fx-speed,12s) linear infinite;
}
@keyframes lp-particles { from { background-position: 0 0, 25px 25px; } to { background-position: 0 50px, 25px 105px; } }

/* ── 4. Blobs (morphing radial glows, blurred) ── */
.lp-bg-fx-blob {
    background:
        radial-gradient(circle 200px at 20% 30%, rgba(124,58,237,var(--bg-fx-alpha,.45)) 0%, transparent 60%),
        radial-gradient(circle 240px at 80% 70%, rgba(236,72,153,var(--bg-fx-alpha,.45)) 0%, transparent 60%),
        radial-gradient(circle 180px at 50% 50%, rgba(34,211,238,var(--bg-fx-alpha,.45)) 0%, transparent 60%);
    filter: blur(40px);
    animation: lp-blob var(--bg-fx-speed,16s) ease-in-out infinite alternate;
}
@keyframes lp-blob {
    0%   { transform: translate(0,0)        scale(1);   }
    50%  { transform: translate(30px,-40px) scale(1.1); }
    100% { transform: translate(-25px,25px) scale(.92); }
}

/* ── 5. Aurora (drifting colored bands, blurred) ── */
.lp-bg-fx-aurora {
    background:
        linear-gradient(180deg, transparent 30%, rgba(34,211,238, var(--bg-fx-alpha,.3))  50%, transparent 70%),
        linear-gradient(220deg, transparent 40%, rgba(168, 85,247, var(--bg-fx-alpha,.25)) 55%, transparent 70%),
        linear-gradient(280deg, transparent 30%, rgba(236, 72,153, var(--bg-fx-alpha,.25)) 50%, transparent 70%);
    background-size: 200% 200%;
    filter: blur(24px);
    animation: lp-aurora var(--bg-fx-speed,14s) ease-in-out infinite alternate;
}
@keyframes lp-aurora { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

/* ── 6. Waves (SVG wave at bottom, scrolling) ── */
.lp-bg-fx-waves {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.3)' d='M0,25 C50,5 100,45 150,25 C175,15 200,25 200,25 L200,50 L0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 50% auto;
    opacity: var(--bg-fx-alpha,.5);
    animation: lp-waves var(--bg-fx-speed,12s) linear infinite;
}
@keyframes lp-waves { from { background-position: 0 100%; } to { background-position: -100% 100%; } }

/* ── 7. Stars (twinkling dots) ── */
.lp-bg-fx-stars {
    background-image:
        radial-gradient(2px 2px at 12% 18%, white, transparent 60%),
        radial-gradient(1px 1px at 78% 42%, white, transparent 60%),
        radial-gradient(1.5px 1.5px at 32% 72%, white, transparent 60%),
        radial-gradient(1px 1px at 60% 28%, white, transparent 60%),
        radial-gradient(2px 2px at 88% 82%, white, transparent 60%),
        radial-gradient(1.5px 1.5px at 42% 52%, white, transparent 60%),
        radial-gradient(1px 1px at 8% 88%, white, transparent 60%),
        radial-gradient(1px 1px at 95% 12%, white, transparent 60%);
    opacity: var(--bg-fx-alpha,.4);
    animation: lp-twinkle calc(var(--bg-fx-speed,12s) / 4) ease-in-out infinite alternate;
}
@keyframes lp-twinkle { 0% { opacity: calc(var(--bg-fx-alpha,.4) * .35); } 100% { opacity: var(--bg-fx-alpha,.4); } }

/* ── 8. Rays (rotating conic ray fan) ── */
.lp-bg-fx-rays {
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,var(--bg-fx-alpha,.08)) 0deg 10deg, transparent 10deg 30deg);
    animation: lp-rays calc(var(--bg-fx-speed,12s) * 2) linear infinite;
    transform-origin: 50% 50%;
}
@keyframes lp-rays { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── 9. Glow pulse (radial glow that breathes) ── */
.lp-bg-fx-glow-pulse {
    background: radial-gradient(circle at center, rgba(124,58,237,var(--bg-fx-alpha,.4)) 0%, transparent 60%);
    animation: lp-glow calc(var(--bg-fx-speed,12s) / 3) ease-in-out infinite;
}
@keyframes lp-glow { 0%,100% { transform: scale(.92); opacity: .6; } 50% { transform: scale(1.06); opacity: 1; } }

/* ── 10. Noise (SVG film grain, blended) ── */
.lp-bg-fx-noise {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: var(--bg-fx-alpha,.15);
    mix-blend-mode: overlay;
    animation: lp-noise .8s steps(5) infinite;
}
@keyframes lp-noise {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-5px,3px); }
    40%  { transform: translate(3px,-5px); }
    60%  { transform: translate(-3px,3px); }
    80%  { transform: translate(5px,-3px); }
    100% { transform: translate(0,0); }
}

/* ── 11. Mesh (multi-color radial mesh, drifting) ── */
.lp-bg-fx-mesh {
    background:
        radial-gradient(at 20% 20%, rgba(124, 58,237, var(--bg-fx-alpha,.35)) 0%, transparent 45%),
        radial-gradient(at 80% 30%, rgba(236, 72,153, var(--bg-fx-alpha,.35)) 0%, transparent 45%),
        radial-gradient(at 30% 80%, rgba( 34,211,238, var(--bg-fx-alpha,.35)) 0%, transparent 45%),
        radial-gradient(at 80% 70%, rgba(251,191, 36, var(--bg-fx-alpha,.35)) 0%, transparent 45%);
    background-size: 200% 200%;
    animation: lp-mesh calc(var(--bg-fx-speed,12s) * 1.5) ease-in-out infinite alternate;
    filter: blur(8px);
}
@keyframes lp-mesh { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

/* ── 12. Snow (falling dots) ── */
.lp-bg-fx-snow {
    background-image:
        radial-gradient(2px 2px at 10% 10%, rgba(255,255,255,var(--bg-fx-alpha,.5)) 50%, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(255,255,255,calc(var(--bg-fx-alpha,.5) * .8)) 50%, transparent),
        radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,var(--bg-fx-alpha,.5)) 50%, transparent),
        radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,calc(var(--bg-fx-alpha,.5) * .6)) 50%, transparent),
        radial-gradient(1.5px 1.5px at 50% 80%, rgba(255,255,255,calc(var(--bg-fx-alpha,.5) * .9)) 50%, transparent);
    background-size: 200px 200px;
    animation: lp-snow var(--bg-fx-speed,10s) linear infinite;
}
@keyframes lp-snow { from { background-position: 0 0; } to { background-position: 0 200px; } }

/* ── 13. Matrix (faint vertical code-rain hint) ── */
.lp-bg-fx-matrix {
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(34,197,94, var(--bg-fx-alpha,.35)) 50%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(34,197,94, calc(var(--bg-fx-alpha,.35) * .7)) 60%, transparent 100%);
    background-size: 20px 60vh, 30px 80vh;
    background-position: 0 -60vh, 15px -80vh;
    background-repeat: repeat-x;
    animation: lp-matrix var(--bg-fx-speed,6s) linear infinite;
}
@keyframes lp-matrix { from { background-position: 0 -60vh, 15px -80vh; } to { background-position: 0 60vh, 15px 80vh; } }

/* ── 14. Ken Burns (slow zoom on wrapper background image) ── */
.lp-bg-anim-ken-burns { animation: lp-ken-burns calc(var(--bg-fx-speed,12s) * 2) ease-in-out infinite alternate; }
@keyframes lp-ken-burns { 0% { background-size: 110%; background-position: center center; } 100% { background-size: 130%; background-position: top center; } }

/* ── 15. Zoom pulse (subtle background heartbeat) ── */
.lp-bg-anim-zoom-pulse { animation: lp-zoom-pulse calc(var(--bg-fx-speed,12s) / 3) ease-in-out infinite; }
@keyframes lp-zoom-pulse { 0%,100% { background-size: 100% auto; } 50% { background-size: 108% auto; } }