.story.film-story { height: var(--film-height, 428svh); }
.film-story-short { --film-height: 240svh; }
.film-story .story-stage { min-height: 620px; }
.film-story .story-canvas, .film-story .story-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-story .story-canvas { opacity: 0; }
.film-story.sequence-ready .story-canvas { opacity: 1; }
.film-story .story-poster { object-fit: cover; object-position: center; }
.film-story .film-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(24 27 29 / 68%), rgb(24 27 29 / 3%) 75%), linear-gradient(0deg, rgb(24 27 29 / 33%), transparent 45%); }
.film-story .hero-copy, .film-story .story-copy { z-index: 2; }
.film-story .story-copy { top: 28%; max-width: 400px; }
.film-story .story-copy h2 { font-size: clamp(36px, 3.4vw, 50px); }
.film-story .story-copy p { font-size: 15px; line-height: 1.8; }
.data-flow { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 12px; font-weight: 600; color: #fff; }
.data-connection { display: block; position: relative; width: 35px; height: 1px; background: #ffffff65; }
.data-connection::after { content: ''; position: absolute; top: -2px; left: calc(var(--data-progress, 0) * 100%); width: 5px; height: 5px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 8px rgb(255 120 40 / 50%); }
@media (max-width: 700px) {
  .film-story .story-copy { top: auto; bottom: 110px; left: 24px; right: 24px; max-width: none; padding: 16px; background: rgb(24 27 29 / 95%); border-radius: 4px; }
  .film-story .story-copy h2 { font-size: 28px; }
  .film-story .story-copy p { display: none; }
  .film-story .story-copy .text-link { margin-top: 16px; font-size: 12px; }
  .film-story .data-flow { margin-top: 18px; font-size: 11px; gap: 8px; }
  .film-story .data-connection { width: 25px; }
  .film-story .film-shade { background: linear-gradient(90deg, rgb(24 27 29 / 69%), rgb(24 27 29 / 13%)), linear-gradient(0deg, rgb(24 27 29 / 33%), transparent 45%); }
  .film-story .story-poster { object-position: 76% center; }
}
@media (prefers-reduced-motion: reduce) {
  .story.film-story { height: auto; }
  .film-story .story-stage { position: relative; }
  .film-story .story-canvas, .film-story .story-copy { display: none; }
}
html:not(.js) .story.film-story { height: auto; }
html:not(.js) .film-story .story-stage { position: relative; }