/* ═══════════════════════════════════════════════════════════════
   DESIGN GOLDFINGER · header component · drop-in
   Replaces the master-brand site header (mark + wordmark + key + CTA).
   Requires: goldfinger-tokens.css  ·  pairs with: goldfinger-header.js
   Hooks: .gbx-header  .gbx-mark  .gbx-wm  .gbx-nav  .gbx-cta  .gbx-key
   ═══════════════════════════════════════════════════════════════ */

/* ── layout ─────────────────────────────────────────────────── */
.gbx-header { display:flex; align-items:center; gap:var(--sp3);
  position:fixed; top:0; left:0; right:0; width:100%; z-index:100;
  padding:var(--sp4) var(--sp6); background:transparent; border-bottom:none;
  transition:background 220ms ease-out, border-color 220ms ease-out, backdrop-filter 220ms ease-out; }
/* GBX-UI-01 · solid on first interaction (added by header JS) */
.gbx-header.gbx-scrolled { background:rgba(17,22,22,0.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:0.5px solid rgba(186,153,51,0.236); }
.gbx-header[data-mode="light"].gbx-scrolled { background:rgba(237,231,217,0.95); }
.gbx-lockup { display:flex; align-items:center; gap:var(--gap-lockup); } /* 6.9 sacred gap */
.gbx-mark { width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.gbx-mark svg { width:30px; height:30px; display:block; }
.gbx-mark img { width:30px; height:30px; display:block; filter:brightness(0) invert(1); } /* AIO/SCIS raster → white */
.gbx-wm { font-family:var(--sans); font-weight:var(--w-regular); font-size:15px;
  letter-spacing:var(--ls-mark); text-transform:uppercase; color:var(--cashmere); }
.gbx-nav { display:flex; gap:var(--sp5); margin-left:var(--sp5); font-family:var(--sans);
  font-weight:var(--w-regular); font-size:11px; letter-spacing:var(--ls-nav);
  text-transform:lowercase; color:var(--dim2); }
.gbx-nav a, .gbx-nav span { color:inherit; text-decoration:none; cursor:pointer; }
.gbx-nav a:hover, .gbx-nav span:hover { color:var(--gold); }
.gbx-cta { margin-left:auto; display:inline-flex; align-items:center; gap:var(--sp2);
  font-family:var(--sans); font-weight:var(--w-regular); font-size:10px; letter-spacing:var(--ls-nav);
  text-transform:lowercase; color:var(--gold); cursor:pointer; }
.gbx-key { width:16px; height:30px; display:block; color:var(--gold); }
.gbx-key svg { display:block; overflow:visible; }

/* ── light register variant ──────────────────────────────────── */
.gbx-header[data-mode="light"] { background:var(--cashmere); border-bottom:var(--rule-light); }
.gbx-header[data-mode="light"] .gbx-wm { color:var(--ink); }
.gbx-header[data-mode="light"] .gbx-nav { color:var(--ink-body); }
.gbx-header[data-mode="light"] .gbx-cta,
.gbx-header[data-mode="light"] .gbx-key { color:var(--gold-ink); }       /* gold-as-text on light */
.gbx-header[data-mode="light"] .gbx-mark img { filter:none; }            /* keep mark as-authored on light */

/* ═══ MOTION ═══ choreography: load → ambient → arrival · hover · idle
   Timing: eye blink 6s · key turn 6s (offset 3.6s) · load 1.2s · ease var(--ease) */
.gbx-mark svg, .gbx-mark img { transform-origin:50% 50%; will-change:transform,opacity; }
.gbx-key { transform-origin:50% 27%; will-change:transform; }
.gbx-key .pupil { transform-box:fill-box; transform-origin:center; }

@keyframes gbxOpen      { from{opacity:0;transform:scale(.5) rotate(-14deg)} to{opacity:1;transform:none} }
@keyframes gbxKeyLoad   { 0%{transform:rotate(0);opacity:1} 42%{transform:rotate(90deg);opacity:0} 60%{transform:rotate(0);opacity:0} 100%{transform:rotate(0);opacity:1} }
@keyframes gbxBlink     { 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(.06)} }
@keyframes gbxBlinkSlow { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(.06)} }
@keyframes gbxKeyTurn   { 0%,84%,100%{transform:rotate(0)} 92%{transform:rotate(90deg)} }
@keyframes gbxKeyPupil  { 0%,100%{opacity:1} 50%{opacity:.32} }
@keyframes gbxPop       { 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes gbxUnlock    { 0%{transform:rotate(0)} 40%{transform:rotate(-16deg)} 100%{transform:rotate(0)} }

@media (prefers-reduced-motion: no-preference) {
  /* page load — "you are admitted" */
  html.gbx-booting .gbx-mark svg, html.gbx-booting .gbx-mark img { animation:gbxOpen .9s var(--ease) both; }
  html.gbx-booting .gbx-key { animation:gbxKeyLoad 1.2s var(--ease) both; }

  /* ambient loop — "we are present" (key motion is ALWAYS on) */
  html.gbx-ambient .gbx-mark svg, html.gbx-ambient .gbx-mark img { animation:gbxBlink 6s ease-in-out infinite; }
  html.gbx-ambient .gbx-key { animation:gbxKeyTurn 6s var(--ease) infinite; animation-delay:-3.6s; }
  html.gbx-ambient .gbx-key .pupil { animation:gbxKeyPupil 3.6s ease-in-out infinite; }

  /* idle 10s — "waiting, unhurried" (eye slows, key keeps moving) */
  html.gbx-ambient.gbx-idle .gbx-mark svg, html.gbx-ambient.gbx-idle .gbx-mark img { animation:gbxBlinkSlow 9s ease-in-out infinite; }

  /* section arrival — "this room opens" */
  .gbx-header.gbx-arrive .gbx-mark svg, .gbx-header.gbx-arrive .gbx-mark img { animation:gbxPop .55s var(--ease); }
  .gbx-header.gbx-arrive .gbx-key { animation:gbxUnlock .55s var(--ease); }

  /* hover on CTA — "step forward" */
  .gbx-header:has(.gbx-cta:hover) .gbx-mark svg, .gbx-header:has(.gbx-cta:hover) .gbx-mark img { animation:none; transform:scale(1.12); }
  .gbx-header:has(.gbx-cta:hover) .gbx-key { animation:none; transform:rotate(90deg); color:var(--gold-hover); filter:drop-shadow(0 0 7px rgba(186,153,51,.55)); }
}

@media (prefers-reduced-motion: reduce) {
  .gbx-mark svg, .gbx-mark img, .gbx-key { animation:none !important; } /* resting state */
}

/* GBX-UI-03 · mobile hamburger + overlay nav */
@media (max-width:767px){
  .gbx-nav{display:none}
  .gbx-hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;margin-left:auto;background:none;border:none;padding:8px 0}
  .gbx-hamburger span{display:block;width:22px;height:0.5px;background:var(--cashmere)}
  .gbx-hamburger-close{display:none;font-family:'Cormorant',Georgia,serif;font-style:italic;font-size:22px;color:var(--gold);cursor:pointer;background:none;border:none;padding:0;margin-left:auto;line-height:1}
  .gbx-header.gbx-nav-open .gbx-hamburger{display:none}
  .gbx-header.gbx-nav-open .gbx-hamburger-close{display:block}
  .gbx-nav-overlay{display:none;position:fixed;inset:0;background:var(--deep);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:34px;opacity:0;transition:opacity 220ms ease-out}
  .gbx-nav-overlay.gbx-open{display:flex;opacity:1}
  .gbx-nav-overlay a,.gbx-nav-overlay span{font-family:'Jost',sans-serif;font-weight:200;font-size:18px;letter-spacing:0.24em;text-transform:uppercase;color:var(--cashmere)}
  .gbx-nav-overlay a:hover,.gbx-nav-overlay span:hover{color:var(--gold)}
}
@media (min-width:768px){ .gbx-hamburger,.gbx-hamburger-close,.gbx-nav-overlay{display:none!important} }
/* ICON RULE (locked): all forum marks use transparent-background assets. No white fill. No opaque background rect.
   PNG marks on dark grounds: filter:brightness(0) invert(1). SVG marks: inline-embedded, unique gradient IDs per instance. */

/* wordmark hidden — mark identifies the brand (locked 2026-07-03) */
.gbx-wm { display: none !important; }
/* GBX-UI · dropdown nav (BILS canonical) */
.gbx-nav{align-items:center}
.gbx-nav-item{position:relative;display:flex;align-items:center}
.gbx-nav-top{color:inherit;text-decoration:none;cursor:pointer;text-transform:lowercase}
.gbx-nav-dd{position:absolute;top:100%;left:0;background:rgba(17,22,22,0.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:.5px solid var(--g2);min-width:172px;padding:12px 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s;z-index:120;display:flex;flex-direction:column}
.gbx-nav-item:hover .gbx-nav-dd,.gbx-nav-item:focus-within .gbx-nav-dd{opacity:1;visibility:visible;transform:translateY(0)}
.gbx-nav-dd a{padding:9px 20px;font-family:var(--sans);font-weight:var(--w-regular);font-size:10px;letter-spacing:var(--ls-sub);text-transform:lowercase;color:var(--dim2);text-decoration:none}
.gbx-nav-dd a:hover{color:var(--gold)}