/* Section 4, "Grab it the second you see it."
   Like Wispr's "4x faster" section: the section holds still while you scroll, and
   after a while the Vclip side grows over the old way. A film strip of the video flows through
   both sides (crawling on the old side, fast on Vclip's), and Vclip snips moments
   out of it into a My Clips bin. Animated by grab.js. */

.grab {
  position: relative;
  width: min(1200px, calc(100% - 32px));
  height: 240vh; /* the scroll distance the scene plays over (about Wispr's pace) */
  margin: 0 auto 96px;
  border-radius: 32px;
  background: var(--ink);
  color: #fff;
}
.grab-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 92px clamp(16px, 4vw, 48px) 28px; /* room for the floating menu */
  text-align: center;
  overflow: hidden;
}
.grab-lede {
  max-width: 680px; /* wide enough for its two lines */
  margin: 18px auto 0;
  font-size: clamp(16px, 1.8vw, 19px);
  color: #C9C3DE;
}

/* ---------- the stage: two panels ---------- */
.grab-stage {
  position: relative;
  width: min(1100px, 100%);
  height: clamp(280px, calc(100vh - 380px), 560px);
  margin: clamp(24px, 4vh, 40px) auto 0;
  text-align: left;
}
.gp {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #0B0A10;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.gp-old { left: 0; width: 30%; z-index: 1; }
.gp-new { left: 32%; width: 68%; z-index: 2; /* always in front, so nothing of the old way shows through */ box-shadow: 0 0 0 1px rgba(168, 139, 255, 0.5), 0 30px 80px rgba(91, 43, 224, 0.35); }
.gp > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-old > video { filter: blur(10px) grayscale(0.7) brightness(0.5); transform: scale(1.1); }
.gp-new > video { filter: brightness(0.62); }

/* The readouts, like Wispr's "45 wpm / 220 wpm" */
.gp-read { position: absolute; left: 20px; top: 18px; line-height: 1.1; z-index: 2; }
.gp-read small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.gp-read b { display: block; margin-top: 6px; font: 700 clamp(30px, 3.6vw, 44px)/1 var(--display); }
.gp-read span { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.gp-old .gp-read b { color: #F2A7A7; }

/* ---------- the film strips ---------- */
.strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 84px;
  padding: 8px 0;
  overflow: hidden;
  /* sprocket holes along the top and bottom edges */
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.28) 6px 12px) top / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.28) 6px 12px) bottom / 100% 4px no-repeat,
    rgba(8, 7, 12, 0.85);
  z-index: 1;
}
.strip-track { display: flex; gap: 6px; width: max-content; height: 100%; }
.strip-track canvas { width: 120px; height: 68px; border-radius: 3px; background: #1E1A2E; flex: none; }
.strip.slow { filter: grayscale(0.8) brightness(0.7); }

/* Vclip's two handles snapping around a moment on the strip */
.snip {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 0;
  border-top: 2px solid #A88BFF;
  border-bottom: 2px solid #A88BFF;
  background: rgba(139, 108, 255, 0.28);
  visibility: hidden;
  z-index: 2;
}
.snip i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 10px;
  border-radius: 4px;
  background: #fff;
  border: 2px solid #8B6CFF;
}
.snip i:first-child { left: -6px; }
.snip i:last-child { right: -6px; }

/* The old way's to-do list: one slow step at a time */
.gp-task { position: absolute; left: 20px; right: 20px; bottom: 122px; z-index: 2; }
.gp-task small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #F2A7A7; }
.gp-task b { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: #fff; }
.gp-task i { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.gp-task em { display: block; height: 100%; width: 0; background: #F2A7A7; }

/* ---------- the My Clips bin ---------- */
.bin {
  position: absolute;
  right: 18px;
  top: 18px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(20, 16, 36, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  z-index: 3;
}
.bin-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #E8E3F7; }
.bin-head img { width: 16px; height: 16px; }
/* One fixed frame per size. New clips replace the old one in the same frame,
   so the shapes never change and nothing shifts. */
.bin-grid { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; }
.bin-clip { position: relative; height: 58px; border-radius: 6px; overflow: hidden; background: #2A2150; flex: none; transition: background 0.3s, box-shadow 0.3s; }
/* An empty frame, waiting for a clip of its size */
.bin-clip.empty { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.bin-clip.empty span { background: transparent; color: rgba(255, 255, 255, 0.6); }
.bin-clip canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bin-clip, .strip-track canvas { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.bin-clip:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
.strip-track canvas:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .bin-clip:hover, .strip-track canvas:hover { transform: none; }
}
.bin-clip span { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); font-size: 9px; font-weight: 600; }

/* Once Vclip starts shrinking into the next section's card, no clip is left mid-air */
.gp-new.calm .grab-flyer, .gp-new.calm .snip { opacity: 0; transition: opacity 0.2s; }

/* A snipped piece on its way to the bin */
.grab-flyer { position: absolute; z-index: 4; border-radius: 4px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); pointer-events: none; }
.grab-flyer canvas { width: 100%; height: 100%; object-fit: cover; display: block; }

.grab-note { margin: 16px auto 0; max-width: 560px; font-size: 12px; color: #8C85A8; }

/* ---------- phones: the panels stack, and Vclip grows upwards over the old way ---------- */
@media (max-width: 760px) {
  .grab-lede .two-lines { display: none; } /* phones: let it wrap naturally */
  .grab { border-radius: 22px; }
  .grab-sticky { padding-top: 84px; }
  .grab-stage { height: clamp(360px, calc(100vh - 320px), 560px); }
  .gp-old { left: 0; width: 100%; top: 0; height: 30%; }
  .gp-new { left: 0; width: 100%; top: 33%; height: 67%; }
  .gp-task { bottom: auto; top: 18px; left: auto; right: 16px; width: 50%; text-align: right; }
  .gp-task b { font-size: 13px; }
  .gp-old .strip { display: none; }
  .bin { right: 12px; top: 14px; padding: 8px; }
  .bin-clip { height: 40px; }
  .bin-clip span { left: 50%; transform: translateX(-50%); padding: 0 2px; font-size: 8px; } /* fits the narrow 9:16 frame */
}

/* Computers with room (the same media query as in grab.js and how.js): after the
   takeover, Vclip shrinks into the "How it works" card, which carries on from here. */
@media (min-width: 1024px) and (min-height: 620px) {
  .grab:not(.still) { height: 310vh; margin-bottom: 0; }
}

/* Less motion (or no animation library): an ordinary section, nothing moves. */
.grab.still { height: auto; }
.grab.still .grab-sticky { position: relative; height: auto; padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(48px, 6vw, 80px); }
.grab.still .grab-stage { height: clamp(320px, 42vw, 520px); }