/* Section 5, "How it works": See it, pin it, keep it. Animated by how.js.
   Three steps, each with a card (the video, with Vclip's own buttons drawn over it)
   and a few words.
   - Phones, small screens and less motion: the steps simply follow one another.
   - Computers with room (the same media query as in how.js and grab.js): the section
     holds still and carries on from section 4. Its card sits exactly where the Vclip
     panel shrank to, the dark section slides away, and the steps change as you scroll. */

.how {
  position: relative;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto 96px;
}
.how-anchor { position: absolute; top: 0; } /* where the menu's "How it works" lands */
.how-head { text-align: center; margin-bottom: 48px; } /* section 4's bottom margin is the space above */
.how .headline.section .l2 { color: var(--violet); } /* on a light background */
.how-list { display: none; }

/* ---------- a step: the card and its words ---------- */
.how-step {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 56px;
}
.how-step:last-child { margin-bottom: 0; } /* the section's own margin is the space below */
.how-text h3 { margin: 12px 0 8px; font: 700 clamp(26px, 2.6vw, 32px)/1.1 var(--display); }
.how-text p { margin: 0; font-size: 16px; color: var(--muted); }
.how-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--violet);
  font-size: 13px;
  font-weight: 700;
}

/* The card looks exactly like section 4's Vclip panel, so one can become the other. */
.how-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background: #0B0A10;
  box-shadow: 0 0 0 1px rgba(168, 139, 255, 0.5), 0 30px 80px rgba(91, 43, 224, 0.35);
  container-type: inline-size;
  --lit: 0.85; /* how bright the video is (section 4 shows it at 0.62) */
}
.how-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: brightness(var(--lit)); }

/* Vclip's hover button (as in the extension and the hero) */
.hc-pill {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transform-origin: 20% 50%;
}
.hc-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8B6CFF; }
.hc-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 28px; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }

/* Vclip's panel along the bottom of the video */
.hc-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: #141418;
  border-top: 1px solid #2E2E38;
  color: #E8E6F0;
}
.hc-track { position: relative; height: 16px; margin: 18px 6px 0; }
.hc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 6px; border-radius: 3px; background: #2E2E38; }
.hc-range { position: absolute; top: 2px; left: 40%; width: 20%; height: 12px; background: rgba(139, 108, 255, 0.35); border-top: 2px solid #8B6CFF; border-bottom: 2px solid #8B6CFF; }
.hc-handle { position: absolute; top: -3px; width: 11px; height: 22px; margin-left: -5.5px; border-radius: 4px; background: #fff; border: 2px solid #8B6CFF; }
.hc-h1 { left: 40%; }
.hc-h2 { left: 60%; }
.hc-handle b { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 1px 5px; border-radius: 4px; background: rgba(20, 20, 24, 0.9); color: #fff; font: 600 10px/1.4 var(--body); font-variant-numeric: tabular-nums; }
.hc-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 11px; color: #9A9AA8; white-space: nowrap; }
.hc-row b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-len { margin-left: auto; }

/* Step 3: sizes, the crop frame, Save, and "Saved" */
.hc-sizes { gap: 6px; margin-top: 0; }
.hc-chip { padding: 3px 9px; border-radius: 999px; border: 1px solid #2E2E38; background: #1E1E25; color: #E8E6F0; font-size: 11px; }
.hc-chip.on { background: rgba(139, 108, 255, 0.32); border-color: #8B6CFF; }
.hc-save { position: relative; overflow: hidden; min-width: 96px; margin-left: auto; padding: 6px 12px; border-radius: 8px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
.hc-save i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #EF4444; }
.hc-save b { position: relative; font-weight: 600; }
.hc-crop {
  position: absolute;
  top: 0;
  bottom: 49px; /* the panel's height */
  left: 50%;
  aspect-ratio: 9 / 16;
  translate: -50% 0; /* not transform: the animation scales it */
  border: 2px solid #fff;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.55);
}
.hc-crop span { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 5px; background: rgba(20, 20, 24, 0.85); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.hc-saved { position: absolute; right: 14px; top: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(20, 20, 24, 0.88); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.hc-saved i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4ADE80; }

/* Narrow cards: fewer size buttons, so the row never overflows */
@container (max-width: 520px) { .hc-extra { display: none; } }
@container (max-width: 400px) { .hc-sizes .hc-chip:first-child { display: none; } }

@media (max-width: 760px) {
  .how-head { margin-bottom: 32px; }
  .how-step { grid-template-columns: 1fr; gap: 18px; margin-bottom: 48px; }
}

/* ---------- computers with room: held still, carrying on from section 4 ---------- */
@media (min-width: 1024px) and (min-height: 620px) {
  .how:not(.still) {
    width: 100%;
    height: 460vh; /* the scroll distance the steps play over */
    margin: -100vh 0 0; /* starts holding still exactly when section 4 lets go */
    pointer-events: none; /* it overlaps section 4 at first, so never block it */
  }
  .how:not(.still) .how-anchor { top: 100vh; } /* land where the steps begin */
  .how:not(.still) .how-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 84px 24px 24px;
  }
  .how:not(.still) .how-head { padding-top: 0; margin-bottom: clamp(16px, 3vh, 32px); }
  .how:not(.still) .how-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  .how:not(.still) .how-steps, .how:not(.still) .how-step { display: contents; }
  .how:not(.still) .how-list { display: block; grid-column: 1; grid-row: 1; justify-self: end; width: 11em; margin: 0; padding: 0; list-style: none; } /* fixed width: bolding a step never shifts it */
  .how-list li { padding: 4px 0 4px 14px; border-left: 2px solid var(--line); color: var(--muted); font-size: 15px; transition: color 0.3s, border-color 0.3s; }
  .how-list li.on { border-color: var(--violet); color: var(--ink); font-weight: 600; }
  /* All three cards sit in the same spot; the current step's shows. */
  .how:not(.still) .how-card {
    grid-column: 2;
    grid-row: 1;
    width: min(600px, 42vw, calc((100vh - 340px) * 1.6));
    opacity: 0;
    transition: opacity 0.4s;
  }
  .how:not(.still) .how-step.on .how-card { opacity: 1; }
  .how:not(.still) .how-text {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    max-width: 280px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s, transform 0.4s;
  }
  .how:not(.still) .how-step.on .how-text { opacity: 1; transform: none; }
}

/* Less motion: the finished picture of every step, nothing moving */
.how.still .hc-cursor { display: none; }