[data-fixed-barrier] .barrier-scene { aspect-ratio: 2/1; }
[data-fixed-barrier] .access-camera { position: absolute; top: 50%; width: 100%; aspect-ratio: 2/1; transform: translateY(-50%); }
[data-fixed-barrier] .access-camera>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* All layers share the base photo's coordinate space and a fixed hinge. */
[data-fixed-barrier] .access-camera>.access-barrier-arm { inset: auto; left: 20.95%; top: 29.62%; width: 54%; height: auto; aspect-ratio: 2098/750; object-fit: contain; z-index: 2; clip-path: inset(41% 0 44% 0); transform-origin: 97.5% 48.2%; transform: rotate(0deg); transition: transform 1200ms cubic-bezier(.4,0,.2,1); }
[data-fixed-barrier].is-open .access-camera>.access-barrier-arm { transform: rotate(83deg); }
[data-fixed-barrier] .access-camera>.access-hinge { z-index: 3; clip-path: circle(1.8% at 73.6% 48.25%); }
[data-fixed-barrier] .access-plate-scan { position: absolute; left: 26%; top: 65.5%; width: 9.8%; height: 4.5%; z-index: 3; border: 2px solid #47dfa5; border-radius: 2px; opacity: 0; transition: opacity 160ms; }
[data-fixed-barrier]:is([data-phase=reading],[data-phase=checking],[data-phase=opening],[data-phase=open]) .access-plate-scan { opacity: 1; }
[data-fixed-barrier][data-phase=reading] .access-plate-scan { animation: access-scan 450ms ease-in-out; }
@keyframes access-scan { 50% { border-color: #fff; } }
@media (prefers-reduced-motion:reduce) {
  [data-fixed-barrier] .access-camera>.access-barrier-arm,[data-fixed-barrier] .access-plate-scan { transition: none; animation: none; }
}