/* ════════════════════════════════════════════════════════════════════════
 * BUNYAN BRAND — visual signature
 *
 * The mark + wordmark + variants. Implemented as scoped CSS that consumes
 * tokens.css. Mark is inline SVG (no extra request); rendered crisp at
 * any size from 16px (favicon) to 480px (hero).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── The mark (just the arch + AI node) ─────────────────────────────── */
.bunyan-mark {
  width:  var(--bunyan-mark-size, 40px);
  height: var(--bunyan-mark-size, 40px);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  /* the mark colour inherits from currentColor */
  color: var(--bn-stone-700);
}
.bunyan-mark svg { width: 100%; height: 100%; display: block; }

/* The gold AI node — small accent that pulses subtly on hover */
.bunyan-mark .bn-node {
  fill: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out-soft),
              filter var(--dur-base) var(--ease-out-soft);
  transform-origin: 32px 16px;
}
.bunyan-mark:hover .bn-node {
  transform: scale(1.18);
  filter: drop-shadow(0 0 6px rgba(201, 164, 90, .65));
}

/* Variants */
.bunyan-mark--ink   { color: var(--bn-ink-strong); }
.bunyan-mark--gold  { color: var(--color-accent); }
.bunyan-mark--white { color: #fff; }
.bunyan-mark--palm  { color: var(--bn-palm-500); }

/* ── The wordmark (Arabic) ──────────────────────────────────────────── */
.bunyan-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
}
.bunyan-wordmark .bw-ar {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bn-ink-strong);
  margin-bottom: 2px;
}
.bunyan-wordmark .bw-en {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--bn-stone-500);
  text-transform: uppercase;
}
.bunyan-wordmark--lg .bw-ar { font-size: 2.4rem; }
.bunyan-wordmark--lg .bw-en { font-size: .82rem; letter-spacing: .32em; }
.bunyan-wordmark--inverse .bw-ar { color: var(--bn-sand-50); }
.bunyan-wordmark--inverse .bw-en { color: var(--bn-stone-300); }

/* ── Full lockup (mark + wordmark) ───────────────────────────────────── */
.bunyan-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.bunyan-lockup .bunyan-mark { --bunyan-mark-size: 42px; }
.bunyan-lockup--sm .bunyan-mark { --bunyan-mark-size: 32px; }
.bunyan-lockup--sm .bunyan-wordmark .bw-ar { font-size: 1.08rem; }
.bunyan-lockup--sm .bunyan-wordmark .bw-en { font-size: .58rem; }
.bunyan-lockup--lg .bunyan-mark { --bunyan-mark-size: 72px; }

/* ── Brand stripe — repeating Diriyah triangle motif ─────────────────── */
.bunyan-stripe {
  height: 6px;
  background:
    linear-gradient(90deg, transparent 49%, var(--bn-stone-500) 49% 51%, transparent 51%) 0 0/12px 100%,
    var(--bn-sand-100);
  -webkit-mask: linear-gradient(180deg, #000 60%, transparent 100%);
          mask: linear-gradient(180deg, #000 60%, transparent 100%);
  opacity: .55;
}
/* Better: real triangle pattern using inline SVG */
.bunyan-triangles {
  width: 100%; height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path d='M0 18 L6 6 L12 18 Z M12 18 L18 6 L24 18 Z' fill='%23c9a45a' opacity='.55'/></svg>");
  background-repeat: repeat-x;
  background-size: 18px 18px;
}

/* ── Hover animation on the lockup ──────────────────────────────────── */
.bunyan-lockup { transition: opacity var(--dur-fast) var(--ease-out-soft); }
.bunyan-lockup:hover { opacity: .92; }
.bunyan-lockup:hover .bn-node { transform: scale(1.2); }

/* ── Hero treatment — used on landing splash / share viewer ──────────── */
.bunyan-hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px; height: 140px;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%),
    var(--grad-stone);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff;
  position: relative;
}
.bunyan-hero-mark::after {
  /* Triangles base */
  content: '';
  position: absolute; left: 12%; right: 12%; bottom: 10px; height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'><path d='M0 8 L4 0 L8 8 Z M8 8 L12 0 L16 8 Z M16 8 L20 0 L24 8 Z' fill='%23c9a45a'/></svg>");
  background-repeat: repeat-x;
  background-size: 12px 8px;
  opacity: .85;
}
.bunyan-hero-mark .bunyan-mark { --bunyan-mark-size: 88px; }

/* ── Context overrides: lockup inside the dark legacy navbar ─────────── */
.nav .bunyan-lockup .bunyan-mark { color: var(--bn-sand-100); }
.nav .bunyan-lockup .bw-ar       { color: var(--bn-sand-50); }
.nav .bunyan-lockup .bw-en       { color: var(--bn-gold-300); }

/* Inside any element using `.theme-dark` (forward-looking) */
.theme-dark .bunyan-lockup .bunyan-mark { color: var(--bn-sand-100); }
.theme-dark .bunyan-lockup .bw-ar       { color: var(--bn-sand-50); }
.theme-dark .bunyan-lockup .bw-en       { color: var(--bn-gold-300); }

/* ── AI node pulse — used in marketing contexts ──────────────────────── */
@keyframes bn-node-pulse {
  0%, 70%, 100% { transform: scale(1); opacity: 1; }
  35%           { transform: scale(1.15); opacity: .85; }
}
.bunyan-mark--pulse .bn-node {
  animation: bn-node-pulse 3.6s var(--ease-in-out) infinite;
  transform-origin: 32px 16px;
}