/* Features: the glasses character as the chapter mark on the "NN · Feature"
   rule, then an encore above the end heading. assets/speck/features.js adds
   .speck-on / .speck-end and the elements styled here, so without it the page
   is unchanged.

   No jitter: nothing that fades contains him. The rule row is shared by every
   feature and never fades; only its label text does. The copy items stack in
   one grid cell, so the block always reserves the tallest feature's copy. */
.cine__view{--cs:2}
.speck-on .swap__item{grid-area:2/2}
.speck-on .swap__item .stk__n{display:none}
.swap .speck-rule{grid-area:1/2;position:relative;min-height:calc(32px * var(--cs));margin-bottom:6px;gap:10px}
.speck-rule__label{white-space:nowrap}
/* His slot is fixed just past the widest label (--speck-lw, measured), so a
   short or long label never moves him. */
.speck-rule__host{position:absolute;top:0;left:min(calc(50% + var(--speck-lw,200px) / 2 + 10px),calc(100% - 100px * var(--cs)));display:block;width:calc(100px * var(--cs));height:calc(32px * var(--cs));pointer-events:none;contain:layout paint}
/* A gap in the rule where he stands, and a faint floor under him. */
.speck-rule__host::before{content:'';position:absolute;left:-8px;right:-8px;top:calc(50% - 1px);height:3px;background:var(--bg)}
.speck-rule__host::after{content:'';position:absolute;left:8%;right:18%;bottom:calc(4px * var(--cs));height:1px;background:linear-gradient(90deg,transparent,rgba(77,213,138,0.22),transparent);pointer-events:none}
.speck-rule__host canvas,.speck-encore canvas{position:relative;will-change:transform,opacity}
/* The copy under the rule is one rule-height taller, so the clip gives it room. */
.speck-on .cine__clip{max-width:min(960px,calc((100svh - var(--pin-top,68px) - 444px) * 2))}

/* The end block fills the view, so the chapter rule can scroll fully away
   before he lands above the heading at his rule size. */
.speck-end{--es:2;min-height:calc(100svh - var(--pin-top,68px));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.speck-encore{position:relative;width:calc(100px * var(--es));height:calc(32px * var(--es));margin:0 auto calc(5px * var(--es) + 2px);contain:layout paint}
.speck-end .end__h em{transition:text-shadow .5s var(--ease)}
.speck-end.is-landed .end__h em{text-shadow:0 0 26px var(--glow)}

@media(max-width:940px){
  .cine__view{--cs:1.5}
  .swap .speck-rule{margin-bottom:8px}
  .speck-rule__host{left:min(calc(var(--speck-lw,200px) + 18px),calc(100% - 100px * var(--cs)))}
  .speck-on .cine__clip{max-width:calc((100svh - var(--pin-top,63px) - 420px) * 2)}
  .speck-end{--es:1.5}
}
@media(max-width:940px) and (orientation:portrait){
  .speck-on .cine__clip{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .speck-end .end__h em{transition:none}
}