/* border-beam.css — the BorderBeam effect, applied site-wide.
   A beam of light travels around the border of every card / panel on the site.
   Technique: a conic-gradient ring on ::before, masked so only the border ring shows,
   pointer-events: none. Pure CSS, no JS. Stops under prefers-reduced-motion.
   Excluded on purpose: elements that already use ::before/::after for their own artwork
   (.hero-visual, .node), small controls (buttons, pills, chips, tabs), and divider-only
   elements (table-like rows and cells whose "border" is a separator line). */
@property --bb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes bb-rotate { to { --bb-angle: 360deg; } }

/* ---- The reusable BorderBeamCard component (from the original demo) ---- */
.bb-card{position:relative;border-radius:12px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.bb-card-header{padding:24px 24px 0;display:flex;flex-direction:column;gap:6px}
.bb-card-title{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.bb-card-desc{font-size:14px;line-height:1.55;color:#6e6e73}
.bb-card-content{padding:24px}
.bb-card-header+.bb-card-content{padding-top:16px}

/* ---- Site-wide beam targets ---- */
.bb-card,
.feature, .engine-card, .visual-main, .visual-card, .node-detail,
.project-card, .case-story, .article-card, .newsletter-card, .quote-card,
.engagement, .product-card, .a-card, .about-copy, .contact-form,
.principles, .facts, .lab-panel, .mail-card, .future-panel, .toolkit-panel,
.process-strip, .lab-grid, .vote-opt, .hero-form, .newsletter-field,
.legal-panel, .chat-panel, .fc-rights,
.pf-panel,
.tcard, a.card, .card, .tweet-card, .game-card, .edge-card, .acct-card,
.vcard, .pcard, .tier, .prow, .rrow, .promo,
.panel, .note, .err, .pm-page .stat { position: relative; }

.bb-card::before, .bb-card::after,
.feature::before, .engine-card::before, .visual-main::before, .visual-card::before, .node-detail::before,
.project-card::before, .case-story::before, .article-card::before, .newsletter-card::before, .quote-card::before,
.engagement::before, .product-card::before, .a-card::before, .about-copy::before, .contact-form::before,
.principles::before, .facts::before, .lab-panel::before, .mail-card::before, .future-panel::before, .toolkit-panel::before,
.process-strip::before, .lab-grid::before, .vote-opt::before, .hero-form::before, .newsletter-field::before,
.legal-panel::before, .chat-panel::before, .fc-rights::before,
.pf-panel::before,
.tcard::before, a.card::before, .card::before, .tweet-card::before,
.vcard::before, .pcard::before, .tier::before, .prow::before, .rrow::before, .promo::before,
.panel::before, .note::before, .err::before, .pm-page .stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--bb-angle), transparent 0 62%, #ffaa40 82%, #9c40ff 94%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none; animation: bb-rotate 6s linear infinite;
}
/* Soft glow layer — only on the standalone component card, not on every site card (perf). */
.bb-card::after { filter: blur(7px); opacity: .55; }

/* Color variants (component utilities, from the demo) */
.bb-colorful::before, .bb-colorful::after { background: conic-gradient(from var(--bb-angle), transparent 0 52%, #f43f5e 66%, #f59e0b 75%, #10b981 83%, #3b82f6 91%, #8b5cf6 97%, transparent 100%); }
.bb-mono::before, .bb-mono::after { background: conic-gradient(from var(--bb-angle), transparent 0 62%, #d4d4d8 82%, #71717a 94%, transparent 100%); }
.bb-ocean::before, .bb-ocean::after { background: conic-gradient(from var(--bb-angle), transparent 0 62%, #38bdf8 82%, #0071e3 94%, transparent 100%); }
.bb-sunset::before, .bb-sunset::after { background: conic-gradient(from var(--bb-angle), transparent 0 60%, #fb923c 79%, #ec4899 89%, #8b5cf6 96%, transparent 100%); }

@media (prefers-reduced-motion: reduce) {
  .bb-card::before, .bb-card::after,
  .feature::before, .engine-card::before, .visual-main::before, .visual-card::before, .node-detail::before,
  .project-card::before, .case-story::before, .article-card::before, .newsletter-card::before, .quote-card::before,
  .engagement::before, .product-card::before, .a-card::before, .about-copy::before, .contact-form::before,
  .principles::before, .facts::before, .lab-panel::before, .mail-card::before, .future-panel::before, .toolkit-panel::before,
  .process-strip::before, .lab-grid::before, .vote-opt::before, .hero-form::before, .newsletter-field::before,
  .legal-panel::before, .chat-panel::before, .fc-rights::before, .pf-panel::before,
  .tcard::before, a.card::before, .card::before, .tweet-card::before,
  .vcard::before, .pcard::before, .tier::before, .prow::before, .rrow::before, .promo::before,
  .panel::before, .note::before, .err::before, .pm-page .stat::before { animation: none; }
}