/* DMS Global Button Overrides — Two-Style System
   Option 1 (Neon Glow Pulse)  → .btn-gold, .btn-blue      [primary CTAs]
   Option 3 (Border Trace)     → .btn-ghost, .btn-ghost-dark [secondary / ghost]
   Loaded after per-page <style> blocks via <link> in <head>.
   Respects prefers-reduced-motion.
*/

/* ============================================================
   POSITION CONTEXT — all buttons need relative for ::before/::after
   ============================================================ */
.btn-gold,
.btn-blue,
.btn-ghost,
.btn-ghost-dark {
  position: relative;
}

/* ============================================================
   OPTION 1 — NEON GLOW PULSE
   Applied to: .btn-gold, .btn-blue
   Animated rotating gradient border + deep glow bloom on hover
   ============================================================ */

/* --- .btn-gold --- */
.btn-gold {
  overflow: hidden;
  z-index: 0;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, background .2s ease;
}
/* rotating gradient border ring — sits behind via z-index -1 */
.btn-gold::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-md, 8px) + 3px);
  background: conic-gradient(
    from var(--angle, 0deg),
    #E5A820 0deg,
    #fff    60deg,
    #E5A820 120deg,
    #002FA7 200deg,
    #E5A820 280deg,
    #fff    340deg,
    #E5A820 360deg
  );
  z-index: -1;
  opacity: 0;
  transition: opacity .35s ease;
  animation: rotateBorder 3s linear infinite;
  animation-play-state: paused;
}
/* shimmer sweep */
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 75%,
    transparent 100%
  );
  transform: translateX(-110%) skewX(-20deg);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.btn-gold:hover::before {
  opacity: 1;
  animation-play-state: running;
}
.btn-gold:hover::after { transform: translateX(130%) skewX(-20deg); }
.btn-gold:hover {
  background: #f0b820;
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 44px rgba(229,168,32,.5),
    0 0 0 1px rgba(229,168,32,.3);
}

/* --- .btn-blue --- */
.btn-blue {
  overflow: hidden;
  z-index: 0;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.btn-blue::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-md, 8px) + 3px);
  background: conic-gradient(
    from var(--angle, 0deg),
    #002FA7 0deg,
    #B8CBE8 80deg,
    #002FA7 160deg,
    #E5A820 230deg,
    #002FA7 300deg,
    #B8CBE8 340deg,
    #002FA7 360deg
  );
  z-index: -1;
  opacity: 0;
  transition: opacity .35s ease;
  animation: rotateBorder 3s linear infinite;
  animation-play-state: paused;
}
.btn-blue::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,0) 75%,
    transparent 100%
  );
  transform: translateX(-110%) skewX(-20deg);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.btn-blue:hover::before {
  opacity: 1;
  animation-play-state: running;
}
.btn-blue:hover::after { transform: translateX(130%) skewX(-20deg); }
.btn-blue:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 44px rgba(0,47,167,.55),
    0 0 0 1px rgba(0,47,167,.3);
}

/* Conic-gradient rotation via @property if browser supports it */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBorder {
  to { --angle: 360deg; }
}
/* Fallback for browsers without @property: use transform rotate */
@supports not (background: conic-gradient(from 1deg, red, red)) {
  .btn-gold::before,
  .btn-blue::before {
    background: linear-gradient(135deg, #E5A820, #002FA7, #E5A820);
    animation: rotateBorderFallback 3s linear infinite;
    animation-play-state: paused;
  }
  @keyframes rotateBorderFallback {
    to { transform: rotate(360deg); }
  }
}

/* ============================================================
   OPTION 3 — BORDER TRACE (clockwise draw)
   Applied to: .btn-ghost, .btn-ghost-dark
   ============================================================ */

/* --- .btn-ghost (dark bg, amber gold trace) --- */
.btn-ghost {
  border: 1px solid rgba(30,48,85,.65);
  overflow: visible;
  transition: background .25s ease, border-color .25s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(#E5A820,#E5A820) top    / 0%   1.5px no-repeat,
    linear-gradient(#E5A820,#E5A820) right  / 1.5px 0%   no-repeat,
    linear-gradient(#E5A820,#E5A820) bottom / 0%   1.5px no-repeat,
    linear-gradient(#E5A820,#E5A820) left   / 1.5px 0%   no-repeat;
  opacity: 0;
  transition: opacity .3s ease;
}
.btn-ghost:hover::after {
  opacity: 1;
  animation: dmsTraceGold .62s cubic-bezier(.16,1,.3,1) forwards;
}
.btn-ghost:hover {
  background: rgba(229,168,32,.06);
  border-color: transparent;
  transform: translateY(-2px);
}

/* --- .btn-ghost-dark (light bg, klein blue trace) --- */
.btn-ghost-dark {
  border: 1px solid rgba(8,16,30,.18);
  overflow: visible;
  transition: background .25s ease, border-color .25s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost-dark::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(#002FA7,#002FA7) top    / 0%   1.5px no-repeat,
    linear-gradient(#002FA7,#002FA7) right  / 1.5px 0%   no-repeat,
    linear-gradient(#002FA7,#002FA7) bottom / 0%   1.5px no-repeat,
    linear-gradient(#002FA7,#002FA7) left   / 1.5px 0%   no-repeat;
  opacity: 0;
  transition: opacity .3s ease;
}
.btn-ghost-dark:hover::after {
  opacity: 1;
  animation: dmsTraceBlue .62s cubic-bezier(.16,1,.3,1) forwards;
}
.btn-ghost-dark:hover {
  background: rgba(0,47,167,.06);
  border-color: transparent;
  transform: translateY(-2px);
}

/* ============================================================
   TRACE KEYFRAMES — clockwise: top → right → bottom → left
   ============================================================ */
@keyframes dmsTraceGold {
  0%   { background-size: 0%   1.5px, 1.5px 0%,   0%   1.5px, 1.5px 0%;   opacity:1; }
  26%  { background-size: 100% 1.5px, 1.5px 0%,   0%   1.5px, 1.5px 0%; }
  54%  { background-size: 100% 1.5px, 1.5px 100%, 0%   1.5px, 1.5px 0%; }
  80%  { background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 0%; }
  100% { background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%; opacity:1; }
}
@keyframes dmsTraceBlue {
  0%   { background-size: 0%   1.5px, 1.5px 0%,   0%   1.5px, 1.5px 0%;   opacity:1; }
  26%  { background-size: 100% 1.5px, 1.5px 0%,   0%   1.5px, 1.5px 0%; }
  54%  { background-size: 100% 1.5px, 1.5px 100%, 0%   1.5px, 1.5px 0%; }
  80%  { background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 0%; }
  100% { background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%; opacity:1; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn-gold::before,
  .btn-blue::before { animation: none !important; }
  .btn-gold::after,
  .btn-blue::after  { display: none; }
  .btn-ghost::after,
  .btn-ghost-dark::after { animation: none !important; }
  .btn-ghost:hover::after {
    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%;
    opacity: 1;
  }
  .btn-ghost-dark:hover::after {
    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%;
    opacity: 1;
  }
  .btn-gold,
  .btn-blue,
  .btn-ghost,
  .btn-ghost-dark { transition: none; }
}
