/**
 * Background Noise System
 *
 * SVG feTurbulence-based noise textures as data URIs.
 * Applied to .bg-layers__noise layer (z-index: 2).
 */

/* ==========================================================================
   Noise Layer Base
   ========================================================================== */

.bg-layers__noise {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--bg-noise-opacity, 0.10);
    mix-blend-mode: overlay;
}

/* ==========================================================================
   Fine Grain — subtle film-like texture
   ========================================================================== */

[data-bg-noise="fine-grain"] > .bg-layers__noise {
    --bg-noise-opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ==========================================================================
   Grain — standard noise
   ========================================================================== */

[data-bg-noise="grain"] > .bg-layers__noise {
    --bg-noise-opacity: 0.10;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ==========================================================================
   Coarse Grain — visible paper-like texture
   ========================================================================== */

[data-bg-noise="coarse-grain"] > .bg-layers__noise {
    --bg-noise-opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ==========================================================================
   Film Grain — animated jittery grain
   ========================================================================== */

[data-bg-noise="film-grain"] > .bg-layers__noise {
    --bg-noise-opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    animation: grain-drift 8s steps(10) infinite;
}

@keyframes grain-drift {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-5%, -10%); }
    20%  { transform: translate(-15%, 5%); }
    30%  { transform: translate(7%, -25%); }
    40%  { transform: translate(-5%, 25%); }
    50%  { transform: translate(-15%, 10%); }
    60%  { transform: translate(15%, 0); }
    70%  { transform: translate(0, 15%); }
    80%  { transform: translate(3%, 35%); }
    90%  { transform: translate(-10%, 10%); }
    100% { transform: translate(0, 0); }
}

/* ==========================================================================
   Accessibility & Performance
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-bg-noise="film-grain"] > .bg-layers__noise {
        animation: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .bg-layers__noise {
        display: none;
    }
}

@media print {
    .bg-layers__noise {
        display: none;
    }
}