/* ===== MODULE 15.70 — BRANDING ASSETS INTEGRATION ===== */

@layer base {
  :root {
    --brand-logo-max-width: min(420px, 72vw);
    --brand-logo-hero-width: min(560px, 84vw);
    --brand-symbol-size: 30px;
  }
}

@layer opening {
  .brand-logo,
  .void-brand-logo,
  .hero-brand-logo {
    display: block;
    width: var(--brand-logo-max-width);
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }

  .hero-brand-logo {
    width: var(--brand-logo-hero-width);
    margin: 0 0 clamp(18px, 3vw, 34px);
    filter:
      drop-shadow(0 0 18px rgba(123, 43, 255, .20))
      drop-shadow(0 0 34px rgba(0, 243, 255, .08));
  }

  .brand-symbol,
  .void-brand-symbol {
    display: inline-block;
    width: var(--brand-symbol-size);
    height: var(--brand-symbol-size);
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 0 12px rgba(123, 43, 255, .26));
  }

  .brand-mark,
  .void-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .brand-mark__text,
  .void-brand-mark__text {
    color: var(--void-text, #f3ecff);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .hero .hero-brand-logo + .eyebrow,
  .hero .hero-brand-logo + .hero-kicker {
    margin-top: 0;
  }

  @media (max-width: 640px) {
    :root {
      --brand-symbol-size: 26px;
    }

    .hero-brand-logo {
      margin-inline: auto;
    }
  }
}

/* ===== MODULE 15.71 — HEADER ALIGNMENT + BRAND MOTION POLISH ===== */
/* Branding/layout polish only. No Supabase, no auth JS, no roll logic, no VOID card transform ownership. */

@layer overrides {
  :root {
    --brand-header-symbol-size: 28px;
    --brand-header-gap: 9px;
    --brand-header-wordmark-height: 18px;
    --brand-logo-breathe-distance: 3px;
    --brand-logo-glow-opacity: .22;
  }

  .topbar,
  .app-header,
  header,
  [data-app-header] {
    align-items: center;
  }

  .brand,
  .logo,
  .brand-mark,
  .void-brand-mark,
  .topbar .brand,
  .app-header .brand,
  header .brand,
  header .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-header-gap);
    line-height: 1;
    min-height: 34px;
  }

  .void-brand-symbol,
  .brand-symbol,
  .brand img,
  .logo img {
    width: var(--brand-header-symbol-size);
    height: var(--brand-header-symbol-size);
    flex: 0 0 var(--brand-header-symbol-size);
    object-fit: contain;
    display: block;
    transform: translateY(0);
  }

  .brand-mark__text,
  .void-brand-mark__text,
  .brand-text,
  .logo-text,
  .brand strong,
  .logo strong {
    display: inline-flex;
    align-items: center;
    height: var(--brand-header-wordmark-height);
    line-height: var(--brand-header-wordmark-height);
    transform: translateY(1px);
  }

  .brand .pill,
  .logo .pill,
  .brand-badge,
  .void-brand-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    line-height: 1;
  }

  .hero {
    position: relative;
    isolation: isolate;
  }

  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(760px, 86vw);
    aspect-ratio: 1.8 / 1;
    left: 50%;
    top: clamp(44px, 8vw, 98px);
    transform: translateX(-50%);
    pointer-events: none;
    background:
      radial-gradient(circle at 48% 42%, rgba(123, 43, 255, .22), transparent 38%),
      radial-gradient(circle at 52% 46%, rgba(0, 243, 255, .10), transparent 46%);
    filter: blur(28px);
    opacity: var(--brand-logo-glow-opacity);
  }

  .hero-brand-logo {
    position: relative;
    animation: voidBrandBreathe 9s ease-in-out infinite;
    will-change: filter;
  }

  .hero-brand-logo::selection {
    background: transparent;
  }

  .hero-brand-logo {
    filter:
      drop-shadow(0 0 15px rgba(123, 43, 255, .22))
      drop-shadow(0 0 34px rgba(0, 243, 255, .08));
  }

  .void-brand-symbol,
  .brand-symbol {
    animation: voidSymbolPulse 7s ease-in-out infinite;
  }

  @keyframes voidBrandBreathe {
    0%, 100% {
      filter:
        drop-shadow(0 0 14px rgba(123, 43, 255, .18))
        drop-shadow(0 0 30px rgba(0, 243, 255, .06));
    }

    50% {
      filter:
        drop-shadow(0 0 22px rgba(123, 43, 255, .30))
        drop-shadow(0 0 44px rgba(0, 243, 255, .11));
    }
  }

  @keyframes voidSymbolPulse {
    0%, 100% {
      filter: drop-shadow(0 0 9px rgba(123, 43, 255, .22));
      opacity: .92;
    }

    50% {
      filter: drop-shadow(0 0 15px rgba(185, 124, 255, .34));
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-brand-logo,
    .void-brand-symbol,
    .brand-symbol {
      animation: none;
    }
  }

  @media (max-width: 640px) {
    :root {
      --brand-header-symbol-size: 24px;
      --brand-header-gap: 7px;
    }

    .hero::before {
      top: 36px;
      filter: blur(20px);
    }
  }
}