/* The ways to reach Elwin, along the bottom of the screen, over the camera view.
   Four looks to choose from on the phone: ?bar=tags|glass|strip|plates (index.html). */

@font-face { font-family: "Special Elite"; src: url("SpecialElite.ttf") format("truetype"); font-display: swap; }

#links { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center;
         padding: 0 16px calc(18px + env(safe-area-inset-bottom)); pointer-events: none; }
#links a { pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 5px; min-height: 48px; text-decoration: none; -webkit-tap-highlight-color: transparent;
           opacity: 0; transform: translateY(28px);
           transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.15);
           transition-delay: calc(var(--i) * 140ms); }
#links.show a { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
#links a:active { transition-delay: 0s; transition-duration: .1s; }
#links svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
             stroke-linecap: round; stroke-linejoin: round; }
#links .in { fill: currentColor; stroke: none; }

/* tags: cream paper tags, typed, each hung a little differently (like the specimen tags in the lab) */
#links[data-bar="tags"] .row { display: flex; gap: 12px; }
#links[data-bar="tags"] a { position: relative; width: 94px; padding: 10px 4px 8px; color: #2b2017;
  background: #f1e8d4; border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  font: 15px/1.1 "Special Elite", "Courier New", monospace; }
#links[data-bar="tags"] a::before { content: ""; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px;
  margin-left: -3.5px; border-radius: 50%; background: #6b5237; box-shadow: 0 0 0 2px #d9c8a4; }
#links[data-bar="tags"] a:nth-child(1) { --tilt: -2.5deg; }
#links[data-bar="tags"] a:nth-child(2) { --tilt: 1.2deg; margin-top: 4px; }
#links[data-bar="tags"] a:nth-child(3) { --tilt: -0.8deg; }
#links[data-bar="tags"] svg { margin-top: 4px; color: #7a5a30; }
#links[data-bar="tags"] a:active { transform: translateY(2px) rotate(var(--tilt)); box-shadow: 0 2px 5px rgba(0,0,0,.5); }

/* glass: one dark frosted pill, brass line icons, small labels */
#links[data-bar="glass"] { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
#links[data-bar="glass"] .row { display: flex; gap: 4px; padding: 6px; border-radius: 26px; pointer-events: auto;
  background: rgba(22, 15, 10, .58); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(217, 180, 106, .28); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.3,1.1); }
#links[data-bar="glass"].show .row { opacity: 1; transform: none; }
#links[data-bar="glass"] a { width: 92px; padding: 8px 0 7px; border-radius: 20px; color: #f3e7cf;
  font: 500 12px/1 -apple-system, system-ui, sans-serif; letter-spacing: .02em; }
#links[data-bar="glass"] svg { color: #d9b46a; }
#links[data-bar="glass"] a:active { background: rgba(217, 180, 106, .18); }

/* strip: a cream band along the bottom edge, like the card's own frame */
#links[data-bar="strip"] { padding: 0; }
#links[data-bar="strip"] .row { display: flex; width: 100%; pointer-events: auto;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(#f2eadb, #e6dcc6); border-radius: 18px 18px 0 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,.7) inset, 0 -8px 24px rgba(0,0,0,.35);
  transform: translateY(110%); transition: transform .7s cubic-bezier(.2,.9,.3,1); }
#links[data-bar="strip"].show .row { transform: none; }
#links[data-bar="strip"] a { flex: 1; color: #2b2017; font: 15px/1 "Special Elite", "Courier New", monospace; }
#links[data-bar="strip"] a + a { border-left: 1px solid rgba(90, 66, 40, .25); }
#links[data-bar="strip"] svg { color: #8a6326; }
#links[data-bar="strip"] a:active { background: rgba(138, 99, 38, .1); }

/* plates: engraved brass nameplates, two screws each */
#links[data-bar="plates"] .row { display: flex; gap: 8px; }
#links[data-bar="plates"] a { position: relative; padding: 0 14px; white-space: nowrap; flex-direction: row; gap: 6px;
  min-height: 44px; border-radius: 4px; color: #3a2810;
  background: linear-gradient(170deg, #f0d894 0%, #c99a47 45%, #a4772f 70%, #d6b066 100%);
  border: 1px solid #5e4218;
  box-shadow: 0 1px 0 rgba(255,244,210,.7) inset, 0 -1px 0 rgba(80,50,10,.5) inset, 0 6px 14px rgba(0,0,0,.45);
  font: 13px/1 "Special Elite", "Courier New", monospace; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .55); }
#links[data-bar="plates"] a::before, #links[data-bar="plates"] a::after { content: ""; position: absolute; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c9, #8a6326 70%); box-shadow: 0 0 1px #3a2810; }
#links[data-bar="plates"] a::before { left: 5px; }
#links[data-bar="plates"] a::after { right: 5px; }
#links[data-bar="plates"] svg { width: 16px; height: 16px; stroke-width: 1.8; }
#links[data-bar="plates"] a:active { filter: brightness(.9); }

/* While the ways to reach him show, the scanning hint sits above them. */
body.links-up #hint { bottom: calc(118px + env(safe-area-inset-bottom)); }