/*
  Zweck: Footer-Statusband und Header-Boot-Darstellung der System-Ambiente.
  Zielpfad: /home/mckiede/public_html/design/system-activity-status.css
  Verantwortlich: mckie-Portal
  Abhängigkeit: tokens.css; Ladereihenfolge über index.html nach system-activity.css.
*/

/*
  Footer status band
  ------------------
  Replaces the former ::before orange spacer. Long messages marquee; chip height
  comes from --footer-chip-height on .command-footer (layout-desktop.css).
*/
#console-status-feed.footer-status-band {
  order: 2;
  display: flex;
  flex: 1 1 8rem;
  align-items: center;
  min-width: 0;
  max-width: none;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--console-frame), color-mix(in srgb, var(--console-frame) 72%, transparent));
  color: var(--black);
  box-shadow: none;
}

#console-status-feed.is-centered {
  justify-content: center;
}

.status-feed__track {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
}

.status-feed__text {
  display: inline-block;
  font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.35s ease;
}

.status-feed__track.is-scrolling {
  animation: status-feed-scroll var(--status-scroll-duration, 18s) linear infinite;
}

.nav-sensor-map--rail {
  /*
    Tablet/mobile only (max-width: 1180px). Sits directly under #module-buttons.
    Must NOT use header alignment (align-self: end) or desktop button min-heights.
  */
  display: none;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  height: 3.35rem;
  min-height: 0;
  margin: 0;
  padding-bottom: 1rem;
}

#console-status-feed.is-changing .status-feed__text {
  opacity: 0.35;
}

@keyframes status-feed-scroll {
  from {
    transform: translateX(var(--status-scroll-start, 100%));
  }

  to {
    transform: translateX(var(--status-scroll-distance, -100%));
  }
}

@keyframes sensor-scan-ltr {
  0%,
  14% {
    transform: translateX(-44px);
    opacity: 0;
  }

  24%,
  72% {
    opacity: 0.9;
  }

  86%,
  100% {
    transform: translateX(302px);
    opacity: 0;
  }
}

@keyframes sensor-scan-rtl {
  0%,
  14% {
    transform: translateX(302px);
    opacity: 0;
  }

  24%,
  72% {
    opacity: 0.9;
  }

  86%,
  100% {
    transform: translateX(-44px);
    opacity: 0;
  }
}

@keyframes sensor-scan-yoyo {
  0%,
  10% {
    transform: translateX(-42px);
    opacity: 0;
  }

  22%,
  78% {
    opacity: 0.92;
  }

  45% {
    transform: translateX(258px);
    opacity: 0.92;
  }

  90%,
  100% {
    transform: translateX(-42px);
    opacity: 0;
  }
}

@keyframes sensor-star-pulse {
  0%,
  100% {
    opacity: 0.66;
    transform: scale(1);
  }

  45% {
    opacity: 1;
    transform: scale(1.35);
  }
}

/*
  Desktop (≥1181px): NAV preview in header (rechts neben Titel), nicht in der Modul-Rail.
*/
@media (min-width: 1181px) {
  .module-rail > .nav-sensor-map--rail {
    display: none !important;
  }

  .header-brand .sensor-map__scan {
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
}

@media (min-width: 1181px) and (max-width: 1420px) {
  .command-header {
    grid-template-columns: 11rem minmax(0, 1fr) minmax(6.5rem, 8.5rem) minmax(6.25rem, 8.75rem) 2.5rem;
  }

  .header-bars {
    left: 11rem;
    right: 2.5rem;
  }

  .header-brand #page-title {
    font-size: clamp(0.5rem, 3.85cqi, 2rem);
  }

  .header-brand .nav-sensor-map {
    max-width: 8.5rem;
  }
}

.header-status strong.is-boot-step {
  color: var(--red);
  animation: none;
  text-shadow: 0 0 0.65rem color-mix(in srgb, var(--red) 42%, transparent);
}

.header-status strong.is-system-ready {
  color: var(--peach);
  animation: status-text-pulse 7s ease-in-out infinite;
}

/* Keyframes liegen einmalig in components.css (@keyframes status-text-pulse). */

@media (max-width: 1180px) {
  .header-brand .nav-sensor-map:not(.nav-sensor-map--rail) {
    display: none;
  }

  .nav-sensor-map--rail {
    display: block;
  }

  #console-status-feed.footer-status-band {
    min-width: 0;
  }
}


/* ── GPU compositing hints – reduces scroll jank on mobile ───────────────── */
.sensor-map__star.is-pulse,
.sensor-map__scan,
.status-feed__track.is-scrolling,
.header-status strong.is-system-ready {
  will-change: transform;
}