/* ============================================================================
   Gold Squad — 3D Filmstrip  (scoped styles)
   Reuses the page's existing .section-eyebrow / .section-title / .section-sub /
   .gradient / .dot classes, so the heading matches the rest of the site.
   Only .filmstrip-section and .gs-filmstrip* are defined here.
   ============================================================================ */

/* Section wrapper — same rhythm as .video-section on the page */
.filmstrip-section {
  position: relative;
  z-index: 5;
  padding: 110px 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/*  
.gs-filmstrip {
  position: relative;
  width: 100%;
  max-width: 1180px;
  height: clamp(240px, 34vw, 440px);
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;           
}*/
.gs-filmstrip {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 50vw;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
}
/* Base desktop */
.gs-filmstrip {
  height: clamp(260px, 28vw, 440px);
}

/* Mobile override */
@media (max-width: 768px) {
  .gs-filmstrip {
    height: clamp(280px, 55vw, 380px);
  }
}
/* Canvas injected by filmstrip.js */
.gs-filmstrip__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;          /* never blocks page scroll */
}

/* Source <img> children are drawn into WebGL — hide the raw images */
.gs-filmstrip > img {
  display: none;
}

/* Side fades — let the floating strip melt into the page background (#090303) */
.gs-filmstrip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg,
    #090303 0%, transparent 11%, transparent 89%, #090303 100%);
}

/* Cinematic vignette, tuned to the site's near-black background */
.gs-filmstrip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 120px 30px rgba(9, 3, 3, 0.85);
}

@media (max-width: 640px) {
  .filmstrip-section { padding: 70px 6%; gap: 32px; }
  .gs-filmstrip { height: clamp(200px, 52vw, 320px); border-radius: 16px; }
}

/* Static, calm fallback when the visitor prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gs-filmstrip::after { box-shadow: inset 0 0 90px 24px rgba(9, 3, 3, 0.7); }
}