/* =========================================================
   SPOTRAX Reveal Effects
   Completely isolated visual-only layer.
   OFF: remove body class or remove this CSS/JS.
========================================================= */

/* first paint guard */
body.spx-reveal .nowhere-tile{
    opacity:0;
}

body.spx-reveal .nowhere-tile.spx-is-revealed,
body.spx-reveal .nowhere-tile.spx-reveal-done{
    opacity:1;
}

/* modal flicker guard */
.nowhere-map-modal.hidden,
.nowhere-concept-modal.hidden,
#filter-modal.hidden,
#map-modal.hidden,
#product-modal.hidden,
#cart-modal.hidden{
    display:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/*
Available body classes:

spx-reveal
spx-reveal--develop
spx-reveal--silent
spx-reveal--scan
*/

/* safety */
body.spx-reveal .nowhere-tile,
body.spx-reveal .nowhere-tile *,
body.spx-reveal .nowhere-row,
body.spx-reveal .nowhere-row *{
    pointer-events:inherit;
}

/* base: before reveal */
body.spx-reveal .nowhere-tile{
    --spx-delay:0ms;
}

/* do not touch infinite track transform */
body.spx-reveal .nowhere-row .is-track{
    will-change:transform;
}

/* =========================================================
   01. DEVELOP
   photo developing / quiet focus
========================================================= */

body.spx-reveal.spx-reveal--develop .nowhere-tile{
    opacity:0;
    filter:blur(14px) brightness(1.08) saturate(.78);
}

body.spx-reveal.spx-reveal--develop .nowhere-tile.spx-is-revealed{
    animation:
        spxDevelopIn 1200ms cubic-bezier(.22,.85,.24,1) var(--spx-delay) both;
}

body.spx-reveal.spx-reveal--develop .nowhere-tile.spx-is-revealed .nowhere-tile__image{
    animation:
        spxDevelopImage 1600ms cubic-bezier(.22,.85,.24,1) var(--spx-delay) both;
}

@keyframes spxDevelopIn{
    0%{
        opacity:0;
        filter:blur(14px) brightness(1.08) saturate(.78);
    }
    55%{
        opacity:1;
    }
    100%{
        opacity:1;
        filter:blur(0) brightness(1) saturate(1);
    }
}

@keyframes spxDevelopImage{
    0%{
        filter:contrast(.92) brightness(1.08) saturate(.82);
    }
    100%{
        filter:contrast(1) brightness(1) saturate(1);
    }
}

/* =========================================================
   02. SILENT
   calmer, almost no motion
========================================================= */

body.spx-reveal.spx-reveal--silent .nowhere-tile{
    opacity:0;
    filter:blur(8px);
}

body.spx-reveal.spx-reveal--silent .nowhere-tile.spx-is-revealed{
    animation:
        spxSilentIn 1400ms ease var(--spx-delay) both;
}

@keyframes spxSilentIn{
    0%{
        opacity:0;
        filter:blur(8px);
    }
    100%{
        opacity:1;
        filter:blur(0);
    }
}

/* =========================================================
   03. SCAN
   very subtle coordinate scan feel
========================================================= */

body.spx-reveal.spx-reveal--scan .nowhere-tile{
    opacity:0;
    filter:blur(10px) brightness(1.04);
}

body.spx-reveal.spx-reveal--scan .nowhere-tile::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    opacity:0;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255,255,255,.45) 48%,
            transparent 100%
        );
    transform:translateY(-110%);
}

body.spx-reveal.spx-reveal--scan .nowhere-tile.spx-is-revealed{
    animation:
        spxScanIn 1000ms cubic-bezier(.22,.85,.24,1) var(--spx-delay) both;
}

body.spx-reveal.spx-reveal--scan .nowhere-tile.spx-is-revealed::after{
    animation:
        spxScanLine 1150ms cubic-bezier(.22,.85,.24,1) var(--spx-delay) both;
}

@keyframes spxScanIn{
    0%{
        opacity:0;
        filter:blur(10px) brightness(1.04);
    }
    100%{
        opacity:1;
        filter:blur(0) brightness(1);
    }
}

@keyframes spxScanLine{
    0%{
        opacity:0;
        transform:translateY(-110%);
    }
    20%{
        opacity:.7;
    }
    100%{
        opacity:0;
        transform:translateY(110%);
    }
}

/* after finished: keep clean */
body.spx-reveal .nowhere-tile.spx-reveal-done{
    opacity:1;
    filter:none;
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
    body.spx-reveal .nowhere-tile,
    body.spx-reveal .nowhere-tile.spx-is-revealed,
    body.spx-reveal .nowhere-tile.spx-is-revealed .nowhere-tile__image,
    body.spx-reveal .nowhere-tile.spx-is-revealed::after{
        animation:none;
        opacity:1;
        filter:none;
        transform:none;
    }
}

/* COLLECTION filter modal flicker guard */
[data-spx-filter-modal][hidden]{
    display:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

[data-spx-filter-trigger][disabled]{
    opacity:.25;
    pointer-events:none;
}