/* ============================================================
   tsi.studio · Singularity Section · Webflow embed styles
   ----------------------------------------------------------
   - .singularity is the section root; canvas fills it absolutely.
   - Built mobile-first with desktop overrides via min-width.
   - No fixed/full-viewport positioning. The section sits in flow
     wherever you place it in Webflow.
   ============================================================ */

.singularity {
  /* Section-scoped brand tokens (override per-project if needed) */
  --sg-light-purple: #C4A0FF;
  --sg-purple:       #9713FF;
  --sg-dark-purple:  #27114A;
  --sg-dark-grey:    #363636;
  --sg-ink:          #0B0613;       /* deeper than dark-purple, the void */

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

  position: relative;
  isolation: isolate;               /* keeps blend / glow effects scoped */
  width: 100%;
  min-height: var(--sg-min-height);
  background: var(--sg-ink);
  color: var(--sg-light-purple);
  overflow: hidden;
  border-radius: var(--sg-radius);
  font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
  -webkit-font-smoothing: antialiased;
  /* Prevent the section from grabbing pinch-zoom on iOS while still
     allowing vertical page scroll. */
  touch-action: pan-y;
}

/* ── canvas fills the section ──────────────────────────────────── */
.singularity__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: var(--sg-ink);
  /* No opacity fade-in here. The section background already matches
     the shader's void color (`--sg-ink`), so the first GL paint blends
     in seamlessly. CSS opacity transitions on a child of a transformed
     iframe / modal can stall indefinitely; keeping the canvas at
     opacity:1 sidesteps that entire class of bug. */
}

/* ── static fallback for reduced-motion / no-webgl ────────────── */
.singularity__fallback {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%,
      var(--sg-light-purple) 0%,
      var(--sg-purple) 6%,
      var(--sg-dark-purple) 18%,
      var(--sg-ink) 55%),
    radial-gradient(circle at 30% 70%, rgba(151, 19, 255, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(196, 160, 255, 0.10) 0%, transparent 35%);
  background-color: var(--sg-ink);
  opacity: 0;
  transition: opacity .6s ease-out;
}
.singularity.is-fallback .singularity__fallback { opacity: 1; }
.singularity.is-fallback .singularity__canvas    { display: none; }

/* ── content slot — your Webflow content sits here on z:1 ─────── */
.singularity__content {
  position: relative;
  z-index: 1;
  padding: var(--sg-pad-y) var(--sg-pad-x);
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;  /* let the shader receive pointer events by default */
}
/* Anything explicitly interactive inside content re-enables pointer */
.singularity__content a,
.singularity__content button,
.singularity__content [data-interactive] {
  pointer-events: auto;
}

/* ── breakpoints (Webflow-friendly stops) ─────────────────────── */

/* Tablet */
@media (min-width: 768px) {
  .singularity {
    --sg-pad-x: 44px;
    --sg-pad-y: 100px;
    --sg-min-height: 640px;
  }
}

/* Desktop S */
@media (min-width: 992px) {
  .singularity {
    --sg-pad-x: 64px;
    --sg-pad-y: 120px;
    --sg-min-height: 720px;
  }
}

/* XL Desktop (Webflow base) */
@media (min-width: 1280px) {
  .singularity {
    --sg-pad-x: 89px;
    --sg-pad-y: 144px;
    --sg-min-height: 820px;
  }
}

/* XXL */
@media (min-width: 1920px) {
  .singularity {
    --sg-pad-x: 120px;
    --sg-pad-y: 160px;
    --sg-min-height: 900px;
  }
}

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

/* ============================================================
   VARIANT · is-xyz  —  dark-green ↔ dark-purple field,
                        light-purple ↔ light-green halo
   ------------------------------------------------------------
   Add the combo class `is-xyz` to the .singularity section to
   activate (same pattern as .card--feature-gradient.is-xyz).
   The shader reads these four custom properties from the section
   at init, so just having this class present at load recolors the
   whole effect — no JS change required for the palette.

   slot → shader role:
     --sg-light-purple : halo (left)  · near stars · click ripples
     --sg-purple       : halo (right) · bright nebula cores · far stars
     --sg-dark-purple  : denser nebula (field, deeper tone)
     --sg-ink          : empty field  AND section + canvas background
                         (kept identical so the first GL paint blends
                         in with zero seam)
   ============================================================ */
.singularity.is-xyz {
  --sg-light-purple: #C4A0FF;   /* light purple — unchanged */
  --sg-purple:       #91FF95;   /* light green   (was #9713FF) */
  --sg-dark-purple:  #27114A;   /* dark purple  — unchanged */
  --sg-ink:          #002B12;   /* dark green    (was #0B0613) */
}

/* Reduced-motion / no-WebGL fallback, recolored to match the variant
   (greener core, green→purple wash). Optional but keeps the static
   poster on-palette. */
.singularity.is-xyz .singularity__fallback {
  background:
    radial-gradient(circle at 50% 50%,
      var(--sg-light-purple) 0%,
      var(--sg-purple) 7%,
      var(--sg-dark-purple) 40%,
      var(--sg-ink) 72%),
    radial-gradient(circle at 30% 70%, rgba(145, 255, 149, 0.14) 0%, transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(196, 160, 255, 0.12) 0%, transparent 35%);
  background-color: var(--sg-ink);
}