/* ==========================================================================
   Weavique London — faint fabric/factory photo "watermarks" behind white sections.
   Add class="tex tex-weave" (or tex-knit, tex-cones, tex-denim, tex-needles,
   tex-fleece) to a section. The photo sits at low strength under a soft wash
   so headings and body text stay crisp. Loaded after theme.css.
   ========================================================================== */

.tex { position: relative; isolation: isolate; overflow: hidden; }

/* the photo */
.tex::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tex-img);
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.05);
    opacity: 0.42;
    pointer-events: none;
}

/* the wash that keeps text readable: strongest in the middle where the text is */
.tex::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 65% at 50% 50%, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0.18) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0) 86%, rgba(255, 255, 255, 0.45) 100%);
    pointer-events: none;
}

/* Slow parallax on desktops with a mouse (phones scroll normally) */
@media (min-width: 992px) and (hover: hover) {
    .tex::before { background-attachment: fixed; }
}

.tex-weave   { --tex-img: url("../img/tex-weave.jpg"); }
.tex-knit    { --tex-img: url("../img/tex-knit.jpg"); }
.tex-cones   { --tex-img: url("../img/tex-cones.jpg"); }
.tex-denim   { --tex-img: url("../img/tex-denim.jpg"); }
.tex-needles { --tex-img: url("../img/tex-needles.jpg"); }
.tex-fleece  { --tex-img: url("../img/tex-fleece.jpg"); }

/* Text on textured sections: a faint glow keeps letters crisp over busy photo areas */
.tex p, .tex li, .tex h1, .tex h2, .tex h3, .tex h4, .tex h5, .tex h6, .tex .contact-value { text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9); }
html[data-theme="dark"] .tex p, html[data-theme="dark"] .tex li, html[data-theme="dark"] .tex :is(h1, h2, h3, h4, h5, h6), html[data-theme="dark"] .tex .contact-value { text-shadow: 0 0 12px rgba(7, 14, 28, 0.95), 0 0 2px rgba(7, 14, 28, 0.9); }
.tex .btn, .tex .btn *, .tex .text-white, .tex .bg-primary * { text-shadow: none; }

/* Cards and form fields on textured sections get a light frosted backing */
.tex .moq-point,
.tex .moq-feature { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ---------- Dark mode: brighter photo, navy wash ---------- */
html[data-theme="dark"] .tex::before { opacity: 0.55; filter: grayscale(0.4) contrast(1.1); }
html[data-theme="dark"] .tex::after {
    background:
        radial-gradient(ellipse 70% 65% at 50% 50%, rgba(7, 14, 28, 0.74) 0%, rgba(7, 14, 28, 0.5) 60%, rgba(7, 14, 28, 0.25) 100%),
        linear-gradient(180deg, rgba(7, 14, 28, 0.7) 0%, rgba(7, 14, 28, 0) 18%, rgba(7, 14, 28, 0) 82%, rgba(7, 14, 28, 0.7) 100%);
}
html[data-theme="dark"] .tex .moq-point,
html[data-theme="dark"] .tex .moq-feature { background: rgba(17, 29, 51, 0.82); }

@media (prefers-reduced-motion: reduce) {
    .tex::before { background-attachment: scroll; }
}

/* ---------- Softer version for long reading pages (blog, privacy, quote form) ---------- */
.tex-soft::before { opacity: 0.32; }
.tex-soft::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.78) 22%, rgba(255, 255, 255, 0.82) 50%, rgba(255, 255, 255, 0.78) 78%, rgba(255, 255, 255, 0.25) 100%);
}
html[data-theme="dark"] .tex-soft::before { opacity: 0.45; }
html[data-theme="dark"] .tex-soft::after {
    background:
        linear-gradient(90deg, rgba(7, 14, 28, 0.3) 0%, rgba(7, 14, 28, 0.82) 22%, rgba(7, 14, 28, 0.86) 50%, rgba(7, 14, 28, 0.82) 78%, rgba(7, 14, 28, 0.3) 100%);
}