/* Selected can-crest sign and registered glass overlays. These are absolute
   artwork mounts: no cabinet, header, deck or phone-layout dimensions change. */
#crafted-sign,#sign-lamps { display:none; }
.lamp-fixture { display:block; position:relative; isolation:isolate; flex:none; }
.lamp-fixture svg { display:block; width:100%; height:100%; position:relative; z-index:1; }
.lamp-porthole { width:70px; height:69.1765px; }
.lamp-spill { position:absolute; inset:-22px; border-radius:50%; background:radial-gradient(ellipse,#ffc65b42,#f7b9571a 36%,transparent 68%); pointer-events:none; }
.lamp-lens { position:absolute; z-index:2; border-radius:50%; background:radial-gradient(ellipse at 48% 40%,#fff2bccc 0%,#ffd367aa 33%,#ffae3670 67%,#ed901522 100%); mix-blend-mode:screen; pointer-events:none; }
.lamp-porthole .lamp-lens { left:21%; top:21%; width:58%; height:58%; }
.lamp-oval .lamp-lens { left:22%; top:20%; width:56%; height:60%; border-radius:40%; }
  body.crafted-sign-ready .mq-sign,body.crafted-sign-ready .mq-sign-phone { visibility:hidden; }
  #crafted-sign { display:block; position:absolute; left:50%; top:-65.36px; width:453.0272px; height:139.36px; transform:translateX(-50%); z-index:5; pointer-events:none; }
  #crafted-sign > svg { display:block; width:100%; height:100%; overflow:hidden; }
  #sign-lamps { display:block; position:absolute; inset:0; pointer-events:none; z-index:4; }
  .lamp-mount { position:absolute; top:34px; transform:translate(-50%,-50%); }
  .lamp-left { left:51px; --lamp-delay:0ms; }
  .lamp-right { left:calc(100% - 51px); --lamp-delay:160ms; }
  /* Ben's selected wider, shorter proportions; the source art stays intact. */
  .lamp-under-sign { display:block; position:absolute; left:50%; top:90.7692308%; width:26%; aspect-ratio:5.3; transform:translate(-50%,-50%); z-index:3; --lamp-delay:320ms; }
  .lamp-under-sign .lamp-fixture { width:100%; height:100%; }
  .lamp-under-sign .lamp-spill { inset:-10px; }
/* Mobile: fill the space between the 36px lamps with 8px clearance each side.
   Keep the lower edge above the glass; the crest can rise above the cabinet. */
@media(max-width:560px){
  #crafted-sign { top:auto; bottom:0; width:calc(100% - 88px); height:auto; aspect-ratio:2113 / 650; transform:translateX(-50%); }
  #crafted-sign > svg { position:absolute; inset:0; }
  .lamp-mount { top:50%; }
  .lamp-left { left:18px; }
  .lamp-right { left:calc(100% - 18px); }
  .lamp-porthole { width:36px; height:auto; aspect-ratio:1020 / 1008; }
  .lamp-spill { inset:-12px; }
}
.lamp-lens,.lamp-spill { opacity:1; }
body.awaiting-power .lamp-lens,body.awaiting-power .lamp-spill,
body.machine-off .lamp-lens,body.machine-off .lamp-spill { opacity:0; animation:none; }
body.machine-powering .lamp-lens,body.machine-powering .lamp-spill {
  animation:sign-lamp-strike 480ms linear calc(4350ms + var(--lamp-delay,0ms)) both;
}
body.warm-boot.machine-powering .lamp-lens,body.warm-boot.machine-powering .lamp-spill {
  animation-duration:260ms; animation-delay:calc(1050ms + var(--lamp-delay,0ms));
}
body.machine-powered #marquee.dispense-lights .lamp-lens,
body.machine-powered #marquee.dispense-lights .lamp-spill {
  animation:sign-lamp-vend 900ms ease-in-out var(--lamp-delay,0ms) both;
}
body.machine-shutting-down .lamp-lens,body.machine-shutting-down .lamp-spill {
  animation:sign-lamp-down 650ms ease-in calc(2950ms + var(--lamp-delay,0ms)) both;
}
@keyframes sign-lamp-strike { 0%,18%{opacity:0} 10%,30%{opacity:.7} 45%{opacity:.25} 75%,100%{opacity:1} }
@keyframes sign-lamp-vend { 0%,100%{opacity:1} 18%{opacity:.25} 42%,62%{opacity:1} 78%{opacity:.65} }
@keyframes sign-lamp-down { 0%{opacity:1} 25%{opacity:.35} 42%{opacity:.65} 100%{opacity:0} }
@media(prefers-reduced-motion:reduce){
  .lamp-lens,.lamp-spill { animation:none!important; }
  body.machine-powering .lamp-lens,body.machine-powering .lamp-spill,
  body.machine-shutting-down .lamp-lens,body.machine-shutting-down .lamp-spill { opacity:0; }
}
html.no-js .lamp-lens,html.no-js .lamp-spill { opacity:1; animation:none; }