/* One pixel world, from the opening horizon to the protocol tables. */
#pixel-atmosphere {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; image-rendering: pixelated; z-index: 0;
}
.hero-world {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -3; image-rendering: pixelated; opacity: 0; pointer-events: none;
}
.hero-world.loaded { opacity: 1; }
.hero:has(.hero-world.loaded) .hero-landscape { visibility: hidden; }
.seal-stage.ready .seal-fallback { visibility: hidden; }
#seal-canvas { transition: none; }
.hero { z-index: 0; }
.foot { position: relative; z-index: 2; }
.band { background: #080909a8; }
.band-alt { background: #0d0f0eb8; }
.band-art {
  position: absolute; top: 63px; right: var(--pad);
  width: 224px; height: 140px; image-rendering: pixelated;
  pointer-events: none; opacity: .9;
}
.band-head { max-width: min(760px, calc(100% - 275px)); }
.band-index { display: flex; align-items: center; gap: 15px; font-family: var(--mono); }
.band-index::after {
  content: ''; display: block; width: 42px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 7px);
  opacity: .6; animation: signal-flow 2.4s steps(6) infinite;
}
.hud::after {
  content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px;
  transform-origin: left; transform: scaleX(var(--page-progress, 0));
  background: var(--gold); pointer-events: none;
}
.hero .signal-square { animation: signal-breathe 3s steps(5) infinite; }
.protocol-strip .route > svg { animation: route-transmit 3s steps(12) infinite; }
.live-dot { animation: signal-breathe 2.8s steps(5) infinite; }
.panel-head { position: relative; overflow: hidden; }
.panel-head::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 35px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px);
  animation: panel-transmit 9s linear infinite; opacity: .45; pointer-events: none;
}
.panel-sol .panel-head::after { background: repeating-linear-gradient(90deg, var(--sol-2) 0 4px, transparent 4px 8px); animation-delay: -3s; }
.panel-state .panel-head::after { background: repeating-linear-gradient(90deg, var(--ok) 0 4px, transparent 4px 8px); animation-delay: -6s; }
.panel.activity-pulse { animation: activity-pulse 1.1s ease-out; }
.stage.lit { background: #ff742b05; }
.stage::before { transition: background .2s; }
.stage.lit::before { box-shadow: 7px 0 0 #ff742b55, 14px 0 0 #ff742b22; }
.btn { position: relative; overflow: hidden; }
.btn > svg { transition: transform .2s steps(4); }
.btn:hover > svg { transform: translate(2px, -2px); }
.btn::after {
  content: ''; position: absolute; top: 0; left: -25%; width: 20%; height: 100%;
  background: repeating-linear-gradient(0deg, #ffffff28 0 2px, transparent 2px 4px);
  transform: skewX(-20deg); pointer-events: none;
}
.btn:hover::after { animation: button-scan .55s steps(12); }
.rule { transition: background .2s, border-color .2s; }
.rule:hover { border-bottom-color: var(--gold); background: #ff742b08; }
.rule.open .rule-code { color: var(--gold-hi); }
.byte.hot { transition: transform .1s steps(2); }
.seg button, .icon-button { transition: color .15s, background .15s, border-color .15s; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes signal-flow { to { background-position-x: 42px; } }
@keyframes signal-breathe { 0%, 100% { opacity: .35; } 45%, 65% { opacity: 1; } }
@keyframes route-transmit { 0%, 100% { opacity: .35; transform: translateX(-2px); } 50% { opacity: 1; transform: translateX(2px); } }
@keyframes panel-transmit { from { left: -35px; } to { left: 100%; } }
@keyframes activity-pulse { from { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 60px #ff742b10; } to { box-shadow: inset 0 0 0 1px transparent, inset 0 0 60px transparent; } }
@keyframes button-scan { to { left: 125%; } }
html[data-motion='paused'] *, html[data-motion='paused'] *::before, html[data-motion='paused'] *::after { animation-play-state: paused !important; }
@media (max-width: 900px) {
  .band-art { width: 144px; height: 90px; top: 70px; opacity: .65; }
  .band-head { max-width: calc(100% - 170px); }
}
@media (max-width: 600px) {
  .band-art { width: 96px; height: 60px; top: 9px; opacity: .55; }
  .band-head { max-width: 100%; }
  .hero-copy .tagline { font-size: 26px; }
  .panel-head::after { animation-duration: 12s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 360px) {
  .hero-copy .tagline { font-size: 22px; }
  .hero .btn { gap: 4px; }
  .hero .btn svg { width: 12px; height: 12px; }
  .console-heading h2 { font-size: 20px; gap: 8px; }
}
@media (max-width: 600px) and (max-height: 760px) {
  .seal-caption { bottom: 12px; }
}