/* NASH — "Como funciona", the one fold under the hero, back on 2026-10-14.
   The rules are the ones site/testando/folds.css gives this fold (the
   studio behind it, the head, the stage and the steps), and process.js is
   that page's own copy. Layout only: the tag and the headline come from the
   kit (nash-signature.css). Runtime values are --site-runtime-*. */

.site-fold {
  position: relative;
  isolation: isolate;
  padding-block: var(--nash-space-8);
}

/* ---------- the studio behind the fold ----------
   In the dark theme the fold stands under one dim, neutral lamp on black;
   the light theme is flat paper. --site-lamp-x/-y place the lamp. */
.site-fold {
  --site-lamp-x: 72%;
  --site-lamp-y: 50%;
  --site-lamp: #1c1c1e;
  --site-shade: #000000;
}

:root[data-tema='claro'] .site-fold {
  --site-lamp: transparent;
  --site-shade: transparent;
}

.site-fold::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 58% at var(--site-lamp-x) var(--site-lamp-y), var(--site-lamp), transparent 70%),
    radial-gradient(ellipse 60% 62% at calc(100% - var(--site-lamp-x)) calc(100% - var(--site-lamp-y)), var(--site-shade), transparent 72%);
}

.site-fold-head {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: var(--nash-space-4);
}

.site-fold .nash-headline[data-size='large'] {
  font-size: var(--nash-type-size-7);
}

/* ---------- Como funciona ----------
   The stage stays while the four steps scroll past it; the scene on it
   (process.js) follows the step in view. */
.site-process {
  --site-lamp-x: 22%;
  --site-lamp-y: 55%;
}

.site-process-track {
  margin-top: var(--nash-space-6);
}

.site-process-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  height: 46svh;
  background: var(--nash-color-bg-page);
}

/* On a phone the stage is opaque: the steps scroll under it. Wide, it
   stands in its own column and the studio shows through (below). */

/* The sheet has no edge: the canvas fades out on all four sides. */
.site-process-canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}

.site-process-steps {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-process-step {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--nash-space-2);
  min-height: 70svh;
  padding-block: var(--nash-space-6);
  opacity: 0.32;
  transition: opacity var(--nash-motion-duration-glow) var(--nash-motion-ease-out);
}

.site-process-step.is-active {
  opacity: 1;
}

.site-process-title {
  margin: 0;
  font-size: var(--nash-type-size-7);
  font-weight: 500;
  letter-spacing: var(--nash-type-tracking-tight);
  line-height: var(--nash-type-leading-title);
  color: var(--text-forte);
}

.site-process-text {
  max-width: 30em;
  margin: 0;
  font-size: var(--nash-type-size-5);
  line-height: var(--nash-type-leading-body);
  color: var(--text-mid);
}

/* Without WebGL the steps are the whole fold. */
.site-process.is-static .site-process-stage {
  display: none;
}

.site-process.is-static .site-process-step {
  min-height: 0;
  opacity: 1;
}

/* ---------- wide screens ---------- */
@media (min-width: 900px) {
  .site-fold {
    padding-block: var(--nash-space-9);
  }

  .site-fold-head {
    grid-column: 1 / span 8;
  }

  .site-fold .nash-headline[data-size='large'] {
    font-size: var(--nash-type-size-8);
  }

  .site-process-stage {
    grid-column: 6 / -1;
    grid-row: 1;
    height: 100svh;
    display: grid;
    align-items: center;
    background: transparent;
  }

  .site-process-canvas {
    height: 78svh;
  }

  .site-process-steps {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .site-process-step {
    min-height: 100svh;
  }

  .site-process.is-static .site-process-steps {
    grid-column: 1 / span 8;
  }
}

/* ---------- narrow screens ----------
   The stage covers the top of the fold, opaque, and a lamp behind it would
   show past its edge as a seam: on a phone the sheet is the studio, and the
   light goes out. */
@media (max-width: 899px) {
  .site-process,
  :root[data-tema='claro'] .site-process {
    --site-lamp: transparent;
    --site-shade: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-process-step {
    transition-duration: 100ms;
  }
}