/* MR conic rotating border + glow polish — ITER 289 (BS-paralel)
   ─────────────────────────────────────────────────────────────────
   Visual polish primitives ported from BS bundle (custom.css, qaRotate
   keyframe + navTextGlow + isometric tilt).

   1) .bs-conic-border — rotating gradient border ring
   2) .bs-text-glow    — pulsing text glow (active nav link)
   3) .bs-tilt-tap     — isometric tilt on :active (touch feedback)

   Browser: requires CSS Houdini @property for .bs-conic-border angle var.
   Fallback: static gradient border (no rotation) on browsers without Houdini.

   Tokens:
     --bs-glow-color: var(--theme-accent, #d4af37)
     --bs-glow-radius: 12px
     --bs-conic-thickness: 2px
     --bs-conic-duration: 3s
     --bs-tilt-deg: 4deg
     --bs-tilt-duration: 180ms
*/

:root {
  --bs-glow-color: var(--theme-accent, #d4af37);
  --bs-glow-radius: 12px;
  --bs-conic-thickness: 2px;
  --bs-conic-duration: 3s;
  --bs-tilt-deg: 4deg;
  --bs-tilt-duration: 180ms;
}

/* ============================================================
   1. Conic rotating gradient border (Houdini)
   ============================================================
   Markup:
     <div class="bs-conic-border">
       <div class="bs-conic-border-inner">content</div>
     </div>

   Use cases: hot jackpot pool, featured promo card, active provider chip
*/

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

.bs-conic-border {
  position: relative;
  border-radius: 14px;
  background:
    conic-gradient(
      from var(--bs-conic-angle, 0deg),
      var(--bs-glow-color) 0%,
      transparent 25%,
      var(--bs-glow-color) 50%,
      transparent 75%,
      var(--bs-glow-color) 100%
    );
  padding: var(--bs-conic-thickness);
  animation: bsConicRotate var(--bs-conic-duration) linear infinite;
  isolation: isolate;
}

.bs-conic-border-inner {
  position: relative;
  border-radius: calc(14px - var(--bs-conic-thickness));
  background: var(--theme-bg-primary, #0a0d12);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

@keyframes bsConicRotate {
  from { --bs-conic-angle: 0deg; }
  to   { --bs-conic-angle: 360deg; }
}

/* Variant — subtle (less intense gradient stops) */
.bs-conic-border--subtle {
  background:
    conic-gradient(
      from var(--bs-conic-angle, 0deg),
      var(--bs-glow-color) 0%,
      rgba(212, 175, 55, 0.2) 30%,
      var(--bs-glow-color) 60%,
      rgba(212, 175, 55, 0.2) 90%,
      var(--bs-glow-color) 100%
    );
}

/* Variant — slow (longer rotation duration) */
.bs-conic-border--slow {
  --bs-conic-duration: 6s;
}

/* Fallback for browsers without @property — static bordered look */
@supports not (background: paint(something)) {
  .bs-conic-border {
    animation: none;
    background:
      linear-gradient(135deg, var(--bs-glow-color), transparent 50%, var(--bs-glow-color));
  }
}

/* ============================================================
   2. Text glow (pulsing breath animation)
   ============================================================
   Markup:
     <a class="nav-link bs-text-glow">Home</a>

   Use on active nav item, featured badge label.
*/

.bs-text-glow {
  position: relative;
  text-shadow: 0 0 var(--bs-glow-radius) rgba(212, 175, 55, 0.6);
  animation: bsTextGlow 2.4s ease-in-out infinite alternate;
}

@keyframes bsTextGlow {
  0%   { text-shadow: 0 0 4px rgba(212, 175, 55, 0.35); }
  100% { text-shadow: 0 0 14px rgba(212, 175, 55, 0.85); }
}

/* Underline breath variant — combine with text glow on active nav */
.bs-nav-underline-glow {
  position: relative;
}
.bs-nav-underline-glow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  border-radius: 2px;
  background: var(--bs-glow-color);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.85);
  animation: bsUnderlineGlow 2.4s ease-in-out infinite alternate;
}

@keyframes bsUnderlineGlow {
  0%   { opacity: 0.65; box-shadow: 0 0 4px rgba(212, 175, 55, 0.4); }
  100% { opacity: 1.0;  box-shadow: 0 0 12px rgba(212, 175, 55, 0.9); }
}

/* ============================================================
   3. Isometric tap tilt (perspective rotateY/X on :active)
   ============================================================
   Markup:
     <button class="bs-tilt-tap">Tap me</button>
     <button class="bs-tilt-tap bs-tilt-tap--right">Alt direction</button>

   Used on game cards, promo buttons for tap feedback.
   Applies a brief 3D rotation on touch + scale-down for haptic feel.
*/

.bs-tilt-tap {
  perspective: 600px;
  transition: transform var(--bs-tilt-duration) ease-out;
  will-change: transform;
}

.bs-tilt-tap:active {
  transform: scale(0.97) rotateY(var(--bs-tilt-deg)) rotateX(calc(var(--bs-tilt-deg) * -0.5));
}

.bs-tilt-tap--right:active {
  transform: scale(0.97) rotateY(calc(var(--bs-tilt-deg) * -1)) rotateX(calc(var(--bs-tilt-deg) * -0.5));
}

/* Alternating tilt for sibling rows (odd/even tiles) */
.bs-tilt-row > *:nth-child(odd).bs-tilt-tap:active {
  transform: scale(0.97) rotateY(var(--bs-tilt-deg)) rotateX(calc(var(--bs-tilt-deg) * -0.5));
}
.bs-tilt-row > *:nth-child(even).bs-tilt-tap:active {
  transform: scale(0.97) rotateY(calc(var(--bs-tilt-deg) * -1)) rotateX(calc(var(--bs-tilt-deg) * -0.5));
}

/* ============================================================
   Reduced motion — disable all glow + rotation
   ============================================================
*/
@media (prefers-reduced-motion: reduce) {
  .bs-conic-border,
  .bs-text-glow,
  .bs-nav-underline-glow::after {
    animation: none !important;
  }
  .bs-tilt-tap:active,
  .bs-tilt-tap--right:active {
    transform: scale(0.97);
  }
}