/* wtfbsd.ai cyberpunk pass (deploy 5): rotating hero backgrounds, raster mascots, mobile fixes. */
html { overflow-x: clip; }
body, .hero { position: relative; }
.site-header, .site-footer, main > :not(.hero-bg) { position: relative; z-index: 1; }

.hero-bg { position: absolute; inset: 0 0 auto 0; height: min(100vh, 900px); z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 14, 0) 0%, rgba(8, 8, 14, 0.3) 70%, #0b0b10 100%); }
.hero-bg .hb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; filter: saturate(1.25) brightness(1.15); }
.hero-bg .hb-scan { position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.hero-bg .hb1 { background-image: url("art/bg-city.webp"); opacity: 1; }
.bg-ready .hero-bg .hb { animation: hbfade 32s linear infinite; }
.bg-ready .hero-bg .hb1 { animation-delay: -1.5s; }
.bg-ready .hero-bg .hb2 { background-image: url("art/bg-terminals.webp"); animation-delay: 6.5s; }
.bg-ready .hero-bg .hb3 { background-image: url("art/bg-rain.webp"); animation-delay: 14.5s; }
.bg-ready .hero-bg .hb4 { background-image: url("art/bg-circuit.webp"); animation-delay: 22.5s; }
@keyframes hbfade { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }

.hero h1 { text-shadow: 0 0 18px rgba(255, 45, 124, 0.55), 0 0 42px rgba(0, 212, 255, 0.35); }
img.mascot { filter: drop-shadow(0 0 18px rgba(255, 45, 124, 0.45)) drop-shadow(0 0 30px rgba(0, 212, 255, 0.25)); }
.mascot-daemon { width: 58%; left: 21%; top: 16%; }
.mascot-puffer { width: 36%; }
.mascot-pennant { width: 34%; }
.mascot-dragonfly { width: 38%; }

.btn, .site-nav a, .linklike { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 640px) {
  .hero-bg { height: 100%; max-height: 1200px; }
  .hero-bg .hb1 { background-image: url("art/bg-city-m.webp"); }
  .bg-ready .hero-bg .hb2 { background-image: url("art/bg-terminals-m.webp"); }
  .bg-ready .hero-bg .hb3 { background-image: url("art/bg-rain-m.webp"); }
  .bg-ready .hero-bg .hb4 { background-image: url("art/bg-circuit-m.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-ready .hero-bg .hb { animation: none; opacity: 0; }
  .hero-bg .hb1, .bg-ready .hero-bg .hb1 { opacity: 1; }
}

/* Hotfix v10: readable hero copy over rotating backgrounds.
   Panel alpha 0.85 chosen so every text colour clears WCAG AA even over a pure-white
   pixel of the brightest frame (text 12.3:1, sub 9.4:1, pink-lite 4.75:1, green 10.4:1). */
.hero-copy {
  background: rgba(8, 8, 16, 0.85);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 14px;
  padding: 1.1rem 1.1rem 1.3rem;
  box-shadow: 0 0 24px rgba(255, 45, 124, 0.18), inset 0 0 0 1px rgba(255, 45, 124, 0.12);
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .hero-copy { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.hero-copy .hero-tag, .hero-copy .hero-sub, .hero-copy .hero-prompt { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.8); }
.hero-copy .hero-sub { color: #d4d4e4; }
.hero-copy .hero-tag .hl-red { color: #ff5c9a; }
@media (min-width: 900px) { .hero-copy { padding: 1.6rem 1.8rem 1.8rem; } }