/* ============================================================
   FUTUR LAYER — Portfolio OS
   Command palette · view transitions · scroll hairline · lattice
   Palette + type inherit from styles.css tokens.
   ============================================================ */

/* h1 promotion safety */
h1.name { margin: 0; }

/* ---- Cross-document view transitions (progressive) ---- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: futur-out 0.22s ease both; }
  ::view-transition-new(root) { animation: futur-in 0.30s ease both; }
}
@keyframes futur-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes futur-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Scroll progress hairline (CSS-only where supported) ---- */
@supports (animation-timeline: scroll()) {
  .futur-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    background: var(--accent, #D4FF3D);
    transform-origin: 0 50%; transform: scaleX(0);
    animation: futur-grow linear both;
    animation-timeline: scroll(root);
    z-index: 9998; pointer-events: none;
  }
  @keyframes futur-grow { to { transform: scaleX(1); } }
}
@supports not (animation-timeline: scroll()) {
  .futur-progress { display: none; }
}

/* ---- Hero lattice canvas ---- */
/* The host gets its own stacking context; the canvas sits behind all content
   at z-index -1. Children keep their own positioning — never overridden. */
.futur-lattice-host { position: relative; isolation: isolate; }
.futur-lattice {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}

/* ---- ⌘K chip ---- */
.futur-chip {
  position: fixed; right: 18px; bottom: 18px; z-index: 9990;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink, #F2EDE2);
  background: rgba(11,11,10,0.82);
  border: 1px solid var(--line, #26241F);
  border-radius: 999px; padding: 9px 14px;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.futur-chip:hover, .futur-chip:focus-visible {
  border-color: var(--accent, #D4FF3D); color: var(--accent, #D4FF3D);
  outline: none;
}
.futur-chip .key {
  border: 1px solid var(--line, #26241F); border-radius: 4px;
  padding: 1px 5px; font-size: 10px; color: var(--ink-mute, #8A867C);
}
.futur-chip:hover .key { color: inherit; border-color: inherit; }

/* ---- Command palette ---- */
.futur-veil {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0,0,0,0.55);
  display: none;
}
.futur-veil.open { display: block; }
.futur-pal {
  position: fixed; z-index: 9996;
  left: 50%; top: 14vh; transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  background: rgba(14,14,12,0.97);
  border: 1px solid var(--line, #26241F);
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  display: none; overflow: hidden;
}
.futur-pal.open { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .futur-pal.open { animation: futur-pal-in 0.18s ease both; }
  @keyframes futur-pal-in { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.985); } }
}
.futur-pal input {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 0; outline: 0;
  border-bottom: 1px solid var(--line, #26241F);
  color: var(--ink, #F2EDE2);
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  letter-spacing: 0.04em;
  padding: 18px 20px;
}
.futur-pal input::placeholder { color: var(--ink-faint, #4A4842); }
.futur-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.futur-group {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.22em; color: var(--ink-faint, #4A4842);
  padding: 12px 12px 6px;
}
.futur-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-radius: 8px; cursor: pointer;
  color: var(--ink, #F2EDE2); font-size: 14.5px;
  font-family: 'Hanken Grotesk', sans-serif;
}
.futur-item .hint {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; color: var(--ink-faint, #4A4842);
}
.futur-item.active {
  background: rgba(212,255,61,0.09);
  color: var(--accent, #D4FF3D);
}
.futur-item.active .hint { color: var(--accent, #D4FF3D); opacity: 0.7; }
.futur-empty {
  padding: 26px 16px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-mute, #8A867C);
}
.futur-foot {
  display: flex; gap: 16px; padding: 10px 16px;
  border-top: 1px solid var(--line, #26241F);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--ink-faint, #4A4842);
}

/* motion-off preference (palette action) */
body.futur-motion-off *, body.futur-motion-off *::before, body.futur-motion-off *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

@media (max-width: 640px) {
  .futur-chip { right: 14px; bottom: 14px; padding: 10px 14px; }
  .futur-pal { top: 8vh; }
}