/* ═══════════════════════════════════════════════
   Wanted Theme (pop-art loading-screen)
   ═══════════════════════════════════════════════ */

/* ── Progressive indicator: wanted-level buildup ── */

/* A row of stars that fills 1→5 as the cheat code is typed; near the top it
   flashes red/blue like a siren. DOM strip on a dark pill so it reads over the
   normal page; opacity 0 at rest. Empty stars show as cream outlines so the
   meter is visible from the first keystroke. */
.wanted-buildup {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(16, 16, 16, 0.78);
  border: 2px solid #101010;
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.6);
  z-index: var(--z-theme-buildup);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.wanted-pip {
  font-size: 2rem;
  line-height: 1;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(244, 234, 211, 0.55);
  transition:
    transform 0.2s,
    text-shadow 0.2s;
}
.wanted-pip.lit {
  -webkit-text-fill-color: #ffd23f;
  -webkit-text-stroke: 2px #101010;
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.9);
  transform: scale(1.12);
}
/* Animate the strip's colour, not each star, so every lit star flashes in
   lockstep regardless of when it lit (per-star animations start at different
   times and drift out of phase). The stars take the colour via currentColor;
   text-shadow inherits from the strip too. */
@keyframes wanted-siren {
  0%,
  49% {
    color: #ff2b4a;
    text-shadow: 0 0 14px rgba(255, 43, 74, 0.95);
  }
  50%,
  100% {
    color: #2b6bff;
    text-shadow: 0 0 14px rgba(43, 107, 255, 0.95);
  }
}
.wanted-buildup.hot {
  animation: wanted-siren 0.4s steps(1) infinite;
}
.wanted-buildup.hot .wanted-pip.lit {
  -webkit-text-fill-color: currentColor;
  text-shadow: inherit; /* take the strip's animated glow, not the gold one */
  /* No per-star transition during the flash: otherwise each star eases the
     strip's colour change on its own clock (started when it lit) and they
     drift out of phase. Snap instantly so all five blink as one. */
  transition: none;
}
.wanted-buildup.hot .wanted-pip:not(.lit) {
  text-shadow: none; /* keep the empty stars from glowing */
}

/* ── HUD: wanted level + score ── */
/* Sits below the nav bar so it doesn't collide with the nav controls. */
.wanted-hud {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: var(--z-wanted-hud);
  pointer-events: none;
  text-align: right;
  font-family: "Syne", sans-serif;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.wanted-hud.show {
  opacity: 1;
  transform: none;
}
.wanted-hud-stars .wanted-pip {
  font-size: 1.7rem;
  -webkit-text-fill-color: #ffd23f;
  -webkit-text-stroke: 2px #101010;
  text-shadow: 0 0 8px rgba(255, 210, 63, 0.8);
}
/* Freshly obtained: the stars flash like a just-raised wanted level — driven
   from the row so all five stay in sync. */
.wanted-hud.busted .wanted-hud-stars {
  animation: wanted-siren 0.36s steps(1) infinite;
}
.wanted-hud.busted .wanted-hud-stars .wanted-pip {
  -webkit-text-fill-color: currentColor;
  text-shadow: inherit;
  transition: none;
}
.wanted-hud-cash {
  margin-top: 2px;
  font-size: 1.7rem;
  font-weight: 800;
  color: #2fbf4e;
  -webkit-text-stroke: 1.5px #101010;
  letter-spacing: 0.02em;
}

/* ── Cheat-code toast — a pop-art sticker confirming a code ── */
.wanted-cheat-toast {
  position: fixed;
  top: 120px;
  left: 50%;
  z-index: var(--z-wanted-hud);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 22px;
  background: #f4ead3;
  border: 3px solid #101010;
  border-radius: 5px;
  box-shadow: 5px 5px 0 #101010;
  font-family: "Syne", sans-serif;
  text-align: center;
}
.wanted-cheat-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff6a00;
}
.wanted-cheat-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #101010;
}

/* ── Pop-art wipe — bold diagonal hazard stripes ── */
.wanted-wipe {
  background: repeating-linear-gradient(
    45deg,
    #ff6a00 0 44px,
    #101010 44px 88px
  );
  transition: opacity 0.4s ease-in;
}

/* ── Wanted — visual theme (only when active theme) ── */
body[data-active-theme="wanted"] {
  --theme-primary: #ff6a00;
  --theme-glow: 255, 106, 0;
  --logo-text-color: #f4ead3;
  --logo-accent-color: var(--theme-primary);
  --theme-bg: #101010;
  /* Comic ink + cream — the theme's outline/shadow black and its paper tone.
     Kept distinct from --theme-bg / --logo-text-color (same values, different
     roles); the -rgb variants back the translucent uses. */
  --wanted-ink: #101010;
  --wanted-ink-rgb: 16, 16, 16;
  --wanted-cream: #f4ead3;
  --wanted-cream-rgb: 244, 234, 211;
  /* Buttons read as hard-edged stickers — flat fills, ink outline below. */
  --theme-btn-bg: var(--theme-primary);
  --theme-btn-before-bg: #1aa6a0;
  --theme-btn-shadow: 4px 4px 0 var(--wanted-ink);
  --theme-btn-hover-shadow: 6px 6px 0 var(--wanted-ink);
}

/* The backdrop is painted by the renderer onto the suppressed bg-canvas, so no
   canvas filter is needed. */
body[data-active-theme="wanted"] .cloud-svg {
  filter: contrast(1.4) brightness(0.9)
    drop-shadow(2px 2px 0 rgba(var(--wanted-ink-rgb), 0.8));
}

body[data-active-theme="wanted"] #cursor {
  box-shadow:
    -3px -3px 4px rgba(var(--wanted-cream-rgb), 0.35) inset,
    1px 1px 2px rgba(var(--wanted-ink-rgb), 0.5) inset;
}
body[data-active-theme="wanted"] #cursor-ring {
  border-color: rgba(var(--theme-glow), 0.7);
}

/* Comic panel frame — a bold ink border inset from the viewport edge. */
body[data-active-theme="wanted"]::before {
  content: "";
  position: fixed;
  inset: 14px;
  border: 6px solid var(--wanted-ink);
  border-radius: 3px;
  pointer-events: none;
  z-index: var(--z-wanted-hud);
}

/* ── Pop-art chrome ── */
/* Everything on the page reads comic: thick ink outlines, flat fills, hard
   offset shadows, no soft blur. */

/* Nav — bold cream links, gold sticker CTA. */
body[data-active-theme="wanted"] .nav-links a {
  color: var(--wanted-cream);
  font-weight: 700;
  text-shadow: 1.5px 1.5px 0 var(--wanted-ink);
}
body[data-active-theme="wanted"] .nav-links a.nav-cta {
  color: var(--wanted-ink);
  background: #ffd23f;
  border: 2px solid var(--wanted-ink);
  box-shadow: 3px 3px 0 var(--wanted-ink);
  text-shadow: none;
}

/* Hero tag — an orange sticker instead of the thin ruled label. */
body[data-active-theme="wanted"] .hero-tag {
  color: var(--wanted-ink);
  background: #ffd23f;
  padding: 5px 14px;
  border: 2px solid var(--wanted-ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--wanted-ink);
  font-weight: 700;
}
body[data-active-theme="wanted"] .hero-tag::before,
body[data-active-theme="wanted"] .hero-tag::after {
  display: none;
}

/* Hero title — comic lettering: solid fill, thick ink outline, hard shadow.
   Overrides the gradient text-clip (which went muddy over the halftone). */
body[data-active-theme="wanted"] .hero-title .line-1 {
  color: var(--wanted-cream);
  -webkit-text-fill-color: var(--wanted-cream);
  -webkit-text-stroke: 3px var(--wanted-ink);
  text-shadow: 7px 7px 0 var(--wanted-ink);
}
body[data-active-theme="wanted"] .hero-title .line-2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--theme-primary);
  -webkit-text-fill-color: var(--theme-primary);
  -webkit-text-stroke: 3px var(--wanted-ink);
  text-shadow: 7px 7px 0 var(--wanted-ink);
}

/* Hero sub — legible cream with an ink drop instead of faint grey. */
body[data-active-theme="wanted"] .hero-sub {
  color: var(--wanted-cream);
  opacity: 1;
  font-weight: 500;
  text-shadow: 1.5px 1.5px 0 var(--wanted-ink);
}

/* Primary button — squared, thick ink outline, dark label on the orange fill. */
body[data-active-theme="wanted"] .btn-primary {
  border: 3px solid var(--wanted-ink);
  border-radius: 5px;
}
body[data-active-theme="wanted"] .btn-primary span {
  color: var(--wanted-ink);
  font-weight: 700;
}
/* Ghost button — a cream sticker that lifts onto its shadow on hover. */
body[data-active-theme="wanted"] .btn-ghost {
  color: var(--wanted-ink);
  background: var(--wanted-cream);
  border: 3px solid var(--wanted-ink);
  border-radius: 5px;
  box-shadow: 4px 4px 0 var(--wanted-ink);
  font-weight: 700;
}
body[data-active-theme="wanted"] .btn-ghost:hover {
  color: var(--wanted-ink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--wanted-ink);
}

/* Service cards — dark panels with an orange outline and a hard ink shadow
   that deepens as the card lifts on hover. */
body[data-active-theme="wanted"] .services-grid {
  background: none;
  border: none;
}
body[data-active-theme="wanted"] .service-card {
  background: #14110c;
  border: 3px solid var(--theme-primary);
  border-radius: 5px;
  box-shadow: 6px 6px 0 var(--wanted-ink);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
body[data-active-theme="wanted"] .service-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--wanted-ink);
}
body[data-active-theme="wanted"] .service-num {
  color: var(--theme-primary);
}
body[data-active-theme="wanted"] .service-icon {
  color: #1aa6a0;
  opacity: 1;
}
body[data-active-theme="wanted"] .service-title {
  color: #ffd23f;
}
body[data-active-theme="wanted"] .service-desc {
  color: rgba(var(--wanted-cream-rgb), 0.72);
}

/* About — bold cream heading with an orange accent word. */
body[data-active-theme="wanted"] .about-heading {
  color: var(--wanted-cream);
  text-shadow: 2px 2px 0 var(--wanted-ink);
}
body[data-active-theme="wanted"] .about-heading em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--theme-primary);
  -webkit-text-fill-color: var(--theme-primary);
}
body[data-active-theme="wanted"] .about-body {
  color: rgba(var(--wanted-cream-rgb), 0.75);
}

/* Contact — outlined panel and sticker-style links. */
body[data-active-theme="wanted"] .contact-card {
  background: #14110c;
  border: 3px solid var(--theme-primary);
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--wanted-ink);
}
body[data-active-theme="wanted"] .contact-heading {
  color: var(--wanted-cream);
  text-shadow: 2px 2px 0 var(--wanted-ink);
}
body[data-active-theme="wanted"] .contact-sub {
  color: rgba(var(--wanted-cream-rgb), 0.72);
}
body[data-active-theme="wanted"] .contact-link {
  color: var(--wanted-cream);
  border: 2px solid var(--wanted-ink);
  border-radius: 4px;
  background: rgba(var(--theme-glow), 0.12);
}
body[data-active-theme="wanted"] .contact-link:hover {
  color: var(--wanted-ink);
  background: #ffd23f;
  border-color: var(--wanted-ink);
}

body[data-active-theme="wanted"]::after {
  opacity: 0.06;
}

/* Reduced motion: drop the siren flash and the HUD/buildup slide — stars and
   score still update, just without the animated flicker. */
@media (prefers-reduced-motion: reduce) {
  .wanted-buildup.hot,
  .wanted-hud.busted .wanted-hud-stars {
    animation: none;
  }
  .wanted-buildup,
  .wanted-hud,
  .wanted-pip {
    transition: none;
  }
}