/* The Axon film: a header play control and the player it opens.
   Same-origin video only (the CSP's default-src 'self' covers media). */

/* --- Header control ----------------------------------------------------- */
.ax-film-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px;
  padding: 0 15px 0 5px;
  border-radius: 999px;
  background: var(--surface, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(255,255,255,.12));
  color: var(--text-0, #F5F7FB);
  font: 500 14px/1 var(--f-body, "Inter", system-ui, sans-serif);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.ax-film-btn:hover { border-color: var(--border-hi, rgba(255,255,255,.2)); background: var(--surface-hi, rgba(255,255,255,.09)); }
.ax-film-btn:active { transform: scale(.97); }
.ax-film-btn:focus-visible { outline: 2px solid var(--cyan-bright, #7DDFFF); outline-offset: 3px; }
.ax-film-btn .ax-film-ico {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #0B76B8 0%, #5B2FD1 100%);
  box-shadow: 0 0 16px rgba(123,75,255,.35);
}
/* A slow halo invites the first click; it stops once the film has been opened. */
.ax-film-btn .ax-film-ico::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(125,223,255,.55);
  opacity: 0;
  animation: ax-film-halo 2.8s ease-out 1.2s infinite;
}
.ax-film-btn[data-seen="1"] .ax-film-ico::after { animation: none; }
@keyframes ax-film-halo {
  0% { transform: scale(.85); opacity: .9; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}
.ax-film-btn svg { width: 12px; height: 12px; margin-left: 2px; color: #fff; }

@media (max-width: 860px) {
  /* Icon-only on phones, same footprint as the sound toggle. */
  .ax-film-btn { width: 38px; padding: 0; justify-content: center; }
  .ax-film-btn .ax-film-label { display: none; }
}
@media (max-width: 440px) {
  /* Brand mark, sound, film, "Get started" and the menu must share ~350px. The
     wordmark goes first (the mark is still the link home), then the gaps tighten. */
  .nav-inner .brand span { display: none; }
  .nav-inner > .flex { gap: 8px !important; }
}

/* --- Player ------------------------------------------------------------
   The video normally goes straight to the browser's full screen. This
   overlay is what shows around it while that happens, and the fallback
   when full screen is refused: the film edge to edge on black. */
.ax-film {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.ax-film[data-open="1"] { opacity: 1; visibility: visible; }
.ax-film video {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.ax-film-close {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #F5F7FB;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ax-film-close:hover { background: rgba(255,255,255,.14); }
.ax-film-close:focus-visible { outline: 2px solid var(--cyan-bright, #7DDFFF); outline-offset: 2px; }
.ax-film-close svg { width: 18px; height: 18px; }

html[data-film-open] body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ax-film { transition: none; }
  .ax-film-btn .ax-film-ico::after { animation: none; }
}