/* ==========================================================================
   Home hero (run 3): the motion options. explore/motion-1 (Strata),
   motion-2 (Sand Table), motion-3 (Confluence). Hero 1F's copy, layout and
   buttons, over a full-bleed black-and-white WebGL loop.
   ========================================================================== */
body:has(.fb--motion) { background: #030303; }
.fb--motion { background: #030303; }
.fb--motion .fb-media canvas { opacity: 0; transition: opacity 1.8s ease; }
.fb--motion .fb-media canvas.is-on { opacity: 1; }
/* a hero that does its own fade from black should not also fade in on load */
.fb--motion .fb-media canvas[data-film] { opacity: 1; transition: none; }

.fb--motion.oneline .fb-shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .6) 34%, rgba(0, 0, 0, .3) 56%, rgba(0, 0, 0, 0) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 150px);
  -webkit-mask-image: none; mask-image: none;
}
.fb--motion .fb-h1, .fb--motion .fb-sub { text-shadow: 0 1px 24px rgba(0, 0, 0, .55); }
.fb--motion .btn-glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 24px rgba(0, 0, 0, .3); }

/* the diagram-led heroes (motion-4 to 6) carry more detail, so the copy gets a deeper shade */
@media (min-width: 1101px) {
  .fb--motion.fb--dense.oneline .fb-shade {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .84) 34%, rgba(0, 0, 0, .58) 54%, rgba(0, 0, 0, .12) 68%, rgba(0, 0, 0, 0) 76%),
      linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 130px);
  }
}

@media (max-width: 1100px) {
  .fb--motion.oneline .fb-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .3) 82%, rgba(0, 0, 0, .14) 100%), linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 150px); }
}
@media (max-width: 760px) {
  .fb--motion.oneline .fb-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .66) 60%, rgba(0, 0, 0, .8) 100%); }
}

/* the note that the numbers are examples, as on run 2's Polaris interface */
.motion-note { position: absolute; left: var(--gut); bottom: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: rgba(255, 255, 255, .46); z-index: 1; }
@media (max-width: 760px) { .motion-note { display: none; } }