/* The living wall: tavern ambience behind the signed-out screens only (the
   sign-in page, the code step, join). CSS only. It sits above the wall
   (z-index 1–2) and below the banner (3), nothing in it takes a click, it
   never goes above .62 opacity or below 5px of blur, and it all stops under
   prefers-reduced-motion. Distances are in vw so the figures cross any width. */

.ambience, .ambience * { pointer-events: none; }
.ambience { position: absolute; inset: 0; }
.ambience > * { position: absolute; display: block; }
.ambience i { display: block; }

/* Window: cast light rather than a drawn window */
.amb-window { z-index: 1; left: 92px; top: 74px; width: 232px; height: 320px; transform: skewY(-9deg); border-radius: 116px 116px 10px 10px; overflow: hidden; filter: blur(13px); background: linear-gradient(165deg, rgba(226, 182, 104, .15), rgba(226, 182, 104, .045) 62%, transparent); animation: lamp-breathe 9s ease-in-out infinite; }
.amb-window i { position: absolute; background: rgba(12, 8, 4, .4); }
.amb-window .mullion { left: 50%; top: 0; bottom: 0; width: 16px; margin-left: -8px; }
.amb-window .transom-a { top: 104px; left: 0; right: 0; height: 15px; }
.amb-window .transom-b { top: 214px; left: 0; right: 0; height: 13px; background: rgba(12, 8, 4, .35); }
.amb-window .frame { inset: 0; background: none; border: 14px solid rgba(12, 8, 4, .45); border-radius: 116px 116px 10px 10px; }

/* Two torches, on coprime flickers so they never pulse together */
.amb-torch-l { z-index: 1; left: -60px; top: 120px; width: 420px; height: 460px; background: radial-gradient(closest-side, rgba(232, 158, 70, .3), rgba(232, 158, 70, .08) 55%, transparent 78%); filter: blur(6px); animation: torch-flicker 3.1s ease-in-out infinite; }
.amb-torch-r { z-index: 1; right: -80px; top: 40px; width: 380px; height: 420px; background: radial-gradient(closest-side, rgba(226, 140, 58, .26), rgba(226, 140, 58, .07) 55%, transparent 78%); filter: blur(7px); animation: torch-flicker-b 4.3s ease-in-out infinite; }

/* Furniture shadows */
.amb-chair { z-index: 2; left: 96px; bottom: 0; width: 210px; height: 250px; transform-origin: bottom center; filter: blur(7px); animation: shadow-sway 11s ease-in-out infinite; }
.amb-chair i { position: absolute; background: rgba(6, 10, 7, .7); }
.amb-chair .seat { left: 34px; bottom: 0; width: 118px; height: 96px; background: rgba(6, 10, 7, .78); }
.amb-chair .back { left: 44px; bottom: 80px; width: 96px; height: 150px; background: rgba(6, 10, 7, .72); }
.amb-chair .leg-a { left: 36px; bottom: 0; width: 12px; height: 120px; }
.amb-chair .leg-b { left: 140px; bottom: 0; width: 12px; height: 120px; }
.amb-post { z-index: 2; right: 120px; bottom: 0; width: 150px; height: 400px; transform-origin: bottom center; filter: blur(9px); background: linear-gradient(0deg, rgba(6, 10, 7, .7), rgba(6, 10, 7, .3) 70%, transparent); animation: shadow-sway-slow 15s ease-in-out infinite; }
.amb-hang { z-index: 2; right: 210px; top: 0; width: 34px; height: 210px; transform-origin: top center; filter: blur(5px); background: linear-gradient(180deg, rgba(6, 10, 7, .55), transparent); animation: shadow-sway-slow 13s ease-in-out infinite; }

/* Figures passing: a wrapper crosses the wall while its body bobs */
.amb-fig { z-index: 2; left: 0; }
.amb-fig .body { position: absolute; inset: 0; transform-origin: bottom center; }
.amb-fig i { position: absolute; }

.amb-fig.ork { bottom: -10px; width: 300px; height: 470px; filter: blur(15px); animation: ork-pass 34s cubic-bezier(.42, 0, .58, 1) infinite; animation-delay: -10s; }
.ork .body { animation: ork-lumber 2.6s ease-in-out infinite; }
.ork .head { left: 92px; bottom: 300px; width: 104px; height: 92px; border-radius: 44px 44px 30px 30px; background: rgba(5, 9, 6, .82); }
.ork .tusk-l { left: 84px; bottom: 372px; width: 26px; height: 34px; border-radius: 14px; transform: rotate(-26deg); background: rgba(5, 9, 6, .72); }
.ork .tusk-r { left: 178px; bottom: 372px; width: 26px; height: 34px; border-radius: 14px; transform: rotate(26deg); background: rgba(5, 9, 6, .72); }
.ork .torso { left: 52px; bottom: 120px; width: 190px; height: 200px; border-radius: 70px 70px 34px 34px; background: rgba(5, 9, 6, .86); }
.ork .arm-l, .ork .arm-r { bottom: 150px; width: 48px; height: 170px; border-radius: 24px; transform-origin: top center; background: rgba(5, 9, 6, .8); animation: ork-arm 2.6s ease-in-out infinite; }
.ork .arm-l { left: 24px; }
.ork .arm-r { left: 226px; animation-direction: reverse; }
.ork .leg-l, .ork .leg-r { bottom: 0; width: 62px; height: 140px; border-radius: 20px; background: rgba(5, 9, 6, .84); }
.ork .leg-l { left: 74px; }
.ork .leg-r { left: 160px; }

.amb-fig.hooded { bottom: -6px; width: 190px; height: 400px; filter: blur(12px); animation: pass-rev 47s linear infinite; animation-delay: -14s; }
.hooded .body { animation: step-bob 1.9s ease-in-out infinite; }
.hooded .head { left: 62px; bottom: 296px; width: 64px; height: 70px; border-radius: 32px 32px 22px 22px; background: rgba(5, 9, 6, .78); }
.hooded .hood { left: 52px; bottom: 330px; width: 86px; height: 84px; border-radius: 50% 50% 8px 8px; transform: rotate(-4deg); background: rgba(5, 9, 6, .7); }
.hooded .torso { left: 48px; bottom: 110px; width: 96px; height: 200px; border-radius: 26px 26px 12px 12px; background: rgba(5, 9, 6, .8); }
.hooded .arm { left: 26px; bottom: 150px; width: 30px; height: 150px; border-radius: 16px; transform-origin: top center; background: rgba(5, 9, 6, .74); animation: arm-swing 1.9s ease-in-out infinite; }
.hooded .leg-l, .hooded .leg-r { bottom: 0; width: 36px; height: 130px; border-radius: 14px; background: rgba(5, 9, 6, .78); }
.hooded .leg-l { left: 60px; }
.hooded .leg-r { left: 104px; }
.hooded .staff { left: 140px; bottom: 120px; width: 12px; height: 230px; transform: rotate(7deg); background: rgba(5, 9, 6, .6); }

.amb-fig.tray { bottom: -4px; width: 170px; height: 350px; filter: blur(11px); animation: pass-slow 61s linear infinite; animation-delay: -32s; }
.tray .body { animation: step-bob 1.5s ease-in-out infinite; }
.tray .head { left: 58px; bottom: 250px; width: 56px; height: 60px; border-radius: 28px; background: rgba(5, 9, 6, .74); }
.tray .torso { left: 44px; bottom: 96px; width: 88px; height: 166px; border-radius: 22px 22px 40px 40px; background: rgba(5, 9, 6, .78); }
.tray .arm { left: 8px; bottom: 196px; width: 52px; height: 20px; border-radius: 10px; transform: rotate(-8deg); background: rgba(5, 9, 6, .7); }
.tray .dish { left: 0; bottom: 206px; width: 34px; height: 26px; border-radius: 6px 6px 14px 14px; background: rgba(5, 9, 6, .66); }
.tray .leg-l, .tray .leg-r { bottom: 0; width: 30px; height: 110px; border-radius: 12px; background: rgba(5, 9, 6, .76); }
.tray .leg-l { left: 56px; }
.tray .leg-r { left: 94px; }

.amb-fig.cloaked { bottom: -12px; width: 240px; height: 440px; filter: blur(17px); opacity: .85; animation: pass-rev 73s linear infinite; animation-delay: -57s; }
.cloaked .body { animation: step-bob 2.3s ease-in-out infinite; }
.cloaked .head { left: 84px; bottom: 320px; width: 72px; height: 78px; border-radius: 36px 36px 18px 18px; background: rgba(5, 9, 6, .76); }
.cloaked .cloak { left: 40px; bottom: 60px; width: 160px; height: 280px; border-radius: 80px 80px 20px 20px; background: rgba(5, 9, 6, .8); }
.cloaked .sword { left: 186px; bottom: 90px; width: 16px; height: 210px; transform: rotate(-14deg); background: rgba(5, 9, 6, .66); }
.cloaked .leg-l, .cloaked .leg-r { bottom: 0; width: 44px; height: 80px; border-radius: 16px; background: rgba(5, 9, 6, .8); }
.cloaked .leg-l { left: 70px; }
.cloaked .leg-r { left: 126px; }

/* Each screen starts the figures at a different moment */
.is-signin .ork { animation-delay: 0s; }
.is-signin .hooded { animation-delay: -9s; }
.is-signin .tray { animation-delay: -27s; }
.is-signin .cloaked { animation-delay: -52s; }
.is-code .ork { animation-delay: -22s; }
.is-code .hooded { animation-delay: -20s; }
.is-code .tray { animation-delay: -38s; }
.is-code .cloaked { animation-delay: -63s; }
.is-join .ork { animation-delay: -34s; }
.is-join .hooded { animation-delay: -26s; }
.is-join .tray { animation-delay: -44s; }
.is-join .cloaked { animation-delay: -69s; }

@keyframes torch-flicker {
  0% { opacity: .62; transform: translate(0, 0) scale(1); }
  9% { opacity: .84; transform: translate(1px, -2px) scale(1.03); }
  17% { opacity: .55; transform: translate(-1px, 1px) scale(.98); }
  26% { opacity: .9; transform: translate(0, -1px) scale(1.05); }
  38% { opacity: .6; transform: translate(1px, 1px) scale(.99); }
  51% { opacity: .88; transform: translate(-1px, -2px) scale(1.04); }
  63% { opacity: .52; transform: translate(0, 1px) scale(.97); }
  74% { opacity: .8; transform: translate(1px, -1px) scale(1.02); }
  86% { opacity: .58; transform: translate(-1px, 0) scale(.99); }
  100% { opacity: .62; transform: translate(0, 0) scale(1); }
}
@keyframes torch-flicker-b {
  0% { opacity: .5; transform: translate(0, 0) scale(1); }
  12% { opacity: .78; transform: translate(-1px, 1px) scale(1.04); }
  23% { opacity: .45; transform: translate(1px, -1px) scale(.97); }
  41% { opacity: .82; transform: translate(0, 2px) scale(1.03); }
  58% { opacity: .5; transform: translate(-1px, -1px) scale(.98); }
  71% { opacity: .76; transform: translate(1px, 0) scale(1.05); }
  89% { opacity: .48; transform: translate(0, 1px) scale(.99); }
  100% { opacity: .5; transform: translate(0, 0) scale(1); }
}
@keyframes shadow-sway {
  0%, 100% { transform: translateX(0) skewX(-8deg) scaleY(1); opacity: .5; }
  50% { transform: translateX(9px) skewX(-11deg) scaleY(1.03); opacity: .66; }
}
@keyframes shadow-sway-slow {
  0%, 100% { transform: translateX(0) skewX(7deg); opacity: .42; }
  50% { transform: translateX(-7px) skewX(9deg); opacity: .58; }
}
@keyframes lamp-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .72; } }
@keyframes ork-pass {
  0% { transform: translateX(-360px) scaleX(1); opacity: 0; }
  7% { opacity: .5; }
  22% { transform: translateX(21vw) scaleX(1.12); opacity: .62; }
  38% { transform: translateX(62vw) scaleX(1.04); opacity: .5; }
  48% { transform: translateX(96vw) scaleX(.96); opacity: 0; }
  100% { transform: translateX(96vw); opacity: 0; }
}
@keyframes ork-lumber {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  25% { transform: translateY(-7px) rotate(.8deg); }
  50% { transform: translateY(2px) rotate(1.4deg); }
  75% { transform: translateY(-5px) rotate(-.6deg); }
}
@keyframes ork-arm { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-11deg); } }
@keyframes pass-rev {
  0% { transform: translateX(96vw) scaleX(-1); opacity: 0; }
  8% { opacity: .46; }
  26% { transform: translateX(50vw) scaleX(-1.1); opacity: .58; }
  44% { transform: translateX(5vw) scaleX(-1); opacity: .44; }
  54% { transform: translateX(-360px) scaleX(-.94); opacity: 0; }
  100% { transform: translateX(-360px) scaleX(-.94); opacity: 0; }
}
@keyframes pass-slow {
  0% { transform: translateX(-300px); opacity: 0; }
  10% { opacity: .4; }
  34% { transform: translateX(34vw); opacity: .5; }
  62% { transform: translateX(95vw); opacity: 0; }
  100% { transform: translateX(95vw); opacity: 0; }
}
@keyframes step-bob { 0%, 100% { transform: translateY(0) rotate(-.8deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes arm-swing { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-14deg); } }

/* Still: no one passes, and the light and shadows rest at their middle */
@media (prefers-reduced-motion: reduce) {
  .ambience *, .ambience > * { animation: none !important; }
  .amb-fig { display: none !important; }
  .amb-window { opacity: .6; }
  .amb-torch-l, .amb-torch-r { opacity: .6; }
  .amb-chair, .amb-post, .amb-hang { opacity: .5; }
}