/* Raven motion — frame, controls, and captions for the canvas explainers
   rendered by assets/js/motion/engine.js. The canvas carries the artwork;
   this file only styles the frame around it, in the dossier idiom. */

.rm-band{margin:0 0 88px}
.rm-band-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px 64px;
  align-items:end;margin-bottom:24px;
}
@media (max-width:980px){
  .rm-band-head{grid-template-columns:1fr}
}
.rm-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:500 11px/1 var(--font-mono);letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.78);
}
.rm-eyebrow .sym{color:rgba(255,255,255,0.55);font-weight:400}
.rm-eyebrow .slash{color:rgba(255,255,255,0.28);font-weight:400}
.rm-band-h{
  margin-top:16px;
  font:300 clamp(26px, 2.8vw, 38px)/1.08 var(--font-sans);
  letter-spacing:-0.02em;color:#fff;text-wrap:balance;max-width:24ch;
}
.rm-band-aside{
  font:400 14px/1.6 var(--font-sans);color:rgba(255,255,255,0.58);
  max-width:44ch;text-wrap:pretty;
}
.rm-band-aside p{margin:0}
.rm-band-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding-bottom:5px;
  font:500 10.5px/1 var(--font-mono);letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.78);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.22);
  transition:color 160ms ease, border-color 160ms ease;
}
.rm-band-link:hover{color:#fff;border-color:rgba(255,255,255,0.6)}
.rm-band-link:focus-visible{outline:2px solid rgba(138,161,255,0.9);outline-offset:3px}

.rm{
  position:relative;margin:0;
  border:1px solid rgba(255,255,255,0.08);border-radius:14px;
  background:#000;overflow:hidden;
}
.rm-stage{position:relative;aspect-ratio:var(--rm-ar, 16 / 9);background:#000}
.rm[data-rm-layout="tall"] .rm-stage{max-width:560px;margin:0 auto}
.rm-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rm-fallback{
  position:absolute;inset:0;margin:0;
  transition:opacity 600ms var(--ease-std, cubic-bezier(0.2,0,0,1));
}
.rm-fallback img{width:100%;height:100%;object-fit:contain;display:block}
.rm.is-ready .rm-fallback{opacity:0;pointer-events:none}

.rm-bar{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:12px 18px 12px 10px;
  border-top:1px solid rgba(255,255,255,0.08);
  background:#030303;
}
.rm.is-failed .rm-bar{display:none}
.rm-toggle{
  width:32px;height:32px;display:inline-grid;place-items:center;
  border-radius:8px;border:1px solid rgba(255,255,255,0.14);
  background:transparent;color:#f2f2f2;cursor:pointer;
  transition:border-color 160ms ease, background-color 160ms ease;
}
.rm-toggle:hover{border-color:rgba(255,255,255,0.34);background:rgba(255,255,255,0.04)}
.rm-toggle svg{width:14px;height:14px;fill:currentColor}

/* The scrub line doubles as the frame's top hairline. */
.rm-track{
  position:absolute;left:0;right:0;top:-7px;height:14px;
  cursor:pointer;touch-action:none;
}
.rm-track-line,.rm-track-fill{position:absolute;left:0;right:0;top:6px;height:1px}
.rm-track-line{background:rgba(255,255,255,0.1)}
.rm-track-fill{
  background:rgba(242,242,242,0.92);
  transform-origin:0 50%;transform:scaleX(var(--p, 0));
}
.rm-track-tick{position:absolute;top:4px;width:1px;height:5px;background:rgba(255,255,255,0.32)}
.rm-track:hover .rm-track-line{background:rgba(255,255,255,0.18)}

.rm-chapters{
  list-style:none;margin:0;padding:0;
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
}
.rm-chapters::-webkit-scrollbar{display:none}
.rm-chapters button{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border:0;border-radius:7px;background:transparent;
  font:500 10.5px/1 var(--font-mono);letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.42);white-space:nowrap;cursor:pointer;
  transition:color 160ms ease, background-color 160ms ease;
}
.rm-chapters button:hover{color:rgba(255,255,255,0.82)}
.rm-chapters button[aria-current]{color:#f2f2f2;background:rgba(255,255,255,0.06)}
.rm-ch-n{color:rgba(255,255,255,0.32)}
.rm-chapters button[aria-current] .rm-ch-n{color:rgba(255,255,255,0.62)}
.rm-time{
  font:500 10.5px/1 var(--font-mono);letter-spacing:0.14em;
  color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rm-sep{margin:0 6px;color:rgba(255,255,255,0.24)}

.rm-toggle:focus-visible,
.rm-track:focus-visible,
.rm-chapters button:focus-visible{outline:2px solid rgba(138,161,255,0.9);outline-offset:2px}

.rm-cap{
  padding:14px 18px 16px;border-top:1px solid rgba(255,255,255,0.06);
  font:400 13px/1.55 var(--font-sans);color:rgba(255,255,255,0.55);
}
.rm-cap b{color:rgba(255,255,255,0.88);font-weight:500}

@media (max-width:780px){
  .rm-band{margin-bottom:64px}
  .rm-bar{gap:10px;padding:10px 12px 10px 8px}
  .rm-chapters li:not(:has(button[aria-current])){display:none}
  .rm-cap{padding:12px 14px 14px}
}