/* Section dividers: as a divider draws in, its barcode is read left to right, bar by bar,
   with a scanner line passing over it; the label prints once the read completes. */
@property --scan{syntax:'<number>';inherits:true;initial-value:1}
.aisle-code{position:relative;--scan:1}
.aisle-code::before{
  -webkit-mask:var(--barcode) center/100% 100% no-repeat,linear-gradient(90deg,#000 calc(var(--scan) * 100%),transparent calc(var(--scan) * 100%));
  -webkit-mask-composite:source-in;
  mask:var(--barcode) center/100% 100% no-repeat,linear-gradient(90deg,#000 calc(var(--scan) * 100%),transparent calc(var(--scan) * 100%));
  mask-composite:intersect}
.aisle-code::after{content:"";position:absolute;top:-3px;right:calc(84px - var(--scan) * 84px);width:2px;height:22px;border-radius:2px;opacity:0;pointer-events:none;
  background:linear-gradient(#CC3D87,#7D59C2);box-shadow:0 0 6px 1px rgba(204,61,135,.55),0 0 14px 2px rgba(125,89,194,.25)}
:root[data-palette="gold"] .aisle-code::after{background:linear-gradient(#DBAF58,#A48743);box-shadow:0 0 6px 1px rgba(219,175,88,.55)}
.aisle-code>span{transition:opacity .4s ease}
.rails-ready .aisle .aisle-code{--scan:0}
.rails-ready .aisle .aisle-code>span{opacity:0}
.rails-ready .aisle.drawn .aisle-code{opacity:.6;transition:opacity .3s var(--ease) .15s;animation:aisle-scan 1.3s steps(30,end) .35s both}
.rails-ready .aisle.drawn .aisle-code::after{animation:aisle-laser 1.3s linear .35s both}
.rails-ready .aisle.drawn .aisle-code>span{opacity:1;transition-delay:1.55s}
@keyframes aisle-scan{from{--scan:0}to{--scan:1}}
@keyframes aisle-laser{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.aisle-code,.rails-ready .aisle .aisle-code{--scan:1;animation:none!important}.aisle-code::after{display:none}.rails-ready .aisle .aisle-code>span{opacity:1}}

/* Clear air between the divider line and its barcode. */
.aisle-code{translate:0 22px}
/* The footer: a frosted pane the halo passes behind. */
footer{background:rgba(250,250,250,.58)!important;-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);border-top:1px solid rgba(23,33,43,.08)}