/* ── PIX3L GLOWING BORDER EFFECT ── */

/* Allow glow element to extend beyond card bounds */
.product-card,
.agent-card,
.agent-portrait,
.feature-card,
.cap-card,
.aix-card,
.principle-card {
  overflow: visible !important;
}

/* lifecycle-step cards live inside overflow-x:auto scroll containers —
   keep overflow:hidden (default) so the glow ring stays inset and never
   gets clipped at the scroll container edge */
.lifecycle-step {
  overflow: hidden;
}

/* Inner glow ring: inset 0 so it never bleeds outside the card */
.lifecycle-step .pix3l-glow,
.agent-thumb .pix3l-glow,
.agent-avatar-img .pix3l-glow,
.invoice-mockup .pix3l-glow,
.cta-box .pix3l-glow,
.step-card .pix3l-glow,
.capture-card .pix3l-glow,
.portrait-ring .pix3l-glow,
.mockup-shell .pix3l-glow {
  inset: 0;
  padding: 2px;
}

.portrait-ring .pix3l-glow { padding: 4px; }

.agent-portrait {
  border-radius: 1rem; /* matches rounded-2xl on the portrait <img> */
}

/* The glow overlay — inserted as first child via glow.js */
.pix3l-glow {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;

  /* 140-deg arc of Pix3l brand colors that tracks the cursor */
  background: conic-gradient(
    from calc(var(--glow-start, 0deg) - 10deg) at var(--glow-x, 50%) var(--glow-y, 50%),
    transparent 0deg,
    #A100FF 30deg,
    #8599FF 70deg,
    #FF1673 110deg,
    #FF1635 145deg,
    transparent 180deg,
    transparent 360deg
  );

  /* Padding = visible border ring thickness */
  padding: 3px;

  /* Mask: show ONLY the padding ring (not the content area) */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;

  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pix3l-glow.glow-visible {
  opacity: 1;
}

/* Suppress original top-stroke hover effects — replaced by glow */
.feature-card:hover::before,
.step-card:hover::before {
  opacity: 0 !important;
}

/* Reduced motion: suppress entirely */
@media (prefers-reduced-motion: reduce) {
  .pix3l-glow {
    display: none;
  }
}