/* Blueprint Pulse — cinematic Build Story bridge. Record-derived, never fabricated. */
.build-story-cinematic {
  overflow: hidden;
  border-block: 1px solid rgba(39, 87, 131, .5);
  background:
    radial-gradient(ellipse at 50% 22%, rgba(37, 142, 255, .11), transparent 38%),
    radial-gradient(circle at 86% 72%, rgba(64, 199, 153, .055), transparent 24%),
    #030b13;
}
.build-story-cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(39,87,131,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(39,87,131,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
}
.story-cinema-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(340px,.55fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 54px;
}

.story-cinema-intro h2 {
  margin-top: 13px;
  max-width: 900px;
  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 850;
}
.story-cinema-intro p { color: #9bb1c9; font-size: 1.03rem; line-height: 1.75; }
.story-contract {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.story-contract span {
  padding: 7px 9px;
  border: 1px solid rgba(39,87,131,.62);
  border-radius: 999px;
  background: rgba(6,31,70,.5);
  color: #7898ae;
  font: 700 6.5px/1 var(--mono);
  letter-spacing: .09em;
}
.story-contract span:first-child { border-color: rgba(64,199,153,.32); color: #81b9a6; }
.story-film {
  position: relative;
  z-index: 2;
  min-height: 600px;
  padding: 54px 34px 34px;
  border: 1px solid rgba(39,87,131,.72);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(5,19,33,.96), rgba(3,11,19,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 54px 100px -70px #000;
}

.story-film::before {
  content: "ILLUSTRATIVE RECORD FLOW // PRODUCT BEHAVIOUR";
  position: absolute;
  top: 17px;
  left: 20px;
  color: #4d7189;
  font: 700 6.5px/1 var(--mono);
  letter-spacing: .14em;
}
.story-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 36px;
}
.story-track::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 61px;
  height: 1px;
  background: linear-gradient(90deg, rgba(37,142,255,.18), rgba(53,167,255,.54), rgba(64,199,153,.28));
}
.story-track::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 5%;
  top: 58px;
  width: 46px;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #35a7ff, transparent);
  box-shadow: 0 0 20px rgba(53,167,255,.42);
  animation: storyRecordTravel 10s linear infinite;
}
@keyframes storyRecordTravel { to { left: calc(95% - 46px); } }

.story-moment {
  position: relative;
  z-index: 3;
  min-height: 230px;
  padding: 48px 20px 20px;
  border: 1px solid rgba(28,66,108,.84);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(10,41,79,.62), rgba(3,21,47,.78));
  overflow: hidden;
}
.story-moment::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #258eff;
  box-shadow: 0 0 0 6px rgba(37,142,255,.07), 0 0 20px rgba(37,142,255,.34);
}
.story-moment:nth-child(4)::before { background: #40c799; box-shadow: 0 0 0 6px rgba(64,199,153,.07), 0 0 20px rgba(64,199,153,.3); }
.story-moment .story-no { position: absolute; top: 18px; right: 16px; color: #4d7189; font: 700 7px/1 var(--mono); letter-spacing: .12em; }
.story-moment small { display: block; color: #71c8fb; font: 700 7px/1 var(--mono); letter-spacing: .11em; }
.story-moment h3 { margin: 42px 0 9px; color: #f5f8fc; font-size: 1.14rem; letter-spacing: -.025em; }
.story-moment p { color: #839cb0; font-size: .86rem; line-height: 1.58; }
.story-source { position: absolute; left: 20px; bottom: 15px; color: #4d7189; font: 700 6.5px/1 var(--mono); letter-spacing: .1em; }

.story-finale {
  position: relative;
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.58fr);
  gap: 24px;
  padding: 28px;
  border: 1px solid rgba(64,199,153,.34);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(7,34,45,.72), rgba(5,22,37,.92) 56%, rgba(3,21,47,.86));
}
.story-finale-eyebrow { color: #65d7af; font: 750 7px/1 var(--mono); letter-spacing: .12em; }
.story-finale h3 { margin: 11px 0 10px; max-width: 700px; color: #f5f8fc; font-size: clamp(1.8rem,3vw,3.2rem); line-height: 1; letter-spacing: -.045em; }
.story-finale p { max-width: 690px; color: #91a9bc; line-height: 1.68; }
.story-title-block { display: grid; grid-template-columns: 1fr; border: 1px solid #275783; border-radius: 12px; overflow: hidden; align-self: stretch; }
.story-title-cell { display: grid; grid-template-columns: .65fr 1fr; gap: 10px; align-items: center; min-height: 58px; padding: 10px 12px; border-bottom: 1px solid #1c426c; background: rgba(6,31,70,.66); }
.story-title-cell:last-child { border-bottom: 0; }
.story-title-cell span { color: #56758d; font: 700 6.5px/1 var(--mono); letter-spacing: .09em; }
.story-title-cell b { color: #bfd1df; font: 750 8px/1.25 var(--mono); }
.story-public-lock { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-top: 18px; border-top: 1px solid rgba(39,87,131,.48); color: #7e98ab; font: 700 7px/1.4 var(--mono); letter-spacing: .08em; }
.story-public-lock b { color: #f4b860; font: inherit; }

@media (max-width: 980px) {
  .story-cinema-intro { grid-template-columns: 1fr; gap: 24px; }
  .story-track { grid-template-columns: repeat(2, 1fr); }
  .story-track::before, .story-track::after { display: none; }
  .story-finale { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .story-cinema-intro h2 { font-size: clamp(2.8rem, 14vw, 4.6rem); }
  .story-film { min-height: 0; padding: 48px 14px 18px; border-radius: 18px; }
  .story-track { grid-template-columns: 1fr; gap: 12px; }
  .story-moment { min-height: 205px; }
  .story-finale { padding: 20px 16px; }
  .story-public-lock { display: block; }
  .story-public-lock b { display: block; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-track::after { animation: none; left: 48%; opacity: .55; }
}