/* ============================================================
   tsi.studio · Meshfield Section · Webflow embed styles
   ----------------------------------------------------------
   Wireframe terrain mesh wallpaper (hidden-line WebGL).
   Same architecture as singularity-section.css:
   - .meshfield is the section root; canvas fills it absolutely.
   - Palette lives in CSS custom properties; the script reads them
     ONCE at init from the section element (so a variant class must
     be present at page load, same rule as .singularity.is-xyz).
   - Mobile-first with min-width overrides.
   ============================================================ */

.meshfield {
  /* Section-scoped brand tokens
     ink   : void + solid faces + section bg (kept identical so the
             first GL paint blends with zero seam)
     deep  : low mesh lines            (ZibraGDS Dark Green)
     mid   : cursor / ripple energy    (ZibraGDS Light Green)
     light : ridge + peak lines        (Zibra Light Green)
     Grayscale variant (matches the reference screenshot exactly):
       .meshfield.is-grey { --mf-deep:#363636; --mf-mid:#878787; --mf-light:#878787; }
  */
  --mf-ink:   #08120B;
  --mf-deep:  #002B12;
  --mf-mid:   #00FF6A;
  --mf-light: #91FF95;

  /* Layout */
  --mf-pad-x:      24px;
  --mf-pad-y:      80px;
  --mf-min-height: 560px;
  --mf-radius:     0px;

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: var(--mf-min-height);
  background: var(--mf-ink);
  color: var(--mf-light);
  overflow: hidden;
  border-radius: var(--mf-radius);
  font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
}

/* ── canvas fills the section ──────────────────────────────────── */
.meshfield__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: var(--mf-ink);
  /* Safari: stable compositing layer so the canvas scrolls as one
     unit instead of re-rasterizing sub-pixel per frame (the shimmer
     lesson from the singularity section). Harmless elsewhere. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── static fallback for reduced-motion / no-webgl ────────────── */
.meshfield__fallback {
  position: absolute; inset: 0;
  z-index: 0;
  /* poster: faint triangulated grid over a low green horizon glow */
  background:
    repeating-linear-gradient( 60deg, transparent 0 34px, rgba(145,255,149,0.05) 34px 35px),
    repeating-linear-gradient(-60deg, transparent 0 34px, rgba(0,255,106,0.045) 34px 35px),
    repeating-linear-gradient(  0deg, transparent 0 30px, rgba(135,135,135,0.035) 30px 31px),
    radial-gradient(ellipse at 50% 82%, #0E2B18 0%, var(--mf-ink) 62%);
  background-color: var(--mf-ink);
  opacity: 0;
  transition: opacity .6s ease-out;
}
.meshfield.is-fallback .meshfield__fallback { opacity: 1; }
.meshfield.is-fallback .meshfield__canvas   { display: none; }

/* ── content slot — Webflow content sits here on z:1 ──────────── */
.meshfield__content {
  position: relative;
  z-index: 1;
  padding: var(--mf-pad-y) var(--mf-pad-x);
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;   /* shader gets the cursor by default */
}
.meshfield__content a,
.meshfield__content button,
.meshfield__content [data-interactive] {
  pointer-events: auto;
}

/* ── breakpoints (Webflow-friendly stops) ─────────────────────── */
@media (min-width: 768px)  { .meshfield { --mf-pad-x: 44px;  --mf-pad-y: 100px; --mf-min-height: 640px; } }
@media (min-width: 992px)  { .meshfield { --mf-pad-x: 64px;  --mf-pad-y: 120px; --mf-min-height: 720px; } }
@media (min-width: 1280px) { .meshfield { --mf-pad-x: 89px;  --mf-pad-y: 144px; --mf-min-height: 820px; } }
@media (min-width: 1920px) { .meshfield { --mf-pad-x: 120px; --mf-pad-y: 160px; --mf-min-height: 900px; } }

/* ── reduced motion: force the static fallback ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .meshfield__canvas   { display: none; }
  .meshfield__fallback { opacity: 1; }
}

/* ============================================================
   VARIANT · is-grey — grayscale wire (the reference-screenshot
   look) using Zibra grey tokens. Add as a combo class on the
   section: class="meshfield is-grey". Must be present at page
   load — the palette is read once at init.
   Note: the aurora smoke goes monochrome with it (it shares the
   same palette slots), which reads as fog under a grey wire.
   ============================================================ */
.meshfield.is-grey {
  --mf-deep:  #363636;   /* Zibra Dark Grey  */
  --mf-mid:   #878787;   /* Zibra Grey Body  */
  --mf-light: #878787;
}