/* About Me (about.html): the walk along the Zaun walkway. Shares tokens and the top bar with style.css. */

#stage canvas { touch-action: none; cursor: pointer; }
body.retro #stage canvas { image-rendering: pixelated; }   /* the small retro frame, enlarged with hard pixel edges */

/* ---------- the sprayed home icon (back to the city), styled like the homepage's #home ---------- */
#back .bar-art img { filter: brightness(0.85); transition: filter 0.2s; }
#back:hover .bar-art img, #back:focus-visible .bar-art img { filter: brightness(1.15) drop-shadow(0 0 8px rgba(50, 223, 237, 0.55)); }

/* ---------- the cards ---------- */
#career { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.card {
  position: absolute; left: 0; top: 0; width: min(300px, calc(100vw - 32px));
  padding: 16px 18px 15px; line-height: 1.45; font-size: 14px;
  opacity: 0; scale: 0.92; visibility: hidden;
  transition: opacity 0.25s, scale 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), visibility 0s 0.3s;
}
.card.open { opacity: 1; scale: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s, scale 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.card h2 { font-size: 18px; line-height: 1.2; margin: 2px 0 2px; }
.card-when, .card-tags { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.card-where { font-weight: 500; margin-bottom: 8px; opacity: 0.85; }
.card-tags { margin-top: 10px; }

/* each stop has its own kind of note */
.card--chalk {   /* university: a chalk note */
  background: #1d3a2d; color: #e9f1ea; border: 2px dashed rgba(233, 241, 234, 0.55); border-radius: 4px; rotate: -1deg;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.card--sticker { /* Imaj: a sprayed sticker */
  background: #15161a; color: #fff; border: 4px solid #fff; border-radius: 14px; rotate: 1.2deg;
  box-shadow: 6px 6px 0 #ff4fae, 0 12px 30px rgba(0, 0, 0, 0.5);
}
.card--sticker h2 { color: #ff6fbe; }
.card--flyer {   /* freelance: a paper flyer, taped on */
  background: #efe5cc; color: #2a2016; border-radius: 2px; rotate: -1.4deg;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.card--flyer::before { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; translate: -50% 0; rotate: 3deg; background: rgba(255, 250, 230, 0.6); }
.card--holo {    /* Zero Density: a chemtech broadcast monitor, green phosphor on black */
  background: linear-gradient(rgba(168, 236, 68, 0.07) 50%, rgba(168, 236, 68, 0.02) 50%) 0 0 / 100% 4px, rgba(6, 14, 8, 0.88);
  color: #e4ffd0; border: 2px solid #3a2c22; border-radius: 10px;
  box-shadow: 0 0 22px rgba(168, 236, 68, 0.22), inset 0 0 22px rgba(168, 236, 68, 0.12), 0 12px 30px rgba(0, 0, 0, 0.5);
}
.card--holo h2 { color: #b8ff5a; }
.card--holo { width: min(370px, calc(100vw - 32px)); }   /* wider: its title fits on one line */
.card--plate {   /* contact: a riveted rust plate with a sprayed tag colour */
  background: radial-gradient(circle at 10px 10px, #8a6a52 2px, transparent 3px) 0 0 / calc(100% - 20px) calc(100% - 20px) no-repeat,
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #8a6a52 2px, transparent 3px), #2a1d17;
  color: #f3e6dc; border: 2px solid #5a3a28; border-radius: 6px; rotate: 0.8deg;
  box-shadow: 4px 4px 0 #ff4fae, 0 12px 30px rgba(0, 0, 0, 0.55);
}
.card--plate h2 { color: #ff6fbe; }
.card-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-family: var(--mono); font-size: 13px; }
.card-links a { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: inherit; text-decoration: underline; text-decoration-color: #ff4fae; text-underline-offset: 3px; overflow-wrap: anywhere; }
.card-links svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #ff6fbe; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-links a:hover { color: #ff9fd4; }

/* narrow screens: the open card docks at the bottom instead of floating by its stop */
body.docked .card { left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; max-width: 420px; margin: 0 auto; translate: none; }

/* ---------- timeline view: the cards as a list, only without WebGL ---------- */
body.timeline #career {
  pointer-events: auto; overflow-y: auto; background: rgba(4, 6, 10, 0.86);
  padding: 120px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 26px;
}
body.timeline .card { position: relative; translate: none !important; opacity: 1; scale: 1; visibility: visible; width: min(460px, 100%); left: auto; right: auto; bottom: auto; }
body.timeline #hint { display: none; }

/* ---------- joystick and hint ---------- */
#joy {
  position: fixed; left: 0; top: 0; z-index: 12; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(4, 6, 10, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
#joy.on { opacity: 1; }
#joy .knob { position: absolute; left: 26px; top: 26px; width: 44px; height: 44px; border-radius: 50%; background: rgba(232, 246, 255, 0.75); }
#hint {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 11;
  font-family: var(--mono); font-size: 12px; color: var(--dim); pointer-events: none; transition: opacity 0.6s;
}
#hint .touch, .phone #hint .keys { display: none; }
.phone #hint .touch { display: inline; }
#hint.gone { opacity: 0; }

.about-debug { position: fixed; left: 12px; bottom: 12px; z-index: 30; font: 11px/1.4 var(--mono); color: #9fe; background: rgba(0, 0, 0, 0.6); padding: 6px 8px; pointer-events: none; }

body.side .card { left: auto; right: calc(16px + env(safe-area-inset-right)); top: 96px; width: min(280px, 34vw); translate: none; font-size: 13px; padding: 12px 14px; }
body.side .card h2 { font-size: 16px; }
body.docked.card-open #hint { opacity: 0; }

@media (max-width: 640px) {
  .bar { gap: 10px; }
  .bar .long { display: none; }
}