/* ==========================================================================
   IX · CTA — shader canvas layer for the closing band.

   The shipped <video> stays in the markup as the no-JS / no-WebGL ground
   truth, with the poster painted underneath as the section background.
   js/areas/cta.js inserts a <canvas> directly after the video — same inset,
   same stacking slot, so the ladder is unchanged: art < veil < copy.

   The handover is class-driven, not variant-driven: .rb-teaser100--canvas is
   added by JS only AFTER the shader has painted its first real frame, so the
   band can never be blank — not on JS failure, not on a lost GL context, not
   under reduced motion. body[data-rbs-cta] alone must never hide the video.

   The crossfade is a 500ms editorial move, so it rides the global tempo
   multiplier. Both layers transition — retargeting mid-flight, never
   restarting — so rapid variant flips in the Studio stay smooth.

   Panel contrast at knob extremes: the veil is 70% white over the art, and
   the copy is ink on that veil. Even both colors cranked to pure yellow puts
   the text ground at a ~15:1 contrast ratio against ink — no scrim changes
   needed, verified against the section stylesheet.
   ========================================================================== */

.rb-teaser100__canvas {
  position: absolute;
  inset: 0;
  z-index: var(--rb-sys-z-base);
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity
    calc(var(--rb-sys-duration-4) * var(--rbs-motion-scale, 1))
    var(--rb-sys-ease-swift);
}

/* The video keeps full opacity by default; only the live-canvas class swaps
   the two layers. The shader opens on the same dark ground the poster sits
   on, so the swap reads as the frame coming alive, not as a cut. */
.rb-teaser100__video {
  transition: opacity
    calc(var(--rb-sys-duration-4) * var(--rbs-motion-scale, 1))
    var(--rb-sys-ease-swift);
}

.rb-teaser100--canvas .rb-teaser100__canvas { opacity: 1; }
.rb-teaser100--canvas .rb-teaser100__video  { opacity: 0; }

/* Belt-and-braces: the 'video' variant never shows a canvas, even if a stale
   node survives a teardown race. */
body[data-rbs-cta="video"] .rb-teaser100__canvas { display: none; }
body[data-rbs-cta="video"] .rb-teaser100__video  { opacity: 1; }