/* Fills the nearest positioned parent (Section's background layer). The
   palette is set here as --_base and --_c1 … 3: the fallback gradient uses it
   and the shader reads it back, so both always match. */
.HjsFwR7YB8GFZo_Jpk5g {
  --_base: #eef0f6;
  --_c1: #e48ce4;
  --_c2: #a46cf0;
  --_c3: #565ef2;
  --_strength: 0.85;

  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: inherit;
  background: var(--_base);
  pointer-events: none;
}

/* ---------- Palette ---------- */
.HjsFwR7YB8GFZo_Jpk5g[data-palette="purple"] {
  --_base: #efedf7;
  --_c1: #c9a4ff;
  --_c2: #7a3cff;
  --_c3: #4d00a6;
}

.HjsFwR7YB8GFZo_Jpk5g[data-palette="blue"] {
  --_base: #eef2f8;
  --_c1: #8aabff;
  --_c2: #4a6cf0;
  --_c3: #2c5bc7;
}

.HjsFwR7YB8GFZo_Jpk5g[data-palette="pink"] {
  --_base: #f4eef4;
  --_c1: #f3a6e8;
  --_c2: #e708fc;
  --_c3: #a046ef;
}

/* The colors of shaders.com's Radiance 1. */
.HjsFwR7YB8GFZo_Jpk5g[data-palette="radiance-original"] {
  --_base: #e8e8e8;
  --_c1: #c3df07;
  --_c2: #62e6a0;
  --_c3: #00e0f5;
}

/* Tiptap colors on the site's dark surface, for LED Flow and dark sections. */
.HjsFwR7YB8GFZo_Jpk5g[data-palette="dark"] {
  --_base: #1a1919;
  --_c1: #e48ce4;
  --_c2: #7a3cff;
  --_c3: #4300eb;
}

/* Custom: the component sets the variables inline from the Advanced fields. */

/* ---------- Intensity: how much of the colors shows over the base ---------- */
.HjsFwR7YB8GFZo_Jpk5g[data-intensity="subtle"] { --_strength: 0.55; }
.HjsFwR7YB8GFZo_Jpk5g[data-intensity="strong"] { --_strength: 1; }

/* ---------- Layers ---------- */
.HjsFwR7YB8GFZo_Jpk5g .gx6Yr2o5cY9uohgcvKwY {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: block;
  opacity: var(--_strength);
  transition: opacity 0.8s ease;
}

/* A still CSS version of the band: shows right away, while loading and without WebGPU. */
.HjsFwR7YB8GFZo_Jpk5g .gx6Yr2o5cY9uohgcvKwY[data-part="fallback"] {
  background:
    radial-gradient(55% 45% at 78% 32%, var(--_c3), transparent 70%),
    radial-gradient(40% 35% at 50% 52%, var(--_c2), transparent 70%),
    radial-gradient(30% 28% at 28% 68%, var(--_c1), transparent 70%);
  filter: blur(24px);
}

/* A still of the shader itself, rendered at full strength like the canvas. */
.HjsFwR7YB8GFZo_Jpk5g .gx6Yr2o5cY9uohgcvKwY[data-part="fallback"][data-image] {
  background-position: center;
  background-size: cover;
  filter: none;
}

.HjsFwR7YB8GFZo_Jpk5g .gx6Yr2o5cY9uohgcvKwY[data-part="canvas"] {
  opacity: 0;
}

.HjsFwR7YB8GFZo_Jpk5g[data-ready] .gx6Yr2o5cY9uohgcvKwY[data-part="canvas"] {
  opacity: var(--_strength);
}

.HjsFwR7YB8GFZo_Jpk5g[data-ready] .gx6Yr2o5cY9uohgcvKwY[data-part="fallback"] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .HjsFwR7YB8GFZo_Jpk5g .gx6Yr2o5cY9uohgcvKwY {
    transition: none;
  }
}

/* Values from Staging (research/layout-staging.md): .tt-section-inner with
   inset-section / is-white / is-dark / r-lg / is-header, .tt-section.section-overflow
   and the Shader Background component. Spacing is the --tt-space-section scale
   (= the old section-spacing collection, fluid instead of modes). */
.tlJzVMDoi3cLkxw70eVc {
  --_pt: var(--tt-space-section-xl, clamp(7rem, 3.881rem + 11.719vw, 10rem));
  --_pb: var(--tt-space-section-xl, clamp(7rem, 3.881rem + 11.719vw, 10rem));
  --_gap: var(--tt-space-section-lg, clamp(6rem, 3.921rem + 7.813vw, 8rem));
  --_overlap: 0rem;
  --_inset: 0rem;
  --_inset-top: 0rem;
  --_radius: 0rem;
  --_radius-top: var(--_radius);

  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  margin: calc(var(--_inset-top) - var(--_overlap)) var(--_inset) 0;
  padding: calc(var(--_pt) + var(--_overlap)) 0 var(--_pb);
  border-radius: var(--_radius-top) var(--_radius-top) var(--_radius) var(--_radius);
  background: var(--_bg, transparent);
  color: var(--_color, inherit);
  overflow: clip;
}

.tlJzVMDoi3cLkxw70eVc[data-empty] {
  display: none;
}

/* ---------- Look ---------- */
.tlJzVMDoi3cLkxw70eVc[data-look="card"],
.tlJzVMDoi3cLkxw70eVc[data-look="header-card"] {
  --_inset: 0.4rem;
  --_radius: var(--tt-radius-lg, 1.5rem);
}

.tlJzVMDoi3cLkxw70eVc[data-look="header-card"] {
  --_inset-top: 0.4rem;
}

/* Mobile: cards go edge to edge; the header card also loses its top spacing and
   top corners, so it meets the navigation. */
@media (max-width: 479px) {
  .tlJzVMDoi3cLkxw70eVc[data-look="card"],
  .tlJzVMDoi3cLkxw70eVc[data-look="header-card"] {
    --_inset: 0rem;
  }

  .tlJzVMDoi3cLkxw70eVc[data-look="header-card"] {
    --_inset-top: 0rem;
    --_radius-top: 0rem;
  }
}

/* ---------- Background ----------
   Dark switches headings, text and the components' --tt-dark toggle. */
.tlJzVMDoi3cLkxw70eVc[data-bg="light"] { --_bg: var(--warm-grey-1, #f5f5f4); }
.tlJzVMDoi3cLkxw70eVc[data-bg="white"] { --_bg: var(--tt-color-paper, var(--white-a-100, #fff)); }

.tlJzVMDoi3cLkxw70eVc[data-bg="dark"] {
  --_bg: var(--tt-color-surface-dark, var(--black-900, #1a1919));
  --_color: var(--tt-color-paper, var(--white-a-100, #fff));
  --tt-heading-color: var(--tt-color-paper, var(--white-a-100, #fff));
  --tt-text-color: var(--tt-color-paper, var(--white-a-100, #fff));
  --tt-dark: ;
}

/* ---------- Space top / bottom, gap ---------- */
.tlJzVMDoi3cLkxw70eVc[data-space-top="none"] { --_pt: 0rem; }
.tlJzVMDoi3cLkxw70eVc[data-space-top="xx-small"] { --_pt: var(--tt-space-card-rg, clamp(1rem, 0.48rem + 1.953vw, 1.5rem)); }
.tlJzVMDoi3cLkxw70eVc[data-space-top="x-small"] { --_pt: var(--tt-space-section-xs, 2rem); }
.tlJzVMDoi3cLkxw70eVc[data-space-top="small"] { --_pt: var(--tt-space-section-sm, 3rem); }
.tlJzVMDoi3cLkxw70eVc[data-space-top="regular"] { --_pt: var(--tt-space-section-rg, clamp(3rem, 1.96rem + 3.906vw, 4rem)); }
.tlJzVMDoi3cLkxw70eVc[data-space-top="medium"] { --_pt: var(--tt-space-section-md, 6rem); }
.tlJzVMDoi3cLkxw70eVc[data-space-top="large"] { --_pt: var(--tt-space-section-lg, clamp(6rem, 3.921rem + 7.813vw, 8rem)); }
.tlJzVMDoi3cLkxw70eVc[data-space-top="2x-large"] { --_pt: var(--tt-space-section-2xl, clamp(8rem, 3.842rem + 15.625vw, 12rem)); }

.tlJzVMDoi3cLkxw70eVc[data-space-bottom="none"] { --_pb: 0rem; }
.tlJzVMDoi3cLkxw70eVc[data-space-bottom="xx-small"] { --_pb: var(--tt-space-card-rg, clamp(1rem, 0.48rem + 1.953vw, 1.5rem)); }
.tlJzVMDoi3cLkxw70eVc[data-space-bottom="x-small"] { --_pb: var(--tt-space-section-xs, 2rem); }
.tlJzVMDoi3cLkxw70eVc[data-space-bottom="small"] { --_pb: var(--tt-space-section-sm, 3rem); }
.tlJzVMDoi3cLkxw70eVc[data-space-bottom="regular"] { --_pb: var(--tt-space-section-rg, clamp(3rem, 1.96rem + 3.906vw, 4rem)); }
.tlJzVMDoi3cLkxw70eVc[data-space-bottom="medium"] { --_pb: var(--tt-space-section-md, 6rem); }
.tlJzVMDoi3cLkxw70eVc[data-space-bottom="large"] { --_pb: var(--tt-space-section-lg, clamp(6rem, 3.921rem + 7.813vw, 8rem)); }
.tlJzVMDoi3cLkxw70eVc[data-space-bottom="2x-large"] { --_pb: var(--tt-space-section-2xl, clamp(8rem, 3.842rem + 15.625vw, 12rem)); }

.tlJzVMDoi3cLkxw70eVc[data-gap="none"] { --_gap: 0rem; }
.tlJzVMDoi3cLkxw70eVc[data-gap="xx-small"] { --_gap: var(--tt-space-card-rg, clamp(1rem, 0.48rem + 1.953vw, 1.5rem)); }
.tlJzVMDoi3cLkxw70eVc[data-gap="x-small"] { --_gap: var(--tt-space-section-xs, 2rem); }
.tlJzVMDoi3cLkxw70eVc[data-gap="small"] { --_gap: var(--tt-space-section-sm, 3rem); }
.tlJzVMDoi3cLkxw70eVc[data-gap="regular"] { --_gap: var(--tt-space-section-rg, clamp(3rem, 1.96rem + 3.906vw, 4rem)); }
.tlJzVMDoi3cLkxw70eVc[data-gap="medium"] { --_gap: var(--tt-space-section-md, 6rem); }
.tlJzVMDoi3cLkxw70eVc[data-gap="x-large"] { --_gap: var(--tt-space-section-xl, clamp(7rem, 3.881rem + 11.719vw, 10rem)); }
.tlJzVMDoi3cLkxw70eVc[data-gap="2x-large"] { --_gap: var(--tt-space-section-2xl, clamp(8rem, 3.842rem + 15.625vw, 12rem)); }

/* ---------- Overlap ----------
   Slides over the previous section (like .section-overflow, -3rem) and adds the
   same amount on top, so Space top stays visible. Later sections stack above. */
.tlJzVMDoi3cLkxw70eVc[data-overlap] { z-index: 2; }
.tlJzVMDoi3cLkxw70eVc[data-overlap="small"] { --_overlap: 2rem; }
.tlJzVMDoi3cLkxw70eVc[data-overlap="medium"] { --_overlap: 3rem; }
.tlJzVMDoi3cLkxw70eVc[data-overlap="large"] { --_overlap: 6rem; }

/* ---------- Content ----------
   Webflow wraps slot content in one element; display: contents makes every
   section group a flex item, like children of .tt-section-inner. */
.tlJzVMDoi3cLkxw70eVc .YIJhH5EEdX4dDddPmtKQ[data-part="content"] {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_gap);
  width: 100%;
}

.tlJzVMDoi3cLkxw70eVc .YIJhH5EEdX4dDddPmtKQ[data-part="content"] ::slotted(*) {
  display: contents;
}

/* ---------- Effect: shader or image behind the content ---------- */
.tlJzVMDoi3cLkxw70eVc .YIJhH5EEdX4dDddPmtKQ[data-part="effect"] {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  overflow: clip;
  pointer-events: none;
}

.tlJzVMDoi3cLkxw70eVc .YIJhH5EEdX4dDddPmtKQ[data-part="effect-frame"] {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Sticky: one screen high and stays in view while the section scrolls past
   (Shader Background variant "Sticky 100 VH" on Staging). */
.tlJzVMDoi3cLkxw70eVc .YIJhH5EEdX4dDddPmtKQ[data-part="effect"][data-position="sticky"] .YIJhH5EEdX4dDddPmtKQ[data-part="effect-frame"] {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100%;
}

.tlJzVMDoi3cLkxw70eVc .YIJhH5EEdX4dDddPmtKQ[data-part="image"] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}