/* =====================================================================
   home.css - the bar scene. A CSS cross-section of the jook joint:
   five themed doors, a counter, a jukebox, a tip jar, a light switch,
   and one deeply territorial trash can.
   ===================================================================== */

.bar-scene{
  position:relative; margin:20px 0 8px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
  background:
    linear-gradient(180deg, #241c15 0%, #1c1510 62%, #120d09 62%, #0e0a07 100%);
  padding:26px 18px 18px;
  transition:filter .4s;
}

/* string lights along the top */
.bar-scene::before{
  content:"✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦"; position:absolute; top:6px; left:0; right:0;
  text-align:center; letter-spacing:18px; color:var(--warn); font-size:10px;
  text-shadow:0 0 8px var(--warn); opacity:.8;
}

/* ---- the doors ------------------------------------------------------
   Each one is built like a real door: a timber casing, a hung leaf with
   two recessed panels, brass hinges down the left edge, a knob on an
   escutcheon at hand height, and light leaking under the bottom rail.
   Point at one and the leaf swings on its hinges - the frame behind it
   is the dark of the room you are about to walk into.
   --------------------------------------------------------------------- */
.bar-wall{
  display:flex; gap:14px; justify-content:center; align-items:flex-end;
  flex-wrap:wrap; padding:18px 0 26px; perspective:1100px;
}
.bar-door{
  position:relative; display:block; text-decoration:none;
  width:140px; height:196px;
  /* the casing: mitred timber, lit from the left */
  border-style:solid; border-width:7px 7px 0;
  border-color:#6f5031 #4a3520 transparent #7a5936;
  border-radius:9px 9px 2px 2px;
  /* and behind the leaf, the doorway itself */
  background:
    radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--glow, var(--accent)) 40%, transparent), transparent 70%),
    linear-gradient(180deg,#0b0806,#070504);
  box-shadow:0 10px 20px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.7);
  transition:transform .18s ease, box-shadow .18s ease;
}
.bar-door:hover, .bar-door:focus-visible{
  outline:none; text-decoration:none; transform:translateY(-3px);
  box-shadow:0 16px 28px rgba(0,0,0,.62), 0 0 24px var(--glow, var(--accent)), inset 0 0 22px rgba(0,0,0,.6);
}
/* light under the door - there is somebody in there */
.bar-door::after{
  content:""; position:absolute; left:8px; right:8px; bottom:0; height:4px;
  border-radius:2px; background:var(--glow, var(--accent));
  opacity:.32; filter:blur(1.5px); transition:opacity .18s;
}
.bar-door:hover::after, .bar-door:focus-visible::after{ opacity:.85; }

/* the leaf, hung on the left stile */
.bar-door .slab{
  position:absolute; inset:0; border-radius:5px 5px 0 0;
  background:var(--leaf, linear-gradient(180deg,#3a2a1c,#241811));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 7px 16px rgba(0,0,0,.4),
             2px 0 10px rgba(0,0,0,.5);
  transform-origin:left center; transform:rotateY(0deg);
  transition:transform .32s cubic-bezier(.3,.7,.3,1);
  backface-visibility:hidden;
}
.bar-door:hover .slab, .bar-door:focus-visible .slab{ transform:rotateY(-26deg); }

/* two recessed panels, stile-and-rail style */
.bar-door .pnl{
  position:absolute; left:13px; right:13px; border-radius:3px;
  background:rgba(0,0,0,.17);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.55), inset 0 -2px 2px rgba(255,255,255,.07),
             0 1px 0 rgba(255,255,255,.05);
}
.bar-door .pnl.top{ top:13px; height:88px; }
.bar-door .pnl.bot{ top:112px; bottom:15px; }

/* brass hinges on the casing, not the leaf */
.bar-door .hinge{
  position:absolute; left:-5px; width:8px; height:17px; border-radius:2px; z-index:3;
  background:linear-gradient(90deg,#e0c07a,#9a7734 60%,#5e4518);
  box-shadow:0 1px 3px rgba(0,0,0,.8);
}
.bar-door .hinge.a{ top:28px; } .bar-door .hinge.b{ bottom:34px; }

/* knob on its backplate, at hand height */
.bar-door .knob{
  position:absolute; right:11px; top:53%; width:21px; height:21px; border-radius:50%;
  transform:translateY(-50%); background:rgba(0,0,0,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
}
.bar-door .knob::after{
  content:""; position:absolute; left:50%; top:50%; width:11px; height:11px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ffe9b0, #c39236 62%, #6f4e14);
  box-shadow:0 0 7px rgba(255,196,96,.55), 0 1px 2px rgba(0,0,0,.8);
}

.bar-door .ico{
  position:absolute; left:0; right:0; top:26px; text-align:center; line-height:1;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.6));
}
.bar-door .ico img{ height:58px; width:auto; max-width:74px; object-fit:contain;
  display:block; margin:0 auto; }
/* pixel-art icons stay crisp; smooth (non-pixel) ones render normally */
.door-stardew .ico img, .door-undertale .ico img{ image-rendering:pixelated; }
.door-fnaf .ico img, .door-fencing .ico img{ image-rendering:auto; }
/* Freddy's render sits on a dark plate; round it into the door */
.door-fnaf .ico img{ border-radius:7px; }

/* the plaque, screwed to the lower panel */
.bar-door .plq{
  position:absolute; left:20px; right:20px; bottom:30px;
  font-family:var(--font-pixel); font-size:8.5px; line-height:1.5; letter-spacing:.4px;
  text-align:center; color:#f5e9cf;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.42));
  border:1px solid rgba(255,255,255,.16); border-radius:3px; padding:4px 3px;
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.bar-door .plq::before, .bar-door .plq::after{  /* two little screws */
  content:""; position:absolute; top:50%; width:3px; height:3px; margin-top:-1.5px;
  border-radius:50%; background:rgba(255,255,255,.28);
}
.bar-door .plq::before{ left:3px; } .bar-door .plq::after{ right:3px; }

/* per-room leaf timber and the light behind it */
.door-fnaf{ --glow:#e23b3b; --leaf:linear-gradient(180deg,#241531,#170e20); }
.door-fnaf .slab::after{ content:"◠"; position:absolute; left:50%; top:-1px; margin-left:-7px;
  color:#ffe9a8; font-size:14px; text-shadow:0 0 9px #ffe9a8; animation:flickerHard 3.5s infinite; }
.door-stardew{ --glow:#8fcf4f; --leaf:linear-gradient(180deg,#2c4420,#1d2f14); }
.door-undertale{ --glow:#ff2a2a; --leaf:linear-gradient(180deg,#151515,#050505); }
.door-fencing{ --glow:#3da9fc; --leaf:linear-gradient(180deg,#2c3546,#1d2430); }
.door-hamilton{ --glow:#e8c15a; --leaf:linear-gradient(180deg,#3a2c12,#241a0a); }
.door-medieval{ --glow:#9fb6cc; --leaf:linear-gradient(180deg,#3c3b39,#211f1e); }
.door-guestbook{ --glow:#ff5d8f; --leaf:linear-gradient(180deg,#38222c,#22151c); }

.door-backroom{
  --glow:#ffb347;
  --leaf:repeating-linear-gradient(0deg,#2a1c12 0 12px,#241811 12px 24px); /* brick */
  opacity:0; pointer-events:none; transform:scale(.96);
  transition:opacity .8s ease, transform .8s ease;
}
.bar-scene.all-caps .door-backroom{ opacity:1; pointer-events:auto; transform:none; }
.bar-scene.all-caps .door-backroom .plq{ animation:pulse 2s infinite; }

/* ---- the counter ------------------------------------------------------ */
.bar-counter{
  position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px; padding:10px 14px 2px;
  border-top:6px solid #4a3320;
  background:linear-gradient(180deg,#3a2817,#241811);
  border-radius:6px 6px 0 0; min-height:74px;
}
.bar-counter .stools{ display:flex; gap:12px; opacity:.95; align-items:flex-end; }
/* ---- counter props, drawn in CSS (no emoji) ------------------------ */
/* A bar stool: round leather seat seen slightly from above, four splayed
   legs with the back pair sitting behind, and a footrest ring. */
.stool{ width:38px; height:52px; position:relative; padding:0; }
.stool .seat{
  position:absolute; left:50%; top:1px; transform:translateX(-50%);
  width:34px; height:14px; border-radius:50%; z-index:3;
  background:radial-gradient(62% 130% at 40% 20%, #b8663a, #8c4a2a 55%, #562a16 100%);
  box-shadow:0 3px 0 #46220f, 0 5px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.24);
}
.stool .leg{
  position:absolute; bottom:2px; width:3.5px; border-radius:2px;
  background:linear-gradient(90deg,#7a441f,#3f2010);
  transform-origin:bottom center;
}
.stool .leg.fl{ left:6px;  height:40px; transform:rotate(10deg); z-index:2; }
.stool .leg.fr{ right:6px; height:40px; transform:rotate(-10deg); z-index:2; }
.stool .leg.bl{ left:13px; height:37px; transform:rotate(4deg); opacity:.62; z-index:1; }
.stool .leg.br{ right:13px; height:37px; transform:rotate(-4deg); opacity:.62; z-index:1; }
.stool .ring{                  /* the footrest */
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:27px; height:9px; border:2.5px solid #6d3d1c; border-top-color:#96602d;
  border-radius:50%; z-index:2;
}
/* the coin pouch (straight out of Kingdom), in its own section */
.tip-section{ text-align:center; padding:48px 12px 16px; }
.tip-section .muted{ margin:12px 0 0; }
#tip-jar{ width:200px; height:212px; position:relative; padding:0; }
#tip-jar img{
  position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:194px; height:auto; display:block;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
#tip-jar img.closed{ width:176px; }  /* PouchClosed.png has wider margins */
#tip-jar canvas{                     /* the coins live here */
  position:absolute; left:50%; bottom:6px;
  transform:translateX(calc(-50% - 2px)); /* bag art sits 2px left of centre */
  width:160px; height:313px; pointer-events:none; z-index:2;
}
/* a coin that overflowed: it leaves the canvas and falls down the page */
.coin-spill{
  position:fixed; left:0; top:0; border-radius:50%; border:2px solid;
  z-index:9500; pointer-events:none; will-change:transform;
}

/* ---- after the heist: what he leaves you ----------------------------- */
.tip-gone{ padding:26px 0 6px; animation:gbIn .4s ease; }
.bcap{                          /* one crimped bottle cap, in CSS */
  display:block; width:74px; height:74px; margin:0 auto 12px; border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%, #ffe9b0 0 12%, transparent 13%),
    radial-gradient(circle at 50% 50%, #d9a441 0 52%, #a4761f 53%, #7c560f 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.6), inset 0 0 0 5px rgba(0,0,0,.16);
  position:relative; animation:capSpin 5s linear infinite;
}
.bcap::after{                   /* the crimped skirt, as 20 little teeth */
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:repeating-conic-gradient(#c08d2c 0 9deg, #8a6316 9deg 18deg);
  z-index:-1;
}
@keyframes capSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .bcap{ animation:none; } }
#trash-can{ width:30px; height:36px; position:relative; }
#trash-can::before{            /* lid */
  content:""; position:absolute; left:50%; top:4px; transform:translateX(-50%);
  width:26px; height:5px; border-radius:3px; background:#6b7280;
}
#trash-can::after{             /* bin */
  content:""; position:absolute; left:50%; top:10px; transform:translateX(-50%);
  width:21px; height:22px; background:#8b9199;
  clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);
  box-shadow:inset -4px 0 0 rgba(0,0,0,.18);
}
/* ---- the house cat, asleep on the counter --------------------------- */
.hotspot.cat{ width:48px; height:34px; position:relative; align-self:flex-end; }
.cat .cat-body{
  position:absolute; right:2px; bottom:2px; width:38px; height:20px;
  border-radius:52% 50% 46% 46%;
  background:linear-gradient(180deg,#5d5249,#3a332e);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.10), 0 2px 3px rgba(0,0,0,.5);
}
.cat .cat-head{
  position:absolute; left:1px; bottom:6px; width:20px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,#685c52,#463d37);
}
.cat .cat-head::before, .cat .cat-head::after{   /* ears */
  content:""; position:absolute; top:-5px; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-bottom:8px solid #5b5048;
}
.cat .cat-head::before{ left:1px; transform:rotate(-14deg); }
.cat .cat-head::after{ right:1px; transform:rotate(14deg); }
.cat .cat-face{                                  /* two closed eyes */
  position:absolute; left:5px; bottom:13px; width:4px; height:2px;
  background:#14110f; border-radius:1px;
}
.cat .cat-face::after{
  content:""; position:absolute; left:8px; top:0; width:4px; height:2px;
  background:#14110f; border-radius:1px;
}
.cat .cat-tail{
  position:absolute; right:-4px; bottom:5px; width:15px; height:13px;
  border:3px solid #4a423b; border-left:0; border-bottom:0;
  border-radius:0 13px 0 0; transform:rotate(16deg);
}
.cat::after{                                     /* a sleepy z */
  content:"z"; position:absolute; left:0; top:-6px;
  font-family:var(--font-term); font-size:15px; color:var(--muted);
  opacity:0; animation:catZ 3.4s ease-in-out infinite;
}
@keyframes catZ{
  0%{ opacity:0; transform:translate(0,4px) } 25%{ opacity:.85 }
  55%{ opacity:0; transform:translate(-5px,-9px) } 100%{ opacity:0 }
}
/* one of the nine, spent. Beats .hotspot:hover on specificity. */
.hotspot.cat.gone{
  transform:rotate(168deg) translateY(5px);
  filter:grayscale(.65) brightness(.82);
  transition:transform .3s ease, filter .3s ease;
}
.hotspot.cat.gone::after{ content:""; animation:none; }
@media (prefers-reduced-motion:reduce){ .cat::after{ animation:none; } }

.stool.wobble{ animation:stoolWobble .45s ease; }
@keyframes stoolWobble{ 25%{ transform:rotate(-10deg) } 55%{ transform:rotate(8deg) } 80%{ transform:rotate(-4deg) } }
/* =====================================================================
   THE SIGN :: a real hanging neon board over the door
   ===================================================================== */
.sign-rig{
  position:relative; margin:26px 0 22px; padding-top:26px;
  display:flex; flex-direction:column; align-items:center;
}
/* the mounting rail it hangs from */
.sign-rail{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:min(330px, 78%); height:7px; border-radius:3px;
  background:linear-gradient(180deg,#4a4a52,#26262c 55%,#141418);
  box-shadow:0 2px 5px rgba(0,0,0,.7);
}
.sign-rail::before, .sign-rail::after{   /* wall plates */
  content:""; position:absolute; top:-4px; width:15px; height:15px; border-radius:3px;
  background:linear-gradient(160deg,#55555e,#2a2a30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.6);
}
.sign-rail::before{ left:-9px; } .sign-rail::after{ right:-9px; }

/* two chains from the rail down to the board */
.sign-chain{
  position:absolute; top:24px; width:7px; height:30px; z-index:1;
  background:
    repeating-linear-gradient(180deg,
      #6a6a74 0 4px, #2f2f36 4px 6px, #6a6a74 6px 10px, #23232a 10px 12px);
  border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.8);
}
.sign-chain.left{ left:calc(50% - min(150px, 34%)); }
.sign-chain.right{ left:calc(50% + min(150px, 34%)); }

/* the board itself */
.sign-board{
  position:relative; z-index:2; cursor:pointer;
  padding:22px clamp(20px, 5vw, 46px) 16px;
  border-radius:12px;
  background:
    radial-gradient(120% 140% at 50% 0%, #1b1712 0%, #0d0b09 60%, #070605 100%);
  border:3px solid #2b2620;
  box-shadow:
    inset 0 0 0 2px #0a0806,
    inset 0 8px 28px rgba(0,0,0,.85),
    0 14px 34px rgba(0,0,0,.7),
    0 0 40px rgba(255,179,71,.10);
  transform-origin:50% -26px;
  animation:signSway 7s ease-in-out infinite;
}
/* the neon tube running around the inside edge */
.sign-board::before{
  content:""; position:absolute; inset:9px; border-radius:7px; pointer-events:none;
  border:2px solid color-mix(in srgb, var(--accent) 82%, #fff);
  box-shadow:
    0 0 7px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 0 9px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity:.92; animation:tubeHum 5.5s ease-in-out infinite;
}
@keyframes tubeHum{ 0%,100%{ opacity:.92 } 47%{ opacity:.74 } 52%{ opacity:1 } }
@keyframes signSway{
  0%,100%{ transform:rotate(-.7deg) }
  50%    { transform:rotate(.7deg) }
}

/* corner bolts */
.sign-bolt{
  position:absolute; width:9px; height:9px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 34% 30%, #8d8d97, #35353d 70%);
  box-shadow:0 1px 2px rgba(0,0,0,.8), inset 0 -1px 1px rgba(0,0,0,.5);
}
.sign-bolt.tl{ left:7px;  top:7px; }   .sign-bolt.tr{ right:7px; top:7px; }
.sign-bolt.bl{ left:7px;  bottom:7px; } .sign-bolt.br{ right:7px; bottom:7px; }

/* =====================================================================
   THE SIGN ART :: the name of the joint, bent out of neon tubing.
   One inline SVG - a raccoon's face in amber tube between a martini and
   an eighth note, the name underneath, the whole thing glowing. The
   heading text itself is left for screen readers only.
   ===================================================================== */
.sign-art{ margin:0; line-height:0; cursor:pointer; }
.joint-art{
  display:block; width:min(320px, 64vw); height:auto; overflow:visible;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.25));
}
.joint-art .tube{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.joint-art .amber{ stroke:var(--accent); stroke-width:3.2; }
.joint-art .pink{ stroke:var(--accent2); stroke-width:2.8; }
.joint-art .mask-band{ fill:#0a0806; stroke:var(--accent2); stroke-width:2.6; }
.joint-art .lit-a{ fill:var(--accent); stroke:none; }
.joint-art .lit-p{ fill:var(--accent2); stroke:none; }
.joint-art text{
  font-family:var(--font-pixel); font-weight:700; text-anchor:middle;
  paint-order:stroke fill;
}
.joint-art .ln1{ font-size:21px; letter-spacing:6px; fill:#fff5e2; stroke:var(--accent); stroke-width:.7; }
.joint-art .ln2{ font-size:34px; letter-spacing:1.5px; fill:#ffeaf3; stroke:var(--accent2); stroke-width:.7; }

/* the glow, done with SVG filters so the tubes bloom like glass */
.joint-art .glow-a{ filter:url(#ja-amber); }
.joint-art .glow-p{ filter:url(#ja-pink); animation:neonStutter 8s infinite; }
/* one tube that never quite settles */
@keyframes neonStutter{
  0%,88%,100%{ opacity:1 }
  89%{ opacity:.35 } 90%{ opacity:1 } 92%{ opacity:.5 } 93%{ opacity:1 }
}
body.lights-off .joint-art{ filter:drop-shadow(0 0 6px rgba(255,255,255,.4)); }

/* the little plate under the name */
.sign-plate{
  margin-top:12px; padding-top:9px; display:flex; align-items:center;
  justify-content:center; gap:11px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.10);
}
.sign-open{
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.24em;
  color:#dfffe6; padding:3px 9px; border-radius:3px;
  border:1px solid color-mix(in srgb, var(--ok) 75%, transparent);
  text-shadow:0 0 6px var(--ok);
  box-shadow:0 0 9px color-mix(in srgb, var(--ok) 45%, transparent),
             inset 0 0 7px color-mix(in srgb, var(--ok) 22%, transparent);
  animation:openBuzz 3.2s steps(1) infinite;
}
@keyframes openBuzz{ 0%,92%,100%{ opacity:1 } 94%{ opacity:.45 } 96%{ opacity:1 } }
.sign-est{
  font-family:var(--font-term); font-size:14px; letter-spacing:.12em; color:#8a7f70;
}

/* light the sign throws onto the wall behind it */
.sign-spill{
  position:absolute; z-index:0; top:34%; left:50%; transform:translateX(-50%);
  width:min(620px, 96%); height:230px; pointer-events:none; filter:blur(34px);
  background:
    radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 72%),
    radial-gradient(75% 70% at 50% 62%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 74%);
  opacity:.55;
}

/* smack it and the whole board jolts */
.sign-board.smacked{ animation:signSmack .8s steps(3); }
@keyframes signSmack{
  0%,42%,72%{ filter:brightness(.25) saturate(.4); transform:rotate(-1.6deg) }
  22%,58%   { filter:brightness(1.35); transform:rotate(1.3deg) }
  100%      { filter:none; transform:rotate(-.7deg) }
}

/* lights out: the neon is all that is left */
body.lights-off .sign-board{
  box-shadow:
    inset 0 0 0 2px #0a0806, inset 0 8px 28px rgba(0,0,0,.9),
    0 14px 34px rgba(0,0,0,.85), 0 0 70px rgba(255,93,143,.28);
}
body.lights-off .sign-spill{ opacity:.95; }

@media (max-width:560px){
  .sign-chain.left{ left:calc(50% - 30%); } .sign-chain.right{ left:calc(50% + 30%); }
  .sign-est{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  .sign-board, .sign-board::before,
  .joint-art .glow-p, .sign-open{ animation:none; }
  .sign-board{ transform:none; }
}

.hotspot{
  background:none; border:0; cursor:pointer; font-size:30px; line-height:1;
  padding:6px; border-radius:10px; position:relative;
  transition:transform .12s;
}
.hotspot:hover{ transform:translateY(-3px) scale(1.08); }
.hotspot:focus-visible{ outline:2px solid var(--accent); }

#scene-jukebox{ font-size:38px; }
#scene-jukebox img{ width:42px; height:42px; display:block; image-rendering:pixelated;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
#scene-jukebox.spinning img{ animation:jukeBop .6s ease-in-out infinite; }
#scene-jukebox.spinning::after{
  content:"♪"; position:absolute; top:-12px; right:-4px; color:var(--accent2);
  animation:noteFloat 1.2s ease-in-out infinite;
}
@keyframes noteFloat{ 0%{ transform:translateY(0); opacity:1 } 100%{ transform:translateY(-14px); opacity:0 } }

#tip-jar.clink{ animation:clink .3s; }
@keyframes clink{ 40%{ transform:rotate(-3deg) } 80%{ transform:rotate(2deg) } }

#light-switch{
  position:absolute; top:12px; right:14px; font-size:20px; color:var(--warn);
  border:1px solid var(--line); background:rgba(0,0,0,.4); border-radius:8px;
}

#trash-can.shake{ animation:trashShake .35s; }
@keyframes trashShake{ 25%{ transform:rotate(-9deg) } 60%{ transform:rotate(7deg) } }
.trash-raccoon{
  position:absolute; bottom:80%; left:50%; width:52px; transform:translateX(-50%);
  animation:trashPop 2.4s ease;
  pointer-events:none;
}
.trash-raccoon svg{ width:100%; height:auto; }
@keyframes trashPop{
  0%{ transform:translate(-50%, 40px); opacity:0 }
  18%,80%{ transform:translate(-50%, 0); opacity:1 }
  100%{ transform:translate(-50%, 46px); opacity:0 }
}

/* ---- lights off -------------------------------------------------------- */
body.lights-off .bar-scene{ filter:brightness(.45) saturate(1.3); }
body.lights-off .bar-door{ box-shadow:0 0 26px var(--glow, var(--accent)), inset 0 0 18px rgba(0,0,0,.6); }
body.lights-off .sign{ text-shadow:0 0 10px color-mix(in srgb, var(--accent) 90%, #fff),
  0 0 30px var(--accent), 0 0 70px var(--accent); }
body.lights-off .bar-scene::before{ opacity:1; }
body.lights-off .bar-counter::after{
  content:"◉ ◉"; position:absolute; left:24px; bottom:22px; color:#ffd7d7; font-size:13px;
  letter-spacing:5px; text-shadow:0 0 7px var(--accent2); animation:blink 4s steps(2) infinite;
}

/* ---- konami party ------------------------------------------------------- */
.rac-party{
  position:fixed; left:-70px; width:56px; z-index:9600; pointer-events:none;
  animation:racRun linear forwards;
}
.rac-party svg{ width:100%; height:auto; }
.rac-party.reverse{ left:auto; right:-70px; animation-name:racRunBack; scale:-1 1; }
@keyframes racRun{ to{ transform:translateX(calc(100vw + 140px)) } }
@keyframes racRunBack{ to{ transform:translateX(calc(-100vw - 140px)) } }

/* Ray Charles, parked off to the side of the page, reviewing the joint */
.ray{
  position:fixed; left:18px; bottom:18px; z-index:45;
  display:flex; align-items:flex-start; gap:12px; margin:0;
  pointer-events:none;
}
.ray-img{
  width:124px; height:auto; flex:none; border-radius:10px;
  border:1px solid var(--line); box-shadow:var(--shadow); filter:grayscale(1) contrast(1.05);
  /* the figure ignores the mouse so it never eats a click meant for the
     page - but the man himself is clickable. He is asked things. */
  pointer-events:auto; cursor:pointer;
  transition:filter .18s, transform .18s;
}
.ray-img:hover{ filter:grayscale(.35) contrast(1.1); transform:translateY(-2px); }
/* He shrinks on smaller screens rather than leaving: something in the
   joint needs him, and it needs him at every width. */
@media (max-width:1180px){
  .ray{ left:10px; bottom:10px; }
  .ray-img{ width:74px; }
  .ray-bubble{ display:none; }
}
@media (max-width:620px){ .ray-img{ width:54px; opacity:.85; } }
/* his verdict, in the house style: a dark neon plate by his head.
   green, because the man approves - same green as the OPEN sign. */
.ray-bubble{
  position:relative; margin-top:-24px;
  font-family:var(--font-term); font-size:21px; line-height:1.3;
  color:#dfffe6; background:#12100d;
  border:2px solid color-mix(in srgb, var(--ok) 80%, transparent);
  border-radius:14px 14px 14px 3px;
  padding:8px 14px; max-width:14ch;
  text-shadow:0 0 7px color-mix(in srgb, var(--ok) 55%, transparent);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--ok) 28%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--ok) 12%, transparent),
    0 6px 14px rgba(0,0,0,.55);
  animation:rayBob 4.5s ease-in-out infinite;
}
.ray-bubble::before{ /* tail pointing back down at Ray */
  content:""; position:absolute; left:-11px; bottom:8px;
  border:8px solid transparent;
  border-right-color:color-mix(in srgb, var(--ok) 80%, transparent);
}
.ray-bubble::after{
  content:""; position:absolute; left:-6px; bottom:10px;
  border:6px solid transparent; border-right-color:#12100d;
}
@keyframes rayBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@media (prefers-reduced-motion:reduce){ .ray-bubble{ animation:none; } }

@media (max-width:560px){
  .bar-door{ width:46%; max-width:150px; height:178px; }
  .bar-door .ico img{ height:48px; }
  .bar-counter{ flex-wrap:wrap; }
  .bar-counter .stools{ display:none; }
}
/* a door that cannot swing is still a door - just a shut one */
@media (prefers-reduced-motion:reduce){
  .bar-door:hover .slab, .bar-door:focus-visible .slab{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .rac-party{ display:none; }
  .door-fnaf::after{ animation:none; }
}

/* ---- the window onto the street ---------------------------------------- */
/* Sits over the whole joint but under the scanlines, and never takes a
   click. Only exists when the canvas is on the page. */
.weather-layer{
  position:fixed; inset:0; z-index:9998;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.62;
}
@media (prefers-reduced-motion:reduce){ .weather-layer{ display:none; } }