/* ==========================================================================
   NSR prototype - texture layer (round 4)
   The page was a good start but flat: black fields, flat colour blocks, nothing to touch. This file gives it material, in four ways:
   - the factual part is a sheet of paper and the decision part an Infrared poster: full-width sheets with soft corners, stacked over the dark page,
     each with its own grain (assets/tex/paper.webp, ink.webp);
   - the dark sections carry faint contour lines, the same language as the lines on the hero object, with one Infrared contour among them
     (assets/tex/topo*.svg, drawn from a noise field by tools/make-texture.cjs);
   - photographs are shaded with a halftone screen instead of a plain gradient, and carry a hairline rim;
   - the poster has a halftone corner and two outlines of pills.
   Everything is baked into backgrounds that paint once, never a fixed overlay with a blend mode, so none of it costs a frame while scrolling.
   Owner rule (2026-10-14): no sharp corners. Sheets, frames and bars are rounded; there are no torn or jagged edges.
   The whole layer goes with data-atmos (see polish.css).
   ========================================================================== */

/* ---------- sheets: stacked, rounded, each laid over the section before it ------------------------------------------------ */
.zone { position: relative; z-index: 2; }
.zone-paper, .zone-signal { margin-top: calc(var(--r-sheet) * -1); }
.zone-paper { border-radius: var(--r-sheet) var(--r-sheet) 0 0; background-image: url("../assets/tex/paper.webp"); background-size: 512px 512px; }
.zone-signal { border-radius: var(--r-sheet); overflow: hidden; background-image: url("../assets/tex/ink.webp"); background-size: 512px 512px; }
/* the section after the poster slides up under the poster's rounded bottom corners, so what shows there is dark page, not a gap */
#founders { position: relative; z-index: 1; margin-top: calc(var(--r-sheet) * -1); padding-top: calc(clamp(110px, 17vh, 190px) + var(--r-sheet)); }
@media (max-width: 768px) { #founders { padding-top: calc(84px + var(--r-sheet)); } }

/* ---------- contour lines in the dark sections: faint, drifting out of the edges, one Infrared contour among them ----------------------------------
   Pre-rendered pictures (tools/render-textures.cjs), faded out at the section's top and bottom by a Carbon gradient laid over them. (The first version drew
   them as SVG paths under a CSS mask: the browser re-rasterised them tile by tile as you scrolled and composited the mask every frame, which doubled
   the frame time in the tests. A picture and a gradient cost almost nothing.) */
.doors::after, .approach::after, .founders::after, .faq::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat;
  background-image: linear-gradient(180deg, #090a0b 0, rgba(9, 10, 11, 0) 18%, rgba(9, 10, 11, 0) 82%, #090a0b 100%), url("../assets/tex/topo.webp");
}
.doors::after { background-position: 0 0, 14% 34%; background-size: 100% 100%, 135% auto; }
.approach::after { background-position: 0 0, 92% 64%; background-size: 100% 100%, 125% auto; transform: scaleX(-1); }
.founders::after { background-image: linear-gradient(180deg, #090a0b 0, rgba(9, 10, 11, 0) 18%, rgba(9, 10, 11, 0) 82%, #090a0b 100%), url("../assets/tex/topo-mix.webp"); background-position: 0 0, 88% 26%; background-size: 100% 100%, 150% auto; }
.faq::after { right: auto; width: 50%; background-image: linear-gradient(180deg, #090a0b 0, rgba(9, 10, 11, 0) 18%, rgba(9, 10, 11, 0) 82%, #090a0b 100%), url("../assets/tex/topo-mix.webp"); background-position: 0 0, 6% 90%; background-size: 100% 100%, 170% auto; transform: scaleY(-1); }

/* the hero's own contours sit behind the object and move a little against the scroll (home.js drives them) */
#topo {
  position: absolute; inset: -6% -4%; will-change: transform, opacity; pointer-events: none; /* the entrance script sets its opacity: 0, then brings it up (the loader covers the page until then) */
  background: url("../assets/tex/topo-hero.webp") center / cover no-repeat;
}

/* ---------- photographs: a halftone screen on the shadow side, a hairline rim (imagery.css) ---------------------------------------- */
/* round 7: the halftone ramp is gone from the photographs (it read as dirt on bright pictures and its tile repeated); the shade at the foot stays */
.ph::after {
  background: linear-gradient(180deg, rgba(9, 10, 11, 0) 52%, rgba(9, 10, 11, 0.44) 100%);
}
.founder-ph::after, .place-ph::after { background: linear-gradient(180deg, rgba(9, 10, 11, 0) 60%, rgba(9, 10, 11, 0.4) 100%); }

/* round 9: the notebook dot grid that used to sit under the pricing timelines is gone (it read as noise behind the type; the monthly dots are drawn on their own grid) */
.relation { position: relative; isolation: isolate; }

/* ---------- the poster: a halftone corner, two outlines of pills, ink that lays down unevenly ------------------------------------------- */
.zone-signal::before { content: none; }
.zone-signal::after {
  content: ""; position: absolute; z-index: 0; right: 0; top: 40px; width: min(31vw, 440px); aspect-ratio: 1; pointer-events: none; opacity: 0.8; /* round 7: a smaller corner, so the paragraph no longer sits on the dots */
  background: url("../assets/tex/halftone-corner.webp") top right / 100% no-repeat;
}
.zone-signal > * { position: relative; z-index: 1; }

/* ---------- switches ------------------------------------------------------------------------------------------------------------------------------ */
html:not([data-atmos="on"]) .zone-paper, html:not([data-atmos="on"]) .zone-signal { background-image: none; }
html:not([data-atmos="on"]) .doors::after, html:not([data-atmos="on"]) .approach::after, html:not([data-atmos="on"]) .founders::after, html:not([data-atmos="on"]) .faq::after,
html:not([data-atmos="on"]) #topo, html:not([data-atmos="on"]) .zone-signal::after { display: none; }
html.no-js #topo { display: none; }

/* more contrast asked for: no texture behind the type, and the dividers get stronger (the page already has the contrast; this removes what could muddy it) */
@media (prefers-contrast: more) {
  .zone-paper, .zone-signal { background-image: none; }
  .doors::after, .approach::after, .founders::after, .faq::after, #topo, .zone-signal::after { display: none; }
  .content { --hair: color-mix(in srgb, var(--fg) 45%, transparent); --hair-strong: color-mix(in srgb, var(--fg) 75%, transparent); }
}
/* transparency off: the little frosted labels become solid */
@media (prefers-reduced-transparency: reduce) {
  .door-go, .founder-name { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(9, 10, 11, 0.86); }
}