/* =====================================================================
   bnl-genie-tier.css — v1.0
   The Light Genie tier panel. Shared component — used by:
     /install-brighter/#start   .bnl-genie--t2  and  .bnl-genie--t3
     /stock-brighter/apply/      .bnl-genie--t1

   Tier accents and art are NOT invented here. Both come from
   genie-dock-test.html TIERS[]:
     t0 homeowner    #2E8BFB   genie-homeowner-full.webp
     t1 distributor  #FC7013   genie-distributor-full.webp
     t2 contractor   #8220F7   genie-contractor-full.webp
     t3 master       #A731FB   genie-master-full.webp

   ⚠️ These are the Genie's own palette, not tokens.css. That is a
   deliberate separation — Canon §2.2 keeps UI chrome near-monochrome and
   lets saturated colour come from the light itself, and the Genie is
   light. But #FC7013 sits one hair off --color-orange #FA6A1E, which
   reads as a mistake rather than a choice. Resolve before publish.

   DEPENDS ON: tokens.css -> bnl-components.css
   LOAD ORDER: tokens.css -> bnl-components.css -> this -> page overrides
   WORDPRESS: enqueue, never <link>.

   ⚠️ Art is referenced by path. Never base64 into markup (Canon §1 / BRI-271).
===================================================================== */

.bnl-genie {
  --genie-accent: var(--color-primary);
  --genie-glow: rgba(0, 169, 181, .5);
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--space-ml);
  padding: var(--space-md) var(--space-ml) var(--space-ml);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  background: rgba(0, 0, 0, .35);
}

/* ---- tiers ---- */
.bnl-genie--t1 { --genie-accent: #FC7013; --genie-glow: rgba(252,112,19,.5); }
.bnl-genie--t2 { --genie-accent: #8220F7; --genie-glow: rgba(130,32,247,.5); }
.bnl-genie--t3 { --genie-accent: #A731FB; --genie-glow: rgba(167,49,251,.55); }

/* ---- head ---- */
.bnl-genie__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-sm);
}
.bnl-genie__lamp {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--genie-accent);
  box-shadow: 0 0 12px 2px var(--genie-glow);
}
.bnl-genie__tier {
  font-family: var(--font-heading-proposed);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.bnl-genie__tier b { color: var(--genie-accent); }

/* ---- body ---- */
.bnl-genie__t {
  font-family: var(--font-heading-proposed);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.025em;
  margin: 0 0 6px;
}
.bnl-genie__d {
  margin: 0 0 var(--space-md);
  font-size: 13px;
  color: var(--color-text-muted);
}
.bnl-genie__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 7px;
}
.bnl-genie__list li {
  position: relative;
  padding-left: 17px;
  font-size: 13px;
  color: var(--color-text);
}
.bnl-genie__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--genie-accent);
  box-shadow: 0 0 7px 1px var(--genie-glow);
}

/* ---- t3 is the premium tier, and the bullets say so ----
   Every other tier gets one colour. The Master tier gets the whole
   spectrum in each point, lit. It is the only place on either page
   where the full palette lands on something this small, which is the
   point — you notice it before you have read a word of the list. */
.bnl-genie--t3 .bnl-genie__list li::before {
  width: 8px; height: 8px;
  top: 6.5px;
  left: -2px;
  background: conic-gradient(from 210deg,
    #00A9B5 0%, #8FE3E9 18%, #FFFFFF 30%, #FF74AE 46%,
    #E3056B 62%, #A731FB 80%, #00A9B5 100%);
  box-shadow:
    0 0 8px 2px rgba(167, 49, 251, .75),
    0 0 18px 5px rgba(227, 5, 107, .40),
    0 0 30px 9px rgba(0, 169, 181, .22);
}
.bnl-genie--t3 .bnl-genie__list li { padding-left: 20px; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes bnl-genie-bullet-spin { to { transform: rotate(360deg); } }
  .bnl-genie--t3 .bnl-genie__list li::before {
    animation: bnl-genie-bullet-spin 6s linear infinite;
  }
  /* stagger so the row does not pulse as one block */
  .bnl-genie--t3 .bnl-genie__list li:nth-child(2n)::before { animation-duration: 7.4s; }
  .bnl-genie--t3 .bnl-genie__list li:nth-child(3n)::before { animation-duration: 8.6s; }
}
.bnl-genie__soon {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* ---- the art ----
   The genie stands in the panel, not on it — cropped by the panel edge,
   dimmed enough that the capability list stays the thing you read. */
.bnl-genie__art {
  position: absolute;
  right: -18px;
  bottom: -26px;
  height: 210px;
  width: auto;
  opacity: .82;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 22px var(--genie-glow));
}
.bnl-genie--art .bnl-genie__t,
.bnl-genie--art .bnl-genie__d,
.bnl-genie--art .bnl-genie__list,
.bnl-genie--art .bnl-genie__soon {
  position: relative;
  z-index: 1;
  padding-right: 96px;
}

@media (max-width: 560px) {
  .bnl-genie__art { height: 150px; right: -26px; opacity: .55; }
  .bnl-genie--art .bnl-genie__t,
  .bnl-genie--art .bnl-genie__d,
  .bnl-genie--art .bnl-genie__list,
  .bnl-genie--art .bnl-genie__soon { padding-right: 62px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bnl-genie-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
  }
  .bnl-genie__art { animation: bnl-genie-float 7s ease-in-out infinite; }
  /* stagger so two panels on one page never bob in sync */
  .bnl-genie--t3 .bnl-genie__art { animation-duration: 8.4s; }
  .bnl-genie--t1 .bnl-genie__art { animation-duration: 7.8s; }
}