/*
 * Underskin — Grain overlay (flash-paper effect)
 * Grana carta stampata su bg chiaro Sabbia.
 * multiply blend + opacity più alta = grana visibile su base sabbia.
 * SVG turbulence data-URI (no external asset).
 */

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}

@media (max-width: 767px) {
    body::after {
        opacity: 0.4;
    }
}

/* Header grain locale — il site-header ha bg opaco + z-index positivo,
   quindi crea stacking context proprio e copre il body::after globale.
   Replichiamo la stessa texture come pseudo interno all'header così il
   grain resta uniforme dal top della pagina in giù.
   Palette-specific overrides (base.css .us-texture-*) hanno maggiore
   specificity e vincono per texture custom (paper-grain/heavy/light). */
.site-header {
    isolation: isolate;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    background-repeat: repeat;
}

.site-header > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .site-header::before {
        opacity: 0.4;
    }
}

/* Grain locale su surface areas (sezioni con --section-bg inline, footer,
   card con surface bg). Intensità più bassa del body — la carta stampata
   "vera" ha la trama meno visibile dove c'è pigmento saturo, quindi surface
   bg = grain attenuato. */
main > section,
main > .page-hero,
.artist-card,
.event-card,
.merch-card,
.upcoming-card {
    position: relative;
    isolation: isolate;
}

main > section::before,
main > .page-hero::before,
.artist-card::before,
.event-card::before,
.merch-card::before,
.upcoming-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    background-repeat: repeat;
}

/* Assicura che i figli stiano SOPRA il pseudo grain — se il contenuto è già
   in-flow con z-index auto, funziona; ma alcune section hanno figli con
   z-index custom, quindi normalizziamo. */
main > section > *,
main > .page-hero > *,
.artist-card > *,
.event-card > *,
.merch-card > *,
.upcoming-card > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    main > section::before,
    main > .page-hero::before,
    .artist-card::before,
    .event-card::before,
    .merch-card::before,
    .upcoming-card::before {
        opacity: 0.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after,
    .site-header::before,
    main > section::before,
    main > .page-hero::before,
    .artist-card::before,
    .event-card::before,
    .merch-card::before,
    .upcoming-card::before {
        display: none;
    }
}