/* ============================================================================
 * 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; } }

/* PHONES ≤560px (2026-07-25 mobile-audit fix): the single-row grid needs
   420-480px min width (brand + pill + CTA), so the CTA rendered off-screen
   at 390px on ALL three pages. Collapse to two rows: brand + CTA on top,
   the audience pill full-width beneath with equal-width tap targets. */
@media (max-width: 560px) {
  .aai-topbar-inner {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    row-gap: 10px; column-gap: 12px;
    padding: 10px 14px 12px;
  }
  .aai-brand { grid-column: 1; grid-row: 1; }
  .aai-nav   { grid-column: 2; grid-row: 1; justify-self: end; gap: 12px; }
  .aai-tabs  {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; width: 100%; justify-self: stretch;
  }
  .aai-tab {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    padding: 11px 6px; min-height: 40px;
  }
}

/* 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; } }

/* AND-003 (M1, 2026-07-28): on flagged low-FX devices (Samsung / low-end /
   reduced-motion / mobile — set by the tiny head script on index.html), drop the
   header backdrop-filter so the sticky bar stops re-blurring the moving aurora /
   hero every frame — the "text+buttons" flicker. Provably harmless: only removes
   the blur; the bar stays legible on a solid-ish background. */
html[data-lowfx] .aai-topbar {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(7, 7, 11, 0.92);
}


/* ============================================================
   CRAFT PASS (shared) — 2026-09-01. Nav legibility, keyboard focus,
   press feedback, touch targets. Applies to every page linking this
   file (index / teams / events). No markup change required.
   ============================================================ */
.aai-nav a:not(.aai-cta){ color: rgba(245,243,255,.62); }        /* was .38 -> ~6:1 (AA) */
.aai-nav a:not(.aai-cta):hover{ color:#f5f3ff; }
.aai-brand:focus-visible,
.aai-tab:focus-visible,
.aai-cta:focus-visible,
.aai-nav a:focus-visible{ outline:2px solid #C7C0FF; outline-offset:3px; border-radius:999px; }
.aai-tab:active,.aai-cta:active{ transform: scale(.97); }
@media (pointer:coarse){
  .aai-tab { min-height:44px; }
  .aai-cta { min-height:44px; }
  .aai-nav a{ min-height:44px; display:inline-flex; align-items:center; }
}