/* The front of the building (notes 46). Fixed-size pixel scenes: never stretched,
   centred on a whole pixel, extra width is just sky and street. */

.landing-page { background: #17171F; } /* below the scene: the street carries on */
.front { position: relative; overflow: hidden; background: #070A1C; }
.front .bands { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.front .bands span { position: absolute; left: 0; right: 0; display: block; }
.front .scene { position: absolute; left: calc(50% - var(--half)); left: round(down, 50% - var(--half), 1px); }
.front .street { position: absolute; left: 0; top: 0; }
.front .scene > * { position: absolute; margin: 0; }
.front p { margin: 0; }

/* Desktop: 1440 x 960, standing on the bottom of the screen. On a short screen the sky
   at the top is cut first (never the sign). */
.front-d { --half: 720px; height: max(100svh, 780px); }
.front-d .scene { bottom: 0; width: 1440px; height: 960px; }
.front-p { display: none; }

/* The neon sign, with its lit coin */
.sign img { display: block; }
.sign-coin { position: absolute; border-radius: 50%; box-shadow: 0 0 0 6px rgba(242,193,78,0.45), 0 0 0 12px rgba(242,193,78,0.20); }
.sign-coin.small { box-shadow: 0 0 0 2px rgba(242,193,78,0.45), 0 0 0 4px rgba(242,193,78,0.20); }
.sign-coin img { filter: brightness(1.2) saturate(1.15); }

/* The door: the only way in. */
.door { display: block; text-decoration: none; }
.door svg { position: absolute; left: 0; top: 0; overflow: visible; }
.door .start {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--outline); border: 3px solid var(--outline); box-shadow: 3px 3px 0 var(--gold-deep);
  font-family: var(--pixel);
}
.door:hover .start, .door:focus-visible .start { background: var(--gold-hi); }
.door:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 6px; }

/* The wall screen (not clickable) */
.screen { padding: 14px 10px 0; text-align: center; }
.s-small { font-family: var(--pixel); font-size: 9px; line-height: 14px; color: var(--white); }
.s-big { margin-top: 6px !important; font-family: var(--pixel); font-size: 15px; line-height: 22px; color: var(--white); }
.s-small.blink { margin-top: 8px !important; color: var(--gold); }
.screen .nudge-left { margin: 12px auto 0; }
.coin-plate { text-align: center; font-family: var(--pixel); font-size: 8px; line-height: 12px; color: var(--gold); }
.led { height: 18px; text-align: center; font-family: var(--pixel); font-size: 9px; line-height: 18px; color: #FFB347; }

/* The sandwich board's entrance note */
.board-note { padding: 10px 8px; text-align: center; color: #F2F1E8; font-family: var(--body); }
.b-big { font-size: 17px; line-height: 20px; font-weight: 700; }
.b-mid { margin-top: 8px !important; font-size: 13px; line-height: 16px; }
.b-small { margin-top: 8px !important; font-size: 12px; line-height: 15px; color: #D8DCE4; }

/* Footer links along the street */
.front-links { left: 0; width: 100%; text-align: center; font-family: var(--body); font-size: 16px; line-height: 24px; color: var(--grey); }
.front-links a { display: inline-block; padding: 10px 2px; margin: -10px 0; color: var(--ice); }
.front-links a:hover { color: var(--white); }

/* START pressed: the button goes in, the light chase speeds up, the glow steps up. */
.door.pressed .start { transform: translate(3px, 3px); box-shadow: none; background: var(--gold-hi); }
.door.pressed .run-g-d, .door.pressed .run-p-d { animation-duration: 1.5s; }
.door.pressed .run-g-p, .door.pressed .run-p-p { animation-duration: 1.25s; }
.door.pressed svg rect:nth-child(1) { stroke-opacity: 0.22; }
.door.pressed svg rect:nth-child(2) { stroke-opacity: 0.32; }

/* The open doorway and the door swinging toward you (hinged on the left), in hard steps. */
.doorway {
  background: #D9B8FF; border-bottom: 10px solid #4CE08A;
  box-shadow: inset 0 0 0 23px #3A2070, inset 0 0 0 46px #7A3FD0, inset 0 0 0 69px #B066FF;
}
.door-panel { transform-origin: 0 50%; image-rendering: pixelated; background-repeat: no-repeat; box-shadow: 6px 0 0 #5A5A6A, 9px 0 0 var(--outline); }
.door-zoom { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1000; image-rendering: pixelated; }

/* Motion (all stepped; all off with reduced motion) */
@keyframes runD { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1228; } }
@keyframes runDr { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1228; } }
@keyframes runP { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -968; } }
@keyframes runPr { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 968; } }
.run-g-d { animation: runD 6s steps(153) infinite; }
.run-p-d { animation: runDr 6s steps(153) infinite; animation-delay: -3s; }
.run-g-p { animation: runP 5s steps(121) infinite; }
.run-p-p { animation: runPr 5s steps(121) infinite; animation-delay: -2.5s; }
@keyframes startBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.2; } }
.blink { animation: startBlink 1.2s steps(1, end) infinite; }
@keyframes signFlick { 0%, 91%, 100% { opacity: 1; } 92% { opacity: 0.55; } 93% { opacity: 1; } 95% { opacity: 0.4; } 96% { opacity: 1; } }
.flick { animation: signFlick 9s steps(1, end) infinite; }
@keyframes nudgeL { 0%, 50% { transform: translateX(0); } 51%, 100% { transform: translateX(-8px); } }
@keyframes nudgeU { 0%, 50% { transform: translateY(0); } 51%, 100% { transform: translateY(-6px); } }
.nudge-left { animation: nudgeL 1.2s steps(1, end) infinite; }
.nudge-up { animation: nudgeU 1.2s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) {
  .chase { display: none; }
  .blink, .flick, .nudge-left, .nudge-up { animation: none; opacity: 1; transform: none; }
}

/* Phones and small screens (under 1024 px): the 390 x 740 phone scene. On a short screen
   up to 60 px of sky at the top is cut so the Start card stays on the first screen. */
@media (max-width: 1023px) {
  .front-d { display: none; }
  .front-p {
    --half: 195px; --shift: clamp(-66px, calc(100svh - 756px), 0px);
    display: block; height: calc(756px + var(--shift));
  }
  .front-p .bands { top: var(--shift); }
  .front-p .scene { top: var(--shift); width: 390px; height: 740px; }
  .front-p .start-card {
    position: absolute; left: 20px; right: 20px; max-width: 520px; margin: 0 auto; top: calc(528px + var(--shift));
    height: 178px; padding: 6px 14px 0; text-align: center;
    background: #05071A; border: 4px solid var(--outline); box-shadow: 0 0 0 4px var(--bezel);
  }
  .start-card .nudge-up { margin: 0 auto; }
  .start-card .s-small, .start-card .s-big, .start-card .s-note { margin-top: 4px !important; }
  .start-card .s-big { font-size: 14px; line-height: 20px; }
  .start-card .led-card {
    width: 180px; margin: 4px auto 0 !important; height: 18px;
    background: #0A0710; border: 2px solid var(--outline); box-shadow: 0 0 0 2px #2A1C10;
    font-size: 9px; line-height: 14px;
  }
  .start-card .s-note { font-family: var(--body); font-size: 12px; line-height: 15px; color: var(--grey); }
  .front-p .front-links { position: absolute; top: calc(722px + var(--shift)); font-size: 13px; line-height: 18px; }
}