/* ============================================================
   usestop v2 — Section 4 negative strip
   - Horizontal scrollable film strip (8 frames)
   - SVG-masked sprocket holes on top + bottom edges
   - Orange film-base tint layer (#CC6B33 at 15%)
   - Per-frame hover/long-press: CSS invert() filter over 250ms
     (=-"lightbox check" moment)
   - Subtle -0.3deg .. +0.3deg wobble across the whole strip
   Owned by Garth. Integrates into Worker's <section data-section="04">.
   ============================================================ */

:root {
  --strip-h: 260px;             /* desktop frame height */
  --strip-h-mobile: 180px;
  --frame-w: 280px;             /* desktop frame width */
  --frame-w-mobile: 180px;
  --sprocket-h: 22px;
  --film-base-tint: #CC6B33;
  --film-base-alpha: 0.15;
  --neg: #FF4D2E;               /* v2 negative-flash colour */
}

/* ---- strip wrapper ----------------------------------------- */
.v2 .neg-strip {
  position: relative;
  padding: calc(var(--sprocket-h) + 14px) 8vw;
  background:
    /* sprocket-hole dots baked as two gradient repeats */
    radial-gradient(circle at 16px 12px, #0A0908 0 7px, transparent 7.5px) repeat-x top left / 32px var(--sprocket-h),
    radial-gradient(circle at 16px calc(var(--sprocket-h) - 12px), #0A0908 0 7px, transparent 7.5px) repeat-x bottom left / 32px var(--sprocket-h),
    linear-gradient(rgba(204,107,51, var(--film-base-alpha)), rgba(204,107,51, var(--film-base-alpha))),
    #1a1512;
  background-position: top left, bottom left, center, center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 61, 0.12),
    0 22px 60px -20px rgba(0,0,0,0.7);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  will-change: transform;
  animation: neg-strip-wobble 9.4s ease-in-out infinite;
}
.v2 .neg-strip::-webkit-scrollbar { display: none; }

/* wobble — simulates strip held in hand */
@keyframes neg-strip-wobble {
  0%,100% { transform: rotate(-0.3deg); }
  50%     { transform: rotate( 0.3deg); }
}

/* ---- strip rail holding the frames ------------------------- */
.v2 .neg-strip__rail {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: max-content;
}

/* ---- individual frame -------------------------------------- */
.v2 .neg-frame {
  position: relative;
  flex: 0 0 auto;
  width: var(--frame-w);
  height: var(--strip-h);
  scroll-snap-align: center;
  overflow: hidden;
  background: #0A0908;
  outline: 1px solid rgba(242, 239, 230, 0.08);
  cursor: zoom-in;
  isolation: isolate;
}
.v2 .neg-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1) contrast(1) invert(0) hue-rotate(0deg);
  transition: filter 250ms cubic-bezier(.22,.61,.36,1);
  will-change: filter;
}

/* ---- hover / long-press: negative flash -------------------- */
.v2 .neg-frame.is-inverted .neg-frame__img,
.v2 .neg-frame:hover .neg-frame__img {
  filter: saturate(0.85) contrast(1.15) invert(1) hue-rotate(172deg);
}
/* a thin negative-flash accent border while inverted */
.v2 .neg-frame.is-inverted::after,
.v2 .neg-frame:hover::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--neg);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: neg-flash-in 250ms ease-out both;
}
@keyframes neg-flash-in {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}

/* ---- Geist Mono numbering at top edge of each frame -------- */
.v2 .neg-frame__num {
  position: absolute;
  top: 8px; left: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;            /* 10px */
  letter-spacing: 0.22em;
  color: #F2EFE6;
  opacity: 0.78;
  mix-blend-mode: difference;
  z-index: 2;
}
.v2 .neg-frame__label {
  position: absolute;
  bottom: 8px; left: 10px; right: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  color: #F2EFE6;
  opacity: 0.85;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  mix-blend-mode: difference;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ---- mobile ------------------------------------------------- */
@media (max-width: 768px) {
  .v2 .neg-strip { padding: calc(var(--sprocket-h) + 10px) 16px; }
  .v2 .neg-frame { width: var(--frame-w-mobile); height: var(--strip-h-mobile); }
}

/* ---- reduced motion: kill wobble --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2 .neg-strip { animation: none; transform: rotate(0); }
  .v2 .neg-frame__img { transition: filter 120ms linear; }
}