/* ============================================================================
 * action ai marketing — SHARED HEADER (single source of truth, 2026-07-24)
 * Linked by index.html, teams.html, events.html. The header markup on all
 * three pages is IDENTICAL except link labels/hrefs and the active tab.
 * Do not restyle headers per-page — edit here or nowhere.
 * ========================================================================== */

.aai-topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 7, 11, 0.76);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(180, 170, 255, 0.10);
}
.aai-topbar-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
}

/* brand — identical on every page */
.aai-brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  color: #f5f3ff; text-decoration: none; white-space: nowrap;
}
.aai-brand:hover { text-decoration: none; }
.aai-brand-glyph {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: url('action-ai-icon-192.png') center/cover, #07070b;
  box-shadow: 0 0 0 1px rgba(180, 170, 255, 0.12), 0 0 18px rgba(253, 203, 110, 0.22);
}
.aai-beta {
  margin-left: 1px; font: 700 9px/1 "Inter", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 7px;
  border-radius: 999px; color: #C7C0FF;
  border: 1px solid rgba(180, 170, 255, 0.18); background: rgba(162, 155, 254, 0.12);
}

/* audience toggle — the one control that must never move between pages */
.aai-tabs {
  justify-self: center;
  display: inline-flex; background: rgba(22, 22, 31, 0.9);
  border: 1px solid rgba(180, 170, 255, 0.10); border-radius: 999px;
  padding: 3px; gap: 2px; flex: none;
}
.aai-tab {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1;
  color: rgba(245, 243, 255, 0.60); text-decoration: none;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}
.aai-tab:hover { color: #f5f3ff; text-decoration: none; }
.aai-tab.is-active { background: #A29BFE; color: #0f0f15; }

/* right zone — fixed shape everywhere: two links + one gradient CTA pill */
.aai-nav { justify-self: end; display: flex; gap: 18px; align-items: center; }
.aai-nav a {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600; color: rgba(245, 243, 255, 0.38);
  text-decoration: none; white-space: nowrap; transition: color 160ms ease;
}
.aai-nav a:hover { color: #f5f3ff; text-decoration: none; }
.aai-nav .aai-cta {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(120deg, #FF7676 0%, #FDCB6E 25%, #55EFC4 50%, #74B9FF 75%, #A29BFE 100%);
  color: #07070b; font-size: 14px; font-weight: 800;
  box-shadow: 0 0 24px rgba(162, 155, 254, 0.32);
}
.aai-nav .aai-cta:hover { filter: brightness(1.06); }

/* responsive — identical collapse on every page */
@media (max-width: 900px) { .aai-nav a:not(.aai-cta) { display: none; } .aai-topbar-inner { gap: 16px; } }
@media (max-width: 640px) {
  .aai-brand { font-size: 16px; }
  .aai-tab { padding: 7px 11px; font-size: 12.5px; }
  .aai-topbar-inner { padding: 12px 16px; }
  .aai-nav .aai-cta { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 400px) { .aai-beta { display: none; } .aai-tab { padding: 7px 9px; font-size: 12px; } }

/* cross-document view transitions — pill glides, content slides directionally
   (html[data-aai-dir] is set by the tiny head script on each page) */
@view-transition { navigation: auto; }
/* PERF (2026-07-24): give the costly layers their own static groups so the
   root snapshot excludes them — the blurred aurora/atmos backgrounds and the
   backdrop-blurred bar were being rasterised and slid with the page = jank.
   Now the bar and background hold still; only the content slides. */
.aai-topbar { view-transition-name: aai-header; }
.bg-aurora, .atmos { view-transition-name: aai-bg; }
::view-transition-group(aai-header), ::view-transition-group(aai-bg),
::view-transition-old(aai-header), ::view-transition-new(aai-header),
::view-transition-old(aai-bg), ::view-transition-new(aai-bg) { animation: none; }
.aai-tab.is-active { view-transition-name: aai-tab-pill; }
/* PERF round 2 (2026-07-24): full-page translate = whole-viewport raster work
   every frame — the source of the residual jank. Opacity-only crossfade is
   compositor-only and cannot stutter; the gliding pill carries the motion.
   The bar and background stay pinned (rules above) so the page reads as one
   continuous surface with only the content swapping. */
@keyframes aai-h-fade-out { to { opacity: 0; } }
@keyframes aai-h-fade-in  { from { opacity: 0; } }
::view-transition-old(root) { animation: aai-h-fade-out 170ms ease-out both; }
::view-transition-new(root) { animation: aai-h-fade-in 200ms ease-in both; }
/* the pill's glide gets a touch more time than the fade so it reads as motion */
::view-transition-group(aai-tab-pill) { animation-duration: 300ms; animation-timing-function: cubic-bezier(.3,.8,.25,1); }
/* pause the blurred aurora/atmos drift while the transition runs (Chromium) */
:root:active-view-transition .aurora-blob { animation-play-state: paused; }
:root:active-view-transition .atmos { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }