/* ============================================================================
 * slot-card-bs-open-anim.css
 *
 * BS-exact (bahissende302.com) game-card tap-open animation — 4 parallel
 * keyframes copied 1:1 from live BS index.7tkrlqxF.css.
 *
 * Ground truth (BS source):
 *   --slow-transition-duration: .4s;
 *
 *   @keyframes casino-game-layer            { 0:opacity:0;pointer-events:none → to:opacity:1;pointer-events:auto;backdrop-filter:blur(2px);background:#00000080 }
 *   @keyframes casino-game-layer-label      { 0:filter:blur(10px) → to:filter:blur(0) }
 *   @keyframes casino-game-layer-first-btn  { 0:opacity:0;transform:translateY(-50%) → to:opacity:1;transform:translateY(0) }
 *   @keyframes casino-game-layer-second-btn { 0:opacity:0;transform:translateY( 50%) → to:opacity:1;transform:translateY(0) }
 *
 * Sandviç efekti: OYNA üstten (translateY -50%) iner + DEMO alttan (translateY +50%)
 * yükselir, Y ekseninde simetrik ortada buluşur. Tüm 4 katman 0.6s default-ease
 * forwards — senkronize kompakt kompozisyon.
 *
 * 2026-05-17 — Süre 0.4s → 0.6s. BS canlısı 0.4s kullanır; MR'da kullanıcı
 * isteği üzerine perception için %50 yavaşlatıldı (kart açılışı sezilebilir
 * olsun, "tak diye çıkma" hissini kapatsın). Gerekirse 0.5s'ye geri çekilebilir.
 *
 * Loaded AFTER slot-card-overlay-final.css so BS keyframes win the cascade over
 * its `transition: opacity 0.2s ease !important` + `background: rgba(0,0,0,0.78)
 * !important` + gradient bg-image static rules.
 * ============================================================================ */

@keyframes casino-game-layer {
  0%   { opacity: 0; pointer-events: none; }
  100% { opacity: 1; pointer-events: auto;
         backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
         background: #00000080; }
}

@keyframes casino-game-layer-label {
  0%   { filter: blur(10px); -webkit-filter: blur(10px); }
  100% { filter: blur(0);    -webkit-filter: blur(0); }
}

@keyframes casino-game-layer-first-btn {
  0%   { opacity: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
  100% { opacity: 1; transform: translateY(0);    -webkit-transform: translateY(0); }
}

@keyframes casino-game-layer-second-btn {
  0%   { opacity: 0; transform: translateY(50%); -webkit-transform: translateY(50%); }
  100% { opacity: 1; transform: translateY(0);   -webkit-transform: translateY(0); }
}

/* --------------------------------------------------------------------------
 * 1. Overlay container — fade-in + backdrop-blur (BS casino-game-layer)
 *
 * CONFLICT KILL: slot-card-overlay-final.css forces solid rgba(0,0,0,0.78) +
 * gradient + transition:opacity 0.2s with !important. Those static rules
 * mask the BS animation keyframes (opacity, background, blur). We override
 * them here with EQUAL specificity + !important + LATER cascade order
 * (this CSS loads AFTER slot-card-overlay-final.css in BaseLayout).
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item .game-overlay,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item .game-overlay,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item .game-overlay {
  /* Static baseline: invisible + ready for keyframe paint */
  transition: none !important;
  -webkit-transition: none !important;
  background: rgba(0, 0, 0, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important;
  background-image: none !important;
  backdrop-filter: blur(0) !important;
  -webkit-backdrop-filter: blur(0) !important;
}

html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay {
  animation: casino-game-layer 0.6s ease forwards !important;
  -webkit-animation: casino-game-layer 0.6s ease forwards !important;
}

/* --------------------------------------------------------------------------
 * 2. Title text — blur sharpening (BS casino-game-layer-label)
 *    Covers both .game-title-text (direct) and .game-title-wrap span fallback.
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-title-text,
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-title-wrap,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-title-text,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-title-wrap,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay .game-title-text,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay .game-title-wrap {
  animation: casino-game-layer-label 0.6s ease forwards !important;
  -webkit-animation: casino-game-layer-label 0.6s ease forwards !important;
}

/* --------------------------------------------------------------------------
 * 3. OYNA (play-btn = :first-child) — sandviç üst kanat: translateY(-50%)→0 + fade
 *    BS spec: animation: casino-game-layer-first-btn 0.4s forwards (default ease)
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions .play-btn,
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions .play-btn,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay .game-actions .play-btn,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay .game-actions a.play-btn {
  animation: casino-game-layer-first-btn 0.6s ease forwards !important;
  -webkit-animation: casino-game-layer-first-btn 0.6s ease forwards !important;
}

/* --------------------------------------------------------------------------
 * 4. DEMO (demo-btn / span.demo-btn / demo-btn--disabled = :nth-child(2)) —
 *    sandviç alt kanat: translateY(+50%)→0 + fade
 *    BS spec: animation: casino-game-layer-second-btn 0.4s forwards (default ease)
 * -------------------------------------------------------------------------- */
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions .demo-btn,
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions a.demo-btn,
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions span.demo-btn,
html.mobile-root body.mobile-site .slot-page-root #slotsGamesContainer #game-grid .game-item.show-overlay .game-overlay .game-actions .demo-btn--disabled,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions .demo-btn,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions a.demo-btn,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions span.demo-btn,
html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions .demo-btn--disabled,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay .game-actions .demo-btn,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay .game-actions a.demo-btn,
html.mobile-root body.mobile-site .slot-page-root .game-grid .game-item.show-overlay .game-overlay .game-actions span.demo-btn {
  animation: casino-game-layer-second-btn 0.6s ease forwards !important;
  -webkit-animation: casino-game-layer-second-btn 0.6s ease forwards !important;
}

/* --------------------------------------------------------------------------
 * Reduced-motion fallback: respect user OS preference, skip the animation.
 * The existing .show-overlay opacity:1 !important rules keep the end state.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay,
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-title-text,
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-title-wrap,
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions .play-btn,
  html.mobile-root body.mobile-site .slot-page-root #game-grid .game-item.show-overlay .game-overlay .game-actions .demo-btn {
    animation: none !important;
    -webkit-animation: none !important;
  }
}