/* ═══════════════════════════════════════════════════════════════
   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);
  padding:var(--sp4) var(--sp6); border-bottom:var(--rule); background:var(--deep); }
.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 */
}