/* =====================================================================
   [BRAND1] AiSockt logo - the one place the product logo is rendered.

   Files live in /assets/brand/ (copied from the AiSockt brand pack,
   AiSockt-Brand-newsyle/animated + /logo, unmodified):
     aisockt-mark-thinking-departments-dark.svg   rail mark, animated (SMIL)
     aisockt-mark-thinking-departments-light.svg  same, ink sparkle - see RAIL
     aisockt-logo-reveal-dark.gif / -light.gif    sign-in / sign-up logo
     aisockt-mark-on-dark.svg                     static mark  (reduced motion)
     aisockt-logo-on-dark.svg / -on-light.svg     static logo  (reduced motion)

   Every logo is a CSS background, not an <img>: a background is only
   downloaded for the theme that applies, so a sign-in page never fetches
   both ~900 KB GIFs. Each host carries role="img" + aria-label="AiSockt".

   Loads after brandkit.css (which paints #logo as a blue tile) and after
   pages/auth/auth.css, so the same-specificity rules below win by order.
   ===================================================================== */

/* Colours (--brand-ink / --brand-paper, the GIFs' opaque backgrounds, and
   the --brand-logo-tile / --brand-fg / --brand-check theme switch) live in
   theme_b.css with the other colours. Only file paths are set here. */
:root {
  --brand-mark-anim: url("/assets/brand/aisockt-mark-thinking-departments-dark.svg");
  --brand-mark-still: url("/assets/brand/aisockt-mark-on-dark.svg");
  --brand-logo-anim: url("/assets/brand/aisockt-logo-reveal-dark.gif");
  --brand-logo-still: url("/assets/brand/aisockt-logo-on-dark.svg");
}
:root[data-theme="light"] {
  --brand-logo-anim: url("/assets/brand/aisockt-logo-reveal-light.gif");
  --brand-logo-still: url("/assets/brand/aisockt-logo-on-light.svg");
}

/* ---- RAIL ------------------------------------------------------------
   Replaces brandkit's blue #logo tile (background: var(--primary) + glow).
   The rail is navy in BOTH themes (--tb-bg-rail), so it carries the DARK
   mark in both: the light variant's ink sparkle (#0D1210) disappears on
   navy. If the rail ever turns light, point --brand-mark-anim at
   aisockt-mark-thinking-departments-light.svg inside the light block.
   The animated SVG's viewBox (172) leaves the ring at half its width, so
   it is drawn at 2x the tile to match the static mark (viewBox 108). */
#logo {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--brand-mark-anim) center / 84px 84px no-repeat;
  box-shadow: none;
}

/* ---- SIGN-IN / SIGN-UP ----------------------------------------------
   [AUTH2] The GIFs are opaque (ink / white), so the surface behind them is
   painted in exactly that colour (pages/auth/auth.css: the brand panel is
   --brand-logo-tile, the cobalt moved to the form half). No tile, radius
   or shadow: the logo's edges vanish into the panel. 1000x411 source. */
#auth-gate .ag-logo {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1000 / 411;
  margin: 0 0 var(--space-6);
  background: var(--brand-logo-tile) var(--brand-logo-anim) center / 100% 100% no-repeat;
}
/* Below 1024px the brand panel is hidden (auth.css), so the form column
   shows a smaller copy above "Sign in" - otherwise a phone never sees the
   logo at all. Hidden on wide screens, where the panel already has it. */
#auth-gate .ag-logo-sm {
  display: none;
  max-width: 240px;
  margin: 0 0 var(--space-6);
}
@media (max-width: 1023px) {   /* = auth.css's panel breakpoint */
  #auth-gate .ag-logo-sm { display: block; }
}

/* ---- reduced motion: the static logo, same size and place ------------
   GIF and SMIL animation cannot be paused from CSS, so swap the file. */
@media (prefers-reduced-motion: reduce) {
  #logo { background: var(--brand-mark-still) center / 38px 38px no-repeat; }
  #auth-gate .ag-logo {
    background: var(--brand-logo-tile) var(--brand-logo-still) center / 78% auto no-repeat;
  }
}