/* Blarg LLC Entertainment Company — header brand logo
   White-on-purple Blarg with purple outline, dark-purple LLC, white TM,
   grey "Entertainment Company" tagline below bar.
   Dark mode (body.theme-blarg-dark) flips purple accents to turquoise. */

:root {
  --brand-bg:           #4C1D95;
  --brand-blarg-fill:   #FFFFFF;
  --brand-accent:       #4C1D95;
  --brand-accent-deep:  #2E0A6B;
  --brand-tm:           #FFFFFF;
  --brand-bar:          #FFFFFF;
  --brand-tagline:      #B8B8C2;
}
body.theme-blarg-dark {
  --brand-accent:       #14B8A6;
  --brand-accent-deep:  #0F8E80;
}

/* Header drop-down — anchored to .nav-brand itself so it works on
   both `<nav> > a.nav-brand` (index/register/signin) AND
   `#blarg-top-logo.nav-brand` floating-fixed layouts. */
.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  animation: brand-header-drop 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  will-change: transform, opacity;
}

/* Purple pill — applied to the FLOATING top-left logo (id=blarg-top-logo) on
   white-bg pages so the white-fill BLARG path is visible. Pages with their own
   purple nav band (index/paywall/portal-explainer) have <a class="nav-brand">
   inside <nav> — pill skipped there because they don't carry the id. */
#blarg-top-logo.nav-brand {
  background: var(--brand-bg);
  padding: 6px 14px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
@keyframes brand-header-drop {
  from { transform: translateY(-180%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.nav-brand .brand-logo {
  display: block;
  height: 52px;
  width: auto;
  overflow: visible;
}

/* BLARG path — white fill with purple/turquoise stroke outline.
   paint-order:stroke-fill puts the stroke behind the fill so it shows as outline. */
.nav-brand .brand-logo .brand-blarg {
  fill: var(--brand-blarg-fill);
  stroke: var(--brand-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
  opacity: 0;
  animation: brand-elem-in 0.4s ease-out 0.55s forwards;
}
.nav-brand .brand-logo .brand-llc {
  fill: var(--brand-accent-deep);
  opacity: 0;
  animation: brand-elem-in 0.35s ease-out 0.72s forwards;
}
.nav-brand .brand-logo .brand-tm {
  fill: var(--brand-tm);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  opacity: 0;
  animation: brand-elem-in 0.35s ease-out 0.78s forwards;
}
.nav-brand .brand-logo .brand-bar {
  fill: var(--brand-bar);
  opacity: 0;
  transform-origin: 0 50%;
  animation: brand-bar-grow 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}
.nav-brand .brand-logo .brand-tagline {
  fill: var(--brand-tagline);
  opacity: 0;
  animation: brand-elem-in 0.4s ease-out 1.1s forwards;
}

@keyframes brand-elem-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes brand-bar-grow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-brand,
  .nav-brand .brand-logo > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}