/* Neon sign in the hero. HTML and CSS only, no JavaScript.
   Everything here uses the class "nsign" so it can't touch the "Last call" sign (.neon) near the bottom of the page.
   The sign is ten stacked layers. "mul" layers darken and "add" layers add light (screen blending, which every
   browser supports), so they mix straight into the hero's own blue and there is no box around it at any width.
   It turns on once when the page loads, then stays lit. No replay, no loop, nothing after it is on.
   Flashing: at most 2 flashes in any one second, each on one small part of the word (the limit is 3).
   Reduced motion: lit from the start.
   1100px and wider: top right of the hero, above the band photo.
   Under 1100px: between the words and the band photo. */

.hero-grid{z-index:auto}                 /* lets the layers mix with the hero's background */
.hero-photo{z-index:1}                   /* the photo and its glow sit above the sign's soft edges */
.hero-logo.neon-cell{position:relative;width:min(100%,400px);height:225px}
.nsign{position:absolute;left:50%;top:-52px;width:670px;height:306px;margin-left:-335px;overflow:hidden;pointer-events:none}
.nsign i{position:absolute;inset:0;background:no-repeat 0 0/100% 100%}
.nsign .mul{mix-blend-mode:multiply}
.nsign .add{mix-blend-mode:screen}

.nsign .l0m{background-image:url(../img/neon/base-mul.webp)}
.nsign .l0a{background-image:url(../img/neon/base-add.webp)}
.nsign .l1m{background-image:url(../img/neon/s1-mul.webp)}
.nsign .l1a{background-image:url(../img/neon/s1-add.webp)}
.nsign .l2m{background-image:url(../img/neon/s2-mul.webp)}
.nsign .l2a{background-image:url(../img/neon/s2-add.webp)}
.nsign .l3m{background-image:url(../img/neon/s3-mul.webp)}
.nsign .l3a{background-image:url(../img/neon/s3-add.webp)}
.nsign .l4m{background-image:url(../img/neon/s4-mul.webp)}
.nsign .l4a{background-image:url(../img/neon/s4-add.webp)}

/* the four sections switch on left to right: Poz, it, roni, cs. Hard steps, like a real strike. */
.nsign .s{animation:3.4s steps(1,end) .5s 1 both}
.nsign .s1{animation-name:nsign-1}
.nsign .s2{animation-name:nsign-2}
.nsign .s3{animation-name:nsign-3}
.nsign .s4{animation-name:nsign-4}
@keyframes nsign-1{0%{opacity:0}14.706%{opacity:.7}16.176%{opacity:.3}17.647%{opacity:.92}85.294%{opacity:.92;animation-timing-function:linear}100%{opacity:1}}
@keyframes nsign-2{0%{opacity:0}26.471%{opacity:.6}27.941%{opacity:.92}85.294%{opacity:.92;animation-timing-function:linear}100%{opacity:1}}
@keyframes nsign-3{0%{opacity:0}38.235%{opacity:.8}39.706%{opacity:.35}41.176%{opacity:.92}85.294%{opacity:.92;animation-timing-function:linear}100%{opacity:1}}
@keyframes nsign-4{0%{opacity:0}51.471%{opacity:.7}52.941%{opacity:.92}73.529%{opacity:.15}77.941%{opacity:.6}79.412%{opacity:.15}80.882%{opacity:.4}82.353%{opacity:.7}83.824%{opacity:.92}85.294%{opacity:.92;animation-timing-function:linear}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){.nsign .s{animation:none;opacity:1}}

/* tablets and phones: the sign gets its own row between the words and the band photo */
@media (max-width:1099px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "copy" "logo" "photo" "card"}
  .hero-logo.neon-cell{display:block;grid-area:logo;place-self:stretch;width:100%;height:250px}
  .nsign{top:-28px}
}
@media (max-width:759px){
  .hero-logo.neon-cell{height:196px}
  .nsign{width:536px;height:245px;margin-left:-268px;top:-25px}
}