/* ============================================================
   THE APPRENTICE — character overlays

   Alpha WebM clips dropped on top of the page. They carry a real alpha
   channel (VP9 yuva420p), so there is no plate to hide and no blend-mode
   trickery — they sit over whatever is behind them like a transparent PNG.
   ============================================================ */

.cast{
  /* Behind the content, not over it. `.wrap` sits on z-index 1, so a card with
     a solid background occludes the character cleanly instead of the character
     landing on the words. This is the safety net; the positioning below is
     what actually keeps them apart. */
  position:absolute;top:34%;z-index:0;
  width:var(--w,220px);
  pointer-events:none;
  opacity:0;transform:translateY(28px) scale(.94);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.cast.in{opacity:1;transform:none}

/* In the gutter beside the content column, measured off `--wrap` rather than
   off the viewport edge. Pinned to the viewport it looked fine on the section
   it was designed against and then walked straight across the flow cards in
   the token section, which reach the full width of the column. */
.cast.left { right:calc(50% + var(--wrap) / 2 + 12px); left:auto }
.cast.right{ left:calc(50% + var(--wrap) / 2 + 12px); right:auto }

.cast video,.cast img{
  display:block;width:100%;height:auto;
  /* low-poly cast: smooth, see css/core.css */
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.75));
}
/* A slow bob so a five-second loop does not read as a repeating stutter. */
.cast.in video,.cast.in img{animation:castBob 5.5s ease-in-out infinite}
@keyframes castBob{50%{transform:translateY(-10px)}}

/* There has to be a gutter to stand in. Below this the column takes the whole
   screen and the only way to show a character is on top of the text, which is
   the bug this replaced — so it is simply not shown.

   The threshold is arithmetic, not taste: `--wrap` caps at 1280 and the widest
   character is 175, so the viewport needs 1280 + 2 x (175 + 12) before there is
   room on both sides. Same sum at the wider tiers, which is why it is checked
   again at each. */
@media (max-width:1649px){ .cast{display:none} }
/* The wider tier bumps `--wrap` to 1520 and eats the gutter it just gained, so
   there is a second dead band immediately above the breakpoint. It reopens once
   the viewport has outgrown the wider column too. */
@media (min-width:1700px) and (max-width:1889px){ .cast{display:none} }
@media (prefers-reduced-motion:reduce){
  .cast{transition:none}
  .cast.in video,.cast.in img{animation:none}
}