/* ===========================================================
   Digital Footprint demo layer — AERION 01

   Everything Digital Footprint adds on top of the exported site
   lives here rather than in assets/, so re-exporting the bundle
   can never silently wipe it.
   ===========================================================

   1. Layout guard
   --------------------------------------------------------- */

/* The pre-order hero image is an authored bleed (width:115%;
   margin-left:-10%) whose container is supposed to clip it — the
   bundle declares overflow:hidden on .preorder-machine, but that
   declaration never reaches the element, so the image pushed the
   document ~145px wider than the viewport and the page scrolled
   sideways. This restores the clearly intended clipping.
   Confirmed pre-existing: the copied bundle differs from the
   source by exactly the one rewritten url() path. */
.preorder-machine { overflow: hidden; }

/* Belt and braces — no demo page should ever scroll horizontally. */
html, body { overflow-x: hidden; }

/* ===========================================================
   2. Demo badge — AERION 01
   The other demos inherit this from their own demo.css, but this
   site is a static export with its own bundled stylesheet, so the
   badge ships standalone here.

   Values are hardcoded rather than using CSS custom properties,
   since this file must not depend on the exported bundle's tokens.
   A hairline border is added (the other demos don't need one) so
   the pill stays legible against Aerion's dark aerospace palette.
   =========================================================== */

.demo-badge {
  position: fixed;
  z-index: 2147483000;           /* above the site's own fixed chrome */
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(12, 14, 18, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
  opacity: .82;
  transition: opacity .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.demo-badge:hover,
.demo-badge:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.demo-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5FD0E8;
  box-shadow: 0 0 0 4px rgba(95, 208, 232, .22);
  flex-shrink: 0;
}

.demo-badge b { color: #fff; font-weight: 700; }
.demo-badge .arrow { color: #5FD0E8; }

@media (max-width: 520px) {
  .demo-badge { right: 10px; bottom: 10px; font-size: .72rem; padding: 9px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-badge { transition: none; }
  .demo-badge:hover, .demo-badge:focus-visible { transform: none; }
}