/* "Process" (home, copy v5.1 §08), right after the Services.
 *
 * The template's light grey with its grain (the "Services" section after About: an animated noise,
 * 110px tiles at 6.7%, over white), fading into the white of "What wins" below. The title and its
 * lead on the Collection's column; under them a timeline, top to bottom: a hairline runs through
 * the dots of the four steps, the ink draws itself down it with the scroll (a small star at its
 * tip), and each step comes in as the ink reaches its dot (halfsecond-process.js). The same faces,
 * sizes and motions as the rest: Space Grotesk titles rising out of a mask, Satoshi texts fading up.
 * Without script, or with reduced motion: everything is there, the line drawn.
 */

/* out of the flow until halfsecond-collection.js has moved it in after the Services */
html.js .hs-process:not([data-hs-placed]) { position: absolute; left: 0; right: 0; visibility: hidden; }
#main .hs-process { align-self: stretch; }              /* Framer's column centres its children */

.hs-process {
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ink: #0a0a0a;
  --grey: rgb(89, 89, 89);                              /* the template's body text on light */
  --rule: rgba(10, 10, 10, .16);
  --col: calc((100% - 24px) / 3 + 24px);                /* Framer's grid: a third, then the column */
  --pad: clamp(40px, 4.4vw, 72px);                      /* from the line to the steps */
  --gap: clamp(88px, 16vh, 168px);                      /* between two steps: the ink's way */
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  padding: clamp(96px, 11vw, 160px) 36px clamp(112px, 12vw, 184px);
}

/* the grain, as in the template (same file, tile and strength), and the fade into white */
.hs-process__noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .067;
  background: url(/assets/media/framerusercontent/imgs/a3RLU3QHBGjztkKyvMz4U7KEKI.gif) 0 0 / 110px auto repeat;
  pointer-events: none;
}
.hs-process::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: min(55%, 560px);
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 92%);
  pointer-events: none;
}
.hs-process__head,
.hs-process__timeline,
.hs-process__note { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ the title and its lead */
.hs-process__head { container-type: inline-size; margin-left: var(--col); }
.hs-process__title {
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 600;
  font-size: min(128px, 22cqi);
  line-height: .9;
  letter-spacing: -.04em;
}
.hs-process__mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hs-process__mask > span { display: block; }
.hs-process__lead {
  margin: clamp(20px, 2vw, 32px) 0 0;
  max-width: 30ch;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.3;
  color: var(--ink);
}

/* ------------------------------------------------------------------------ the timeline
   The line runs from the first dot to the last (--line-top, --line-len: measured by the script;
   without it, down the whole list). The ink is the same line, 2px, scaled from the top by the
   scroll (--line, 0 to 1; whole without the script). */
.hs-process__timeline {
  position: relative;
  margin: clamp(72px, 9vw, 136px) 0 0 var(--col);
  padding-left: var(--pad);
  --line: 1;
  --line-top: 10px;
}
.hs-process__timeline::before,
.hs-process__timeline::after {
  content: '';
  position: absolute;
  top: var(--line-top);
  left: 5px;
  width: 1px;
  height: var(--line-len, calc(100% - var(--line-top)));
  background: var(--rule);
  pointer-events: none;
}
.hs-process__timeline::after {
  left: 4.5px;
  width: 2px;
  background: var(--ink);
  transform-origin: 50% 0;
  transform: scaleY(var(--line));
}
/* the ink's tip: the light line of the Services' notes, riding down */
.hs-process__tip {
  position: absolute;
  top: var(--line-top);
  left: 5.5px;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  color: var(--ink);
  opacity: var(--tip, 0);
  transform: translate3d(0, calc(var(--line) * var(--line-len, 0px)), 0);
  transition: opacity .3s ease;
  pointer-events: none;
}
.hs-process__tip .hs-beam { --beam-w: 18px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.hs-process__steps {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-step { position: relative; max-width: 660px; }
/* the dot, on the line, level with the step's number */
.hs-step::before {
  content: '';
  position: absolute;
  top: 4px;
  left: calc(-.5px - var(--pad));
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  transition: background-color .3s ease, border-color .3s ease, transform .6s var(--ease);
}
.hs-step__num {
  display: block;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink);
}
.hs-step__title {                                       /* a mask: the line rises into it */
  margin: clamp(14px, 1.4vw, 20px) 0 -.12em;
  padding-bottom: .12em;
  overflow: hidden;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(36px, 4vw, 64px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.035em;
}
.hs-step__title > span { display: block; }
.hs-step__text {
  margin: clamp(14px, 1.3vw, 20px) 0 0;
  max-width: 44ch;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--grey);
}

/* the last word: the collection's shortcut, under a rule */
.hs-process__note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 720px;
  margin: clamp(72px, 8vw, 120px) 0 0 var(--col);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--grey);
}
.hs-process__note .hs-beam { --beam-w: 24px; flex: none; color: var(--ink); align-self: center; }

/* ------------------------------------------------------------- with the script (is-live)
   The title rises out of its mask as the section comes in (is-in), its lead fades up. Then the
   ink: a step is out of sight until the ink reaches its dot (is-on), then comes in, number,
   title, text; it goes again if the ink draws back above it. The note comes with the last. */
.hs-process.is-live:not(.is-in) .hs-process__mask > span { transform: translateY(110%); }
.hs-process.is-live.is-in .hs-process__mask > span { animation: hs-rise 1.1s var(--ease) .15s both; }
.hs-process.is-live:not(.is-in) .hs-process__lead { opacity: 0; }
.hs-process.is-live.is-in .hs-process__lead { animation: hs-fade-up 1s var(--ease) .4s both; }

.hs-process.is-live .hs-step__num,
.hs-process.is-live .hs-step__text { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.hs-process.is-live .hs-step__title > span { transition: transform 1s var(--ease); }
.hs-process.is-live .hs-step:not(.is-on) .hs-step__num,
.hs-process.is-live .hs-step:not(.is-on) .hs-step__text { opacity: 0; transform: translateY(16px); filter: blur(6px); }
.hs-process.is-live .hs-step:not(.is-on) .hs-step__title > span { transform: translateY(110%); }
.hs-process.is-live .hs-step.is-on .hs-step__title > span { transition-delay: .05s; }
.hs-process.is-live .hs-step.is-on .hs-step__text { transition-delay: .15s; }
/* a dot the ink has not reached: an open ring */
.hs-process.is-live .hs-step:not(.is-on)::before { border-color: rgba(10, 10, 10, .32); background-color: #fff; transform: scale(.75); }

.hs-process.is-live .hs-process__note { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hs-process.is-live:not(.is-done) .hs-process__note { opacity: 0; transform: translateY(12px); }

/* ------------------------------------------------------------------------ tablet, phone */
@media (max-width: 1199.98px) {
  .hs-process { --col: calc((100% - 24px) / 4 + 24px); }   /* tablet: a quarter, as the other titles */
}
@media (max-width: 809.98px) {
  .hs-process { --col: 0px; --pad: 32px; --gap: clamp(64px, 11vh, 104px); }
  .hs-process__title { font-size: min(96px, 24cqi); }
}

/* the way on, under the note: WhatsApp first (it is how a project starts), then the prices */
.hs-process__links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin: 32px 0 0 var(--col);
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
}
.hs-process__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px 0 20px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: transform .5s var(--ease);
}
.hs-process__cta::before {
  content: '';
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--hs-wa-icon) center / contain no-repeat;
          mask: var(--hs-wa-icon) center / contain no-repeat;
}
.hs-process__more { color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: -.02em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(10, 10, 10, .35); }
.hs-process__more:hover { text-decoration-color: var(--ink); }
@media (hover: hover) { .hs-process__cta:hover { transform: scale(1.03); } }
.hs-process.is-live .hs-process__links { transition: opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s; }
.hs-process.is-live:not(.is-done) .hs-process__links { opacity: 0; transform: translateY(12px); }
@media (max-width: 809.98px) { .hs-process__links { margin-left: 0; } }