/* Homepage scroll-sequence behaviour. Geometry remains in generated files. */
html { scrollbar-gutter: stable; }

.brave-home {
  position: relative;
  isolation: auto;
}

.brave-scroll-sequence {
  --sequence-inset-top: 1.25vw;
  --sequence-inset-right: 1.510417vw;
  --sequence-inset-bottom: 1.25vw;
  --sequence-inset-left: 1.510417vw;
  --sequence-radius: 1.09375vw;
  --sequence-exit-opacity: 1;
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  width: auto;
  height: 47.083333vw;
  overflow: hidden;
  opacity: var(--sequence-exit-opacity);
  pointer-events: none;
  background: #000;
  will-change: clip-path, opacity;
  clip-path: inset(
    var(--sequence-inset-top)
    var(--sequence-inset-right)
    var(--sequence-inset-bottom)
    var(--sequence-inset-left)
    round var(--sequence-radius)
  );
}

/* Keep the rounded hero frame centered inside the usable viewport. The
   generated left offset is based on the full viewport width, which includes
   the desktop scrollbar and leaves the visible frame slightly off-center. */
.home .brave-home__desktop .brave-section--hero [data-node-id="19247:3024"] {
  left: 50%;
  transform: translateX(-50%);
}

.brave-hero-backdrop {
  --hero-backdrop-opacity: 1;
  --sequence-inset-top: 1.25vw;
  --sequence-inset-right: 1.510417vw;
  --sequence-inset-bottom: 1.25vw;
  --sequence-inset-left: 1.510417vw;
  --sequence-radius: 1.09375vw;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: auto;
  height: 47.083333vw;
  overflow: hidden;
  background: #000;
  opacity: var(--hero-backdrop-opacity);
  pointer-events: none;
  will-change: clip-path, opacity;
  clip-path: inset(
    var(--sequence-inset-top)
    var(--sequence-inset-right)
    var(--sequence-inset-bottom)
    var(--sequence-inset-left)
    round var(--sequence-radius)
  );
}

.brave-hero-backdrop.is-finished {
  visibility: hidden;
}

.brave-scroll-sequence.is-active {
  display: block;
}

/* At the end of the pinned range, keep the last frame in the document and
   let it scroll out naturally. Removing the fixed layer in one frame caused
   the visible jump reported at the sequence boundary. */
.brave-scroll-sequence.is-released {
  position: absolute;
  top: var(--sequence-release-top);
  right: 0;
  bottom: auto;
  left: 0;
  background: transparent;
  clip-path: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
}

.brave-hero-backdrop.is-released {
  position: absolute;
  top: var(--sequence-release-top);
  right: 0;
  bottom: auto;
  left: 0;
  clip-path: none;
}

.brave-scroll-sequence__poster,
.brave-scroll-sequence__poster img,
.brave-scroll-sequence__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* The desktop sequence frames contain a black matte. Figma screens the
   image group over the BRAVE brown backdrop, so blend the actual raster
   leaves instead of exposing those baked black pixels. */
@media (min-width: 768px) {
  /* The completed frame leaves the pin at the section-two title trigger. */
  .brave-scroll-sequence.is-released {
    background: #000;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .brave-scroll-sequence__poster img,
  .brave-scroll-sequence__canvas {
    mix-blend-mode: screen;
  }
}

/* The decoder supplies pixels to the canvas, never a second visible layer. */
.brave-scroll-sequence [data-sequence-video] { display: none !important; }

.brave-scroll-sequence__canvas {
  opacity: 0;
}

.brave-scroll-sequence.is-canvas-ready .brave-scroll-sequence__canvas {
  opacity: 1;
}

.brave-scroll-sequence.is-canvas-ready .brave-scroll-sequence__poster {
  visibility: hidden;
}

.home .brave-home__desktop,
.home .brave-home__mobile {
  position: relative;
  z-index: auto;
}

/* Figma applies screen blending to node 19247:3050 itself. The generated
   section wrapper repeated that blend, which whitened the section when the
   scroll sequence changed from fixed to released positioning. */
.home .brave-home__desktop .brave-section--sec2 {
  mix-blend-mode: normal;
}

.home .brave-home.is-scroll-sequence-active .brave-section--hero [data-node-id="19248:6291"],
.home .brave-home.is-scroll-sequence-active .brave-section--sec2 [data-node-id="19248:6294"],
.home .brave-home.is-scroll-sequence-complete .brave-section--sec2 [data-node-id="19248:6294"],
.home .brave-home.is-scroll-sequence-active .brave-home__mobile [data-node-id="19247:4694"],
.home .brave-home.is-scroll-sequence-active .brave-home__mobile [data-node-id="19247:4721"] {
  visibility: hidden;
}

.home .brave-overlay--grid {
  z-index: 2;
}

.home [data-node-id="19247:3101"],
.home [data-node-id="19247:4797"] {
  /* Keep the diagram canvas transparent so its screen-blended image can use
     the live global grid and glow as its backdrop. */
  background-color: transparent;
  mix-blend-mode: normal;
}

@media (max-width: 767px) {
  .brave-hero-backdrop {
    display: none;
  }

  .brave-scroll-sequence {
    --sequence-inset-top: 1.538462vw;
    --sequence-inset-right: 2.051282vw;
    --sequence-inset-bottom: 4.615385vw;
    --sequence-inset-left: 1.794872vw;
    --sequence-radius: 0;
    height: 235.897436vw;
  }

  .brave-scroll-sequence::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      #000 0%,
      #000 34%,
      rgba(0, 0, 0, 0.92) 40%,
      rgba(0, 0, 0, 0.6) 48%,
      rgba(0, 0, 0, 0) 62%
    );
    content: "";
    opacity: var(--sequence-top-blend-opacity, 1);
    pointer-events: none;
    will-change: opacity;
  }

  .brave-scroll-sequence__poster img {
    max-width: none;
    top: var(--sequence-poster-top, 39.130435%);
    right: auto;
    bottom: auto;
    left: var(--sequence-poster-left, -84.06%);
    width: 184.06%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .home .brave-home__mobile [data-node-id="19247:4757"] {
    --brave-reveal-distance: 6vw;
    --brave-reveal-stagger: 80ms;
  }

  .home .brave-home__mobile [data-node-id="19247:4796"] [data-name="LINE"],
  .home .brave-home__mobile [data-node-id="19247:4796"] [data-name="LINE"] > .absolute {
    opacity: 1 !important;
    clip-path: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brave-scroll-sequence__canvas {
    display: none;
  }

}