/* ════════════════════════════════════════════════════════════════════
   Nira logo — official identity styles

   Source of truth: static/brand/reference/nira-logo-snippet.html (canonical
   HTML+CSS drop-in) and static/brand/reference/Nira-Logo-Hero-REFERENCE.html
   (hero-scale tweak defaults locked 2026-04-22).

   Hero defaults (per Ian's Nira-Logo-Hero-REFERENCE.html TWEAK_DEFAULTS):
     orb_size:         94px
     wordmark_size:    56px
     lockup_gap:        5px
     spin_speed:      6.5s
     halo_intensity:   0.9
     ring_thickness:  10px
     wordmark_tracking: -0.065em
     wordmark_style:   light

   Sized via three CSS variables: --nira-orb / --nira-word / --nira-gap
   on the outer .nira-logo element. See handoff README for nav vs. hero
   vs. favicon sizing ratios. --nira-spin is also exposed so hero-scale
   renderings can slow the ring if desired.

   V1 = static sparkle (all pages except onboarding).
   V2 = business-icon cycling stack (onboarding.html only, driven by
   static/nira-logo.js). The V2 block at the bottom of this file
   preserves the icon-stack styles for that one page.
   ════════════════════════════════════════════════════════════════════ */

.nira-logo {
  --nira-orb: 56px;
  --nira-word: 40px;
  --nira-gap: 14px;
  --nira-halo: calc(var(--nira-orb) * 0.14);
  --nira-ring: calc(var(--nira-orb) * 0.12);
  --nira-spin: 6.5s;
  --nira-grad: linear-gradient(120deg, #6C63FF 0%, #A855F7 50%, #EC4899 100%);

  display: inline-flex;
  align-items: center;
  gap: var(--nira-gap);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1;
}
.nira-logo.stacked { flex-direction: column; }

.nira-logo .orb {
  width: var(--nira-orb);
  height: var(--nira-orb);
  position: relative;
  flex-shrink: 0;
}
.nira-logo .orb > .halo {
  position: absolute;
  inset: calc(var(--nira-halo) * -1);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(168,85,247,0.45) 0%,
    rgba(236,72,153,0.25) 40%,
    transparent 70%
  );
  filter: blur(calc(var(--nira-halo) * 1.5));
  opacity: 0.9;
  z-index: 0;
  animation: nira-pulse 3.5s ease-in-out infinite;
}
.nira-logo .orb > .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #6C63FF 0deg,
    #A855F7 90deg,
    #EC4899 180deg,
    #A855F7 270deg,
    #6C63FF 360deg
  );
  filter: blur(4px);
  animation: nira-spin var(--nira-spin) linear infinite;
  z-index: 1;
}
.nira-logo .orb > .ring::after {
  content: "";
  position: absolute;
  inset: var(--nira-ring);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #1A1D2B 0%, #0B0D13 85%);
}
.nira-logo .orb > .spark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.nira-logo .orb > .spark svg {
  width: 44%;
  height: 44%;
  filter: drop-shadow(0 0 12px rgba(168,85,247,0.6));
  animation: nira-float 5s ease-in-out infinite;
}

.nira-logo .wordmark {
  font-size: var(--nira-word);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.9;
  background: linear-gradient(120deg, #F1F5F9 0%, #C7D2FE 50%, #F1F5F9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nira-logo .wordmark.gradient {
  background: var(--nira-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.nira-logo .wordmark .dot {
  display: inline-block;
  width: calc(var(--nira-word) * 0.11);
  height: calc(var(--nira-word) * 0.11);
  border-radius: 50%;
  background: var(--nira-grad);
  margin-left: calc(var(--nira-word) * 0.045);
  vertical-align: baseline;
  box-shadow: 0 0 16px rgba(236,72,153,0.6);
}

@keyframes nira-spin  { to { transform: rotate(360deg); } }
@keyframes nira-pulse { 0%,100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.54; transform: scale(1.08); } }
@keyframes nira-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(0,-4%) scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  .nira-logo .orb > .halo,
  .nira-logo .orb > .ring,
  .nira-logo .orb > .spark svg { animation: none; }
  .nira-logo .orb > .core .icon-stack svg { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   V2 — business-icon cycling stack (onboarding.html only)

   Driven by static/nira-logo.js. Uses a `.core` wrapper around an
   `.icon-stack` that holds multiple SVG icons, one of which is
   marked `.active` at a time. Transitions rotate in 3D as the active
   icon changes.

   Not part of the canonical v1 snippet; preserved here because
   onboarding.html depends on it. If V2 is ever retired, delete this
   block AND static/nira-logo.js AND the markup inside onboarding.html.
   ════════════════════════════════════════════════════════════════════ */
.nira-logo .orb > .core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  perspective: 600px;
}
.nira-logo .orb > .core .icon-stack {
  position: relative;
  width: 50%;
  height: 50%;
  transform-style: preserve-3d;
}
.nira-logo .orb > .core .icon-stack svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
  opacity: 0;
  transform: rotateY(90deg) scale(0.85);
  transition: opacity .22s ease-out, transform .45s cubic-bezier(.6,.1,.3,1);
  backface-visibility: hidden;
  pointer-events: none;
}
.nira-logo .orb > .core .icon-stack svg.active {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
  transition: opacity .3s ease-in .15s, transform .5s cubic-bezier(.6,.1,.3,1) .1s;
}
.nira-logo .orb > .core .icon-stack svg.exiting {
  opacity: 0;
  transform: rotateY(-90deg) scale(0.85);
  transition: opacity .18s ease-out, transform .4s cubic-bezier(.6,.1,.3,1);
}