/* Experimental: video background with scroll-driven parallax + darkening. Test-page only, does not affect assets/css/style.css */

.video-stage{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--ink);
}
.video-stage video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(calc(1.06 + var(--scroll) * 0.1)) translateY(calc(var(--scroll) * -3%));
  transition:transform .1s linear;
}
@media (prefers-reduced-motion: reduce){
  .video-stage video{transform:none;}
}
.video-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(4,5,6,0.94) 0%, rgba(4,5,6,0.86) 55%, rgba(4,5,6,0.35) 78%, rgba(4,5,6,0.55) 100%),
    linear-gradient(180deg, rgba(4,5,6,0.2) 0%, rgba(4,5,6,0.4) 55%, rgba(4,5,6,0.92) 100%);
  opacity:calc(0.7 + var(--scroll) * 0.3);
  transition:opacity .08s linear;
}
@media (prefers-reduced-motion: reduce){
  .video-stage::after{opacity:0.9;}
}
.video-badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ceramic);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.5em 1em;
  margin-bottom:1.5rem;
}
.video-badge::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--ceramic);
  box-shadow:0 0 0 3px rgba(89,214,197,.2);
}