/* texture.css — Global texture rendering
   ========================================
   Wave texture with feathered cross-dissolve masking.
   Two layers offset by half-tile with complementary masks.
   
   Variables defined in palette-retro-warm.css.
   ======================================== */

/* Preview area is the texture container */
:where(body.palette-retro-warm) .page-content.texture-scope-global {
    background-color: var(--stone);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Sections transparent so texture shows through */
.page-content.texture-scope-global > .section {
    background-color: transparent !important;
}
.page-content.texture-scope-global > .section::before,
.page-content.texture-scope-global > .section::after {
    display: none !important;
}

/* Global texture divs (hidden by default) */
.global-texture-base,
.global-texture-layer {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Show when global scope active */
:where(body.palette-retro-warm) .page-content.texture-scope-global .global-texture-base,
:where(body.palette-retro-warm) .page-content.texture-scope-global .global-texture-layer {
    display: block;
}

/* Stone base behind masked layers */
:where(body.palette-retro-warm) .page-content.texture-scope-global .global-texture-base {
    background-color: var(--stone);
}

/* Shared texture layer properties */
:where(body.palette-retro-warm) .page-content.texture-scope-global .global-texture-layer {
    background-image: var(--retro-warm-bg-texture);
    background-size: var(--retro-warm-bg-size);
    background-repeat: var(--retro-warm-bg-repeat);
    mix-blend-mode: var(--retro-warm-bg-blend);
    opacity: calc(var(--retro-warm-texture-opacity) / 2);
}

/* Layer 1: radial mask shows tile centers */
:where(body.palette-retro-warm) .page-content.texture-scope-global .global-texture-layer-1 {
    background-position: 0 0;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
    mask-size: var(--retro-warm-bg-size);
    mask-repeat: repeat;
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
    -webkit-mask-size: var(--retro-warm-bg-size);
    -webkit-mask-repeat: repeat;
}

/* Layer 2: offset half-tile, inverse mask shows edges */
:where(body.palette-retro-warm) .page-content.texture-scope-global .global-texture-layer-2 {
    background-position: var(--retro-warm-bg-half-size) var(--retro-warm-bg-half-size);
    mask-image: radial-gradient(ellipse at center, transparent 30%, black 60%);
    mask-size: var(--retro-warm-bg-size);
    mask-repeat: repeat;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, black 60%);
    -webkit-mask-size: var(--retro-warm-bg-size);
    -webkit-mask-repeat: repeat;
}

/* Testimonials keep bone bg for contrast */
.page-content.texture-scope-global .testimonials-split {
    background: var(--bone) !important;
}