/* =============================================================
   SHUVINO — Themed Section Backgrounds (additive layer)
   Floating ecommerce icons + glow blobs + dotted texture
   ============================================================= */

/* Ensure content sits above decoration */
.sh-section { position: relative; overflow: hidden; }
.sh-section > .sh-container { position: relative; z-index: 2; }

/* ---------- Soft brand glow blobs per section ---------- */
.sh-section::before,
.sh-section::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(70px);
    z-index: 0; pointer-events: none; opacity: .55;
}
.sh-section::before {
    width: 360px; height: 360px; top: -110px; left: -120px;
    background: radial-gradient(circle, rgba(18,59,147,.12), transparent 70%);
    animation: sh-blob-a 18s ease-in-out infinite;
}
.sh-section::after {
    width: 320px; height: 320px; bottom: -110px; right: -110px;
    background: radial-gradient(circle, rgba(15,167,160,.12), transparent 70%);
    animation: sh-blob-b 22s ease-in-out infinite;
}
.sh-section:nth-of-type(even)::after {
    background: radial-gradient(circle, rgba(255,106,0,.11), transparent 70%);
}
.sh-section:nth-of-type(3n)::before {
    background: radial-gradient(circle, rgba(15,167,160,.11), transparent 70%);
}
@keyframes sh-blob-a { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,30px) scale(1.15);} }
@keyframes sh-blob-b { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-36px,-26px) scale(1.12);} }

/* sections that already carry a full-bleed rich band: no page-level blobs */
.sh-section.sh-no-deco::before,
.sh-section.sh-no-deco::after { display: none; }

/* ---------- Dotted texture layer ---------- */
.sh-bg-layer {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.sh-bg-layer--dots::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(18,59,147,.06) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 75%);
    opacity: .7;
}

/* ---------- Floating ecommerce icons ---------- */
.sh-float-ico {
    position: absolute; z-index: 0; pointer-events: none; line-height: 1;
    color: var(--sh-blue); opacity: .07; will-change: transform;
    animation: sh-drift var(--d, 16s) ease-in-out infinite; animation-delay: var(--delay, 0s);
}
.sh-float-ico--o { color: var(--sh-orange); opacity: .08; }
.sh-float-ico--t { color: var(--sh-teal); opacity: .08; }
.sh-float-ico--soft { opacity: .05; }
@keyframes sh-drift {
    0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%     { transform: translateY(-28px) rotate(calc(var(--r, 0deg) + 10deg)); }
}

/* On dark bands, icons in the surrounding padding read better a touch lighter */
.bg-soft.sh-section::before { opacity: .6; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sh-section::before, .sh-section::after,
    .sh-float-ico { animation: none !important; }
}

/* Trim decoration density / cost on small screens */
@media (max-width: 680px) {
    .sh-float-ico { display: none; }
    .sh-section::before, .sh-section::after { filter: blur(50px); opacity: .4; }
}