/* ═════════════════════════════════════════════════════════════
   Prepper Gurukul — Animated Conic-Gradient Border System
   v1.1 · Vibrant triad: sky / purple / green
   ═════════════════════════════════════════════════════════════ */

@property --pg-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes pg-conic-spin {
  to { --pg-angle: 360deg; }
}

/* ──────────────────────────────────────────────────────────
   BUTTON VARIANT (.pg-conic)
   Full conic wheel — sky / purple / green / purple / sky
   ────────────────────────────────────────────────────────── */
.pg-conic {
  position: relative !important;
  isolation: isolate;
  z-index: 0;
}

.pg-conic::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(
    from var(--pg-angle, 0deg),
    #5CC8FF 0deg,
    #775CFF 120deg,
    #5CFF92 240deg,
    #5CC8FF 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: pg-conic-spin 4s linear infinite;
  pointer-events: none;
}

.pg-conic:hover::before {
  animation-duration: 2s;
}

/* ──────────────────────────────────────────────────────────
   CARD VARIANT (.pg-conic-card)
   Soft comet arc — sky → purple → green tail
   ────────────────────────────────────────────────────────── */
.pg-conic-card {
  position: relative !important;
  isolation: isolate;
}

.pg-conic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(
    from var(--pg-angle, 0deg),
    transparent 0deg,
    transparent 200deg,
    rgba(92, 200, 255, 0.7) 260deg,
    rgba(119, 92, 255, 0.65) 310deg,
    rgba(92, 255, 146, 0.6) 350deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: pg-conic-spin 6s linear infinite;
  z-index: 10;
}

.pg-conic-card:hover::after {
  animation-duration: 3s;
  background: conic-gradient(
    from var(--pg-angle, 0deg),
    transparent 0deg,
    transparent 180deg,
    rgba(92, 200, 255, 0.9) 250deg,
    rgba(119, 92, 255, 0.85) 300deg,
    rgba(92, 255, 146, 0.8) 340deg,
    transparent 360deg
  );
}

/* ──────────────────────────────────────────────────────────
   Accessibility — respect motion preferences
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pg-conic::before,
  .pg-conic-card::after {
    animation: none;
  }
}

@supports not (background: conic-gradient(from 0deg, red)) {
  .pg-conic::before,
  .pg-conic-card::after {
    display: none;
  }
}