/* Icons, ornament, illustrations and scene overlays for both worlds.
   The icon sprite lives inline in each page (see assets/art/icons.svg). Every icon exists twice, b-* (barber) and
   f-* (fallout); the inactive world's copy is display:none. All other art files in assets/art/ are referenced here,
   scoped by data-theme, so a crossing needs no network and no DOM change. */

.art-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}

[data-theme="barber"] .ico-f,
[data-theme="fallout"] .ico-b {
  display: none;
}

[data-theme="barber"] {
  --icon-gilt: #b58a3c;
  --ok: #3d5a2a;
  --bad: #8b1e1e;
}

[data-theme="fallout"] {
  --icon-gilt: none;
  --ok: #5cff7a;
  --bad: #ffb000;
}

/* ---- Nav, property marks, links ---- */
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
}

.nav-icon {
  transition: transform 220ms ease, filter 220ms ease;
}

.property-mark {
  width: 1.4em;
  height: 1.4em;
}

.ext-icon {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
}

.status-icon {
  margin-right: 0.4rem;
}

.form-ok .status-icon {
  color: var(--ok);
}

.form-error .status-icon {
  color: var(--bad);
}

/* Light: a hover rocks the icon like a shop bell and warms the gilt. */
[data-theme="barber"] .site-nav a:hover .icon,
[data-theme="barber"] .site-nav a:focus-visible .icon,
[data-theme="barber"] .card .btn:hover .ext-icon,
[data-theme="barber"] .card .btn:focus-visible .ext-icon {
  --icon-gilt: #e3b95a;
  transform: rotate(-8deg) scale(1.1);
}

/* Dark: phosphor glow with a stepped flicker, as a terminal would draw it. */
[data-theme="fallout"] .site-nav a:hover .icon,
[data-theme="fallout"] .site-nav a:focus-visible .icon,
[data-theme="fallout"] .card .btn:hover .ext-icon,
[data-theme="fallout"] .card .btn:focus-visible .ext-icon {
  filter: drop-shadow(0 0 4px currentColor);
  animation: icon-flicker 360ms steps(3, end) 1;
}

@keyframes icon-flicker {
  0% { opacity: 1; }
  33% { opacity: 0.35; }
  66% { opacity: 0.9; }
  100% { opacity: 1; }
}

/* ---- Textures ---- */
[data-theme="barber"] body {
  background-image: url("../assets/art/paper-light.svg");
}

[data-theme="fallout"] body {
  background-image: url("../assets/art/grime-dark.svg");
}

[data-theme="barber"] .site-header,
[data-theme="barber"] .card-sign,
[data-theme="barber"] .band-col,
[data-theme="barber"] .story-text,
[data-theme="barber"] .contact-aside {
  background-image: url("../assets/art/paper-light.svg");
}

[data-theme="fallout"] .site-header,
[data-theme="fallout"] .site-footer {
  background-image: url("../assets/art/grime-dark.svg");
}

[data-theme="fallout"] .card-sign {
  background-image: var(--rivets), url("../assets/art/grime-dark.svg");
}

/* ---- Light ornament ---- */
[data-theme="barber"] .site-name {
  background: url("../assets/art/cartouche-light.svg") center / 100% 100% no-repeat;
}

[data-theme="barber"] .brand::before {
  content: "";
  flex: none;
  width: 64px;
  height: 46px;
  background: url("../assets/art/bamcio-mark-barber.svg") center / contain no-repeat;
}

/* The manicule ornaments the header plaque and story footnote. */
[data-theme="barber"] .plaque-right::after,
[data-theme="barber"] .footnote::before {
  content: "";
  flex: none;
  width: 48px;
  height: 22px;
  background: url("../assets/art/manicule.svg") center / contain no-repeat;
}

[data-theme="barber"] .footnote::before {
  margin-top: 0.2rem;
}

[data-theme="barber"] .section-head::after {
  content: "";
  display: block;
  height: 16px;
  max-width: 420px;
  margin: 0.9rem auto 0;
  background: url("../assets/art/divider-light.svg") center / contain no-repeat;
}

/* Engraved double-rule frame with filigree corners, drawn as a 9-slice. */
[data-theme="barber"] .band-col,
[data-theme="barber"] .story-text,
[data-theme="barber"] .contact-aside {
  border: 20px solid transparent;
  border-image: url("../assets/art/frame-light.svg") 30 round;
}

[data-theme="barber"] .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

[data-theme="barber"] .footer-brand::before {
  content: "";
  width: 56px;
  height: 40px;
  background: url("../assets/art/bamcio-mark-barber.svg") center / contain no-repeat;
}

[data-theme="barber"] .site-footer::before {
  content: "";
  display: block;
  height: 16px;
  max-width: 520px;
  margin: 1.25rem auto 0;
  background: url("../assets/art/divider-light.svg") center / contain no-repeat;
  opacity: 0.8;
}

/* ---- Dark ornament ---- */
[data-theme="fallout"] .site-name {
  /* Small corner fasteners leave a clear field for the lettering. */
  background-image: radial-gradient(circle at 5px 5px, #b9c1ac 0 1px, #444f43 1.5px 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 5px) 5px, #b9c1ac 0 1px, #444f43 1.5px 2px, transparent 2.5px),
    radial-gradient(circle at 5px calc(100% - 5px), #b9c1ac 0 1px, #444f43 1.5px 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #b9c1ac 0 1px, #444f43 1.5px 2px, transparent 2.5px);
}

[data-theme="fallout"] .brand::before {
  content: "";
  flex: none;
  width: 64px;
  height: 46px;
  background: url("../assets/art/bamcio-mark-bunker.svg") center / contain no-repeat;
}

[data-theme="fallout"] .section-head::after {
  content: "";
  display: block;
  height: 12px;
  max-width: 360px;
  margin-top: 0.9rem;
  background: url("../assets/art/divider-dark.svg") left center / contain no-repeat;
}

/* Riveted steel plate, drawn as a 9-slice. */
[data-theme="fallout"] .band-col,
[data-theme="fallout"] .story-text,
[data-theme="fallout"] .contact-aside {
  border: 16px solid transparent;
  border-image: url("../assets/art/frame-dark.svg") 30 round;
  background-image: url("../assets/art/grime-dark.svg");
}

[data-theme="fallout"] .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: url("../assets/art/hazard-stripe.svg") 0 0 / auto 100% repeat-x;
}

[data-theme="fallout"] .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

[data-theme="fallout"] .footer-brand::before {
  content: "";
  width: 56px;
  height: 40px;
  background: url("../assets/art/bamcio-mark-bunker.svg") center / contain no-repeat;
}

/* ---- Scenes and banners ---- */
[data-theme="barber"] .hero-scene,
[data-theme="barber"] .page-banner {
  background-image: url("../assets/art/hero-light.svg");
}

[data-theme="fallout"] .hero-scene,
[data-theme="fallout"] .page-banner {
  background-image: url("../assets/art/hero-dark.svg");
}

/* ---- Property illustrations ---- */
[data-theme="barber"] .card--mcd .card-art { background-image: url("../assets/art/card-mcd-light.svg"); }
[data-theme="barber"] .card--rcd .card-art { background-image: url("../assets/art/card-rcd-light.svg"); }
[data-theme="barber"] .card--upubhub .card-art { background-image: url("../assets/art/card-upubhub-light.svg"); }
[data-theme="barber"] .card--wegamehub .card-art { background-image: url("../assets/art/card-wegamehub-light.svg"); }

/* Dark illustrations sit in a CRT window: scanlines over the drawing over the screen glow. */
[data-theme="fallout"] .card-art {
  background-size: auto, contain, cover;
  background-position: 0 0, center, center;
  background-repeat: repeat, no-repeat, no-repeat;
}

[data-theme="fallout"] .card--mcd .card-art { background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px), url("../assets/art/card-mcd-dark.svg"), radial-gradient(ellipse at 50% 45%, #0f3b1d 0, #041007 70%, #020603 100%); }
[data-theme="fallout"] .card--rcd .card-art { background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px), url("../assets/art/card-rcd-dark.svg"), radial-gradient(ellipse at 50% 45%, #0f3b1d 0, #041007 70%, #020603 100%); }
[data-theme="fallout"] .card--upubhub .card-art { background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px), url("../assets/art/card-upubhub-dark.svg"), radial-gradient(ellipse at 50% 45%, #0f3b1d 0, #041007 70%, #020603 100%); }
[data-theme="fallout"] .card--wegamehub .card-art { background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px), url("../assets/art/card-wegamehub-dark.svg"), radial-gradient(ellipse at 50% 45%, #0f3b1d 0, #041007 70%, #020603 100%); }

/* ---- Vignettes ---- */
[data-theme="barber"] .vignette-about { background-image: url("../assets/art/about-light.svg"); }
[data-theme="barber"] .vignette-contact { background-image: url("../assets/art/contact-light.svg"); }
[data-theme="fallout"] .vignette-about { background-image: url("../assets/art/about-dark.svg"); }
[data-theme="fallout"] .vignette-contact { background-image: url("../assets/art/contact-dark.svg"); }

/* ---- Hero scene overlays. Percentages are of the 1600x1000 drawing, so they track it at any size. ---- */
.hero.is-paused .scene-layer,
.hero.is-paused .scene-layer::before {
  animation-play-state: paused;
}

/* Lamps: sconces in light, lanterns in dark. Slow, low-contrast flicker (well under 3 Hz). */
.scene-glow {
  border-radius: 50%;
  mix-blend-mode: screen;
}

[data-theme="barber"] .scene-glow {
  background: radial-gradient(circle, rgba(255, 217, 138, 0.38) 0, rgba(232, 160, 74, 0.12) 40%, transparent 70%);
  animation: lamp-breathe 6s ease-in-out infinite;
}

[data-theme="barber"] .glow-a { left: 11.25%; top: 15%; width: 18.75%; height: 30%; }
[data-theme="barber"] .glow-b { left: 60%; top: 15%; width: 18.75%; height: 30%; animation-delay: -2.5s; }

[data-theme="fallout"] .scene-glow {
  background: radial-gradient(circle, rgba(255, 210, 122, 0.45) 0, rgba(232, 163, 58, 0.16) 38%, transparent 70%);
  animation: lantern-flicker 5.3s steps(1, end) infinite;
}

[data-theme="fallout"] .glow-a { left: 25.6%; top: 44.6%; width: 23.75%; height: 38%; }
[data-theme="fallout"] .glow-b { left: 72.5%; top: 46.6%; width: 21.25%; height: 34%; animation-duration: 3.7s; }

@keyframes lamp-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes lantern-flicker {
  0% { opacity: 1; }
  22% { opacity: 0.9; }
  30% { opacity: 1; }
  58% { opacity: 0.86; }
  66% { opacity: 0.97; }
  84% { opacity: 0.9; }
  92% { opacity: 1; }
}

/* Light: dust motes drifting through the lamplight. */
.scene-motes {
  inset: 0;
  overflow: hidden;
}

.scene-motes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200%;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 236, 190, 0.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 40% 30%, rgba(255, 236, 190, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 8%, rgba(255, 236, 190, 0.6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 22%, rgba(255, 236, 190, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 33% 40%, rgba(255, 236, 190, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 36%, rgba(255, 236, 190, 0.55) 0 1.5px, transparent 2.5px);
  background-size: 100% 50%;
  animation: motes-drift 40s linear infinite;
}

@keyframes motes-drift {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

/* Dark: the terminal on the bench reads out the inventory. */
.scene-crt {
  left: 50.94%;
  top: 37%;
  width: 18.125%;
  height: 22%;
  padding: 4% 5%;
  overflow: hidden;
  border-radius: 7% / 9%;
  font-family: "VT323", "IBM Plex Mono", "Menlo", "Consolas", monospace;
  /* About 1.2% of the scene width: the scene is 1.6x the hero height, which is clamp(420px, 56vw, 640px). */
  font-size: clamp(9px, 1.1vw, 13px);
  line-height: 1.35;
  color: #4dff7a;
  text-shadow: 0 0 6px rgba(77, 255, 122, 0.7);
  text-transform: uppercase;
}

.scene-crt p {
  margin: 0;
}

.scene-crt .crt-dim {
  color: #2ba84f;
}

/* On small screens the bench terminal is too small to read; the drawing's own glow stands in. */
@media (max-width: 47.4375em) {
  .scene-crt {
    display: none;
  }
}

/* The company mark keeps its circuit/orbit silhouette on compact headers. */
@media (max-width: 47.4375em) {
  html[data-theme] .brand::before { width: 48px; height: 36px; }
}