/* ═══ SFTi — THE PUBLIC HEADER. One card, both public pages. ═════════════════════════

   index.html and shop.html carry the SAME header, so it is declared once here and both
   link it. A second copy is how the two surfaces drifted apart in the first place — shop's
   wordmark sat static for weeks while index's animated, from two files nobody diffed.

   ── THE WORDMARK ──
   Shop's red → gold → silver gradient (the storefront is the palette reference) driven by
   index's animation: the gradient travels and the glow breathes red → gold, and the tagline
   rises in under it. That pairing IS the ask — shop's colours, index's motion.

   ── PINNED, LIKE THE COCKPIT'S (operator 2026-08-12: "the SFTi header with the gold line
      needs to stay in place like the header in system/") ──
   app/system/css/shell.css's `.status-bar` is the reference: `position: fixed; top:0; left:0;
   right:0;` and NOTHING ELSE about its own position — no transform, no translate3d, no
   will-change. #218 measured why that restriction matters: promoting a fixed element to its
   own compositor layer (which a transform does) makes it track the LAYOUT viewport instead of
   the VISUAL one on iOS, and it drifts off the top of the screen mid-scroll. A fixed element
   with no transform of its own stays pinned to the visual viewport, which is what both headers
   now share.

   ★ THE OLD PHASE-OUT LAYER IS GONE, NOT ADAPTED — it was a `backdrop-filter` blur, and this
   file's own prior warning said plainly: "Scrolling header + blur is safe; fixed is not." The
   cockpit's own status-bar carries no backdrop-filter either, by the same reasoning. What
   replaces it is simpler than what it replaced: a FLAT `background: var(--bg-void)`, the exact
   colour the page canvas already is. A flat fill needs no blur, triggers none of #218's
   compositor promotion, and reads as seamless against the canvas for the same reason the old
   layer's comment gave — "colour matches by construction" — just by equality instead of decay.

   ── THE ACCENT LINE RIDES ALONG (operator 2026-08-11: "the gold multi hue line … it looked
      cool, you need to add just it back") ──
   `header::before` is unchanged below — still `bottom: 0`, still fading to transparent at both
   ends so it reads as light rather than a cut. Pinning the header pins the line with it: this
   is the literal mechanism behind "the gold line needs to stay in place". */

/* THE TOP RESERVE — same mechanism as app/system/css/tokens.css's `--header-clearance`.
   `--header-occlusion` is what app/shared/js/header-clearance.js measures off the header's own
   border box (ResizeObserver, so a safe-area or content change after boot still updates it); the
   fallback below is only the pre-JS estimate, sized to this header's own padding + wordmark +
   tagline at roughly a 47px safe-area inset — close enough not to flash a gap before the real
   number lands. */
:root {
  --header-clearance: var(--header-occlusion, 190px);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* matches app/system/css/shell.css .status-bar exactly: above scrolling content, far below
     the nav (9999) and any modal, so a sheet still covers it. */
  z-index: 100;
  padding: calc(1.5rem + env(safe-area-inset-top, 0px))
           max(5%, env(safe-area-inset-right, 0px))
           1.5rem
           max(5%, env(safe-area-inset-left, 0px));
  background: var(--bg-void);
}

/* ── THE ACCENT LINE — DECORATION, NOT A BOUNDARY (operator 2026-08-11: "the gold multi hue
      line is missing from index and shop now…… it looked cool, you need to add just it back
      without undoing anything else so far") ──

   The line he liked and the split he hated were the SAME declaration doing two jobs: a red→gold
   gradient (pretty) AND a hard edge between two different background tones (not). The header's
   own background now flat-matches the canvas, so there is no tone step for this line to be
   mistaken for — it is pure decoration exactly as before.

   ⚠ TWO PROPERTIES KEEP IT FROM READING AS A DIVIDER AGAIN. Both are load-bearing:
     · IT FADES TO TRANSPARENT AT BOTH ENDS and never touches the screen edge. An edge-to-edge
       rule at full alpha reads as a CUT no matter how thin it is — that is what the old
       `border-image` was, and reinstating it verbatim would undo the fold.
     · IT SITS ON THE CONTINUOUS CANVAS rather than BETWEEN two tones, so there is nothing for
       the eye to snap to except the light itself.

   Shop's three declared accents in order — red, gold, silver — which is what "multi hue" means
   here, and why this reads as the storefront rather than as a generic underline. */
header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(230, 57, 70, 0.00)   0%,
      rgba(230, 57, 70, 0.55)  12%,
      rgba(212, 175, 55, 0.85) 42%,
      rgba(212, 175, 55, 0.85) 58%,
      rgba(192, 192, 192, 0.45) 82%,
      rgba(192, 192, 192, 0.00) 100%);
  /* the bloom is what makes it read as LIT rather than DRAWN. A bare 1px line is a rule; a 1px
     line with its own glow is an accent, and the difference is the whole ask. */
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.30);
  pointer-events: none;
}

.logo {
  font-family: 'Orbitron', monospace;
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(120deg, var(--accent-red) 0%, var(--accent-gold) 50%, var(--accent-silver) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.15em;
  text-align: center;
  filter: drop-shadow(0 0 30px rgba(230, 57, 70, 0.55));
  animation: logoGlow 4s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(230, 57, 70, 0.55));
    background-position: 0% 50%;
  }
  50% {
    filter: drop-shadow(0 0 45px rgba(212, 175, 55, 0.45));
    background-position: 100% 50%;
  }
}

.tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  color: var(--accent-silver);
  letter-spacing: 0.4em;
  margin-top: 0.3rem;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  animation: fadeInUp 1.2s ease-out 0.3s forwards;
}

@keyframes fadeInUp {
  from { opacity: 0;   transform: translateY(20px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

/* the wordmark's own breakpoints travel WITH it, so a surface cannot resize it behind the
   card's back (they used to sit in two separate responsive.css files). */
@media (min-width: 481px) and (max-width: 768px) {
  .logo { font-size: 3.5rem; }
}
@media (min-width: 769px) {
  header  { padding: 2rem 7% 3rem; }
  .logo    { font-size: 4rem;   text-align: left; }
  .tagline { font-size: 0.9rem; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .tagline { animation: none !important; }
  .tagline { opacity: 0.8; }
}