/* MR conic + glow polish — automatic bindings — ITER 289 (BS-paralel)
   ─────────────────────────────────────────────────────────────────
   components-glow.css defines reusable primitives (.bs-conic-border,
   .bs-text-glow, .bs-tilt-tap). This file applies them to live MR
   elements WITHOUT requiring markup changes.

   Strategy: opt-IN via existing class names that already mark the element
   as a polish target (e.g., active nav link, main jackpot tier). Polish
   is subtle by default and respects prefers-reduced-motion via the
   primitives' own media-query bypass.

   1) Active mobile nav link → text glow + underline breath
   2) Main jackpot tier (.jackpotPoolItem inside main pool) → conic ring
   3) Game cards (.game-item, .game-card, .gameCard) → tap tilt (touch only)
   4) Featured promo card (.promo-card.is-featured) → conic ring + glow

   Opt-out: any element with [data-no-glow]

   ITER 289 drift fix (2026-05-12, mirrors ITER 388 gesture-bindings):
     Original selector list only matched `.game-card / .gameCard` (BS naming).
     Live MR uses `.game-item` (homepage 22 cards via frontend-astro/src/
     components/GameCard.astro `<div class="game-item">`). Selector list
     extended to include `.game-item` so tap-tilt feedback fires on the
     actual rendered class. Verified pre-fix: 22 .game-item / 0 affected;
     post-fix: 22 .game-item / 22 affected.

     Note: sections 1 (nav glow), 2 (jackpot conic), 4 (featured promo) target
     class names (.mobileBottomNav, .jackpotPoolWrapper, .promo-card) that
     currently match 0 elements on live MR homepage — those bindings remain
     inert by design until those page components ship. Audit: 2026-05-12.
*/

/* ── 1. Active mobile nav link — text glow on .is-active ──────────── */
body.mobile-site .mobileBottomNav .nav-item.is-active .nav-label:not([data-no-glow]),
body.mobile-site .mobile-nav-link.is-active:not([data-no-glow]),
body.mobile-site .nav-link.active:not([data-no-glow]) {
  position: relative;
  text-shadow: 0 0 var(--bs-glow-radius, 12px) rgba(212, 175, 55, 0.6);
  animation: bsTextGlow 2.4s ease-in-out infinite alternate;
}

/* ── 2. Main jackpot tier — conic ring around .jackpotPoolItem ────── */
body.mobile-site
  .jackpotPoolWrapper.inJackpotPage:not(.isSmallJackpotPools)
  > .jackpotPoolItem:not([data-no-glow]) {
  position: relative;
  isolation: isolate;
  border-radius: 14px;
  padding: var(--bs-conic-thickness, 2px);
}

body.mobile-site
  .jackpotPoolWrapper.inJackpotPage:not(.isSmallJackpotPools)
  > .jackpotPoolItem:not([data-no-glow])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--bs-conic-angle, 0deg),
      var(--bs-glow-color, #d4af37) 0%,
      transparent 25%,
      var(--bs-glow-color, #d4af37) 50%,
      transparent 75%,
      var(--bs-glow-color, #d4af37) 100%
    );
  animation: bsConicRotate var(--bs-conic-duration, 3s) linear infinite;
  opacity: 0.85;
  pointer-events: none;
}

/* ── 3. Game card — isometric tap tilt feedback only (no static change) ──
   ITER 289 drift fix: .game-item added (MR canonical, see header)
   ITER 504 (2026-05-15): will-change kaldırıldı. Persistent GPU layer
   per card (×120 on slot page) bitmap eviction → re-decode jank yapıyordu.
   180ms scale transform için browser default paint pipeline yeterli. */
body.mobile-site .game-item:not([data-no-glow]),
body.mobile-site .game-card:not([data-no-glow]),
body.mobile-site .gameCard:not([data-no-glow]) {
  perspective: 600px;
  transition: transform var(--bs-tilt-duration, 180ms) ease-out;
}

body.mobile-site .game-item:not([data-no-glow]):active,
body.mobile-site .game-card:not([data-no-glow]):active,
body.mobile-site .gameCard:not([data-no-glow]):active {
  transform: scale(0.97) rotateY(var(--bs-tilt-deg, 4deg)) rotateX(calc(var(--bs-tilt-deg, 4deg) * -0.5));
}

/* Alternating tilt direction for visual variety (odd/even tiles) */
body.mobile-site .game-grid > *:nth-child(even) .game-item:not([data-no-glow]):active,
body.mobile-site .game-grid > *:nth-child(even) .game-card:not([data-no-glow]):active,
body.mobile-site .game-grid > *:nth-child(even) .gameCard:not([data-no-glow]):active {
  transform: scale(0.97) rotateY(calc(var(--bs-tilt-deg, 4deg) * -1)) rotateX(calc(var(--bs-tilt-deg, 4deg) * -0.5));
}

/* ── 4. Featured promo card — conic ring + glow text ─────────────── */
body.mobile-site .promo-card.is-featured:not([data-no-glow]),
body.mobile-site .promo-card[data-featured="1"]:not([data-no-glow]) {
  position: relative;
  isolation: isolate;
}

body.mobile-site .promo-card.is-featured:not([data-no-glow])::before,
body.mobile-site .promo-card[data-featured="1"]:not([data-no-glow])::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--bs-conic-angle, 0deg),
      var(--bs-glow-color, #d4af37) 0%,
      rgba(212, 175, 55, 0.2) 30%,
      var(--bs-glow-color, #d4af37) 60%,
      rgba(212, 175, 55, 0.2) 90%,
      var(--bs-glow-color, #d4af37) 100%
    );
  animation: bsConicRotate var(--bs-conic-duration, 6s) linear infinite;
  opacity: 0.6;
  pointer-events: none;
}

body.mobile-site .promo-card.is-featured:not([data-no-glow]) .promo-title,
body.mobile-site .promo-card[data-featured="1"]:not([data-no-glow]) .promo-title {
  text-shadow: 0 0 var(--bs-glow-radius, 12px) rgba(212, 175, 55, 0.45);
  animation: bsTextGlow 3.2s ease-in-out infinite alternate;
}

/* ── Reduced motion — bypass conic + glow + tilt (via primitives @keyframes) ──
   The primitives' own @media(prefers-reduced-motion) block doesn't reach these
   pseudo-element rules, so duplicate the bypass here. */
@media (prefers-reduced-motion: reduce) {
  body.mobile-site
    .jackpotPoolWrapper.inJackpotPage:not(.isSmallJackpotPools)
    > .jackpotPoolItem:not([data-no-glow])::before,
  body.mobile-site .promo-card.is-featured:not([data-no-glow])::before,
  body.mobile-site .promo-card[data-featured="1"]:not([data-no-glow])::before {
    animation: none !important;
  }
  body.mobile-site .mobileBottomNav .nav-item.is-active .nav-label:not([data-no-glow]),
  body.mobile-site .mobile-nav-link.is-active:not([data-no-glow]),
  body.mobile-site .nav-link.active:not([data-no-glow]),
  body.mobile-site .promo-card.is-featured:not([data-no-glow]) .promo-title,
  body.mobile-site .promo-card[data-featured="1"]:not([data-no-glow]) .promo-title {
    animation: none !important;
    text-shadow: none !important;
  }
  body.mobile-site .game-item:not([data-no-glow]):active,
  body.mobile-site .game-card:not([data-no-glow]):active,
  body.mobile-site .gameCard:not([data-no-glow]):active,
  body.mobile-site .game-grid > *:nth-child(even) .game-item:not([data-no-glow]):active,
  body.mobile-site .game-grid > *:nth-child(even) .game-card:not([data-no-glow]):active,
  body.mobile-site .game-grid > *:nth-child(even) .gameCard:not([data-no-glow]):active {
    transform: scale(0.97);
  }
}