/* ============================================================
   Beekix Button Effects
   Two animations ported from the Beekix Firefox Extension:

   1. Icon Slide In — color fills from left + arrow → appears on hover
      AUTO-APPLIES to all .btn and .submit-btn elements.

   2. Comet Trail Border — rotating light traces the button perimeter
      Apply via .conic-border class on specific featured buttons.

   Customize via CSS custom properties:
     --slide-speed      Slide-in duration           (default: 0.4s)
     --conic-color      Comet trail accent color    (default: #354996)
     --conic-fill       Comet button fill color     (default: var(--primary))
   ============================================================ */

/* ── @property for animatable conic angle ── */
@property --conic-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

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

/* ============================================================
   ICON SLIDE IN — All .btn and .submit-btn
   ::before = color fill (slides left → right)
   ::after  = arrow → (expands on hover)
   ============================================================ */

/* ── Shared base (stacking context for pseudo-elements) ── */
.btn,
.submit-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* ── Color fill slides in from left ── */
.btn::before,
.submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  transition: transform var(--slide-speed, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* ── Arrow → slides in on hover ── */
.btn::after,
.submit-btn::after {
  content: '\2192';
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              margin-left 0.35s ease;
}

/* ── Hover / focus-visible: slide fill in + reveal arrow ── */
.btn:hover:not(:disabled)::before,
.btn:focus-visible:not(:disabled)::before,
.submit-btn:hover:not(:disabled)::before,
.submit-btn:focus-visible:not(:disabled)::before {
  transform: translateX(0);
}

.btn:hover:not(:disabled)::after,
.btn:focus-visible:not(:disabled)::after,
.submit-btn:hover:not(:disabled)::after,
.submit-btn:focus-visible:not(:disabled)::after {
  max-width: 1.2em;
  opacity: 1;
  margin-left: 8px;
}

/* ============================================================
   BUTTON VARIANT COLORS
   ::before background = slide-in fill color
   Hover text / border colors per variant
   ============================================================ */

/* ── Primary (purple → darker purple slide) ── */
.btn-primary::before {
  background: var(--primary-dark, #2c418e);
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible:not(:disabled) {
  border-color: var(--primary-dark, #2c418e);
}

/* ── Outline (transparent → purple slide, text → white) ── */
.btn-outline::before {
  background: var(--primary, #354996);
}

.btn-outline:hover:not(:disabled),
.btn-outline:focus-visible:not(:disabled) {
  color: #ffffff;
  border-color: var(--primary, #354996);
}

/* ── Success (green → darker green slide) ── */
.btn-success::before {
  background: #00a383;
}

/* ── Danger (red → darker red slide) ── */
.btn-danger::before {
  background: #d63031;
}

/* ── Submit button (white bg → purple slide, text → white) ── */
.submit-btn {
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s ease;
}

.submit-btn::before {
  background: var(--primary, #354996);
}

.submit-btn:hover:not(:disabled),
.submit-btn:focus-visible:not(:disabled) {
  color: #ffffff;
  border-color: var(--primary, #354996);
}

/* ── Default .btn without a variant class ── */
.btn:not(.btn-primary):not(.btn-outline):not(.btn-success):not(.btn-danger)::before {
  background: var(--primary, #354996);
}

.btn:not(.btn-primary):not(.btn-outline):not(.btn-success):not(.btn-danger):hover:not(:disabled),
.btn:not(.btn-primary):not(.btn-outline):not(.btn-success):not(.btn-danger):focus-visible:not(:disabled) {
  color: #ffffff;
}

/* ============================================================
   COMET TRAIL BORDER — .conic-border class
   Rotating comet-like light traces the button perimeter.
   Uses background-clip: padding-box / border-box technique.
   Combine with any .btn variant (e.g. .btn.btn-primary.conic-border)
   ============================================================ */

/* ── Primary / filled buttons: white comet on purple ── */
.conic-border {
  border: 2px solid transparent;
  background:
    linear-gradient(
      var(--conic-fill, var(--primary, #354996)),
      var(--conic-fill, var(--primary, #354996))
    ) padding-box,
    conic-gradient(
      from var(--conic-angle, 0deg),
      transparent 0%,
      transparent 60%,
      rgba(255, 255, 255, 0.1) 72%,
      rgba(255, 255, 255, 0.5) 85%,
      #ffffff 94%,
      transparent 100%
    ) border-box;
  animation: conic-spin 3s linear infinite;
}

/* ── Outline / light-bg buttons: purple comet on white ── */
.conic-border.btn-outline,
.conic-border.submit-btn {
  background:
    linear-gradient(
      var(--conic-fill, var(--bg-white, #ffffff)),
      var(--conic-fill, var(--bg-white, #ffffff))
    ) padding-box,
    conic-gradient(
      from var(--conic-angle, 0deg),
      transparent 0%,
      transparent 60%,
      rgba(53, 73, 150, 0.06) 72%,
      rgba(53, 73, 150, 0.35) 85%,
      var(--conic-color, #354996) 94%,
      transparent 100%
    ) border-box;
}

/* ── Hover: pause comet + solid border ── */
.conic-border:hover:not(:disabled) {
  animation-play-state: paused;
}

.conic-border.btn-primary:hover:not(:disabled),
.conic-border.btn-success:hover:not(:disabled),
.conic-border.btn-danger:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
}

.conic-border.btn-outline:hover:not(:disabled),
.conic-border.submit-btn:hover:not(:disabled) {
  border-color: var(--primary, #354996);
}

/* ── Disabled: freeze comet ── */
.conic-border:disabled {
  animation-play-state: paused;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] .conic-border.btn-outline {
  background:
    linear-gradient(#1e1e3a, #1e1e3a) padding-box,
    conic-gradient(
      from var(--conic-angle, 0deg),
      transparent 0%,
      transparent 60%,
      rgba(53, 73, 150, 0.06) 72%,
      rgba(53, 73, 150, 0.35) 85%,
      var(--conic-color, #354996) 94%,
      transparent 100%
    ) border-box;
}

/* ============================================================
   ACCESSIBILITY — Reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .conic-border {
    animation: none;
    border-color: var(--primary, #354996);
  }
  .btn::before,
  .submit-btn::before {
    transition-duration: 0s;
  }
  .btn::after,
  .submit-btn::after {
    transition-duration: 0s;
  }
}